New Tabview

By Matt GentileMatt 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

Click here for a color chart

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 GentileMatt Gentile.

Wikidot.com is cool!…

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


Rate this solution

If you think this solution is useful — rate it up!

rating: +7+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License