Can the colors be modified via CSS?
Red tabs were here : http:// quake.wikidot.com/
Can you give an example? If it is possible?
Hmmm.. probably we will change the default color to something more neutral… like gray? Blue is indeed too much outstanding.
We will post info on how to change colors later. Yes, this can be done via CSS.
Michał Frąckowiak @ Wikidot Inc.
Visit my blog at michalf.me
I have found a wonderful use for tabs.. the embedding of YouTube media.. on separate tabs on a single page.. to keep things efficient.. all i need now is a way of making the tab view width match the total width of the content with a % value… can this be done?
Great addition! Thank-you. I tried (without success) to get "div" (for vertical spacing) working within a tab - any suggestions?(scratch that, typo on my part) Also (as above) would like the width of the entire tab structure constrained so a floating image can be to the right of it. Will try to figure it out but just in case one of you brainiacs already did…
The tabs are a great feature. They look good in my IE7 browser, but a friend sent me this screenshot from her Mac:
There's an image at the right, and the tab text respects it. The tab field spreads over it though.
As a stopgap, I've put the whole tab module into its own "div" with a fixed width. The photo frame is also a fixed width, so it would be good to have the width of the tab field adjust according to the width of the browser window.
Am I missing something? How do I get the tab field width to adjust the same way text would?
S.
I really like the tabs. I am putting the "comments" module on a separate tab to unclutter the space. One negative then is that the "edit sections" doesn't seem to work.
How would you jump from tab to tab via links?
I have a tab for reference material and would like my other tabs to have information that link to this reference material sheet.
Also, does this support multiple rows of tabs or will it all be inline?
OK I found it DOES support multiple levels of tabs, but still trying to find out if it's possible to have a link jump to a specific tab..
The tabs currently work with CSS only, without any JS scripting.
In its most basic terms, each tab is a floating <DIV> that is hidden, UNTIL the user clicks on that tab's label and thus gives it "focus". The .yui-navset CSS for a selected DIV specifies that it is visible, which is why it pops to the front.
Unforunately, you cannot set the focus on a hidden div just following an link to an anchor contained inside. Doing this requires some javascript to "select" the correct tab, which is currently beyond the scope of the current wikidot software, I think.
How did you get it to work with multiple levels? Basically I want three tabs, with a new set of 3 tabs inside of each one. When I try and do this I get the wrong tabs in each set. Ideas?
Recently, one of my wikidoters on one of my wikis used a multiple level tab system and included a [[module SimpleToDo id="mylist1"]]. All the coding for the multiple layers of tabs is correct
In Internet Explorer the page reports the following error: Internet Explorer cannot open the Internet site http://ec720.wikidot.com/cindy-l-hill. Operation aborted.
The page is dead in Internet Explorer v7. First thought, the tab coding or To Do List coding had an error. Did an archive backup of the wiki and pulled the offending page. Code is clean.
Next thought, was it the browser not meeting standards. Opened the page in Firefox v3 and the page works correctly.
Has anyone had experience with Internet Explorer incompatibilities on wikidot?
Len
As you will notice by looking through the Wikidot Standard Theme CSS, you will find that the background image for the tabs is taken from the file sprite.png. That's how they get that nice graduated colour blend. If you create your own version of that file, you can modify the colours of the relevant sections using whatever graphics editor you like. (I used "PhotoFiltre" which is a terrific small and free graphics editor with great capabilities, esp for the price).
You will then need to upload your own custom version of the sprite.png file, and then create a custom CSS theme where you redefine all of the relevant .yui-navset classes to point to your own graphic:
Original code snippet from standard wikidot theme:
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
background:#d8d8d8 url(/common--javascript/yahooui/assets/sprite.png) repeat-x; /* tab background */
border:solid #a3a3a3;
border-width:0 1px;
color:#000;
position:relative;
text-decoration:none;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
background:#2647a0 url(/common--javascript/yahooui/assets/sprite.png) repeat-x left -1400px; /* selected tab background */
color:#fff;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
background:#bfdaff url(/common--javascript/yahooui/assets/sprite.png) repeat-x left -1300px; /* selected tab background */
outline:0;
}
Your custom CSS code:
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
background:#d8d8d8 url(http://mysite.wikidot.com/local--files/home/sprite.png) repeat-x; /* tab background */
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */
.yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */
background:#2647a0 url(http://mysite.wikidot.com/local--files/home/sprite.png) repeat-x left -1400px; /* selected tab background */
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
background:#bfdaff url(http://mysite.wikidot.com/local--files/home/sprite.png) repeat-x left -1300px; /* selected tab background */
}
NOTE that you only need to redefine the relevant properties for each class, since it automatically inherits the rest of the properties from the default theme.