Tabs

By michal-frackowiak

Description

This solution will show you how to create tabs.

Code

There are 2 control tags you will have to use: [[tabview]] and [[tab]].

[[tabview]]
[[tab Lorem ipsum]]
Lorem ipsum dolor sit amet...
[[/tab]]
[[tab You Tube rocks]]
...
[[/tab]]
[[tab Flickr rocks too!!!]]
...
[[/tab]]
[[/tabview]]

view source — view the whole source

In action

And here is what you can expect:

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.

You Tube rocks

Flickr rocks too!!!

Css Code for red tabs.

insert this into your custom theme

/* TABS */

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color:#d8d8d8;
    background-image: url(http://lastlook.pl/~quake/wikidot/images/yuitabs.png);
}

.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border-color: #a3a3a3;
}

.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:#700 url(http://lastlook.pl/~quake/wikidot/images/yuitabs.png) repeat-x left -1400px; /* selected tab background */
    color:#fff;
}

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background:#d88 url(http://lastlook.pl/~quake/wikidot/images/yuitabs.png) repeat-x left -1300px;
}

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: #444;
}

---

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 michal-frackowiak

MyBlogLog recent visitors - 06 Jun 2021 04:03
Include Any Page - 06 Jun 2021 03:20
Babelfish Translation - 06 Jun 2021 03:14
Collapsible Text Block - 02 Dec 2020 10:24
Todo List - 18 Aug 2014 15:28
Multicolumn Layout - 17 Dec 2012 19:51
Zoho Writer - 16 Feb 2012 01:57
Zoho Sheet - 16 Feb 2012 01:56
Zoho Show - 16 Feb 2012 01:55
Zoho Polls - 16 Feb 2012 01:53
WoW Tooltips - 16 Feb 2012 01:52
Widgetbox Panel - 16 Feb 2012 01:52
Video from Revver - 16 Feb 2012 01:50
Standalone Page Buttons - 16 Feb 2012 01:44
Social Bookmarking - 16 Feb 2012 01:42
Simple Gallery - 16 Feb 2012 01:41
Remember The Milk Todo - 16 Feb 2012 01:39
Recent Changes (mini) - 16 Feb 2012 01:36
Rating Summary - 16 Feb 2012 01:35
Quimble Poll - 16 Feb 2012 01:33
Quikmaps Maps - 16 Feb 2012 01:33
Photobucket Widget - 16 Feb 2012 01:29
Page Previews (Snap.com) - 16 Feb 2012 01:29
Pabpixies Gadgets - 16 Feb 2012 01:28
Meebo me - 16 Feb 2012 01:20
Layout With Tables - 16 Feb 2012 01:19
Instacalc - 16 Feb 2012 01:12
Import the Digg Feed - 16 Feb 2012 01:11
Import a News Feed - 16 Feb 2012 01:10
Google Gadgets - 16 Feb 2012 01:05
Gabbly chat - 16 Feb 2012 01:02
Forum Summary for the Front Page - 16 Feb 2012 01:02
Footnotes - 16 Feb 2012 01:01
Foldable List - 16 Feb 2012 01:01
Flickr Images By Tags - 16 Feb 2012 01:00
Feedburner - 15 Feb 2012 00:53
Extra Side Bar - 15 Feb 2012 00:51
Embed Code From Other Services - 15 Feb 2012 00:50
EditGrid Spreadsheets - 15 Feb 2012 00:49
Cornify - 15 Feb 2012 00:39
Compact Feed Display - 15 Feb 2012 00:35
Center Video - 15 Feb 2012 00:28
Bibliography/Footnotes/Comments Listed in TOC - 15 Feb 2012 00:26
Automatic Sitemap - 15 Feb 2012 00:25
Alexa traffic ratings - 15 Feb 2012 00:23
3d tagcloud - 15 Feb 2012 00:22

---

Rate this solution

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

page 1 of 512345next »

Director Erzahler 16 Sep 2024 21:19

I feel like it should be noted that the CSS code for making the Tabs red is unneeded if you use the "Shiny" theme. Aside from that, I was surprised how well the code works.

---

"But as for me and my house, we shall serve the Lord."

How does Wikidot get Tabview widget

Canalguy 24 Mar 2023 23:41

I'm trying to understand Tabview and how to modify it. It looks like "Tabview" comes from the Yahoo User Interface (YUI) library of widgets. Yahoo stopped maintaining the library in 2014 and it moved to some other organization hosted on Github.

I tried to look this information up. Where are the CSS rules and classes coming from? They look good and they work, but I don't see where this information comes from. Also the YUI documentation states that I need this statement in my document for it to work. "<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>" does wikidot add that for me automatically?

Re: How does Wikidot get Tabview widget

Helmut_pdorf 29 Mar 2023 15:32

This works well and I do not understand what you want to change… the color ( background, foreground)?
You need no CSS to use it in standard format.

---

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 ?

Tab migration

AxoCat 20 Feb 2023 12:26

+ show block

[[tabview]]
[[tab blah]]
blahblahblah
[[tabview]]
[[tab log 1]]
[[/tab]]
[[tab log 2]]
[[/tab]]
[[/tabview]]
[[/tab]
[[tab nothing]]
[[/tab]]
[[/tabview]]

blahblahblahblah

log 1

[[/tab]
[[tab nothing]]

Help, log 2 migrates to the wrong tabview and the nothing tab is broken.

SCP-5217 (also how to I do interview thing?

Potato Farm 03 Mar 2021 10:10

+ show block

[[tabview]]
[[first attempt of doing an scp]]
Item #: SCP-5217
Object Class: Euclid

Special Containment Procedures: SCP-5217 is to be kept in a bedroom with a computer able to run video games and some consoles and a bed along with other furniture

Is to be brought fast food from SCP-662, such as KFC (kentucky fried chicken), Taco bell and many other fast food franchises

Description: SCP-5217 is a 13-year old male caucasian teenager with blonde hairnamed 'Daniel Fuchs' or 'Dan Fuchs' as he prefers to be called.

SCP-5217 has the ability of copying the appearance of anyone but as a 13 year old version of themselves, this was discovered by a civilian who had been copied by SCP-5217, he called FBI which called the SCP Foundation, after the containing of SCP-5217 everyone, who was copied according to SCP-5217's memory, was given amnestics

The second ability of SCP-5217 is that he can eat huge objects in a fast amount of time even though his mouth is estimated to be 5.5cm wide and 0.1cm tall and he never became overweight, both of these the ability to eat huge items we're discovered was discovered in 5217-L1

Dr. ██████: so your name is..?

SCP-5217: Fuchs. Dan Fuchs

Dr. ██████: and how old are you?

SCP-5217: 13

Dr. ██████: and what about-

SCP-5217 eats 3 pieces of pizza at once despite the size of his mouth

Dr. ██████: how did you do that?

SCP-5217: doing what?

Dr. ██████: eating that much, that fast.

SCP-5217: oh yeah, that! Theres more to it! Give me more food!

SCP-5217 Was Given 10 pizzas he ate them all fast but what Dr. ██████ noticed is that he stayed slim he never got overweight

SCP-5217: pretty cool, huh?

Dr. ██████: Does this work on humans?

SCP-5217: I don't know, maybe we could have the Class D guys test it out

Dr. ██████: ok sending in a D class.

D-6828 was sent in and given orders to go near SCP-5217

D-6828: hello?

SCP-5217: hi!

D-6828 approaches SCP-5217 then SCP-5217 eats D-6828 in one bite

[[/tab]]
[[tab Title 2]]
More text in another tab! You can add lots of tabs.
[[/tab]]
[[/tabview]]

Please collapse long posts. ~aismallard

Last edited on 06 Jun 2021 03:06 by aismallard Show more

help please i want to make the interview and the articule diffrent tabs but i dont know how

Mason Forester 03 Mar 2020 19:17

+ show block

Item #: SCP-5023

Object Class : Safe

Special Containment Procedures: SCP-5023 Is to be Contained in a 3 foot by 3 foot, plexiglass cube that is 2 inches thick, and has a opening at the top for removal of SCP-5023 at the request of █████████ for testing purposes. All personnel who are attempting to use SCP-5023 for testing without authorization from █████████ are not to be allowed access to SCP-5023. SCP-5023 is to be keeped on Site-█████

Description: SCP-5023 Is an hardcover book made for leather and papyrus. SCP-5023 has a spine of a gold and silver alloy that is a perfect 50/50 ratio. SCP-5023 was carbon dated and found to be at least 7,000 years old, far older than any known form of writing.

The main anomalous property of SCP-5023 however is what it contains. When opened SCP-5023 displays random lines of letters from the language of the reader. However as the reader turns the pages, the reader begins to lose sanity, shouting random phrases and turning the pages faster and faster until the reader stops turning the pages and immediately dies of cardiac arrest. But when observing a picture of the writing in SCP-5023’s pages the reader will have none of the previously mentioned symptoms.

The number of pages appears to be infinite, as the pages are turned, the pages near beginning morph into the cover while new pages morph out of the cover in a way resembling cell mitosis. If the reader is refrained from turning the page during the insanity symptom then SCP-5023 pages will continue turning even though there is no reader turning them.

Addendum: For more information read the interview of Dr. Martin Louis.

Interviewed: [Dr. Martin Louis]

Interviewer: [█████████]

Foreword: [During the interview doctor Martin Louis seemed to become more uneasy as she recalled the events of test-████ of SCP-5023.]

<Begin log, [ 20/3/██ 13:41]

Interviewer: [“doctor Louis can you please describe to me the events of test-████, to the best of your memory.”]

Dr. Martin Louis: [“Test-████, your referring to SCP-5023?”]

Interviewer: [ “yes.”]

Dr. Martin Louis: [“Ok i’ll start from the beginning of the test. ON █/█/██ at █:██, a D-class entered SCP-5023’s containment cell at site-██.”]

Dr. Martin Louis: [“Upon entry of SCP-5023’s cell, the D-class was immediately drawn towards SCP-5023. As soon as the D-class opened the book he became unresponsive to verbal commands.”]

Interviewer: [“Tell me about the attempt to restrain the D-class.”]

Dr. Martin Louis: [“We had an SCP task force attempt to restrain the D-class, however SCP-5023’s pages continued to turn, and sadly two of the SCP task force members glanced at SCP-5023 and, became unresponsive.”]

Interviewer: [“What happened to the two SCP task force members and the D-class?”]

Dr. Martin Louis: [“The order was given to leave all three of them. They all died of cardiac arrest.”]

Dr. Martin Louis: [“I recommend that you seek out Capt. Smith for an after action report.”]

<End log, [20/3/██ 13:50]

Please collapse long posts. ~aismallard

Last edited on 06 Jun 2021 03:06 by aismallard Show more

Why doesn't this work?

YouOrMe 27 Nov 2019 23:06

[[tabview]]
[[Before Incident-XXXX-1]]
blah blah blah
[[/tab]]
[[Incident-XXXX-1]]
more things
[[/tab]]
[[After Incident-XXXX-1]]
the third thing
[[/tab]]
[[/tabview]]

Re: Why doesn't this work?

(account deleted) 27 Nov 2019 23:41

You're missing the keyword "tab" in your markup.

Code

[[tabview]]
[[tab Before Incident-XXXX-1]]
blah blah blah
[[/tab]]
[[tab Incident-XXXX-1]]
more things
[[/tab]]
[[tab After Incident-XXXX-1]]
the third thing
[[/tab]]
[[/tabview]]

Result

Before Incident-XXXX-1

blah blah blah

Incident-XXXX-1

more things

After Incident-XXXX-1

the third thing

---

Community Admin

Re: Why doesn't this work?

YouOrMe 28 Nov 2019 08:16

Oh wow, such a simple mistake.
Thanks.

(account deleted) 02 Jul 2019 13:02

Thank

you.

---

KOH

Doing something wrong??

Researcher Helms 11 Apr 2019 14:35

So I did this, but it's not doing separate tabs

A Simple Market

blah blah blah

Flex Seal SCP-J

more things

[[tab (Blank to show) view]]
[[tab A Simple Market]]
blah blah blah
[[/tab]]
[(Blank to show) view]

[[tab (blank to show) view]]
[[tab Flex Seal SCP-J]]
more things
[[/tab]]
[(Blank to show) view]

---

No signature defined

Last edited on 11 Apr 2019 14:37 by Researcher Helms Show more

Re: Doing something wrong??

(account deleted) 11 Apr 2019 20:39

I'm not sure exactly what you're asking but if you want both tabs side-by-side, you need to wrap the tabs in a single [[tabview]]…[[/tabview]] block.

[[tabview]]
[[tab Tab #1]]
blah blah blah
[[/tab]]
[[tab Tab #2]]
more things
[[/tab]]
[[tab Tab #3]]
the third thing
[[/tab]]
[[/tabview]]

---

Tab #1

blah blah blah

Tab #2

more things

Tab #3

the third thing

---

Community Admin

Just a thought...

Danny Fandom 29 Jun 2018 03:39

Why isn't there a nice red button that says "Open New Tab"?

CSS in Custom Theme?

Jennkryst 02 Sep 2017 06:37

I keep seeing this, but I do not quite understand what that means. Or how to do it. A step by step would be lovely, and/or code to just throw on individual pages would also be keen.

Re: CSS in Custom Theme?

Helmut_pdorf 02 Sep 2017 12:26

You can use this CSS code on the top of any page - working for this page only ! - or on the Custom Theme ( see your site manager) for ALL pages of your wiki.
This is the code for the page alone CSS coding: ( see also documentation on http://www.wikidot.com/doc-modules:css-module )

[[module CSS]]
/* TABS */

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color:#d8d8d8;
    background-image: url(http://lastlook.pl/~quake/wikidot/images/yuitabs.png);
}

.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    border-color: #a3a3a3;
}

.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:#700 url(http://lastlook.pl/~quake/wikidot/images/yuitabs.png) repeat-x left -1400px; /* selected tab background */
    color:#fff;
}

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background:#d88 url(http://lastlook.pl/~quake/wikidot/images/yuitabs.png) repeat-x left -1300px;
}

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border-color: #444;
}
[[/module]]

You can find lots of help on the community howtos: *community.wikidot.com/howto:_start

Hope this helps?

---

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 ?

Re: CSS in Custom Theme?

Jennkryst 02 Sep 2017 18:10

It helps a bit; I only need to change it on the one page. The problem is that I can't seem to get any of the hex code to take? I've requested to join the community to post the code I have.

Re: CSS in Custom Theme?

Helmut_pdorf 02 Sep 2017 18:15

Which community do you mean?
http://community.wikidot.com/ is our community and on the forum you need not to be a member to post something…

---

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 ?

Re: CSS in Custom Theme?

Jennkryst 03 Sep 2017 04:05

In trying to create an example to show you where I am having issues with the code, I discovered my problem: the color change code will not show up until you save it; I had been exclusively using 'preview' until now.

All is well (ish)

Re: CSS in Custom Theme?

Jennkryst 03 Sep 2017 05:00

A somewhat new problem has arisen; I am not sure how to change all of the fields in the tabs. Nor can I link to the specific test page I've been using.

Re: CSS in Custom Theme?

Helmut_pdorf 03 Sep 2017 06:51

Nor can I link to the specific test page I've been using.

- the reason is the "newbee" factor for you! Your karma is low and you are new on Wikidot: the spam-filter is stopping you from posting a link at the beginning of your life here in the wikidot platform:
we have an unbelieveble wave of spammers on many wikis - for better search results (SEO-technic) , last year were >80.000 free wikis deleted because of spamming with external links to their business site ( and the owner too).

I am not sure how to change all of the fields in the tabs

I have copied your test page http://try.wikidot.com/color-tab-testing ( I can post with my karma here) to a new one http://try.wikidot.com/color-tab-testing-1 without the module CSS at the top - for playing around with the color-codes.

let us comment on these pages the colors..

---

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 ?

Re: CSS in Custom Theme?

Mai Selph 03 Sep 2017 09:22

So I took a look at http://try.wikidot.com/color-tab-testing

Not blue, finally green! Except for this part. Why can't I change this, too?

use this code to change the field color:

.yui-navset .yui-content {
    background: #434b98;
}

#434b98 is dark blue. You can use this site to pick the color you want, it's simple to use.

Where can I change THIS text color?

 .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover {
    color: #dd00ca;
}

#dd00ca is magenta. Replace it with the color you want to use.

---

I suggest you use the developer tools for this. Each browser (non-mobile) should have these, you can look at the styles with them and play around without actually messing up the design. I use a Chromium-based browser, and activate the developer tools through Ctrl+Shift+I, which opens a new window for me, with the page's html on the left side, and its css on the right side. Here's a screenshot.

page 1 of 512345next »