All Apps and Add-ons

How do I change CSS for Sideview Utils Table?

IngloriousSplun
Communicator

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.

1 Solution

sideview
SplunkTrust
SplunkTrust

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;
}

View solution in original post

sideview
SplunkTrust
SplunkTrust

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
Communicator

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 `

0 Karma

sideview
SplunkTrust
SplunkTrust

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?

0 Karma

IngloriousSplun
Communicator

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 `

0 Karma

sideview
SplunkTrust
SplunkTrust

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.

0 Karma

IngloriousSplun
Communicator

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.

0 Karma

IngloriousSplun
Communicator

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.

0 Karma

sideview
SplunkTrust
SplunkTrust

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

0 Karma

IngloriousSplun
Communicator

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

0 Karma

IngloriousSplun
Communicator

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.

0 Karma

sideview
SplunkTrust
SplunkTrust

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/

0 Karma

IngloriousSplun
Communicator

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.

0 Karma

IngloriousSplun
Communicator

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

0 Karma

IngloriousSplun
Communicator

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.

0 Karma