How do you control the width or padding of the tab short code. I have a section that needs 4 tabs and is over flowing right now. Default is 134px wide I need 128px or less.
http://leapwisemedia.com/about-2/
Is there a width option or way to make the tabs fit the text size that would be more useful. I know you mention in the tab2.css style using the various classes for width like w1, w2, w3 can you show an example of how to use those?
Thanks
vfxdude
admin
it's restricted by the container it's in, and in your case it's in the content container. Choose the "no sidebar" page template to remove the sidebar and make the container the full width of the page.
if you don't want it full width then you can set the width like this (add it to style.css (preferably in a child theme)):
.tabContainer { width: 600px; }
the padding can be changed like this:
.tabContainer div.pane { padding: 20px; }
Sorry I didn't get back to you sooner. But to clarify the issue is not the container which is suppose to be 528px wide based on the page template in use. The issue is the actual tabs themselves are too wide (134px wide) no matter how much text is contained in them. We need 4 tabs and they are forcing the box wider then the template and/or dropping the 4th down to another line which we don't want.
If the tabs expanded to fit just the copy and we're not hard fixed to 134px wide it would work. Right now we need tabs 128px-132px or less so they populate the 1st line only and do not push the 4th tab to the 2nd.
I added the other content that will be included with the final page so you can see how it is to be used. http://leapwisemedia.com/about-2/
Thanks
astroman
Member
Hello Roger,
I am running into the same problem. I can change the padding of "ul.css-tabs a.current" but for the other tabs "ul.css-tabs a" it is not working. It look at least like in the link from "landrews" - only the current tab has another width.
Cld u give an advice jow to over write the default tabs ( padding: 5px 30px; ) settings?
vfxdude
admin
the css got to have a higher specificity than the original to override. You can easily see this in Firebug (what width takes command). Adding a !important statement will mostly cure this though. Example:
ul.tabs a { width: 150px !important; }
btw, I found a bug in the latest version of the theme (1.4.1.4) with tabs. The tabs are not showing at all, but I fixed it now. If you upgrade before the fix release is out you can fix it by changing the .clear class in style.css to this:
.clear { clear:both; }
You must log in to post.
