Description
This solution will show you how to create tabs.
Code
There are 2 control tags you will have to use: [[tabview]] and [[tab]].
[[tabview]]
[[tab Lorem ipsum]]
Lorem ipsum dolor sit amet...
[[/tab]]
[[tab You Tube rocks]]
...
[[/tab]]
[[tab Flickr rocks too!!!]]
...
[[/tab]]
[[/tabview]]
view source — view the whole source
In action
And here is what you can expect:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.
Css Code for red tabs.
insert this into your custom theme
example http://quake.wikidot.com/
/* TABS */
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
background-color:#d8d8d8;
background-image: url(http://mavtech.pl/~quake/wikidot/images/yuitabs.png);
}
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
border-color: #a3a3a3;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
background:#700 url(http://mavtech.pl/~quake/wikidot/images/yuitabs.png) repeat-x left -1400px; /* selected tab background */
color:#fff;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
background:#d88 url(http://mavtech.pl/~quake/wikidot/images/yuitabs.png) repeat-x left -1300px;
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
border-color: #444;
}
Rate this solution
If you think this solution is useful — rate it up! Or dump it otherwise.
Comments
Can the colors be modified via CSS?
Red tabs here : http://quake.wikidot.com/
test
Can you give an example? If it is possible?
Hmmm.. probably we will change the default color to something more neutral… like gray? Blue is indeed too much outstanding.
We will post info on how to change colors later. Yes, this can be done via CSS.
I have found a wonderful use for tabs.. the embedding of YouTube media.. on separate tabs on a single page.. to keep things efficient.. all i need now is a way of making the tab view width match the total width of the content with a % value… can this be done?
Great addition! Thank-you. I tried (without success) to get "div" (for vertical spacing) working within a tab - any suggestions?(scratch that, typo on my part) Also (as above) would like the width of the entire tab structure constrained so a floating image can be to the right of it. Will try to figure it out but just in case one of you brainiacs already did…
The tabs are a great feature. They look good in my IE7 browser, but a friend sent me this screenshot from her Mac:
There's an image at the right, and the tab text respects it. The tab field spreads over it though.
As a stopgap, I've put the whole tab module into its own "div" with a fixed width. The photo frame is also a fixed width, so it would be good to have the width of the tab field adjust according to the width of the browser window.
Am I missing something? How do I get the tab field width to adjust the same way text would?
S.
I really like the tabs. I am putting the "comments" module on a separate tab to unclutter the space. One negative then is that the "edit sections" doesn't seem to work.
How would you jump from tab to tab via links?
I have a tab for reference material and would like my other tabs to have information that link to this reference material sheet.
Also, does this support multiple rows of tabs or will it all be inline?
OK I found it DOES support multiple levels of tabs, but still trying to find out if it's possible to have a link jump to a specific tab..
The tabs currently work with CSS only, without any JS scripting.
In its most basic terms, each tab is a floating <DIV> that is hidden, UNTIL the user clicks on that tab's label and thus gives it "focus". The .yui-navset CSS for a selected DIV specifies that it is visible, which is why it pops to the front.
Unforunately, you cannot set the focus on a hidden div just following an link to an anchor contained inside. Doing this requires some javascript to "select" the correct tab, which is currently beyond the scope of the current wikidot software, I think.
How did you get it to work with multiple levels? Basically I want three tabs, with a new set of 3 tabs inside of each one. When I try and do this I get the wrong tabs in each set. Ideas?
Recently, one of my wikidoters on one of my wikis used a multiple level tab system and included a [[module SimpleToDo id="mylist1"]]. All the coding for the multiple layers of tabs is correct
In Internet Explorer the page reports the following error: Internet Explorer cannot open the Internet site http://ec720.wikidot.com/cindy-l-hill. Operation aborted.
The page is dead in Internet Explorer v7. First thought, the tab coding or To Do List coding had an error. Did an archive backup of the wiki and pulled the offending page. Code is clean.
Next thought, was it the browser not meeting standards. Opened the page in Firefox v3 and the page works correctly.
Has anyone had experience with Internet Explorer incompatibilities on wikidot?
Len
is it possible to use the [[toc]] command only regilnally inside a single tab?
I want to print the page but it only display the first tab.
How to list all tabs content for print?
Thanks.
Is there a way to get italic text within tabs?
As you will notice by looking through the Wikidot Standard Theme CSS, you will find that the background image for the tabs is taken from the file sprite.png. That's how they get that nice graduated colour blend. If you create your own version of that file, you can modify the colours of the relevant sections using whatever graphics editor you like. (I used "PhotoFiltre" which is a terrific small and free graphics editor with great capabilities, esp for the price).
You will then need to upload your own custom version of the sprite.png file, and then create a custom CSS theme where you redefine all of the relevant .yui-navset classes to point to your own graphic:
Original code snippet from standard wikidot theme:
Your custom CSS code:
NOTE that you only need to redefine the relevant properties for each class, since it automatically inherits the rest of the properties from the default theme.
I wanted to have the sidebar on my wiki in both Spanish and English using tabs, but they don't work on the side-bar. Any ideas as to how to fix this?
I speak French and English and I decided to make a bilingual site. So to get both languages in the side-bar, I used a foldable list and I got an effect that is similar to the one you get from the site manager page.
Here is the what I did. If you follow the same structure, you should get text that fold under
English. You should also change the page links as your pages may not have the same name as mine, and you can change Français to Spanish, and all the page links that are under that list.
Basically, follow this structure.
Hope this helps, I know it is not tabs in the side-bar, but I think that it will do what you want.
[[div class="foldable-list-container"]]
* [# Français]
* [[[français:bienvenue | Page de bienvenue]]]
* [[[français:questcequunwiki| Qu'est ce qu'un Wiki?]]]
* [[[français:commentmodifierlespages? | Comment modifier les pages?]]]
* [[[system:members | Membres du site]]]
* [[[system:page-tags-list| Étiquettes]]]
* [[[admin:manage|Maître du site]]]
[[/div]]
I could not get the indent to show in this version, sorry. I forgot to show the code in the previous post.
I'd also like to know if it is possible to use the tabbed structure in the side bar - they just come out flat when I try.
I had a foldable list as suggested, but the tabs would be so much better and it more with the way other stuff is arranged in the main pages.
Thanks this is really useful
There is a bug with the tabs. For the mods there is a hidden link in my message to the page that contains the error. The tab in the second post do not switch.
link here:
I came from the same site, so I've taken a look at it myself. The issue with it is in how the id for the div elements is generated. I haven't tested it extensively and not sure I'm experienced enough for a good read-through of the code, but…
In seperate posts, the div id starts at the initial count, "wiki-tabview-0", which is generating an error across several posts. Both posts are were generated and saved seperately, so they can't account for the existance of tabviews that occured in previous posts. I don't know if this is something that could logically be fixed without some extensve coding or rather dynamic naming, though.
This might also be related in part to the fact that placing one tabview inside another doesn't work, but I haven't looked at it regarding that yet.