Solved: Re: How to add a logo or image to a title header o...

kajolsharma · ‎08-03-2021

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

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

<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>

kamlesh_vaghela · ‎08-03-2021

@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 · ‎08-03-2021

@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

kajolsharma · ‎08-09-2021

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

kamlesh_vaghela · ‎08-10-2021

@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

kamlesh_vaghela · ‎08-10-2021

@kajolsharma

Check this also.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

KV

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

Dashboard Studio

panel

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics!

New in Observability Cloud - Explicit Bucket Histograms