Splunk Search
Highlighted

How to change the default color formatting on a table header?

Communicator

I just want to color the column headers and not the cells of my dashboard tables

Highlighted

Re: How to change the default color formatting on a table header?

Legend

[Updated CSS Selector and CSS Style Override. Included Text Color for anchor <a> tag]


If you have a table with id="myTable1", you can override style using following CSS Selector:

<panel>
    <html depends="$alwaysHideCSSStyle$">
        <style>
            .table th {
               background-image: linear-gradient(to bottom, blue, turquoise) !important;
               text-shadow: none !important;
            }
            .table th a{
               color: white !important;
            }
        </style>
    </html>
    <table id="myTable1">
        ...
    </table>

You should also check out Custom Layout Dark example in Splunk Dashboard Examples App from Splunkbase, which has a lot of CSS style overrides examples in a single place: https://splunkbase.splunk.com/app/1603/
Refer to W3Schools for CSS Gradient fill: https://www.w3schools.com/css/css3_gradients.asp




| eval message="Happy Splunking!!!"


View solution in original post

Highlighted

Re: How to change the default color formatting on a table header?

Communicator

this isn't working for header coloring is there any other way out.

0 Karma
Highlighted

Re: How to change the default color formatting on a table header?

Legend

@surekhasplunk, I have updated the CSS Selector and CSS Style to be overridden. Please do check out Splunk Dashboard Examples app as stated in the answer which has Custom Layout Dark covering Table Header Style as well. Please try out and confirm.




| eval message="Happy Splunking!!!"


0 Karma
Highlighted

Re: How to change the default color formatting on a table header?

Communicator

It worked great ... Thanks a lot

0 Karma
Highlighted

Re: How to change the default color formatting on a table header?

Communicator

Hi @niketnilay,

I checked the example custom layout dark but that has all the example to make the whole background color, I can make the cells color , i can make the background color but how can i make just the header of the table background color.

I want something like this.
alt text

0 Karma
Highlighted

Re: How to change the default color formatting on a table header?

Legend

Did you try updated CSS in my answer below?

alt text

     <style>
         .table th {
            background-image: linear-gradient(to bottom, blue, turquoise) !important;
            text-shadow: none !important;
         }
         .table th a{
            color: white !important;
         }
     </style>



| eval message="Happy Splunking!!!"


0 Karma
Highlighted

Re: How to change the default color formatting on a table header?

Communicator

hi @niketnilay,

In the same code above how can i make Column 2 last cell value(affg) bold ?
i can hard code the value.

0 Karma
Highlighted

Re: How to change the default color formatting on a table header?

Legend

I have answered below with a screenshot explaining how you can use Browser Inspector to identify, apply and verify CSS override based on CSS Selector.




| eval message="Happy Splunking!!!"


0 Karma
Highlighted

Re: How to change the default color formatting on a table header?

Is it possible to set different colors for each of the header column based on it's name as the position is dynamic?

0 Karma