Jump to content


Photo
- - - - -

How do I set sidebar with to have a color background


  • Please log in to reply
10 replies to this topic

#1 meeshking

meeshking

    Advanced Member

  • Members
  • 52 posts

Posted 26 July 2012 - 09:54 PM

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

#2 batman

batman

    Bat Learning

  • Members

  • 1993 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 26 July 2012 - 11:22 PM

2.) CHANGE WIDGET TITLE COLOR AND SIZE
You can try add in
PageLines > Site Options > Custom Code > CSS Rules
Home page

Please Login or Register to see this Hidden Content

Blog page

Please Login or Register to see this Hidden Content


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.

#3 meeshking

meeshking

    Advanced Member

  • Members
  • 52 posts

Posted 27 July 2012 - 02:42 AM

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

#4 batman

batman

    Bat Learning

  • Members

  • 1993 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 27 July 2012 - 02:56 AM

Excuse only the title try

Please Login or Register to see this Hidden Content



#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 15064 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 27 July 2012 - 10:22 AM

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.

Please Login or Register to see this Hidden Content



#6 meeshking

meeshking

    Advanced Member

  • Members
  • 52 posts

Posted 27 July 2012 - 03:43 PM

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!

#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 27 July 2012 - 04:09 PM

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:

Please Login or Register to see this Hidden Content



#8 meeshking

meeshking

    Advanced Member

  • Members
  • 52 posts

Posted 27 July 2012 - 05:11 PM

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!

#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 27 July 2012 - 05:23 PM

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:

Please Login or Register to see this Hidden Content


The ID for the About Us page is body-id-114, so the CSS selector for that page would look like this:

Please Login or Register to see this Hidden Content


When you add the CSS attribute, the CSS will look like this:

Please Login or Register to see this Hidden Content


You need to adjust the height according to height of the content on the page. (It's not much of a shortcut)

#10 meeshking

meeshking

    Advanced Member

  • Members
  • 52 posts

Posted 28 July 2012 - 12:39 AM

Thank you! One last question; any idea how to reduce the margin between the slider (above) and the feature (below) on this page

Please Login or Register to see this Hidden Content



#11 Danny

Danny

    Is Awesome!

  • Moderators
  • 15064 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 July 2012 - 08:21 AM

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.

Please Login or Register to see this Hidden Content