topic Re: How do I change the panel title font size using XML instead of CSS? in Dashboards & Visualizations

How do I change the panel title font size using XML instead of CSS?

damucka — Tue, 20 Nov 2018 14:46:41 GMT

Hello,

I would like to change the dashboard panel title font size using XML, not CSS.

I found the following in one of the posts:

      <html>
         <style>
            .dashboard-row .dashboard-panel h2.panel-title {
             font-size: 20px !important;
           }
         </style>
      </html>

But, when I insert it inside of the and it still changes the title font of ALL the panels in my dashboard.

How would I change the title font for one particular panel only?

Kind Regards,
Kamil

Re: How do I change the panel title font size using XML instead of CSS?

niketn — Tue, 20 Nov 2018 17:08:20 GMT

@damucka give panel an id for example myPanelWithCSS1 and then change CSS Select to the specific panel

<row>
    <panel id="myPanelWithCSS1">
         ....
    </panel>
</row>

Then add id to your CSS Selector to make it more specific:

   <html>
      <style>
        .dashboard-row #myPanelWithCSS1 .dashboard-panel h2.panel-title {
            font-size: 20px !important;
        }
      </style>
   </html>

Re: How do I change the panel title font size using XML instead of CSS?

efavreau — Tue, 20 Nov 2018 19:23:58 GMT

@niketnilay Awesome!

Re: How do I change the panel title font size using XML instead of CSS?

efavreau — Tue, 20 Nov 2018 19:57:39 GMT

Had to play with it a little bit to get it to work. I went with:

 <style>
  /* Target a single panel, that has an id="myPanelWithCSS1" */
  #myPanelWithCSS1 .dashboard-panel h2{
    font-size: 40px !important;
    color:red !important;
  }
 </style>

Thanks!

Re: How do I change the panel title font size using XML instead of CSS?

damucka — Wed, 21 Nov 2018 12:54:10 GMT

Thank you, it worked.

Could you perhaps help me also to change the color of the single value? I would like to have a static blue color without ranges.
I try to implement it as follows, but it does not work:

      <html>
       <style type="text/css">
          #LogBackupWithCSS1 .dashboard-panel .single-value .single-result {
            font-size: 40px !important;
            color: #0877A6 !important;
          }
       </style>
     </html>

The font size gets changed correctly by the above.

Kind Regards,
Kamil

Re: How do I change the panel title font size using XML instead of CSS?

efavreau — Wed, 21 Nov 2018 15:26:21 GMT

I haven't worked with the .single-value .single-result before. I wouldn't want to steer you wrong. Perhaps that is another question for Splunk Answers?

Re: How do I change the panel title font size using XML instead of CSS?

damucka — Wed, 21 Nov 2018 15:35:16 GMT

Sure, thanks for your help.