Theme Inheritance - background color of all the pages

Support Themes & Styling
1

Hello,

I duplicate the quark theme to have “mytheme” like explain in the documentation :
Theme Inheritance > Inheriting manually

Now I would like to change the background color of all the pages of the site.

What is the easier way to do this ?
Is it in user/theme/mytheme/css/custum.css file ?

I have tried :

background-color:#CCBBBB;
background:#CCBBBB;

but only the background-color of the text have changed.

Thank’s

2

@thgr, A theme (and installed plugins) may have several elements for which the background-color is set and needs to be altered with your own preferred colour. A few of these elements are #head for the header, .card for the list of items in a blog, etc.

In ‘/user/themes/mytheme/css/custom.css’ try the following:

body, #header, .card {
  background-color: #CCBBBB;
}

You will have to explore your site and for each element you wish to change the background of, you need to find out the selector (id, class, element) and add that to the list.

You can find the selector of an element by right clicking the element and open the developer tools of the browser (‘Inspect’ in Chrome).

3

Hello,

Thank’s for the answer !
I succed for all the page but not for a small part in the header and footer

header

    <section class="container ">
        <nav class="navbar">
            <section class="navbar-section logo">
                <a href="/" class="navbar-brand mr-10">

…

footer

Grav was with by Trilby Media.

custom.css

body, start, header, footer, p, section
{
	background-color: #CCBBBB;
}

If someone have an idea…

Thank’s

4

@thgr, I would suggest to read some docs on css selectors.

In HTML you may have for example:

  • <body>...</body>
  • <div class="card">...</div>
  • <div id="header">...</div>

In css they are referred as:

  • Type selector:   body { ... }
  • ID selector:       #header { ... }         -> don’t forget the # (hash)
  • Class selector:  .card { ... }             -> don’t forget the . (dot)

See my first reply and note the #header and .card

5

Thank’s again !
so the solution for me is

body, #header, .card  {
  background-color: #CCBBBB;
}

.bg-gray {
  background: #CCBBBB !important;
}
1 Like