• apestaartje

    (@apestaartje)


    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)
  • mlddev

    (@mlddev)

    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

    mlddev

    (@mlddev)

    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.

    mlddev

    (@mlddev)

    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?

    mlddev

    (@mlddev)

    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.

    mlddev

    (@mlddev)

    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.