WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Need help changing sidebar colour (7 posts)

  1. thegamescabin
    Member
    Posted 1 year ago #

    Hi,

    I'm trying to change the sidebar color and so far I've had mixed success...

    I've managed to change the background colour from blue to white for the main body where posts show in a list, but the sidebar is a pain in the neck.

    This is the code:

    #sidebar-primary {
    overflow: hidden;
    float: left;
    width: 300px;
    margin-left: 15px;
    background: #ffffff

    Note: background #ffffff wasn't there before, so I added it, not sure if it was the right thing to do but it did change some of the sidebar to white, but it's leaving a lot of it the old colour.

    If anybody could help a chap out, I'd really appreciate it!

    Just so you know, I'm a complete novice when it comes to code and all that lark, I've only just managed to scrape by after hours of pouring over forum posts and what not.

    Thanks!

    Chris

    (the website is - http://www.thegamescabin.com, if that helps)

    PS. I'd also appreciate if anybody could direct me on a way to separate the main part from the sidebar with a border, otherise it's just going to look a little messy,though the sidebar colour I'll be chaning to a slighter darker shade of white, a border would be great!

    Thanks again!

  2. Brad Davis
    Member
    Posted 1 year ago #

    Hey Chris, the other color (gray-ish) in the sidebar an image associated with #main, if you change #main background to just #fff, you will have a white background.

    To add your border, you could add this to #content, but you will also need to reduce the width of #content or #sidebar-primary by the same amount otherwise you will have problems and a little padding as well. eg:

    #content {
      border-right: 1px solid #000000;
      float: left;
      overflow: hidden;
      padding-right: 15px;
      width: 599px;
    }

    Change #000000 to the color you would like the border, #000000 is the same as your footer border.

  3. thegamescabin
    Member
    Posted 1 year ago #

    Thanks for the reply, I'll give it a go and post back here the results!

  4. thegamescabin
    Member
    Posted 1 year ago #

    Hmm, no luck I'm afraid. I literally copy and pasted the code you posted but it doesn't seem to have done anything.

    #main {
    padding: 15px;
    background: #fff url(images/main-bg.png) right top repeat-y;
    }

    #main-fullwidth {
    padding: 15px;
    background: #ffffff;
    }

    #content {
    border-right: 1px solid #000000;
    float: left;
    overflow: hidden;
    padding-right: 10px;
    width: 599px;
    }

    #sidebar-primary {
    overflow: hidden;
    float: left;
    width: 300px;
    margin-left: 15px;
    background: #ffffff

    That's what I've got so far, I'm just not sure what's creating the messy block of blue, and if you scroll down the actual page most of the sidebar is still blue.

  5. Brad Davis
    Member
    Posted 1 year ago #

    Hey Chris, you still have the image in the #main background, the image is the part that is giving you the color. #main needs to look like:

    #main {
      background: #fff;
      padding: 15px;
    }

    Let me know how it works out.

  6. thegamescabin
    Member
    Posted 1 year ago #

    Fantastic! Thank you very much, you've been a great help!

  7. Brad Davis
    Member
    Posted 1 year ago #

    You're welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic