Sidebar background color and size change

kakarakikiri · Member · May 22, 2013 at 5:10 pm
Copy link

Add topic to favorites
I went through earlier forums but could not find a matching solution.

My questions are:
*Is it possible to change the sidebar background color to #d2bee2 for example (using CSS)?
* Is it possible to make the sidebar closer to the right hand side (to decrease the gap from the right) and make the sidebar slimmer? (using CSS)
Thank you in advance.

The blog I need help with is: (visible only to logged in users)
justpi · Member · May 22, 2013 at 6:48 pm
Copy link
1. I’m not sure what you mean. Bg color to the area covered by your current widgets, or bg color that extends all the way down to the end of the page?

2. To change the widths, try this and see if you like it:
```
#main {
    width: 84%;
}
#content {
    width: 79%;
}
#secondary {
    margin-left: 2%;
    width: 18%;
}
#tertiary {
    width: 15%;
}
```
kakarakikiri · Member · May 22, 2013 at 6:52 pm
Copy link
:) I mean the bg color to the area covered by my widgets.
thesacredpath · Member · May 22, 2013 at 7:52 pm
Copy link
The two sidebars are separate and do not have a common parent div, so this becomes a little involved. Add the following to your custom CSS and see how this works for you. (I did have to narrow the main content column by 3% so that I could put padding on the left and right of the content so it was not right up against the edges of the white area.)
```
#wrap {
    background-color: #D2BEE2;
    padding-top: 0;
    padding-bottom: 0;
}

#content {
    background: none repeat scroll 0 0 #FFFFFF;
    padding-left: 10px;
    padding-right: 10px;
    width: 72.669%;
    padding-top: 40px;
    padding-bottom: 40px;
}

#secondary, #tertiary {
    margin-top: 40px;
}
```
thesacredpath · Member · May 22, 2013 at 7:54 pm
Copy link
Make sure and narrow your browser window way down to see what happens to the widgets in this responsive theme when they drop below the content as would be the case on some tablets and virtually all smart phones.
justpi · Member · May 23, 2013 at 1:21 am
Copy link
From your reply to my #1 I got the impression that TSP’s solution isn’t what you’re looking for, but I could be wrong. So, try my suggestion to see if you like the way I made the sidebars narrower, then delete it and try TSP’s suggestion to see if that’s the way you want the color to be applied (or if you want two colored rectangles or one colored rectangle around the widgets only), and then we can combine everything.
kakarakikiri · Member · May 23, 2013 at 8:24 am
Copy link
these all work great. we just have to decide which to choose. maybe the combination as you say. many thanks.
kakarakikiri · Member · May 23, 2013 at 1:09 pm
Copy link
The width works great with tis CSS, we applied it.
#main {
width: 84%;
}
#content {
width: 79%;
}
#secondary {
margin-left: 2%;
width: 18%;
}
#tertiary {
width: 15%;
}

However the color I chose (#D2BEE2) looked very ugly:( Sorry. Am I being too much if I also ask how to make a border line between main content column and sidebar (color #620e6d ) ?
thesacredpath · Member · May 23, 2013 at 2:13 pm
Copy link
I would put the border on the right side of the content so it spans the entire vertical length instead of ending at the end of the right column of widgets. This will do that for you.
```
#content .page {
border-right: 1px solid #620E6D;
}
```

No items found.