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
/* TABS */
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
background-color:#d8d8d8;
background-image: url(http://lastlook.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://lastlook.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://lastlook.pl/~quake/wikidot/images/yuitabs.png) repeat-x left -1300px;
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
border-color: #444;
}
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by michal frackowiak
Multicolumn Layout - 17 Dec 2012 19:51
Zoho Writer - 16 Feb 2012 01:57
Zoho Sheet - 16 Feb 2012 01:56
Zoho Show - 16 Feb 2012 01:55
Zoho Polls - 16 Feb 2012 01:53
WoW Tooltips - 16 Feb 2012 01:52
Widgetbox Panel - 16 Feb 2012 01:52
Video from Revver - 16 Feb 2012 01:50
Todo List - 16 Feb 2012 01:48
Standalone Page Buttons - 16 Feb 2012 01:44
Social Bookmarking - 16 Feb 2012 01:42
Simple Gallery - 16 Feb 2012 01:41
Remember The Milk Todo - 16 Feb 2012 01:39
Recent Changes (mini) - 16 Feb 2012 01:36
Rating Summary - 16 Feb 2012 01:35
Quimble Poll - 16 Feb 2012 01:33
Quikmaps Maps - 16 Feb 2012 01:33
Photobucket Widget - 16 Feb 2012 01:29
Page Previews (Snap.com) - 16 Feb 2012 01:29
Pabpixies Gadgets - 16 Feb 2012 01:28
MyBlogLog recent visitors - 16 Feb 2012 01:25
Meebo me - 16 Feb 2012 01:20
Layout With Tables - 16 Feb 2012 01:19
Instacalc - 16 Feb 2012 01:12
Include Any Page - 16 Feb 2012 01:11
Import the Digg Feed - 16 Feb 2012 01:11
Import a News Feed - 16 Feb 2012 01:10
Google Gadgets - 16 Feb 2012 01:05
Gabbly chat - 16 Feb 2012 01:02
Forum Summary for the Front Page - 16 Feb 2012 01:02
Footnotes - 16 Feb 2012 01:01
Foldable List - 16 Feb 2012 01:01
Flickr Images By Tags - 16 Feb 2012 01:00
Feedburner - 15 Feb 2012 00:53
Extra Side Bar - 15 Feb 2012 00:51
Embed Code From Other Services - 15 Feb 2012 00:50
EditGrid Spreadsheets - 15 Feb 2012 00:49
Cornify - 15 Feb 2012 00:39
Compact Feed Display - 15 Feb 2012 00:35
Collapsible Text Block - 15 Feb 2012 00:35
Center Video - 15 Feb 2012 00:28
Bibliography/Footnotes/Comments Listed in TOC - 15 Feb 2012 00:26
Babelfish Translation - 15 Feb 2012 00:25
Automatic Sitemap - 15 Feb 2012 00:25
Alexa traffic ratings - 15 Feb 2012 00:23
3d tagcloud - 15 Feb 2012 00:22
Rate this solution
If you think this solution is useful — rate it up!
Can the colors be modified via CSS?
Portfolio
Red tabs were 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.
Michał Frąckowiak @ Wikidot Inc.
Visit my blog at michalf.me
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.
thanks so much for this code. My Tabs look so much better now! =D