• 0
Sign in to follow this  
Followers 0

How do I set sidebar with to have a color background

Question

Posted · Report post

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

10 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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]

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  
Followers 0