topic Re: help on xml formatting with css in Splunk Search

Help on xml formatting with css

jip31 — Tue, 24 Nov 2020 05:34:33 GMT

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?

Re: help on xml formatting with css

t_shreya — Mon, 23 Nov 2020 11:12:31 GMT

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

Re: help on xml formatting with css

jip31 — Mon, 23 Nov 2020 13:52:46 GMT

Hi nothing has changed.....

Re: help on xml formatting with css

t_shreya — Mon, 23 Nov 2020 14:58:27 GMT

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>

Re: help on xml formatting with css

jip31 — Mon, 23 Nov 2020 15:06:51 GMT

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!

Re: help on xml formatting with css

jip31 — Tue, 24 Nov 2020 03:40:35 GMT

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

Re: help on xml formatting with css

t_shreya — Tue, 24 Nov 2020 04:04:57 GMT

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

Re: help on xml formatting with css

jip31 — Tue, 24 Nov 2020 04:55:50 GMT

Yes. Its exactly what I done but no results!

Re: help on xml formatting with css

t_shreya — Tue, 24 Nov 2020 05:10:48 GMT

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

Re: help on xml formatting with css

jip31 — Tue, 24 Nov 2020 05:28:21 GMT

Yes it is

Re: help on xml formatting with css

t_shreya — Wed, 25 Nov 2020 05:09:38 GMT

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?

Re: help on xml formatting with css

jip31 — Wed, 25 Nov 2020 05:58:39 GMT

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

Re: Help on xml formatting with css

jip31 — Thu, 26 Nov 2020 10:01:55 GMT

is anybody can't help?

Re: help on xml formatting with css

t_shreya — Thu, 26 Nov 2020 10:56:32 GMT

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?

Re: help on xml formatting with css

jip31 — Thu, 26 Nov 2020 12:27:00 GMT

no error in the console

the other css file that works is like this :

in the xml :

in the css file :

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

Re: help on xml formatting with css

t_shreya — Fri, 27 Nov 2020 10:49:48 GMT

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-Dashboard/m-p/411691

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

Re: help on xml formatting with css

jip31 — Fri, 27 Nov 2020 14:53:21 GMT

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

Re: Help on xml formatting with css

jip31 — Tue, 01 Dec 2020 12:38:28 GMT

Is anybody can't help?