Sometimes you’re inspired to do something, but the task seems like to too much work. Other times things come together quickly and easily. When it came to redesigning this website, quick and easy was the case. I’m not really a web designer (though I likely know more about CSS than the average bear), so I must thank Chris Pearson and his Thesis Theme for making it easy. Actually, thanks to everyone who has posted a solution (or a question) in the Thesis Forums too! Your help has been invaluable. Finally, thanks to the post In Defense of Eye Candy on A List Apart for inspiring the design change.
A fresh new look for moon:and:6
Previous post: Mojave release Crow’s Funeral
Next post: Michael’s 2009 NXNE picks
{ 3 comments… read them below or add one }
Hi there – I love what you’ve done with the navigation bar with Thesis…..looks great! Any insight on the forums as to how you did this? (I’ve been looking to do something similar – just haven’t been able to get it as “pretty” as yours!) Thanks..:-) F.D.
Thanks! I like the nav bar too. I use the full-width framework and some tips and code from kristarella.com. She’s posted some great tutorials on how to customize Thesis quite comprehensively. I used this tutorial to set up my header.
This is the code I use to style my navigation bar:
/*---:[ nav menu styles ]:---*/
.custom #nav_area { background:#000; padding:0.5em 0; border-bottom:0px solid #000; position:fixed; z-index:1; }
.custom #nav_area ul { border-bottom:none; border-left:none;}
.custom #nav_area ul li { border-width:0; margin-bottom:0; margin-right:0px;padding-bottom:0;}
ul#tabs { list-style: none; border: 1px solid #000; border-width: 0 0 1px 1px; }
ul#tabs li { margin-bottom: -0.1em; background: #000; border: 1px solid #000; border-left: 0; float: left; }
ul#tabs li.current_page_item, ul#tabs li.current-cat { padding-bottom: 0em; border-bottom: 0; }
ul#tabs li a { font-weight: bold; display: block; line-height: 1em; color: #fff; text-transform: uppercase; letter-spacing: 1px; }
ul#tabs li a:hover { color: #aaa; text-decoration: none; }
ul#tabs li.current_page_item a, ul#tabs li.current-cat a { cursor: default; background:#000; border: 0px;}
ul#tabs li.current_page_item a:hover, ul#tabs li.current-cat a:hover { text-decoration: none; }
I hope this helps!
Thanks, Michael – much appreciated! ( I’m messing something up in the customs.php folder I think…..still gets wonky stylistically on my end)
But – love the simplicity of your design – saw it on the gallery earlier today and it really stands out…:-)