Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Archive /

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo

Help with tabstrip

Go to End

6 Posts   2254 Views


Google Summer of Code Hacker, 152 Posts

12 June 2007 at 1:22am

Hello everyone!

Hope you all had a great weekend... At the moment I'm trying to style the different login forms and as Sam suggested I'll try to use the tabstrip script. But unfortunately there is no documentation available (at least I can't find it) and I can't figure out how the HTML should look like.
The result should look like;login

At the moment I simple have several <form>, but it's no problem to encapsulate them into div's, ul/li's or whatever.. Can someone please tell me what the script exactly expects!?



Google Summer of Code Hacker, 39 Posts

12 June 2007 at 11:00am

it may or may not fit your needs, but you might be able to use the TabSet class

it is basically a wrapper for the tabstrip js that helps with forms

the api docs are here:

the tabsets use the tabsetfieldholder template, so it should give you an idea of what you have to work with there


Google Summer of Code Hacker, 152 Posts

12 June 2007 at 8:36pm

Thanks for your reply. I looked at that classes, but nevertheless I couldn't figure out how it works. It seems that this classes/templates are used for a form with different fieldsets and now for different forms or different div's.

Maybe there is somewhere a client site where something like this is used!?


Google Summer of Code Hacker, 39 Posts

13 June 2007 at 4:55am

tabsets and thus tabstrips are used pretty heavily throughout the cms in the XAdmin.php files, so they should provide some good examples for how to use it


Administrator, 690 Posts

13 June 2007 at 11:43am

The basic idea is that you have a <ul> with #-linked <a> tags inside of each <li>. The blocks with IDs pointed to by the # links will be hidden / shown as required.

jsparty/tabstrip.js requires the appendLoader() method from behaviour.js. It will identify any ul.tabstrip items in the page and turn them into tab strips on load. This means that if js is missing, the tab strip will behave like a normal #-link menu to different parts of the page.

Here's some sample HTML:

<ul class="tabstrip">
<li><a href="#something">something</a></li>
<li><a href="#other">other</a></li>

<div id="something">
the content of 1 tab

<div id="other">
the content of the other tab


Google Summer of Code Hacker, 152 Posts

14 June 2007 at 4:28am

Thanks Sam! It works now! But I have a little problem: The tabs don't look very good with the standard BlackCandy template because some styles (margins, borders) are missing in the CSS file.

I added the file tabs.css to resolve this issue, but at the moment those folders are not under version control. So if someone updates his working copy, he won't get the right results when he doesn't reads the log message or the entry in trac.

Maybe the templates (at least BlackCandy) should be added to the repository and a GSoC branch would also be nice. So we can add missing things like this ones.

Another thing is were I should put other (optional) CSS files. For example it is common that the OpenID logo is shown in OpenID login forms. I created a file "openid_login.css" and put it under mysite/css, but how can I tell everyone that such a thing exists?

Anyway, here is the code for the two CSS files:

------------- mysite/css/tabs.css ------------- {
clear: left;
overflow: auto;
border: 1px #AAA solid;
border-top: none;
position: relative;
top: -3px;
margin: 0;
padding: 10px;
/*width: 98%;*/

div.tabset {
border: 1px solid #fff; /* Hack for FF1.5/Win Float-Bug */
clear: left;
margin: 0;

ul.tabstrip li {
margin-left: 0;

-------------- mysite/css/openid_login.css -------------
#OpenIDLoginForm_LoginForm_OpenIDURL {
background: url( no-repeat;
background-color: #fff;
background-position: 0 50%;
color: #000;
padding-left: 18px;
width: 284px;