Splunk Search

Help on xml formatting with css

jip31
Motivator

Hi

I need to format background in <h1> tag and <p> tags in my xml

 

 <row>
    <panel>
      <html>
         <h1>
          <center>DEVICE</center>
          </h1>
       </html>
    </panel>
  </row>

 <row>
    <panel>
      <html>
         <p>
abcdefg.....
          </p>
       </html>
    </panel>
  </row>

 

In my css file, there is 

 

.h1 {
background: #848484 !important;
}



.p {
background: #848484 !important;
}

 

I have just a background for <h1> but not on the entire row but just behind the h1 text...

how to add background in a <h1> and a <p> tag please?

Labels (2)
Tags (3)
0 Karma

jip31
Motivator

Is anybody can't help?

0 Karma

jip31
Motivator

is anybody can't help?

0 Karma

t_shreya
Path Finder

@jip31 , can you try the following?

    <html>
      <style>
        h1.my_header 
       {
         background: #848484 !important;
        }
        p.my_para 
        {
          background: #848484 !important;
        }

      </style>
      <h1 class="my_header">DEVICE</h1>
      <p class="my_para">
abcdefg.....
       </p>
    </html>
0 Karma

jip31
Motivator

Hi nothing has changed.....

0 Karma

t_shreya
Path Finder

Hi @jip31 , the following code would add background to just the text and not the entire row:

  <html>
      <style>
        span.my_header 
       {
         background: #848484 !important;
        }
        span.my_para 
        {
          background: #848484 !important;
        }

      </style>
      <h1 class="my_header"><span>DEVICE</span></h1>
      <p class="my_para">
       <span>abcdefg.....</span>
      </p>
    </html>

 

t_shreya_0-1606143476176.png

 

0 Karma

jip31
Motivator

I forgot to tellement you that i put my ces in an external sheet and not directly on the xml...

0 Karma

t_shreya
Path Finder

Oh alright!
Have you used the external css in the dashboard in the following manner?

<dashboard stylesheet="myfile.css">
 <row>
  <html>
    <h1 class="my_header">DEVICE</h1>
   </html>
 </row>
 <row>
  <html>
    <p class="my_para">abcdefg..... </p>
   </html>
 </row>
</dashboard>

 

and the following should be in myfile.css:

h1.my_header 
{
   background: #848484 !important;
}
p.my_para 
{
   background: #848484 !important;
}

 

0 Karma

jip31
Motivator

Yes. Its exactly what I done but no results!

0 Karma

t_shreya
Path Finder

Can you confirm and let me know if the external css file is placed in appserver/static folder of the app?

0 Karma

jip31
Motivator

Yes it is

0 Karma

t_shreya
Path Finder

Hi @jip31 , not sure why it's not working for you.


Are both internal or external css not working in the dashboard, or the css is not working only when it is linked externally?

Also, did you try to _bump and refresh the dashboard to see if changes are getting reflected?


0 Karma

jip31
Motivator

Hi

I have done _bump but same problem

I didn't tested the CSS directly in the dashboard because I am obliged to use an external sheet

But for other dashboard, I use ID instead class with an external sheet and it works

0 Karma

t_shreya
Path Finder

Hi,

Is there any error getting shown in the console of the browser?
And if you are trying to replace class with ID in this case, is it working?

0 Karma

jip31
Motivator

no error in the console

the other css file that works is like this :

in the xml :

<single id="online">

 

in the css file :

#online .single-result {
fill: green!important;
font-size: 30px !important;
font-style:;
font-family:Arial;!important;
vertical-align:middle;
}

0 Karma

t_shreya
Path Finder

Hi, is this working for you?

<dashboard stylesheet="myfile.css">
 <row>
  <html>
    <h1 id="my_header">DEVICE</h1>
   </html>
 </row>
 <row>
  <html>
    <p id="my_para">abcdefg..... </p>
   </html>
 </row>
</dashboard>

 

myfile.css:

h1#my_header 
{
   background: #848484 !important;
}
p#my_para 
{
   background: #848484 !important;
}


Also, these may help you out:
https://community.splunk.com/t5/Dashboards-Visualizations/Dashboard-js-css-Issue/m-p/154746

https://community.splunk.com/t5/Dashboards-Visualizations/js-and-css-scripts-not-working-for-Splunk-...

https://community.splunk.com/t5/Dashboards-Visualizations/Unable-to-customize-dashboard-with-CSS/m-p...

 

 

0 Karma

jip31
Motivator

Hi

No, i have just a grey background like a span and not a real background

I add a piece of code for changing the police size and nothing change!!

0 Karma

jip31
Motivator

Hey

I confirm you that for <h1> I need to colorthe background for entire row

So I dont need <span>

The problem I have is that nothing happen with your code!

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...