CSS Color Override To "unset" - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

CSS Color Override To "unset"

JP

Jean-Marie Putz

Template 2 years ago

I am using the Helix Ultimate 2.0.11 template. Website example to illustrate the problem: https://www.travel-video.info/en/videos-en/amman-jordanie.html

When I was running my website under Joomla 3, I spend a huge amount of time to add an individual banner above each of my videos, with a gradient photo as background and some appealing text. In an external database, I generate html code, where I define the image and color of the text to be sure to get sufficient contrast, in order for the text to be readable. Result is something like this:

<div style="color:white;padding-left:50%;padding-right:1%;margin-left:3%;margin-right:3%;background-image: url('/images/BannersVideo/Amman_black_f0000722a.jpg'); "><h4>Get inspired by the citadel, the roman theater and the cars museum in Amman in Jordan.</h4><p style= "margin-left:-100px;"> This film was made on the basis of photos and videos taken during the trip <a href=https://www.travel-video.info/en/jordan.html>Jordan (EN)</a></p></div>

The idea is that all the text in this div is white (as the picture is dark). This worked perfectly in previous Joomla version. Since the migration to Joomla 4, the text under h4 is always black (as defined in the template). This is of course not what I want to have. Text not within h4 displays white, as it should be. I guess the only solution I have would be to override the CSS for h4, replacing the color by "unset". When I try this in debug in Firefox, it works. Adding custom code in the template has no effect on colors. To be sure of the syntax, I tried to the code h4 {display:none;}, which works. H4 is invisible. But if I try h4{color:unset;}, I have no result. Even if I try {h4:yellow;} (or with a color number), no effect... I tried to enter "unset" in the typography section of the template, without success. I don't have the intension to modify my database script to override the h4 individually for each page, as I would be obliged to modify about 600 pages, and I do not have time for this.

I would be happy to get an answer on this question soon... I have the impression everybody is very busy at Joomshaper, as I am waiting for an answer for a number of other problems related to the template or SPPB pro...

0
2 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 years ago #99048

Hi Jean,

{h4:yellow;}

Is NOT correct CSS syntax.

And

h4 {display:none;}

Will hide H4 in all pages, so it doesn't make sense!

But

In theory this may help:

.sppb-addon-content h4 {
  color: unset; }

but must be used in template custom CSS not in Typography settings!, then clean Joomla cache.


(!) You have compressed CSS - so I cannot tell you from where black color is taken.

0
JP
Jean-Marie Putz
Accepted Answer
2 years ago #99050

Ok, thanks a lot. Just ot be complete... my examples were only to check if something happens. I know that display none hides the text. I only tried to see if something was happening...

0