Tabber

Tabbed Product and Fragment Descriptions.
Post Reply
jimbo1702
Posts: 4
Joined: Tue Nov 01, 2005 10:34 pm

Tabber

Post by jimbo1702 »

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
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Post by norman »

I'm in remote rural Turkey just now with only a smartphone for internet access. I'll be somewhere more suitable to reply fully after the weekend.
Norman
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Post by norman »

I'm not a CSS expert so this is the best I can manage.

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;}
Adjust 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
Norman
Markos
Posts: 2
Joined: Thu May 01, 2008 2:50 pm

Re: Tabber

Post by Markos »

Does this still apply to latest version? The css names don't seem to match up?
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Tabber

Post by norman »

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.
Markos
Posts: 2
Joined: Thu May 01, 2008 2:50 pm

Re: Tabber

Post by Markos »

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;
      }
Post Reply