Can I space tabs equally underneath my header?
-
If you check out my page, http://sssmst.com, you’ll see that I have tabs across the top, under the header and above the content. Can I use custom CSS to space the tabs evenly across that bar, or will they always “stack” to the left like that?
-
-
I’d rather say you can style your tabs as you like with the css upgrade, but I’d suggest you to try out using the preview function *before* you actually buy the upgrade.
By the way, bumping threads is not considered polite.
-
@sssmst: Just so you know, the number of people who hang out in the forums who really know what they’re doing with CSS is smaller than the number of fingers on one hand. So, it’s not surprising that it takes a while to get an answer, or even that sometimes you won’t get an answer. I looked at your question and thought ‘That’s interesting. I’ve never seen a blog with that done. I wonder if anyone knows how.”
My guess would be that you could do it, but I don’t know how. Isadora’s suggestion of playing with the Preview feature is a good one.
-
I already use custom CSS for a variety of small tweaks, but I can’t figure out how to tweak the tabs. I’m guessing it’s possible, but I didn’t want to spend a ton of time playing with CSS if it’s theme-related and not changeable with the style sheet.
@isadora, I was trying to clarify my question, not bump the thread. You’ll notice that there’s no edit feature of the original post, perhaps? Anyway, I’m glad the forum etiquette police are looking out for me.
-
Well, it’s the job of moderators to point at etiquette, isn’t it?
The element you have to change in your stylesheet is:
#pagebar a { font-family: "Trebuchet MS", Verdana, Arial, Sans-Serif; color: #333; font-size: 1.4em; display: block; float: left; padding: 8px 15px 0px 15px; border-right: 1px #CECECE solid; text-align: center; height: 27px; }Play a bit with padding, for example.
-
Try to find the tab element that the individual tabs sit on. There is usually a class that will say “background-image: whatever gray image it’s using on your site”, and following there should be a similar element that controls the tabs that sit on the tab bar.
example:
portal-tabs {
background-image: url (“http://image.com”) transparent repeat-x;
}portal-tabs li {
font-size: 12pt;
color: black;
}The first instance is the part that controls the bar that the tabs sit on. Add padding to the left of the bar, this will extend it further to the center:
portal-tabs {
background-image: url (“http://image.com”) transparent repeat-x;
padding-left: 8em;
}To view the css that you are already working with so that you know what to modify, in your browser go to View- Page Source, or download the Developer’s Toolbar form Firefox, which allows you to view CSS.
-
I just tried it out, with following modification you can change the tab width as you like;
#pagebar a { width: 150px; }(Change 150 to whatever you prefer)
A very helpful firefox extension (if you are interested in such tools) which I use is EditCSS.
-
Thanks– I like the extension. I use notepad++ for coding, and that’s ok, but doing it in the browser saves some steps.
And, that totally works– much better! Check it out: http://sssmst.com
- The topic ‘Can I space tabs equally underneath my header?’ is closed to new replies.
WordPress.com Forums 