Template:Navbox Tabs: Difference between revisions

From Zelda Wiki, the Zelda encyclopedia
Jump to navigation Jump to search
(meh)
(Ads in the tabs make the tabs unclickable.)
Line 1: Line 1:
<div style="clear:both; margin: 0.3em auto; text-align:center; {{#if:{{{width|}}}|width:{{{width}}};}} {{#if:{{{header|}}}| border: 1px solid #{{ZWborder}};}}"><!--
{{AdFilter|start}}<div style="clear:both; margin: 0.3em auto; text-align:center; {{#if:{{{width|}}}|width:{{{width}}};}} {{#if:{{{header|}}}| border: 1px solid #{{ZWborder}};}}"><!--


-->{{#if:{{{header|}}}|
-->{{#if:{{{header|}}}|
Line 88: Line 88:
}
}


}}<noinclude>
}}{{AdFilter|finish}}<noinclude>
==Purpose==
==Purpose==
This template is a tool to create navigation templates with a tabbed layout. This condenses the overall size of the navigation template but still offers everything in it. This makes navigation templates with a lot of content far less intimidating and much easier to get around. [[Template:Tab2|Tab2]] can be used as an simpler alternative to this template when its additional functions are not needed.
This template is a tool to create navigation templates with a tabbed layout. This condenses the overall size of the navigation template but still offers everything in it. This makes navigation templates with a lot of content far less intimidating and much easier to get around. [[Template:Tab2|Tab2]] can be used as an simpler alternative to this template when its additional functions are not needed.

Revision as of 04:46, 1 January 2013

Template:AdFilter

{{{tab1}}}{{{tab2}}}

<css>

.tab { background-color: #1d578b; background-image:-webkit-linear-gradient(top, #1D679B, #1A4E7D); background-image: -moz-linear-gradient(top, #1D679B, #1A4E7D); background-image: -ms-linear-gradient(top, #1D679B, #1A4E7D); background-image: -o-linear-gradient(top, #1D679B, #1A4E7D); background-image: linear-gradient(top, #1D679B, #1A4E7D); border:2px solid #426787; cursor:pointer; float:left; margin:0 1px -2px; padding:3px; text-align:center; white-space:nowrap; }

.tab:hover { background-color:#24527c; background-image:-webkit-linear-gradient(top, #305f89, #17456E); background-image: -moz-linear-gradient(top, #305f89, #17456E); background-image: -ms-linear-gradient(top, #305f89, #17456E); background-image: -o-linear-gradient(top, #305f89, #17456E); background-image: linear-gradient(top, #305f89, #17456E); color:#F4F26B; }

.tab.active { background-color:#17456e !important; background-image:-webkit-linear-gradient(top, #1D578B, #17456E); background-image: -moz-linear-gradient(top, #1D578B, #17456E); background-image: -ms-linear-gradient(top, #1D578B, #17456E); background-image: -o-linear-gradient(top, #1D578B, #17456E); background-image: linear-gradient(top, #1D578B, #17456E); border-bottom: 2px solid #17456E; color:#F4F26B; }

</css>Template:AdFilter

Purpose

This template is a tool to create navigation templates with a tabbed layout. This condenses the overall size of the navigation template but still offers everything in it. This makes navigation templates with a lot of content far less intimidating and much easier to get around. Tab2 can be used as an simpler alternative to this template when its additional functions are not needed.

This template can create up to 18 tabs. They will automatically break into multiple lines if the container is too narrow.

Usage

To use this template, start with this layout:

{{Tab
|header   =
|width    =
|height   =
|tabwidth =
|default  =
|fallback =
|tab1     =
|content1 =
|tab2     =
|content2 =
|tab3     =
|content3 =
...
|tab17    =
|content17=
|tab18    =
|content18=
}}
  • header — The title for the tab container. If left blank, the tabs will not be in a stylized container.
  • width — The width of the container. Spans the entire screen if left blank.
  • height — The height of the tab contents section. Fits to the contents if left blank. Base this on the largest content tab. Usually 20px per line works best. You may wish to add an addition 20px to account for the bolding that happens when you're on the page for a link, as this might add a new line.
  • tabwidth — The width of each tab. Fits to the contents if left blank.
  • default — The tab to display when the page first loads. Defaults to "1"
  • fallback — The tab to load in case javascript does not load. The default tab also loads in case of error.
  • tab# — The name of each tab. Try to keep the names short as long names tend to look bad. You can also use images here. However, if you do, they should be entered with a blank "link=" parameter, or the linking to nothing option of Template:Image. If you neglect to do this, clicking the tab will take you to the that page instead of loading the tab.
  • content# — The content you want to display for each tab. There is no limit here, but you may want to insert line breaks and adjust the width and height parameters to make the whole template look its best.

Examples

To see examples of using this template, see the templates:

Template:Cat