Jump to content
Sign in to follow this  
Gavin_

Sidebar styling help

Recommended Posts

Gavin_

Hi We are trying to style our sidebars to look like the sidebars that appear here http://www.direct.gov.uk/en/Motoring/index.htm But for some reason we can get the rounded edges, arrows or white breaks to appear correctly. Here is a link to our demo site http://79.170.44.131/atab.org.uk/know-your-rights/airline-taxes/ I'd really appreciate some help with this Thanks.

Share this post


Link to post
Share on other sites
Kate

@Gavin I'm seeing the rounded corners (at the top) and the white lines fine. (I'm in FF.) Did you get that part working? As for the arrows... Instead of the line(s) of code you currently have, try this:

.widget ul li{
					list-style:none;
					display: block;
					padding: .3em 2px;
	background: url('http://79.170.44.131/atab.org.uk/wp-content/uploads/2010/12/list_arrow.gif') 0px 9px no-repeat;
				padding-left:10px !important;
	}

Share this post


Link to post
Share on other sites
Gavin_

thanks Kate the lines are not really working! they are incorrectly aligned. if you look at them now you will see they look worse :(

Share this post


Link to post
Share on other sites
Gavin_

we'd also like to have the bottom of the box to be rounded off

Share this post


Link to post
Share on other sites
Gavin_

also would you know how we can let the active page be highlighted?

Share this post


Link to post
Share on other sites
Kate

@Gavin Give this a try for the borders:

.widget ul{margin-left:0px !important;}
	.widget ul li{
	list-style:none;
	display: block;
	padding: .3em 2px;
	background: url('http://79.170.44.131/atab.org.uk/wp-content/uploads/2010/12/list_arrow_t.gif') 4px 9px no-repeat;
	padding-left:13px !important;
	border-bottom:1px solid #ffffff;
	}
	.widget li li{border-bottom:0px;}
	

As for the rounded corners: the top is currently using an image. So, you would just need to create an image for the bottom and apply it via CSS.

Share this post


Link to post
Share on other sites
Gavin_

life saver - thanks

Share this post


Link to post
Share on other sites
Gavin_

any ideas on the highlighting the active page?

Share this post


Link to post
Share on other sites
cmunns

`#sidebar1 li.current-menu-item {background:orange;}`

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  

×