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;
}
Rate this solution
If you think this solution is useful — rate it up! Or dump it otherwise.
Can the colors be modified via CSS?
The Wikidot Blog | My other works
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.
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
Rhombus Productions main | My Current Projects | Jokes!| Battle Ground
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.
As mentioned above in the "Width and Div" and "Re: Width and Div" comments, the tab fields need to have a size parameter, since div boxes end up outside the tab field. It looks a real mess otherwise. If there were at least a way to indent or put a blank space between the end of the tab field and the div box. Is there a way to do so using wiki syntax?
Note that in the following, this div box code was used. You can fidget with it to fit your preferences. Note that width has to be a certain minimum in order for workaround 1 to work. I have found that width:97.7% or width:855px make the white areas around the div box nice and even. The width:97.7% might allow some adaptation, while width:855px is constant :
SO FAR I HAVE FOUND 3 WORKAROUNDS:
1. Put symbols or some text after the /div but before the /tab, thus placing the div box within the tab field. HORIZONTAL LINE WILL NOT WORK.
2. Put a space and an underscore _ (WITH NO SPACES AFTER THE UNDERSCORE) to form a new blank line after the /div but before the /tab , BUT this just expands the tab field from the top down, so you have to keep adding blank lines until it matches the size of the div box. Make sure to press Enter/Return after the last underscore or it'll be visible. Kinda simple and crude coding, BUT IT WORKS! Might cause problems when using different-sized div boxes…MAYBE.
3. Put the div box code around the tab code (before and after), as mentioned in the "Re: Width and Div" comment above. Unfortunately, if you have the parameter overflow:auto; in the "div style" parameters, THUS ADDING SCROLL BARS to the div box, the tabs will scroll along with whatever you have in the div box, and thus out of view. Not nice in this case.
I was able to cut and paste the code for the blue tabs into my site. What do I need to do to add more than 3 tabs?
I found my syntax error.
Playing with the css, I can change most of the colors to match my theme without having to use links to imgs, but for some reason the actual text area is white, so the borders and buttons match but then that stands out against my color scheme. Is there some kind of css code to actually change the background color of that text area?
I'm trying to make it seem like its a seamless piece of my wiki. So they flip the tabs and the background is the same as the actual web page, so basically I'm killing all borders except for the top one and the buttons.
Sorry if that sounds confusing.
nevermind, found the info I needed on another thread
For some reason, only my odd numbered tabs display any data. Tabs 2, 4, 6, etc. show absolutely nothing. I tested the same exact code in each tab, yet every time only the odd tabs display anything.
Any help would be greatly appreciated.
Thanks
A link to an example would be helpful!
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
I copied the code under the CSS Code for red tabs area for the Red tags. I want to use the tabs example in the In Action area above, but when I copy the code into my CSS, the background area where the text is a blue color. I don't know how to fix this so that it is grey instead of blue. If you need to see what I am talking about, the link is:
http://mutantmush.wikidot.com/template:faction
Any help would be appreciated. Thanks.
"Long is the way, and hard, that out of hell leads up to light."
- John Milton; Paradise Lost, BOOK II
Better ask in the Community….
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Is it possible to have tabs that after you click them change their names? Such as a tab that's labeled "OPEN" and then once you select that tab it changes to "CLOSED"? If so how do you do it?
The only tags I know - which changes their "labeling" if they are opened or closed - are the [[collapsible]] and [[/collapsible]] block..
I do not believe that there is a way to do the same with tabs…
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Alright then. Thanks anyways for your time.
Can't use pictures as the Tab's Header. Inserting [[tab
]] will result in URL displayed instrad of image.
Trying to consolidate a bunch of annual photo gallery pages into a single photo gallery page wtih tabs. I implemented the tab snippet and it works wonderfully but I noticed that it changes the header graphic back to the graphic that came with one of the default wikidot themes.
Original: http://www.119ta.net/2007-photos
New: http://www.119ta.net/photo-gallery
Not sure if adding the snippet is messing with the CSS or not - any help would be greatly appreciated…
1. This is only happening in IE (7). NOT in Firefox (2)
2. Using Tabs there is a VERY LONG Load time connected - ALL Pictures are loaded in ONE go - the resulting ONE page is only divided by internal anchors…
3. Using links and "pagination" in the old format makes it more usable and user friendly..
4. Using tabs is Author-friendly ( except all visitors habe a very fast connection - line
5. Last - but not least - this is a strange behaviour in IE and I posted this on the bug-tracker system to the developer team (ticket:231 -Tabs changes CSS-Style in IE - this is a privat pro-site)
Hope this helps soon…
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Hi!
The question is - is this only occuring with the "long" page comntent with such a mass of pictures?
means - CAN YOU TEST THIS WITHOUT THE GALLERIES in a test page?
The answer of the developer is: this seems to be a IE-bug and is occurring if too much images are to load and the last image (for the header by CSS) is too much for the IE..
If trhis is true - than someone has to inform the MS IE team about his error - or you have to make your page a little "smaller" ( not with such overloading images in ONE GO ( my point 2 in the other post)
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Thanks for the reply. I reverted back to the original nav for user experience reasons you mentioned.
However, to test your theory, I put the entire gallery listing on a separate test page without tabs and viewed it in IE 7.0. Result is that the old header graphic appeared so it's not tabs that are the issue, it's a bug native to IE (Chrome worked just fine)
If there is anything you can do, let me know
Thanks for the test - it is really the overloading of IE with too much images… one point more to drop IE as soon as possible….(but now this is not possible..).
Question: can you copy the "Phototest" page to another one and try to delete step by step (from the bottom up) some galleries and to have a view where the header-graphics come back in IE?
(find out the limit of "images").
Could be this does not help anyway - because the mistake is to put all images on one page - but it would be interesting where the limits lies…
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Thanks again for the help. When i have some time, will explore that option. I'm curious too…
I want to make a tab with multi tabs inside of that one..
Sorry,
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?