otilia Posted March 17, 2021 Share Posted March 17, 2021 (edited) Hello, I am building a site for a client, in Brine, and I need to have the option to have light and dark text over banners. If I change the overlay text to dark, then I cannot use dark banners. I tried using some code, Option 1, and then Option 2, but then the images on banners stopped displaying. Option 1 <div class=“coloredtext”> <h2>Type your Heading 2 text in here</h2> <h3>Type your Heading 3 text in here</h3> <p>Type your Paragraph text in here</p> </div> <style> .coloredtext *h1*, .coloredtext *h2*, .coloredtext *h3*, .coloredtext *h4*, .coloredtext *p* {color: *#ffffff* !important;} </style> Option 2 <style> .p_blackblock{ color:black;} .h2_blackblock{ color:black;} </style> I don't code, I used Option 1 from a forum, and option 2 was provided by a friend who codes. Anyone can help me doing this? Thank you! Edited March 17, 2021 by otilia Link to comment
isensmith Posted March 17, 2021 Share Posted March 17, 2021 Without seeing an example i'm not totally certain i get what you're going for. But i'm guessing you are trying to accommodate visible text regardless of whether the image behind it is dark or light. This sounds like a conditional problem which usually requires a lot of code to first figure out if the background is light enough to be "light" or vice versa. Alternatively, the much simpler solution is just to use text shadow so that regardless of whether the background image is light or dark the text is still legible. Example: h1 { color: #fff; text-shadow: 1px 1px 4px #000; } In this example the h1 text will be white (#fff), and also have a black shadow around it. In the text-shadow tag the first number is the vertical position of the shadow, the second is the horizontal position of the shadow (you can move the shadow left with negative numbers "-2px"), and the third number is how much blur is applied to the shadow. The last number is the color of the shadow in hex code. Hope that helps Link to comment
otilia Posted March 20, 2021 Author Share Posted March 20, 2021 Thank you very much!! I will try this, what I want to be able is to choose to have a light headline when I have a dark background, do it manually because as you say, having it detecting automatically involves a lot, but I was thunking more in just adding some simple code to the headline where it goes on a dark background. Thanks!! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment