How do I set sidebar with to have a color background

[King Creative Design+ 2]

I have three questions: 1.) SIDEBAR COLOR BACKGROUND - I'm trying to create a color sidebar background on this site. You will see that I have set the color behind the Widgets already, but what I'm wondering is if there is a way to make it fill dynamically to the bottom of the page according to the various page heights of the main content areas. 2.) CHANGE WIDGET TITLE COLOR AND SIZE - I have tried to no avail using firebug to figure out how to change the color and size of the widget titles. Right now the color seems to be black (or #000000), or maybe the color of the main text which is too close to the background color. 3.) CONTENT AREA - Again, I have tried to find it in firebug, but I'm trying to change the margin around the whole content area to be 5 or 10 px instead of 15. Any help will be greatly appreciated! Thanks. Michele

[batman 389]

2.) CHANGE WIDGET TITLE COLOR AND SIZE You can try add in PageLines > Site Options > Custom Code > CSS Rules Home page [code].widget_nav_menu li a { color: red;}[/code] Blog page [code]a, #subnav_row li.current_page_item a, #subnav_row li a:hover, .branding h1 a:hover {color: red;}[/code] You may also use color codes there, such as #C00000 , if you wish to use more specific colors to change "red" The other two you wait some Moderator, I don??t know, I'm a newbie.

[King Creative Design+ 2]

Unfortunately that didn't work. I'm trying to change the widget 'title'. Any other ideas would be much appreciated. Thanks!

[batman 389]

Excuse only the title try [code].widget-title {color: red;}[/code]

[Danny+ 1,327]

Hi, 1. Do you mean that when you visit your blog, you wish to have the Sidebar background color go all the way to the bottom of the page? 2. Try Batman's suggestion above. 3. Ad the following code to your Custom CSS. [code].one-sidebar-left #column-main .mcolumn-pad, .two-sidebar-left #column-main .mcolumn-pad { padding: 10px 0 0 10px !important; } #sidebar-wrap { margin-top: 10px !important; } .content-pad { padding: 10px !important; }[/code]

[King Creative Design+ 2]

1. Yes, that's what I mean! All the blog pages are obviously different heights depending on how much content is on it. I don't like how the blue column stopps where the widgets end. 2. I tried Batman's suggestion, but didn't work. I had already tried this which is why I need other trouble shooting. 3. Worked beautifully, thanks!

[catrina 103]

1. When I was working on a site, I couldn't figure out how to do just this until I found a CSS solution for it that requires you to set a specific sidebar height for each page. It's a pretty long way of doing it, but it works. The only the thing is, if the amount of content on a page changes, you will also need to adjust the height of the sidebar on that page. Do you want to try it out? 2. Try this code: [code]h3.widget-title {color: #xxxxxx; font-family: FONTNAME; font-size: SIZEem;}[/code]

[King Creative Design+ 2]

Catrina, That's great! Actually, the second post Batman sent worked. I'm going to ignore point 1 for now, but if you want to send the code anyway that would be great... But don't do it if it's a lot of trouble. thanks!

[catrina 103]

I can give you an example using the About Us page. The CSS selector for identifying a sidebar in a specific page would be in this format: [code]body.IDFORSPECIFICPAGE div#sidebar-wrap[/code] The ID for the About Us page is body-id-114, so the CSS selector for that page would look like this: [code]body.page-id-114 div#sidebar-wrap[/code] When you add the CSS attribute, the CSS will look like this: [code]body.page-id-114 div#sidebar-wrap {height: #px;}[/code] You need to adjust the height according to height of the content on the page. (It's not much of a shortcut)

[King Creative Design+ 2]

Thank you! One last question; any idea how to reduce the margin between the slider (above) and the feature (below) on this page http://dev.langhamhuntingtonweddings.com?

[Danny+ 1,327]

Hi, I think the best thing to do would be to apply this CSS and then increase your images height slightly, you will see why when you add the CSS code below. [code]#features section.copy { margin: 0 0; padding-top: 10px; }[/code]