Why use of W3.CSS change text Font?

Dashboard
#1

Hi all,

I test a w3.css, to enlarge an image in full screen in the Dashboard according to this example: Tryit Editor v3.6

But the text with the <h1> </h1> dashboard tags change :

with modal
with modal900Ă—243 24.7 KB

good without modal
good without modal849Ă—237 26.1 KB

This is the "Click on the image to display it in full size" Template node code :

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  
  <img src="data:image/jpg;base64,{{msg.payload}}" alt="MQTT camAlerte Pict." 
  style="width:100%;cursor:zoom-in"  onclick="document.getElementById('modal01').style.display='block'">
    {{msg.filename}}

  <div id="modal01" class="w3-modal w3-black" onclick="this.style.display='none'">
    <span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span>
    <div class="w3-modal-content w3-animate-zoom">
      <img src="data:image/jpg;base64,{{msg.payload}}" style="width:100%">
    </div>
  </div>

What should I add to my code so that it does not distort the rest of my Dashboard?
(beginner inside :laughing:)

#2

Brings in following:

h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}
.w3-serif{font-family:serif}
.w3-sans-serif{font-family:sans-serif}
.w3-cursive{font-family:cursive}
.w3-monospace{font-family:monospace}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}

So when you use <h1> tag in text node value, the CSS from w3 affects.
If you need to style text in ui_text widget, most reliable will be to put the content inside <span> tags and give class to that span and then write CSS for that class and you have full freedom to decorate the text as you like.

An example can be found from this thread: Reduced Line Spacing

#3

Thanks @hotNipi nice trick :star_struck::

#4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.