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 https://www.iconbuffet.com/people;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!?

Thanks,
Markus

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:
http://doc.silverstripe.com/assets/classes/default/TabSet.html

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

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!?

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

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>
</ul>

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

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

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 -------------
div.tab {
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(http://openid.net/login-bg.gif) no-repeat;
background-color: #fff;
background-position: 0 50%;
color: #000;
padding-left: 18px;
width: 284px;
}