Overriding _header.scss in child theme

Support Themes & Styling
1

hi there,

on a new child theme, inheriting quark i want to change the color of the menu items.
this is given in ./themes/quark/css-compiled/theme/_header.scss - bur i can’t find how to change this. no matter where i change the value for this selector or the variable (./theme/_variables.scss) the color stays the same as in the original theme

could someone please give me a hint where i made the mistake

thank you very much

regards
odde

2

Something you may not understand is that SCSS needs to be compiled into CSS which the browser understands.

If that’s the case, see if you can understand how this works from the docs: https://learn.getgrav.org/16/themes/customization#custom-scss-less

I am not sure where Quark prefers customs SCSS, but I can see that you can use plain CSS to override anything at themes/<quark-child>/css/custom.css (create this if it doesn’t exist). That should work without needing to recompile SCSS.

Hope that’s a good pointer.

3

thank you for your reply!

until now the styling in custom.css worked fine.
but these properties - along with the transparency value if the header-transparent property in my yaml is set to true will not change after setting them in my custom.css.
according to the browser the only styles that are referred for this items are those set in the scss files.

I just tried the koala compiler, but not sure, wether i got it right and for now just build some conflicts to my custom.css ,-)

4

OK, I don’t know Quark so only have 2 more suggestions:

  • check cache settings. I always turn it off in development environments;
  • I have to check if you understand how CSS precedence and selectors work. If the styles you want to change are not being referenced, the selector may either be not specific enough or incorrect. Maybe post the rule you are trying to override along with your custom rule if you are unsure.

Good luck!

1 Like
5

@odde, I have created an inherited theme based on Quark and added the file ‘/user/themes/mytheme/css/custom.css’, containing the following styling:

// All menu-items
#header a {
    color: red;
}
// Active menu-item
.dropmenu ul li a.active {
    color: greenyellow !important   // Note the !important
}

As a result of this, when page ‘Typography’ is selected, menu-items look as follows: image

A few remarks (some extending remarks from @hughbris):

  • There are no .scss files referenced/used in HTML, only (.min).css files. However…
    The .css files (not .min.css) compiled from .scss, contain a sourceMap which maps a selector to its .scss source. Using the sourceMap, the browser shows the .scss origin of the selector. That does not mean it uses the .scss file. It only uses (.min).css. This might be confusing.

  • Your overrides in ‘/user/themes/mytheme/css/custom.css’ might not show the expected effect because of specificity rules of selectors. The following is a summary of the documentation on selectors. With increasing precedence:

    1. Type selectors (e.g., h1 ) and pseudo-elements (e.g., ::before ).
    2. Class selectors (e.g., .example ), attributes selectors (e.g., [type="radio"] ) and pseudo-classes (e.g., :hover ).
    3. ID selectors (e.g., #example ).

    Also, inline css overrules external stylesheets, and !important always takes precedence.

  • You seem to try to achieve more then only the color of menu-items, but what exactly you wish to achieve and what is not working isn’t clear to me. Could you elaborate on that?

6

thank you for your tips!

@anon76427325:
since forgotten “!important” commands led to several trouble in former times i use the “!important” command only for testing my selectors. So i prefer not to use them if i can avoid it.

After some trys i realized, what koala does, and wich tags i needed to set in my ./scss/custom.scss ( besides the other files and _variables.scss).
After a while it worked fine … and after flushing the cache

Thanks a lot

8

I see this is scheduled for deletion at your initiation @odde. Please consider not doing that, as it could be useful to others in the community. Your call though.

9

sorry - that happened by accident.
i will look out for the right button to stop it