How to Bold "Titlle" of all reports in a dashboard...

wuming79 · ‎07-18-2017

Hi,

I have a few reports in a dashboard. How do I change the title font to Bold in the UI source code?

Kenshiro70 · ‎06-09-2018

I think this should do the trick:

   <row depends="$alwaysHideHTMLStyle$">
     <panel>
       <html>
         <style>
           .dashboard-panel h2.panel-title {
             font-weight: bold !important;
             font-size: 200% !important;
           }
         </style>
       </html>
    </panel>
  </row>

Interestingly enough, if you remove .dashboard-panel then you can see the font displayed in the Edit page too.

I figured this out by using Chrome's Developer Tools menu option, then using the Elements panel, I navigated to the correct portion of the web page and looked at the class structure in the Styles display. I'm not terribly well versed in CSS, so it took a bit of guesswork.

niketn · ‎07-18-2017

@wuming79, you can do this through CSS. Either add the Style for .dashboard-element .panel-head h3.dashboard-element-title to CSS file and include the css in your dashboard or use the CSS within Dashboard as hidden HTML panel using example added here:

  <row depends="$alwaysHideHTMLStyle$">
    <panel>
      <html>
        <style>
          .dashboard-element .panel-head h3.dashboard-element-title {
            font-weight: bold !important;
            font-size: 200% !important;
          }
        </style>
      </html>
    </panel>
  </row>

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

sandeeprachuri · ‎06-08-2018

@niketnilay,

I have the same requirement. I am using the above code in my dashboard. But, it is changing the font of chart/table title instead of main panel title.

<panel>
      **<title>failed passwords: I need this bold and big in size</title>**
      <chart>
        **<title>But, This is bold and big</title>**
        <search>
          <query>index=buttercup source=*secure* *fail* |eval User2=USER | timechart count(USER) by User2 span=1d | fields - NULL</query>
          <earliest>0</earliest>
          <sampleRatio>1</sampleRatio>
        </search>

PS: I can't attach because of less karma points. So, tried to simulate my need with code

Thanks,
Sandeep

niketn · ‎06-10-2018

@sandeeprachuri, <panel> <title> and <panel> <chart><title> exist at different DOM level hence CSS Selectors for them is different. You can always find CSS Selector by using Browser Inspector(F12) or Right Click on specific Dashboard section and click Inspect (my previous answer below also has a link to one of my Splunk Wiki topics for the same).

While this answer was for visualization title i.e. <chart><title>, seems like you need to change font for <panel><title>. So refer to one of my previous answers for the same:

https://answers.splunk.com/answers/659719/how-to-add-style-to-panel-titles-in-my-dashboard.html

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

sandeeprachuri · ‎06-11-2018

@niketnilay, Thank you for the nice explanation about the CSS selectors. I will definitely follow inspector tip.

And, This worked beautifully - https://answers.splunk.com/answers/659719/how-to-add-style-to-panel-titles-in-my-dashboard.html

Is it possible to increase font size of the table contents and x-axis/y-axis values of chart in the same way?

Thanks,
Sandeep

Kenshiro70 · ‎06-10-2018

LOL I found your answer after I'd written mine and was going to edit it to link to your answer. I wish I'd seen your wiki page a year ago - I'm now busy reskinning my dashboards so that they don't look like they are an IT system. 🙂

niketn · ‎06-10-2018

@Kenshiro70, I am glad you found it useful. Do post your questions or join us on #dashboards channel on Slack in case you have any questions with your implementation. With the help of Simple XML CSS extension, JS Extension and Splunk JS Stack you can completely change the look and feel of your dashboards!

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

wuming79 · ‎07-19-2017

May I know how to I access the .css which is within my dashboard? Sorry, I'm very confused on this.

I did read something about this at https://answers.splunk.com/answers/330361/how-to-apply-custom-css-to-a-dashboard.html .

I have created a "my_sytle.css" in "%SPLUNK_HOME%/etc/apps/search/appserver/static/" with the above example, added stylesheet="my_style.css" after form which looks like below,

<form stylesheet="my_style.css">

Then I did a splunk restart from "%SPLUNK_HOME%\bin", waited for my dashboard to refresh, but the title did not bold. Did I do correctly?

niketn · ‎07-19-2017

Also clear browser history to see if the changes reflect.
If my_style.css is loaded to %SPLUNK_HOME%/etc/apps/search/appserver/static path, then make sure your dashboard is also added to Search & Reporting app.

By the way the example that I have provided above can also be directly included in the Dashboard without CSS file as it has Style applied in a HTML panel which will always be hidden. Please try to include that otherwise.

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

niketn · ‎07-23-2017

@wuming79, please accpt if this solved your issue. If you need further help let me know.

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

How to Bold "Titlle" of all reports in a dashboard?

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life