I’m creating my new website and I would like to change the background colour. Through FireFox Inspector I nailed the CSS line that manages the colour, it’s background-color: #fff;
I now have to change that #fff to #f3f3f3 but I cannot find the right .css file. The .css files are 4:
- block-editor-style.css
- editor-style.css
- theme-help.css
- customizer-style.css
Inside those files I find several background-color: #fff; but none manages that header background.
Any idea what .css file manages the header background?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
The inspector says “inline” which indicates that the CSS is not in a separate file, but instead is inside the HTML itself, probably in a <style> block at line 39 ( near the top ) – search the whole page source code for #masthead and you will probably find it.
If you want to know how it is being added to the theme HTML, you will need to search the entire project codebase for a unique string – again #masthead might bring good results.
Update:
Added grab of the source code of your website, showing line 25 where you will find the #masthead CSS selector, as described by Inspector – it is much further to the right – but the scroll bar is hidden, as the css is formatted into long lines.
Method 2
In fact it was at line 1586 in the style.css file:
but a question remains: how to use Chrome/FireFox Inspector to find the file in which we have to edit the .css?
We were all wrong here and my question received 3 thumbs up, it means there is a general lack of knowledge around this topic. Any reply is welcome.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0