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…
Click here for a live preview
Include files
CSS3 Tabview | By Matt Gentile | 23 Dec 2010 08:40 |
I will be creating 3 more CSI's like this one. One with different colors, next with animation, and the last one will have a different style (maybe a negative effect).
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
You can add the separate colours to the same CSI if you want, and let users choose.
e.g.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Hmm, actually this doesn't appear at all in Firefox 3.6. Can't see any of the tabs - just a blank space.
Firefox should be able to support some of the CSS, even if it can't support all of it.
Maybe you could default to a single, plain boring blue background for Firefox (the better CSS3 effects should still work in Chrome and Safari). Not sure how you would do this after a quick glance, perhaps bcammo might be able to help. Or I'll have a closer look later.
Cheers,
Shane
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Try downloading Firefox 4.0 beta
- This version supports some CSS3, you should then be able to see the tabs with Firefox. But Google Chrome is amazing ☺
- When I wake up I will make some changes to this pages instructions.
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
When you add "|colour=green" It does'nt work.
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
Try color without the "u". I don't think css supports the queen's English. ;)
Edit: although it should work fine as a variable name.
Community Admin
Sorry, that's what the user types. You need to do a bit more work as the creator of the CSI :)
Have a look at: http://www.wikidot.com/doc:wiki-syntax#toc48
If you add {$var1} to your code, then someone else can type |var1=SOMETHING when they are using their include, and all of your {$var1}'s will be replaced with SOMETHING.
I will have a look at your code later and get it working. I think maybe the best way to do this would be something like:
Then in your code, you'd change something like this:
To this:
Make sense? CSI variables are very powerful, once you know how to use them :)
In the example above, it lets the user choose what the colour is, so you can have multiple colours in one CSI. Better than creating several almost-identical CSIs just for different colours like you were going to do :)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Great, Im going to start making some changes now.
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
Made the changes, Is this what you mean?
- And This is easier than I thought lol, I'll make some other cool changes as well :)
Edit: I'll try to make it more simple, but so far so good!
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +