Jump to content
Sign in to follow this  
dorin_dumitrascuta

How to add a line between content and sidebar?

Recommended Posts

dorin_dumitrascuta

Hello Pagelines PROS! I was wondering if you could be so kind and help me do some design for my site. I thought it is finished but I'ld like one more thing. My site is http://thedollarmill.com I would LOVE to have a divider (border, outline, margin, whatever it's called) to make it look like this http://ftalphaville.ft.com/ The main idea is to have a very thin line that goes between my content and the sidebar. It would be nice if you could tell me the css to play with its padding so it doesn't start straight down from the menu but a bit off scaled, exactly like in the FT Alphaville. Also, can you suggest how to place a bottom border to every widget from the sidebar 1? Hope it's not too much of a burden! Many thanks!

Share this post


Link to post
Share on other sites
Jenny
I recommend checking out Firebug (http://www.getfirebug.com). You will be able to see which CSS selectors affect the sections right in your browser. Add the following to your custom CSS. For the vertical border, you can use this (keep in mind the vertical border cannot be moved down as it will move the whole content down): [code].mcolumn-pad { border-right: 1px solid #000000; margin-right: 10px; }[/code] To add a border between each widget, you can use (adjust as needed): [code]li.widget { border-top: 1px solid #000000; margin-bottom: 15px; padding-top: 10px; }[/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
dorin_dumitrascuta
Thanks Mama, First code worked, but the second put a border to every widget from my site, not only those of the sidebar. I think I need a primary sidebar border CSS instead. I always try to use firebug but never seem to spot the right selector...

Share this post


Link to post
Share on other sites
Jenny
Try adding #sidebar-wrap to the front of li.widget with a space in between.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
dorin_dumitrascuta
Thanks, that did it!

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  

×