• Hi, I want to change the background color of my website with CSS.
    However when I change this the space BESIDES the website changes while the background of the site ITSELF changes in the color I don’t want.
    May be it’s possible to change the whole background including the menu, widgets and footer areas?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Please provide a link to your website so that I can take a look at the CSS with Firebug and I will try to help.

    Thread Starter apestaartje

    (@apestaartje)


    indebioscoop.com

    The reason your are seeing what you described is due to the content area having a semi-transparent image overlaying the background color on your body tag.

    Here is the CSS code that is affecting your content area:

    .art-sheet-body:before {
      background-image: url("images/sheet.png");
      bottom: 0;
      top: 0;
    }

    You could comment out the background on that style to remove the overlay or set the background-image property to none:

    .art-sheet-body:before {
      /* background-image: url("images/sheet.png"); -- commented out */
      background-image: none;
      bottom: 0;
      top: 0;
    }

    It would be best for you to establish a child theme if you are not already so that changes you make will not be lost if you update the theme in the future.

    In addition you can add color back to the content area by just adding a background color to the same css as posted above:

    .art-sheet-body:before {
      background: none repeat scroll 0 0 #555;
      bottom: 0;
      top: 0;
    }
    Thread Starter apestaartje

    (@apestaartje)

    OK, thanks.
    I will try.
    Does this new CSS include the background of the menu, widgets en footer area?

    The CSS I provided is already in your style.css file (line 812)… I just pinpointed it for you so that you can modify the background for the content area. This does not affect the header, menu or footer area.

    Thread Starter apestaartje

    (@apestaartje)

    Ok…the point is I do want to change the background of the other mentioned areas as well.

    Outside of your header image and footer image the only color being applied is through the color set on your body tag.

    Line 222 in your style.css file:

    body {
      background-color: #262626;
      color: #C2C2C2;
      margin: 0;
      min-width: 1000px;
      padding: 0;
    }

    If you remove the image layover with the following, then you will be able to set the background color on your body above.

    .art-sheet-body:before {
      /* background-image: url("images/sheet.png"); -- commented out */
      background-image: none;
    }
    Thread Starter apestaartje

    (@apestaartje)

    Great, thanks a lot!
    This brings me to another relevant question:
    Is it possible to change a font color on all the pages with just one adjustment? – not meaning H-fonts.

    Thread Starter apestaartje

    (@apestaartje)

    By the way Middev, I am able to change the background of the backsite, but how can I change the background of the space BESIDES the website – now the overlay has gone?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘colors’ is closed to new replies.