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! - 06 Jun 2021 03:18
Rate this solution
If you think this solution is useful — rate it up!
这个CSS不可以改变链接颜色吗？
hhh
You can change link color.
CSS Code:
If you have lots more questions that aren't directly related to the new tabview snippet I suggest you post them on the community forum.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
interesting event, expand first Adventuring and the plain jane tabview below it moves the tabs to the center while the other two do not. the second row again Adventuring moves where the tabs are and Crafting does this time. Wicked effects!
To use the clear:left you will need to put it before the closing div on the Diplomacy tab, not after it. Like this:
I've noticed on your Zata Catbox page that you have just put the .yui-navset css in as though it's text. These rules normally go into a css module at the top of the page but you might find it easier to add them to the div syntax.
So the first one would be:
The center and right tabs would be:
I think you sorted out the anchor syntax problem you were having.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Where you've got
the problem is caused by that div with the clear left in it. It is clearing the float:left on the sidebar and pushing the content from "Only Quest Related" onwards below the bottom of the sidebar.
So delete that div and everything will be OK.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
so get whoever who wrote it to fix it ! LOL Im sure thats asking a bit much for wikidot. :P
Zatzs Catbox «LOL tried changing the link color
There was a reason why that clear was there, but I forgot why, lol. (it'll come to me!)
Ohh yes, the clear is used so that anything after it (and when you open a collapse), like the divider (custom in this example) will move down (or was it stay down ?) and correspond to the end of the tabview. atleast thats how it was working for me. I added an example of what it does and how it looks.
The and [#anchor-name] opens a new page, is this a bug in the sandbox? if not anyway to get it to stay on the page even if absolutely has to refresh instead of scolling?
What about using " table.wiki-content-table tr" instead to spread the collapsed links out that way I can use a div style to set width or can I add a tabview inside another div just to set width? mmmm testing.. Result= nope. Seems the width is limited to the collapse width that is set. Which leaves me to question about other ways to spread out the collapses. I did try to use the old table/row/cell but never got it to display right. and nesting collapse and tabview didnt work right either, assumes it would be limited to cell width too, being the topmost width define.
On your Zatz Catbox page you've asked how to insert a "Back to Top". The syntax for anchors is described at http://www.wikidot.com/doc:wiki-syntax#toc23
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
It's probably due to the way the javascript code for the tabview has been programmed.
With CSS you can set the with to for each tabview to, for example 950px. So that the left one, Adventuring, the CSS would be:
The width could go into a div just for that tabview.
But for each of the others you will then need to set the left margin to position the tabview. For example, for the second tabview, Crafting, you would need something like:
and then the Diplomacy tab would be something like margin-left:-770px;
You can't because there is no logical relationship between them.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
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?
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.
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 ?
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 ?