Jump to content
Sign in to follow this  
King Creative Design

How do I set sidebar with to have a color background

Recommended Posts

King Creative Design+    0
King Creative Design

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

Share this post


Link to post
Share on other sites
batman    389
batman
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.

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
King Creative Design+    0
King Creative Design
Unfortunately that didn't work. I'm trying to change the widget 'title'. Any other ideas would be much appreciated. Thanks!

Share this post


Link to post
Share on other sites
batman    389
batman
Excuse only the title try [code].widget-title {color: red;}[/code]

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
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]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
King Creative Design+    0
King Creative Design
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!

Share this post


Link to post
Share on other sites
catrina    103
catrina
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]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
King Creative Design+    0
King Creative Design
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!

Share this post


Link to post
Share on other sites
catrina    103
catrina
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)

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
King Creative Design+    0
King Creative Design
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?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
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]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×