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
Get Updates on the Splunk Community!

More Ways To Control Your Costs With Archived Metrics | Register for Tech Talk

Tuesday, May 14, 2024  |  11AM PT / 2PM ET Register to Attend Join us for this Tech Talk and learn how to ...

.conf24 | Personalize your .conf experience with Learning Paths!

Personalize your .conf24 Experience Learning paths allow you to level up your skill sets and dive deeper ...

Threat Hunting Unlocked: How to Uplevel Your Threat Hunting With the PEAK Framework ...

WATCH NOWAs AI starts tackling low level alerts, it's more critical than ever to uplevel your threat hunting ...