How to remove text transparency on the Hero text

Support Themes & Styling
1

Hello, I’m using the Quark theme and I can’t find anywhere where I could remove the transparency on the text of the header.
For now, the text is white but not fully white : https://parcoursvelo.be/

image
image1033×446 82 KB

The text become transparent as soon as i add a hero image. It is not due to a class.

2

@Delo, Open the Developer Console of your browser and click on the element in question. Then look at the right side to find the rule(s) that impact the style of the element.

{92BFDE4A-A551-4045-8C8C-447E4668284A}
{92BFDE4A-A551-4045-8C8C-447E4668284A}854×696 99.2 KB

Once you find the rule, you can adapt the css.

3

It worked thank you very much!

4

@Delo, That is nice to know, but the community would like to know what you’ve changed and how and where you made the change.

It is a two-way street: You ask for a favour and you return a favour…

5

In theme.min.css I changed the hero.text-light h2 rgba(255, 255, 255, .8) to (255, 255, 255, 1) to make it opaque.

6

@Delo,

In theme.min.css I changed

Yes, I’ve noticed that looking at your site…

  1. It is not a good idea to edit a generated *.min.css file.
    • Edit the original *.scss files instead and recompile.
    • Or, use custom.css instead.
  2. You are in for a surprise when a new release of Quark arrives: All you changes will be gone…
    Use an inherited/child theme and use the /user/mytheme/css/custom.css in your own theme to make changes.
1 Like
7

Thank you for letting me know i had no idea these could interfere with the updates.
Here’s what i added to custom.css :

.hero.text-light h2 {
    color: rgba(255,255,255,1) !important;
}
8

@Delo, Still 2 issues:

  • /user/themes/quark/css/custom.css is being included twice.
    Not sure what you have done in Twig templates.
  • You are not using a child/inheriting theme. All changes will be lost in due time…
    Also all changes in custom.css.
9

Sorry I don’t know what’s a child theme
I’ll be reading about it