Thesis 1.6 Update!
Here is some updated code to make your rounded tabs Thesis 1.6 compliant:
body.custom { background: #eee; padding-top: 3em; }
.custom #header { border-left: 1px #ccc solid; border-right: 1px #ccc solid; border-top: 1px #ccc solid; }
.custom #header #logo { text-indent: -9999px; }
.custom #header #tagline { text-indent: -9999px; }
.custom .menu { border: none; }
.custom .menu li a { /*---[ insert "border-radius" declarations here" ]---*/ }
.custom .menu .tab-home a { border-left: 1px solid #ddd; }
.custom .menu li ul li a { -moz-border-radius: 0em; -webkit-border-radius: 0em; }In this video, I show you how to make rounded tabs in the nav menu. As I explain, there are a few lines of CSS I wrote prior to recording the video in order to make the tab effect more noticeable. Here they are:
body.custom { background: #eee; padding-top: 3em; }
.custom #header { border-left: 1px #ccc solid; border-right: 1px #ccc solid; border-top: 1px #ccc solid; }
.custom #header #logo { text-indent: -9999px; }
.custom #header #tagline { text-indent: -9999px; }
.custom #tabs { background: #eee; border-left: none; border-bottom: none; }
.custom #tabs li { background: #ccc; border: none; **add round corners declarations here** }
.custom .current_page_item { padding-bottom: 0em; }Please Note: Internet Explorer does not support this technique! If you use IE, get Firefox immediately.
{ 9 comments… read them below or add one }
Matt, THANK YOU SO MUCH for doing this tutorial! I am re-learning css after years away from it; I’m also learning Thesis, and was able to insert this code quite easily as well as modify it a tad more (most just to see if I could). I had just designed a site that would use rounded corner tabs, and here comes your tutorial! I’m hoping it will work for me in the long run for this particular site, but now I have an additional skillset I’ll be able to apply anywhere.
Vickie
You’re very welcome! Feel free to submit any additional questions to thesistutor@gmail.com. I just wish the rounded corners worked in Internet Explorer. Oh, well…
Very nice video! Not rambling at all, I love that in a video. Very cool captions on it too (what did you use to make those?).
I think
border-radiusis going to be the official CSS3 style for that, so I usually stick that in as well just in case… So sad that IE8 didn’t bother to support any CSS3 because it’s not “finalised” yet.What if I don’t have Dreamweaver?
@Louise
You can use any text editor, including Thesis’ built in “File Editor.”
Thanks Matt it works. Only problem is I have a patterned background, is there anyway of getting the white behind the top corners of the tabs to disappear?
mind to share the link?
Sorry it’s http://weddingsphotographerkent.com/
I think I worked it out, I just hope it doesn’t affect my header now.
Hi Matt
Great tuts!
I’ve learned a lot from your very thorough and helpful tutorials. I currently have a request from a client for a specific nav menu styling. I cannot seem to get it quite right.
Would you be so kind as to view the image of what is requested and if possible provide me the code I need to use to achieve this in Thesis?
I thank you so much in advance.
The image can be viewed here http://www.absolutewebmastersinc.com/nav.png
Thanks again.
Angela