Dashboards & Visualizations

How to add a logo or image to a title header of a panel ?

kajolsharma
Path Finder

I am looking to add icon beside my panel title somewhat like this:

kajolsharma_1-1627999092935.png

However, I m getting like this .Can anybody suggest?

kajolsharma_0-1627999001934.png

 

<panel id="mon1">
      <html>
      <div>
      <img  height="50px" width="50px" src="/static/app/ERPTower/icons8-in-transit-96.png" style="float:left"/>
       
      </div>
      </html>
     <title>SHIPMENT FULFILLMENT</title>
      
      <table>
        <search>
          <query>|makeresults| eval name1="Ship Confirmation Request" |eval name2="Shipment Loads"|eval name3="Ready to be Shipped loads"|table name1 , name2, name3|transpose|fields - column|rename "row 1" as " "</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
        <format type="color">
          <colorPalette type="sharedList"></colorPalette>
          <scale type="sharedCategory"></scale>
        </format>
      </table>
      <html>
        <style>
           #mon1{
          width: 20% !important;
          align: center !important;
          text-align: center !important;
          padding: 0px !important;
          margin: 0px 0px 0px 0px !important;
          
          }
          </style>
        </html>
    </panel>

 

Labels (2)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@kajolsharma 

Can you please try this CSS?

#mon1 h2 {
            background: url("/static/app/ERPTower/icons8-in-transit-96.png");
            background-repeat: no-repeat;
            background-size: 20px 20px;
          }

 

KV 

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@kajolsharma 

Can you please try this CSS?

#mon1 h2 {
            background: url("/static/app/ERPTower/icons8-in-transit-96.png");
            background-repeat: no-repeat;
            background-size: 20px 20px;
          }

 

KV 

View solution in original post

kajolsharma
Path Finder

How can i add a circular legend beside title ? Something like this ?

 

kajolsharma_0-1628498961554.png

 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@kajolsharma 

add below css in #panel_1 h2 class.

background-position: center top;

 

Just change the value as per your requirement. Check below link for possible values to be set.

https://www.w3schools.com/cssref/pr_background-position.asp

KV

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust
0 Karma
.conf21 Now Fully Virtual!
Register for FREE Today!

We've made .conf21 totally virtual and totally FREE! Our completely online experience will run from 10/19 through 10/20 with some additional events, too!