Need help changing sidebar colour

  • Resolved thegamescabin

    (@thegamescabin)


    11 years 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!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Brad Davis

    (@brad-davis)

    11 years 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.

    Thread Starter thegamescabin

    (@thegamescabin)

    11 years ago

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

    Thread Starter thegamescabin

    (@thegamescabin)

    11 years 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.

    Brad Davis

    (@brad-davis)

    11 years 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.

    Thread Starter thegamescabin

    (@thegamescabin)

    11 years ago

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

    Brad Davis

    (@brad-davis)

    11 years ago

    You’re welcome.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Need help changing sidebar colour’ is closed to new replies.