How do I change CSS for Sideview Utils Table?

[IngloriousSplun]

I'm updating the CSS for a dashboard I created using Sideview Utils Tables. I'd like to change the color of the header for the Table, however, I'm not sure what the correct parameter is? My thought was .SplunkModule.HTML h2 { ..., however, that doesn't seem to work, and I've also tried .SplunkModule.HTML html h2 { .... This is the specific code, and I guess worst case I could do inline CSS, but I already have a CSS file that controls background color, etc. that I'm trying to port from the Splunk simple XML panels.

<module name="HTML" layoutPanel="panel_row1_col1">
  <param name="html"><![CDATA[<h2>Title</h2>]]></param>
</module>

Thanks.

[sideview · Accepted solution]

You can just use

.HTML h2 {  
    color:#369;
}

which if you put it in application.css, would change all h2's across all HTML modules across your whole app.

If you want to scope it to a particular view, you can either put it in a custom css file (not application.css), which you then reference from the customStylesheet param of the SideviewUtils module, or the stylesheet attribute of the view tag. Or you can keep it/them in applicaiton.css and scope them this way.

.splView-your_view_name_here .HTML h2 {  
    color:#369;
}

[IngloriousSplun]

For some reason that's not working for me. I've tried changing the regular dashboard title as well, viewHeader, and I can't get that to change either. I'm using a custom CSS file that I reference via stylesheet= in the `

[sideview]

hm.. One thought is you have to restart the Splunk front end for it to pick up the existence of any new CSS files on disk. Have you restarted?

[IngloriousSplun]

I haven't. I didn't think I had to because if I remove the CSS stylesheet designation and refresh the front-end styling reverts back to the default scheme. You mentioned a customStylesheet param for the module, so I tried adding `

[sideview]

Oh. Well if you're seeing some changes in the file and not others it probably means CSS syntax error someway partway through the file, but above the style(s) that aren't showing? If so a minute or two of tedious binary-search-debugging can narrow down which rule it doesn't like.

[IngloriousSplun]

It's a custom CSS file that I'm using for my other non-Sideview dashboards that I'm trying to adapt to this dashboard, but perhaps I need to just start from scratch one style at a time. Humf.

[IngloriousSplun]

I created a blank CSS file and just added in .HTML h2 { color:#000000; } just so I know the changes are taking effect. I saw the page revert back to original styling, but none of the h2 headings changed to white. I may just wait until tonight after the users are off to reboot and see if that corrects it.

[sideview]

you don't have to reboot splunk, just the front end. logged in users might not even notice. sessions retained, and there's just a weird 30 seconds where http requests hang. splunk restartss

[IngloriousSplun]

I rebooted and still no change in the styling with only .HTML h2 { color: #000000; } in the CSS file.

[IngloriousSplun]

I'm at a loss, I've cleared my cache, restarted the front-end, tried a new CSS file. Not sure why it doesn't seem to be taking.

[sideview]

use a tool like Firebug in firefox, or developer tools > dom inspector in chrome. There may be another rule that just has a higher precedence, like if Splunk ships a rule like .dashboardPanel .dashboardContent h2 {color:#333}, it'll have stronger precedence than yours.

brute force fixes for such a situation would be things like

.HTML h2 { color:#000000 !important; }

body div.HTML h2 { color:#000000; }

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

[IngloriousSplun]

I already have !important at the end, but I'll see if I can get Firebug in my environment to debug. Its an isolated environment so I may be stuck with the FF developer console.

[IngloriousSplun]

I have the entire service set to restart later tonight, I'll see if that flushes out the issue. Thanks for the help

[IngloriousSplun]

Restarting the service fixed whatever the issue was and I'm now able to update the CSS appropriately without requiring a restart of the GUI. Strange issue, thanks for the help.