CSS3 Tabview
nav_first.pngFirst: package:1
Wikidot per-site help
Edited: 08 Nov 2009 12:06 by: pieterh
Comments: 0
Tags:
nav_prev.pngPrevious: package:41
Twitter Widget
Edited: 09 Jul 2017 13:41 by: leiger
Comments: 2
Tags:
Last: package:49
Advanced Search
Edited: 01 May 2012 12:30 by: tsangk
Comments: 68
Tags:
nav_last.png
Next: package:43
Hide rows in a table using tags
Edited: 30 Dec 2010 20:41 by: Steven Heynderickx
Comments: 2
Tags:
nav_next.png

CSS3 Tabview
Package submitted by Matt Gentile
23 Dec 2010 08:36

rating: +2+x

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! This csi package was created by MDesign does not match any existing user name.

This is also my first CSI package so if anyone would like to add any suggestions, please feel free to comment below. I would like to also hear some suggestions before I post this as a snippet as well, only because I want to make the necessary changes first.

Instructions

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…

CSI.wikidot.com is cool!…

Click here for a live preview

Include files

CSS3 Tabview By Matt Gentile 23 Dec 2010 08:40

Comments: 9

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