Splunk Search

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

surekhasplunk
Communicator

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

1 Solution

niketn
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

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@surekhasplunk, I would recommend you to use Browser Inspector tool to identify CSS Selectors as per your need to override CSS. If you are not comfortable with CSS then you can CSS Selectors on W3Schools

Try the following CSS

      .table tr:last-child td:last-child {
       font-weight: bold!important;
      }

alt text

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

surekhasplunk
Communicator

Thanks @niketnilay

But what if i have not just the last one but last 5 values to be bolded ?

I dont mind hardcoding the values.

0 Karma

niketn
Legend

😄 I would want you to read W3Schools as stated above which explains various CSS Selectors. If you have to select last five your option would be to use :nth-last-child(n) where n can be the value from last that you want to selected i.e.

tr:nth-last-child(2) is 2nd last table row and
tr:nth-last-child(3) is 3rd last table row ...

Please play around and let us know if you need help with this. Dont forget to up vote the comments if it works 🙂

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

surekhasplunk
Communicator

Yeah got it working after few trials. 🙂 thanks a lot

0 Karma

niketn
Legend

@surekhasplunk, Glad it worked. Please upvote the comments that helped 🙂

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

surekhasplunk
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

niketn
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>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

santosh_sshanbh
Path Finder

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

surekhasplunk
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

niketn
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.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

niketn
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

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

surekhasplunk
Communicator

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

0 Karma

niketn
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.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

surekhasplunk
Communicator

It worked great ... Thanks a lot

0 Karma
Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...