Dashboards & Visualizations

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

damucka
Builder

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

1 Solution

niketn
Legend

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

View solution in original post

niketn
Legend

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

efavreau
Motivator

@niketnilay Awesome!

###

If this reply helps you, an upvote would be appreciated.
0 Karma

efavreau
Motivator

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!

###

If this reply helps you, an upvote would be appreciated.

damucka
Builder

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

0 Karma

damucka
Builder

Sure, thanks for your help.

0 Karma

efavreau
Motivator

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?

###

If this reply helps you, an upvote would be appreciated.
0 Karma
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Why Splunk Customers Should Attend Cisco Live 2026 Las Vegas

Why Splunk Customers Should Attend Cisco Live 2026 Las Vegas     Cisco Live 2026 is almost here, and this ...

What Is the Name of the USB Key Inserted by Bob Smith? (BOTS Hint, Not the Answer)

Hello Splunkers,   So you searched, “what is the name of the usb key inserted by bob smith?”  Not gonna lie… ...

Automating Threat Operations and Threat Hunting with Recorded Future

    Automating Threat Operations and Threat Hunting with Recorded Future June 29, 2026 | Register   Is your ...