Noman
First let me say that I am very impressed with the tabber – easy to install set-up and use.
Have made a few teaks for my needs but wonder if the following are possible (for me to easily do rather than a custom job).
Is there a way to get the tabs to be a set % of the width?
I am using 3 tabs so would like each to take up 33% of the width so that they fill the width.
Or is it possible to alter the top part (where the tabs are) so that this is the same width as all the tabs (with a blank white area to the side)?
I hope this makes sense.
Also would there be a way to change the font of the active and non active tabs so I try a sold blue tab for non active with white text and a white tabs with blue text for active?
I am working on the tabber product here – http://www.viteyes.co.uk/acatalog/test/ ... anced.html
James
Tabber
I'm not a CSS expert so this is the best I can manage.
Replace tabbeddescriptions.css with the followingAdjust the 33% to suit the number of tabs in use. Or replace it with a fixed pixel size like 125px.
As for the text colour and background, you'd have to alter the a definition in the css and replace the background graphics (bar_off.gif, bar_on.gif and bar_hover.gif).
If you want to read up on the underlying code, see http://jon.hedley.net/html-tabbed-dialog-widget
Replace tabbeddescriptions.css with the following
Code: Select all
.tabs {position:relative; height:20px; margin:0; padding:0; background:url("bar_off.gif") repeat-x; overflow:hidden}
.tabs li {display:inline; float:left; width:33%;}
.tabs a:hover {background:#fff url("bar_hover.gif") repeat-x;}
.tabs a.tab-active {background:#fff url("bar_on.gif") repeat-x;}
.tabs a {float:left; width:100%; text-align:center; height:20px; font:12px verdana, helvetica, sans-serif;font-weight:bold;
position:relative; color:#2B4353;text-decoration:none;border-left:1px solid #fff;}
.tab-container {background: #fff; border:1px solid #6D99B6;}
.tab-panes {margin: 3px;}
As for the text colour and background, you'd have to alter the a definition in the css and replace the background graphics (bar_off.gif, bar_on.gif and bar_hover.gif).
If you want to read up on the underlying code, see http://jon.hedley.net/html-tabbed-dialog-widget
Norman
Re: Tabber
Does this still apply to latest version? The css names don't seem to match up?
Re: Tabber
Sort off. The classnames aren't used but ID tags are used instead. These ID tags refer to the same elements as the classnames did.
Three different styles are provided and I feel that that's enough for most users.
I'm not a CSS or visual design expert so can't really help a lot on this.
Three different styles are provided and I feel that that's enough for most users.
I'm not a CSS or visual design expert so can't really help a lot on this.
Re: Tabber
For anyone else who might be trying to do this, I made the following changes to my V06 files to get centered tabs:-
Code: Select all
#tab-header li {
background:url("tabber-plain_off.gif") no-repeat left top;
float:left;
margin:0;
padding-top:0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
display:inline;
width:33%;
}
#tab-header a {
display:block;
background:url("tabber-plain_off.gif") no-repeat right top;
padding: 5px 15px 4px 15px;
text-align: center;
text-decoration:none;
font-weight:bold;
color:#765;
}