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.
{ 5 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.”