Solved: How to change the default color formatting on a ta...

surekhasplunk · ‎11-27-2017

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

niketn · ‎11-27-2017

[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 · ‎03-27-2018

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

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

surekhasplunk · ‎03-28-2018

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.

niketn · ‎03-28-2018

😄 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!!!"

surekhasplunk · ‎03-29-2018

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

niketn · ‎03-29-2018

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

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

surekhasplunk · ‎11-29-2017

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.

niketn · ‎11-29-2017

Did you try updated CSS in my answer below?

     <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!!!"

santosh_sshanbh · ‎02-28-2019

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

surekhasplunk · ‎03-27-2018

hi @niketnilay,

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

niketn · ‎03-27-2018

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!!!"

niketn · ‎11-27-2017

[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 · ‎11-29-2017

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

niketn · ‎11-29-2017

@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!!!"

surekhasplunk · ‎11-29-2017

It worked great ... Thanks a lot

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

New in Observability - Improvements to Custom Metrics SLOs, Log Observer Connect & ...

Improve Data Pipelines Using Splunk Data Management

3-2-1 Go! How Fast Can You Debug Microservices with Observability Cloud?