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?
Is anybody can't help?
is anybody can't help?
@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>
Hi nothing has changed.....
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>
I forgot to tellement you that i put my ces in an external sheet and not directly on the xml...
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;
}
Yes. Its exactly what I done but no results!
Can you confirm and let me know if the external css file is placed in appserver/static folder of the app?
Yes it is
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?
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
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?
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;
}
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
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!!
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!