Template:Tab top/Examples View history

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

This page displays various example of the possible layout of the template. As the URL of this page is Template:Tab top/Examples, this will be used in the following examples as the specified URL for tab 2, in order to make this one appear as selected.

Minimum template

Alpha Bravo Charlie
{{ Tab top
| Tab-1 = Alpha
| URL-1 = France
| Tab-2 = Bravo
| URL-2 = Template:Tab top/Examples
| Tab-3 = Charlie
| URL-3 = Main Page
}}

This is the minimum structure for 3 tabs. All colors and style are the default ones.



Rounded Tab template, with a picture

Alpha AlphaBravo BravoCharlie
{{ Tab top
| Tab-1 = Alpha
| URL-1 = France
| Image-1 = Mentor-new-transparent-large.png
| Tab-2 = Bravo
| URL-2 = Template:Tab top/Examples
| Image-2 = MenuButton.png 
| Tab-3 = Charlie
| URL-3 = Main Page
| rounding = 20
}}

The rouding parameters specify a radius of 20px, applied symetrically on both left and right upper corner of each tab boxes. Two of 3 tabs get a picture prefix.



Asymmetrically Rounded Tab template

AlphaBravoCharlie
{{ Tab top
| Tab-1 = Alpha
| URL-1 = France
| Tab-2 = Bravo
| URL-2 = Template:Tab top/Examples
| Tab-3 = Charlie
| URL-3 = Main Page
| rounding = 15
| asym = 3
}}

The upper right corner get a rounding with a radius of 15px, when the upper left corner get a rounding with a radius 3 times greater (3 x 15px = 45px).




altering the default colors the border style

AlphaBravoCharlie
{{ Tab top
| Tab-1 = Alpha
| URL-1 = France
| Tab-2 = Bravo
| URL-2 = Template:Tab top/Examples
| Tab-3 = Charlie
| URL-3 = Main Page
| rounding = 15
| asym = 3
| border = dashed 5px #964B00
| frame background=ivory
| tab background=tan
}}

the 3 last parameters override the built-in default colors & style.



adding dedicated color to tabs + a gap between tabs + Force tab to be selected

Alpha Bravo Charlie
{{ Tab top
| Tab-1 = Alpha
| URL-1 = France
| tab background-1 = lightblue
| Tab-2 = Bravo
| URL-2 = Map editing
| Tab-3 = Charlie
| URL-3 = Main Page
| tab background-3 = red
| rounding = 15
| asym=3
| border = solid 2px red
| frame background = ivory
| tab background = tan
| gap = 2px
| selected = Charlie
}}

The "selected" parameter force the template to select the third tab (the one named "Charlie")

The tab #1 got its own background color (lightblue) which is used as the tab is not selected.

The tab #2 does not get its own background color, thus the default one is used (this is tan)

The tab #3 got its own background color (red) but is not used as this is the selected tab and therefore gets the same color than the frame background