Jump to content
Sign in to follow this  
storm09

Block coloured header/title bars

Recommended Posts

storm09

Hi - How can I create block coloured title/header bars, as seen here on the right sidebar of this site http://craigwolfley.com/ - I'm just looking for a way to make these stand out more. I don't want to use this for the main nav menu. Just the sidebars and content header areas. Thanks.

Share this post


Link to post
Share on other sites
Jenny
First of all, you should check out Firebug. It makes it easy to look up CSS code on another site. :) http://getfirebug.com/ And this is what you need to add to your custom CSS (change the colors to suit your needs): [code] #sidebar_primary .widget-title { background-color: #FFFFFF; color: #000000; } body #content_sidebar .widget-title { background-color: #FFFFFF; color: #000000; } [/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
storm09
Fantastic! Thanks Simple Mama - http://trm.hickmanking.com/ The sidebar headers are a little too tight to the left. How can I move these sidebar headers 2-3 spaces to the right, just to give them a little more space? Thanks for all your great help. Very much appreciated.

Share this post


Link to post
Share on other sites
poseyg
Try this in your custom css: #sidebar_primary .widget-title { background-color: #01538D; color: #FFFFFF; padding-left: 5px; }

Share this post


Link to post
Share on other sites
storm09
Hey - sorry to bug you all again, but how can I create a square box like the yellow box simple_mama has in her previous post? I'm looking for some interesting ways to highlight certain paragraphs in my website copy. Thanks again in advance :)

Share this post


Link to post
Share on other sites
poseyg
OK...something like this will give you a yellow background for the content of a post: .fpost .post-excerpt, .fpost .entry_content { background-color: #FFF799; font-size: 1.1em; line-height: 1.6em; padding-left: 5px; } I also include a padding to bring the text away from the side.

Share this post


Link to post
Share on other sites
storm09
Awesome! Once I figure out where the copy/text fits in I'll be good to go. LOL. Cheers Poseyg.

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  

×