Antimater custom.css and css-compiled

Archive
1

Hi
I try to modify header color on scroll with custom css without succeed
css : #header.scrolled
value : background-color: rgba(255, 255, 255, 0.9) !important;
is located on template.css (css-compiled folder)
if i play with this code in custom.css nothing happened

seems that custom.css code is viewing before css compiled code !!
logical in fact but more hard for customisation especially witout scss compiler

an idea
thanks

Bertrand
my test site : http://grav.en-toutes-lettres.fr/

2

It’s vitally important that when developing web sites you are intimately familiar and highly comfortable using the developer tools in your browser. Also be sure to study your CSS guides.

This will save you hours of grief!

For example, your case you can see the custom.css loading here:

Home | Grav Site Test 2015-09-07 07-45-00

Ok so the custom.css loads as expected. The order is important if you have two css definitions are exactly the same, but a more specific definition will take precedence no matter the order it was loaded. Also a definition with !important will take precedence even when another definition has more specificity. This is just how CSS works.

So in your case your custom.css is not ‘strong enough’ to override the other definition. You can see this clearly here:

Home | Grav Site Test 2015-09-07 07-48-21

So, what to do??? As custom.css does come after the compiled CSS, there are a couple of options:

  1. Simplest is match the specificity of the declaration by a dding !important:
#header.scrolled {background-color: #1b3840 !important;}
  1. Change the value in the SCSS and recompile it.
3

thanks and many thanks about this important! lesson
lot of time i play with css without knowing this important rule

last thing
i succeed to compile with SASS _custom.scss file into template.css (css-compiled)

i found now #header.scrolled 2 times in into template.css (css-compiled)
line82

and line 746
http://i58.tinypic.com/i4h3tl.png

logically should be ok but the file which take the priority is _header.scss not template.css (css-compiled) ???

i’m lost

4

The browser devtools automatically fetch and show you the SCSS source, because the template SCSS compilation generates the source map. It’s great for debugging, since it already points you to the file you need to change. You can disable CSS source maps in the devtools if that confuses you.

5

Thanks
In grav admin ?
I don’t see this option

6

@flaviocopes is talking about the browser dev tools. Chrome for example has excellent devtools, although Firefox and Safari are close behind.

7

Yes I was talking about the screenshots you posted :slight_smile: if that is the Chrome DevTools, they have an option to disable source mapping, but I’m not sure it’s what you need, since they help you.

8

Hi OK but I use my browser like all customers with default setting.
I test with Chrome, IE and Firefox and same issue
modifications of css-compiled are not take into account means i have only option of custom css or working with scss in my theme inheritance

9

Can you rephrase what your problem is? I don’t understand.