The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Background and color

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #189064


    We’re creating a blog for my company and we’re using a free theme called Simone.

    We want to change the banner background to the gray color you can see in the picture so there’s no white at the sides.

    We also want to change the color in the navigation bar from dark grey to #0096d6.

    Anyone who can give me a few pointers?

    Thanks! :)


    Tnx. I’ve now created a child theme.

    I put your code into my new style.css:

     Theme Name:   Simone Child
     Description:  Simone Child Theme
     Author:       Thommas Sletten
     Author URI:
     Template:     simone
     Version:      1.0.0
     Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
     Text Domain:  simone-child
    @import url("../simone/style.css");
    .main-navigation {
      / * background: hsl(0, 0%, 19%); */
      background-color: #0096d6;
    .site-header {
      background: #bbb9be url( center 0 repeat-x;

    But it isnt working.

    The header color supposed to be: #bbb9be

    While the menu/navigation bar should be: #0096d6


    This is hiding the image and it’s background

    .site-branding {
    padding: 6rem 0;
    text-align: center;
    background: #0587BF; /* here */
    background: hsl(198, 95%, 38%); /* and here /*

    Is that intentional?


    The header should contain an image and a gray color at the sides. I want a grey background color. This is because i want the grey color to continue when the screen is large when the image isn’t large enough, if that makes any sense.

    I also want to increase the size of the index box.


    See my comment above…you have div which is sitting on top of your header hiding everything.


    Tnx Paulie_D,

    I’ve tried to make it transparent in the Child theme, however it doesn’t seem to work.

    It’s all blue as you can see now and my it’s hiding my image as you pointing out yesterday.

    How can I remove the div? Can it be done in the style.css in my child theme?ยจ

    Forget this. I managed to fix it myself. However, now it’s a grey box in the middle. How do I remove that?



    The grey box is this

    .header-background-image .title-box {
    background: #333;
    background: hsla(0, 0%, 0%, .7);

    Honestly, you can find all this yourself using “inspect element” in the standard Developer Tools in every modern browser.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.