By Matt Gentile
This package provides A custom styled CSS3 tabview for your wiki with no CSS needed. You must have Google Chrome or Safari to see the full features of this CSI!
To install this package in your site, create/edit these pages with the following content:
| Example | Description |
|---|---|
| |TabColor=#_ _ _ _ _ _ | This is for the non-active tab background color |
| |TabFadeColor=#_ _ _ _ _ _ | This is for the non-active tab fade-into color |
| |SelectColor=#_ _ _ _ _ _ | This is for the selected tab background color |
| |SelectFadeColor=#_ _ _ _ _ _ | This is for the selected tab fade-into color |
| |ActiveColor=#_ _ _ _ _ _ | This is for the active tab background color |
| |ActiveFadeColor=#_ _ _ _ _ _ | This is for the active tab fade-into color |
| |textcolor=#_ _ _ _ _ _ | Content text color |
| |textcolor1=#_ _ _ _ _ _ | Tab text color |
| |textcolor2=#_ _ _ _ _ _ | Selected Tab text color |
| |textcolor3=#_ _ _ _ _ _ | Active Tab text color |
| |Background=#_ _ _ _ _ _ | Content background color |
| |Border=# _ _ _ _ _ _ | Border color |
First, use this code below to style those tabs!…
[[include :csi:include:css3-tabview
|TabColor=#666666
|TabFadeColor=#111111
|SelectColor=#0088eb
|SelectFadeColor=#0077eb
|ActiveColor=#00558b
|ActiveFadeColor=#0672b7
|textcolor=#333333
|textcolor1=#ffffff
|textcolor2=#ffffff
|textcolor3=#eeeeee
|Background=#fafafa
|Border=#eeeeee
]]
Next, use the regular Tab View syntax to customize your tabs like so (make sure you center this if you want to get your tabs in the middle and place the code below the CSI)…
[[=]]
[[tabview]]
[[tab Tab title 1 goes Here]]
Tab content 1 goes here...
[[/tab]]
[[tab Tab title 2 goes Here]]
Tab content 2 goes here...
[[/tab]]
[[tab Tab title 3 goes Here]]
Tab content 3 goes here, and so on...
[[/tab]]
[[/tabview]]
[[/=]]
Then You will get this…
This csi package was created by Matt Gentile.
Click here for a live preview
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 Matt Gentile
New Wikidot Twitter Widget..CSS3 Style! - 16 Feb 2012 01:27
Rate this solution
If you think this solution is useful — rate it up!
Im going to add an extra feature so everyone can change the content background color as well as the text.
CEO of The Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
Added the new features :)
CEO of The Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
Not sure if it's just because I'm using firefox… but when you use the tab like this… part of the tabs are hidden behind the content box of the tabview… Is there a way to fix that? :o
Yes I also saw this on Firefox. To fix it you could add a css module at the bottom of the page where the tabs are (i.e after everythig else) as follows:
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview - Wikidot-based intranet, knowledebase and website development and management
Sweet, that totally fixed it. Now I have another problem! I'm trying to nest a tabview inside a tabview, but stuff is getting switched around and some stuff just vanishes. Is there a trick to making them obey? XD
According to the docs:
I found this article from 2008, and it might be worth posting a wish to expand tabview's capabilities. Having the option to nest tabs and change the orientation of them would be nice.
Wikidot API - PHP · A PHP client and code samples for the Wikidot API
Sooo. Working this, umm, nested page out was good for a few laughs, up until.the.. end..literally the ending.
I told the admin I was not sure if he need another plugin for this to work properly or not. It works well, to an extent. Ii was gonna attempt to nest it even further into a master tab set, It is more appeasing than a collapse. I'd like to see about more colors for each tier of tabs.
Go to the sandbox site: http://try.wikidot.com/ and you can test all what you want on a single page ( or more).
I have copied your test to http://try.wikidot.com/nested-tabview and it looks very well I think !
Edit: correc ted the link to the try - sandbox page!
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Thanks for that now i post code there and link to it from here. I intended to inform whoever created this of issues and see if a solution can even be found. Nesting multiple times is a too nice of a tool for gaming sites (and others) not to have at their disposal and much better looking than the long repeating tables needed with only a couple different variables. the drawback is how much coding experience someone needs to know to get something like this to work properly, unlimited nesting might be too much to ask for.
Yes, it is/was confusing me - the nested tab's are sometimes moved to an "unawaited position" . I cannot detect a system in this rendering / doing.
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Question: is this correct ?
http://try.wikidot.com/nested-tabview-var1 - a variant using collapsible vire ( with folfed=no ) for beginning….
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
I am new to this style code, I havent done anything like this since Frontpage98. I have an idea how its supposed to work, get it to work that way is the adventure. Atleast back then, you could drag tables around to til your blue in the face and it would all work right in the end, well most of the time.
I've been playing around with a few different things - try this on for size >Variant 2
Seeing what works and what doesnt is fun. What it seems it boils down to is that these, these elements(?)things ( :) ) can nest each other barely and definitely not with themselves. I just now (today ) seen your variant.
The inability and errors found with nesting outside HMTL for, from what I can see, over 3 years is amazing. So many ways to nest, yet not enough to cover it uses in make great looking pages. Like i said, I havent tried to do page design for a very long time, so I know little of what it takes to fix something like this problem..
Things have moved on a lot in the last 15 years (css, wikis, my waistline!)
Unfortunately collapsible blocks can't be nested.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview - Wikidot-based intranet, knowledebase and website development and management
Yea but why doesnt it work? it works partially, almost there but not quite….
I removed the collapse nesting code and the results are >Tabview inside collapse there is a previous version of Variant 2 that had another collapse inside a tabview inside a collapse that resulted in more "go-away-i-dont-want-to-work" code.
so now, the Tabview, few questions, how to get each tab to use the whole page width and at the same time, how to close the other tabs, the tab on top hides other tabs not exactly closing? Which begs to question how to collapse open collapses when another is opened.
The other Q: now how to get rid of that big space?