Difference between revisions of "Template:TabbedFolder"
From PRIMUS Database
(Created page with "<noinclude>Category:Templates<!--please do not delete or overwrite-->{{User:Liath/FloatMenu}}</noinclude> <div style="width:{{{tabwidth|300px}}}; border-top-left-radius:15...") |
m |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<noinclude>[[Category:Templates]]<!--please do not delete or overwrite-->{{User:Liath/FloatMenu}}</noinclude> | <noinclude>[[Category:Templates]]<!--please do not delete or overwrite-->{{User:Liath/FloatMenu}}</noinclude> | ||
<div style="width:{{{tabwidth|300px}}}; border-top-left-radius:15px;border-top-right-radius:15px; padding:5px; padding-left: 15px; padding-right:15px; text-shadow: 0px 1px 2px {{{textshadow|black}}};background-color:{{{backcolor|rgba(0,0,153,1)}}}; color:{{{textcolor|white}}};"><b>{{{title|Tab Title}}}</b></div> | <div style="width:{{{tabwidth|300px}}}; border-top-left-radius:15px;border-top-right-radius:15px; padding:5px; padding-left: 15px; padding-right:15px; text-shadow: 0px 1px 2px {{{textshadow|black}}};background-color:{{{backcolor|rgba(0,0,153,1)}}}; color:{{{textcolor|white}}};"><b>{{{title|Tab Title}}}</b></div> | ||
| − | <div id="{{{handle|}}}" name="{{{handle|}}}" style="background-color:{{{backcolor|rgba(0,0,153,1)}}}; | + | <div id="{{{handle|}}}" name="{{{handle|}}}" style="width:{{{boxwidth|100%}}}; background-color:{{{backcolor|rgba(0,0,153,1)}}}; |
background: -webkit-linear-gradient(bottom, {{{backfadeout|rgba(0,0,0,0)}}}, {{{backcolor|rgba(0,0,153,1)}}} 100% ); /* For Safari 5.1 to 6.0 */ | background: -webkit-linear-gradient(bottom, {{{backfadeout|rgba(0,0,0,0)}}}, {{{backcolor|rgba(0,0,153,1)}}} 100% ); /* For Safari 5.1 to 6.0 */ | ||
background: -o-linear-gradient(top, {{{backfadeout|rgba(0,0,0,0)}}}, {{{backcolor|rgba(0,0,153,1)}}} 100% ); /* For Opera 11.1 to 12.0 */ | background: -o-linear-gradient(top, {{{backfadeout|rgba(0,0,0,0)}}}, {{{backcolor|rgba(0,0,153,1)}}} 100% ); /* For Opera 11.1 to 12.0 */ | ||
background: -moz-linear-gradient(top, {{{backfadeout|rgba(0,0,0,0)}}}, {{{backcolor|rgba(0,0,153,1)}}} 100% ); /* For Firefox 3.6 to 15 */ | background: -moz-linear-gradient(top, {{{backfadeout|rgba(0,0,0,0)}}}, {{{backcolor|rgba(0,0,153,1)}}} 100% ); /* For Firefox 3.6 to 15 */ | ||
background: linear-gradient(to top, {{{backfadeout|rgba(0,0,0,0)}}}, {{{backcolor|rgba(0,0,153,1)}}} 100% ); /* Standard syntax */ | background: linear-gradient(to top, {{{backfadeout|rgba(0,0,0,0)}}}, {{{backcolor|rgba(0,0,153,1)}}} 100% ); /* Standard syntax */ | ||
| − | margin-bottom: | + | margin-bottom:{{{bottommargin|0px}}}; border-top-right-radius:{{{boxcurve|0px}}}; border-bottom-right-radius:{{{boxcurve|0px}}}; border-bottom-left-radius:{{{boxcurve|0px}}};"> |
<div style="text-shadow: 0px 1px 2px {{{textshadow|black}}}; overflow:hidden; color:{{{textcolor|white}}}; text-align:left; margin-top:0px;"> | <div style="text-shadow: 0px 1px 2px {{{textshadow|black}}}; overflow:hidden; color:{{{textcolor|white}}}; text-align:left; margin-top:0px;"> | ||
<div style="display:block; overflow-y:auto; margin:10px; margin-right:5px;"> | <div style="display:block; overflow-y:auto; margin:10px; margin-right:5px;"> | ||
| − | <div id="container" style="float: left | + | <div id="container" style="float: left; min-height:100px; color:{{{textcolor|white}}};"> |
{{{content| }}} | {{{content| }}} | ||
</div> | </div> | ||
| Line 53: | Line 53: | ||
* '''boxwidth''' - Width of the main box of the 'folder'. Values must be entered with px scale identifier or percentage. e.g 600px or 100%. Defaults to 100% of parent container. | * '''boxwidth''' - Width of the main box of the 'folder'. Values must be entered with px scale identifier or percentage. e.g 600px or 100%. Defaults to 100% of parent container. | ||
* '''boxcurve''' - Size of curve (if any) of main box of the 'folder'. Values must be entered with px scale identifier. e.g 5px. Defaults to 15px (same as the Tab section). | * '''boxcurve''' - Size of curve (if any) of main box of the 'folder'. Values must be entered with px scale identifier. e.g 5px. Defaults to 15px (same as the Tab section). | ||
| + | * '''bottommargin''' - Allows control over spacing of elements. Values must be entered with px scale identifier. e.g 5px. Defaults to 0px. | ||
* '''handle''' - The 'name' of your box. Include this is you want to add a link somewhere on your page to direct visitors to this section. e.g 'information' you can then add a link for users to click with the following code: <nowiki>[[#information|<font color=silver>Information Section</font>]]</nowiki> | * '''handle''' - The 'name' of your box. Include this is you want to add a link somewhere on your page to direct visitors to this section. e.g 'information' you can then add a link for users to click with the following code: <nowiki>[[#information|<font color=silver>Information Section</font>]]</nowiki> | ||
| Line 66: | Line 67: | ||
Copy the following onto your page and fill out the appropriate information. | Copy the following onto your page and fill out the appropriate information. | ||
| − | <nowiki>{{TabbedFolder | + | <nowiki>{{TabbedFolder |
| − | |title= | + | |title= |
| − | |content= | + | |content= |
| − | |textcolor | + | |textcolor |
| − | |textshadow | + | |textshadow |
| − | |backcolor | + | |backcolor |
| − | |backfadeout | + | |backfadeout |
| − | |tabwidth | + | |tabwidth |
| − | |boxwidth | + | |boxwidth |
| − | |boxcurve | + | |boxcurve |
| − | |handle | + | |bottommargin |
| − | |}} | + | |handle |
| + | |}} | ||
</nowiki> | </nowiki> | ||
Latest revision as of 16:45, 26 April 2016
Tab Title
The TabbedFolder box provids a neat simple design for seperating out specific information on a page
Contents
How to use the TabbedFolder
The long and involved process works thusly. If you just want the damn Box, go directly to the Cheat Sheet.
Trigger the use of the TabbedFolder on your page if you plan to include it. At the top of your edit window, enter:
{{TabbedFolder
Below that, you'll want to fill out all the parameters that you can fill out or care to fill out. For this, you'll need the name of the parameter that corresponds to the field you'll want to fill; in most cases, the parameter names are the same as the name of the field, but they differ in some. A complete list can be found below. The format for filling in a parameter is as follows:
| parameter = value eg. | title = Vigilante
| content = Your content or information to include.
This will replace the {{{title}}} placeholder in the original TabbedFolder with 'Vigilante'. Each parameter should be put in a new line for ease of parsing and debugging in case something goes wrong.
Close the Template. This is done by appending the following at the end of your list:
|}}
And with this, you're set.
List of Parameters
- title - The title to be shown in the tab of the box. This will appear in big bold letters at top left.
- content - The information to be displayed within the box. This could be directly input text, another template or any valid mediawiki or html code.
- textcolor - Sets color for tab title and content. Defaults to White . Values accepted include: standard HTML Color Names, any hexadecimal color value.
- textshadow - Sets shadow color for tab title and content. Helps text stand out on lighter backgrounds. Defaults to Black . Values accepted include: standard HTML Color Names, any hexadecimal color value.
- backcolor - Sets main color for the box background. Defaults to Blue . Values accepted include: standard HTML Color Names, any hexadecimal color value.
- backfadeout - Sets alternate/fade to color for the box background. Defaults to Transparent . Values accepted include: standard HTML Color Names, any hexadecimal color value.
- tabwidth - Width of the Tab at top of the 'folder'. Values must be entered with px scale identifier or percentage. e.g 150px or 50%. Defaults to 300px.
- boxwidth - Width of the main box of the 'folder'. Values must be entered with px scale identifier or percentage. e.g 600px or 100%. Defaults to 100% of parent container.
- boxcurve - Size of curve (if any) of main box of the 'folder'. Values must be entered with px scale identifier. e.g 5px. Defaults to 15px (same as the Tab section).
- bottommargin - Allows control over spacing of elements. Values must be entered with px scale identifier. e.g 5px. Defaults to 0px.
- handle - The 'name' of your box. Include this is you want to add a link somewhere on your page to direct visitors to this section. e.g 'information' you can then add a link for users to click with the following code: [[#information|<font color=silver>Information Section</font>]]
Note: To display the default value, remove the parameter line from the cheat sheet, remove the equals(=) sign or alternatively comment out the section(s) as follows:
<!--| realname = -->This way if you decide to fill in that section in the future, you can simply delete the
<|-- -->comment markers
TabbedFolder Cheatsheet
Copy the following onto your page and fill out the appropriate information.
{{TabbedFolder |title= |content= |textcolor |textshadow |backcolor |backfadeout |tabwidth |boxwidth |boxcurve |bottommargin |handle |}}
TabbedFolder Examples
Click here to see pages which use this template.
Created by: 
