Editing Wikitext/Making Templates A101

• PARAMETERS are usually bits of text that a user enters for a template to process. For example, if a template makes text red, it still needs to know the text to color; this text is called a parameter, and the text is included by the user when the template is called for use. Sometimes parameters contain text like code to insert an image, or even a gallery or a table; it just depends what the template is designed for. A template can even be the parameter of another template; for example, a template to insert a test paragraph might occupy the parameter space of a template to make a text box. The new paragraph would then appear in a new text box.

The following few examples should help to explain what templates do.

In the first example, the template Caption is used. It has two text parameters and no options at all.

This is the code to call the template for use;

The result of doing so is to produce the text:

Notice that the template has formatted the text, and that each parameter was handled differently. This template is used to make consistently formatted image captions. The source code for the template Caption features little more than text formatting.

In the second example, the template Drop is used. It has one text parameter and several options, none of which are needed here.

This is the code to call the template for use;

The result of doing so can be seen in the paragraph below.

otice that the template has inserted a drop capital from the single character used as a parameter. This template can be used to start sections within certain body text. Again, the source code for the template Drop is largely text formatting.

The third example uses template Dropimage to make a drop-box with an image in it. This template has many options, but only two were needed; the width option, and the align option. The other options use the defaults. There are two parameters; the top caption Press to View and the contents, in this case the Wikitext code for an image. The contents in the example can be viewed by clicking the arrow on the box.

This is the code to call the template;

The result of doing so is:

Press to View
A Flower Poster

The template for this example consists of code to build the box structure, and the image code is strictly its parameter, i.e., the item that it processes.

The details of this subject can be complex, but it is possible to make and use templates without becoming much entangled in them. It is true to say that the simplest templates are often the ones that are most used, and many WikiBooks writers would benefit from their use.

The text below explains the process of template-making; in particular, for text, boxes, and drop-controls. As preparation, those who intend to make box templates of any kind would benefit from an elementary knowledge of tables, and this knowledge is available in the first few sections of the page Tables, where an introduction to CSS styles is also to be had.

[edit] Finding and Using Templates

There are already several thousands of templates within the WikiBooks templates namespace. That is another way of saying that the templates list is already long. At first sight, this may seem to avoid the need for template-making, but things are not so simple.

If the name of the template is known, then it can be found easily, but if the name is not known, it can take a long time to find a template similar to the one that you are looking for. Templates have their functions described on their own pages but many do not include notes, so the task of knowing which is which, and what they do even when they are found, becomes doubly difficult.

Templates made in Wikipedia and Wikibooks are not interchangeable, since they exist on separate servers. Although the code to make them is identical, this description applies to finding things in Wikibooks.

• To view lists of templates listed alphabetically within WikiBooks, follow the link to the All Templates Namespace.
• To find templates listed in various template categories, for example, drop-control templates, follow the link to the page Category:Templates.
• If you know a template's name, then find the template page by using the search box on the left of any Wiki page. For example, to find Dropimage just type;

then press Go.

When a template page is found, the code to make the template can be seen by viewing its editing window. Many pages have their documentation on the same page, isolated from the template code with <noinclude></noinclude> tags.

If after searching, you still need to make a template, as many no doubt do, then read on.

[edit] Put it on the Page

All editing, including the investigation of templates is best done in the safety of the Sandbox. Templates are called for use in pages by typing a line of Wikitext. To do so, first learn the name of the template, the available options, and the parameters. In many cases this means writing the template yourself, though some templates have all of the details for their use on the same page. See templates Plainlist, and Codebits as examples.

To call up a Template for use in a page, the code is typed within double curly brackets. {{}}. Included within the curly brackets is the template name, then, if required, a sequence of options, followed by a sequence of parameters. All entries are separated by pipe symbols. (|). The general form to use for a template with two options and one parameter is as follows:

and a typical example of its use is:

The above code has only one parameter. The example uses a so-called unnamed parameter, because it did not include either its number or its name. Some templates have several parameters, and when unnamed parameters are used, the the sequence of the parameters is important if confusion is to be avoided. The number sequence of parameters is set within the template's source code during design.

The sequence of options is unimportant, since all options must be named in any case. Using named values just means adding the name of the option or parameter and an equals sign before the rest of the information. This of course requires a knowlege of the template's details.

Template names are sensitive to case except for the first letter, so a useful convention is to use lower case all of the time.

Parameter names are quite sensitive to case in every way, so a capital letter makes all the difference. As a general rule, do not mix unnamed and named parameters in a template call, since the method used by the program to interpret their meaning becomes confused. Either use all unnamed with special attention to their sequence, or all named in any order that you like.

[edit] Find Details from Code

Let us assume that a template made by others has been found but that its details are unclear. Even without much knowledge of mark-up, it is usually possible to discern the options and parameters of a template by inspection of its coding. To see how this can be done follow the reasoning below.

In studying a template, the coding and anything else on the template page can be displayed in the sandbox by entering a special code. The template does not run when this is done; it just reveals the contents of the page. For example, the coding and any supporting text on the template page for say, the template Tocbox, can be viewed in the Sandbox by typing:

To save the reader the trouble of doing so here, the template code for Tocbox is given below.

Code for the Template Tocbox

The template page itself has a good description for its use, but assume for a moment that the descriptive material was absent. The code at the top of a template page is always the template source code; consider the example given above. Although it looks complicated, the object here is not to understand it, but to find the options and parameters from the code itself.

Note that the end of the code is marked with a <noinclude> tag, to make sure that any text that follows it is not used as a part of the template. In this example, there are two parameters; they can be recognised as the items with the form:

These entries identify parameters one and two respectively. It is clear, even without much understanding, that the first parameter is the heading text and the second parameter is the content text.

All of the options within this template are recognised from the typical form;

This extract states that there is an option called align that has the default value of left. The option could have almost any name; in fact it has been given the same name as the CSS property associated with it, (the part before the equals sign in the main code block). There are several properties within this code but only two of them have been coded as options; align and width. Both options have similar bracket formats to that of the above example.

With the options and parameters now understood, test the template on a page as follows:

This is the code:

The result is:

It should by now be clear that despite having no specification for the template in the first instance, it has been possible to obtain information from the coding for its use.

[edit] Modifying a Template

Assume for a moment that a template has been found that is nearly right, but not quite. Say for example that the background color was the only part that was wrong. The source code for such a template could be changed, by adding a term to modify its background color. Then, the modified version could be saved as a new template, with a different name. Note that if the modified template were saved with the same name as before, the existing users would experience color-changes in their work.

There is a way that allows normal use for existing users, yet allows the format to be modified for those who need a different color. The template can keep the old name if the fixed background property is made into an option with a default value equal to that used before. Then, since the old users would not bother to specify the background color, perhaps not even knowing that they now could, they would get the default value and would be happy with it. The new users who need a different color, could simply specify it as an option value when they call the template for use. In this way both parties would be content.

The modifying of a template approaches the difficulty of making a new one at times, and this process is covered in other sections below. For the background-change case, a suitable modified Tocbox code module would look like this. The code is:

In the above code the background property has been made into an option. In addition, the original background color, #f9f9f9; , (light grey), has been used for the default. To labour the point, if the user does not bother to specify the background color, he will still get the grey color as before. Note again that the added option need not have been called background but could, for example, have been called bgc or some other name. In that event the template's option code would look like background:{{{bgc|#f9f9f9;}}}, and another color would then be called using say, bcg=papayawhip on the page.

The template Tocbox has not been modified here, though this example provides a reliable demonstration of the method to use for doing so. After the modification above the template could be called as follows:

A knowledge of CSS property values allows considerable variation in a template's appearance. Luckily, the subject is well documented. See the CSS Reference List for a comprehensive listing of values and properties. Although the examples on the referenced page are designed for style sheets, the syntax found there is that used for modifying styles within templates and in-line styles. In addition, a useful color reference can also be had at Web Colors. A drop-box with many of the properties for tables has been provided in the box-making section below. If time is short it could be noted that most of the template work done so far in this project, (WikiBooks that is), could have made do with little more that the CSS properties of text and tables. Study of these two areas is thus rewarding.

Recent CSS reference sources are useful for the CSS properties and values, though the HTML attributes, (that use an equals sign), are also in use. Such attributes can be seen in HTML reference texts and in the aforementioned drop-box. An example of an HTML attribute that is still much used, is align=center, and is still the only useful way to center a table.

[edit] Making Templates

There are many template types, but those used for inserting and modifying text are the most numerous. Boxes feature next; whether they are information boxes, so-called user boxes, or simple text boxes, they all have common constructs. Some templates have dynamic functions, like drop-controls, though once their basic outlines are clear, they can be shaped for many purposes. At least one example of each will be considered.

Template making consists of writing functional code, Wikitext or HTML, or sometimes a mixture of both. The method is to test the code in the Sandbox, until the function works well. Then the options and the parameters can be assigned to the code. These are tested again, and if all is well, the block of code can be saved as a template.

In saving the template it as well to check whether or not there is an existing template of that name already. The simplest way to save a template is as follows. First, make sure that you are logged-on in a page of WikiBooks, to avoid making a template in the wrong project. Go to the search box at the left of the WikiBooks page, and enter the wording to find the as-yet unmade template. Assume here that the intended name is to be Caption. The line to type in the search window is just:

If the template is found, then the name is already taken, and another is needed. Assuming that the name is not found, then the search results window will state that it was not found and ask whether or not you want to make the page. Click the link to make the page.

The link opens a template editing page with the name of the template already listed as its address. Copy the code from your work in the sandbox, then paste it into the empty template page. In the line immediately following the last line in the code block, add the tags <noinclude></noinclude>. All text not intended to be a part of the template code, must be placed between these tags, as is the case for the template's description.

Finally, save the page by pressing the Save page button at the bottom of the page. The template is now made, and can be called into use with its given name. Go to the sandbox and test the features of the template.

[edit] Text Paragraphs

The code for a template need not start with any special character or symbol. The main consideration is that the code performs the required action, just as if it were typed directly onto the page. At the 'end of the code block, be sure to add the <noinclude></noinclude> tags as mentioned above.

All of the existing Wikitext and HTML code that can be used in a page can be used for a text template. The user of a page does not have access to the parts associated with styles, namely the heading of the web page and their style sheets. As a result, users are limited to modifying the parts of the page that are available, the text within the body of the page. Those familiar with web page design will know that the only remaining available method is to modify the page's text with in-line styles. Working methods use the <div></div> tags and the <span></span> tags, thanks to a feature of Wikitext that allows the use of HTML coding within it. CSS, (Cascading Style Sheet), properties and values are used within these tags to modify the text styles that would otherwise apply.

It is as well to point out here the difference in use for span and div in text templates. Span should be used to format text only, noting that any formats applied to the text will not extend beyond the last text character; div, on the other hand, will apply its formats to a rectangular block of text that extends across the page. the significance of this is that div is neater for changing background colors on the page. A comparative example can be seen in the Classes and Styles in Tags section of Class and Style Notes.

[edit] The Simplest Case

Before doing any formatting, consider the method for making a template from a simple block of text. Type a block of text, with all of its formats and page layout in place, then save the block as a template. It is as simple as that. Such blocks of text find use for test text, such as Lorem Ipsum, a well-known text block of fictitious content used by printers and others in laying out their work. To use such a template just type:

at any convenient place on a page to produce the text block. This block of text is not pre formatted with hard breaks, so it will wrap within the space where it is typed, and with the default text styles of the page.

[edit] Adding Styles

To modify text styles, for example, for the text This is the text, we first place the text within <span></span> tags, like this:

Then we construct a style statement within the first tag. This example makes the font Garamond, 20 points, colored red. It looks like this:

and the result will be:

Notice that there is still a closing arrow for the first tag; it is located at the end of the style statement.

Notice also that there are three style rules in the statement, separated by semi-colons; these are font-family:Garamond to set the face of the font, font-size:20pt to set the size of the font, and color:red to set the color of the text.

The style statement starts with the term style=, and the right hand side of the statement is entirely within double quotes.

The individual style rules consist of a property; the left part, and a value; the right part. The two parts are separated by a full colon. The format of a style statement is strict. If the format has an error within it then the whole statement could fail. Note that Wikitext could have been used on the text itself; for example, to produce italics, (double quotes), or text that is bold, (triple quotes). Wikitext acts in addition to the CSS styles, provided that there are no obvious conflicts. Several spans and style statements can be applied to produce quite complex results.

These tag sets can be nested; that is, one set of tags within another set. Beware of nested span tags, since there can be unexpected results. Say that an overall style is applied to several paragraphs using span tags. Within these paragraphs another span set is used to format one of the paragraphs differently. When this is viewed, at the point where the inside span closes, the styles will have reverted to the body text styles described by the style sheet, and not the intended outside style definition. This is perhaps because the first closing tag was wrongly interpreted as the end tag. The problem is avoided by using div tags for both, or at most by using span tags for only one of the formats.

Many properties exist to modify text. They consist of all of the text styles found in style sheets, namely those for fonts, padding, alignment, margins, borders, text colors, and backgrounds. CSS property lists and other material on Fonts and Text provide the source material for all such work. Although CSS properties and examples are listed primarily for style sheets, the properties and values themselves can be used on the page and in templates. The Study Work drop-box contains a useful code module for studying text properties. It contains most of the useful text entries and can be copied for study into the sandbox.

<div style="font-family:lucida handwriting;font-weight:bold;font-style:italic;font-size:12pt;color:blue;background:papayawhip;word-spacing:0pt;letter-spacing:0pt;line-height:1.8em;border:1px solid red;margin:10pt 100pt 10pt 50pt;padding:10pt 20pt 15pt 20pt;text-align:justify;"><center>Text Property Notes</center>

Both PADDING and MARGIN style-rule values use the sequence TOP, RIGHT, BOTTOM, then LEFT, i.e. clockwise starting at the top.

BORDER uses the sequence BORDER-WIDTH, BORDER-STYLE, then BORDER-COLOR for all of the four borders at once.   Other properties can address the four separately.

PADDING is the space around the text.   MARGIN is the space around the text block.   BORDER is the line that surrounds the text and its padding.

The code block contains the common text properties.

Experiment with the settings. </div>

Color Values for Study Work
Color values of the form eg:Background:RGB(255,202,149)

[edit] Parameters

Now, continue to make use of the red-text example. Although the code could be saved as a template just as it is, it would not be very useful since it consists only of fixed text. To introduce the notion of variable text chosen by the user, we need to make the text position in the code into a parameter.

Assuming that the basic code works correctly, the parameter brackets can be added. In the above text example there is only one parameter, the content to be formatted. Starting with the code above, just replace the text part so that the code line now looks like this:

Notice that the original text has now been replaced with:

The digit identifies the parameter as number one. It is also the name of the parameter. The word content is just a convenient label, though either the number or the label can be used for named parameters. If the user forgets to write any text in a parameter position, then the number of the parameter will appear on the page to remind of it. If the template had more than one parameter, a similar process could be applied, with a sequence of digits 2,3,4 ect, and adding a suitable label in place of content for each.

Saving it in the usual way completes such a template. Assuming that the template were to be saved with the name BigText then the entry to call it for use would be just:

Note that when a template has several parameters, the ones used can either be entered as named parameters, using the number or label with an equals sign, or as unnamed parameters, by ommitting the added names and just entering the text directly. The parameters should be all unnamed or all named but not a mixture of the two. If they are unnamed, the correct sequence must be maintained, and if they are named, then any sequence can be used. Number names and label names can be mixed without difficulty in a template call.

Although virtually any tags can be modified by adding a style statement to the leading tag, it is not to say that the work can always be made into a template. There is at least one exception that exists when it comes to making such a template. The <pre></pre> tags by their very definition cause a template's parameter code to be disregarded, and a different approach is needed. Instead of attempting to make a modified preformatted text template consider the use of Prettypre for a ready-made fancy version of these tags.

That is to say, it is possible to modify the <pre></pre> tags with inline styles, to make more interesting pre-formatted text, and it is possible to add the tags to text used as a template's parameter, but making a template from text bounded by pre-formatting tags will prove more difficult.

[edit] Options

For completeness, we can also add options to our basic red-text template example. Say we want to change the color of the text from time to time in our work. We could make another complete template for the new color or we could just add an option to the text coloring code. The new code looks like this:

Note that the entire property value (applies also to an attribute value), must be enclosed in triple curly brackets. Additionally, the value should be replaced with an option name / default value combination. In this case, if the user does not specify the color of text, it will be red in any case. If it is specified, (see the example below}, it can be changed to any color using the option tint= within the template call. Assuming that this template's name were BigText the template call for purple text would be, say:

Other options could be made in the same way, and similar techniques could be used regardless of the tags used for the template.

A knowledge of the different tags and access to lists of CSS properties allows considerable scope in template design.

[edit] Making Boxes

The following sections make box or table templates from Wikitext. They can also be made with HTML tables in the same way. When it comes to making such a template, wikitext is fine but when a table is needed to go into a template as its parameter, or part of its parameter, an HTML table should be used instead. The WikiBooks text Making Tables touches on HTML table structures, and explains how to use styles. It is assumed that the reader is familiar with these concepts in the text that follows.

[edit] The Box Structure

Boxes are essentially tables, in fact table cells. The CSS property list to format tables is extensive. Simple boxes make use of the table container, and one or two cells within it.

Apart from the table container, the other structures of a table include its rows, and cells. In the case below there are two rows, each with only one cell in them. Each part of a table has properties that affect it, and an example of typical table coding can be seen in the listing below.

Running this code in the sandbox produces the following:

If necessary, refer to the WikiBooks text Making Tables or the Wikipedia text Help-Table for detailed advice on making tables. Refer also to the drop-down box below for a listing of the commonly used table properties and their meanings.

CSS Properties Summary

Commonly used style rules for Wiki markup tables : There are two different sets of syle rules in use; a set of HTML attributes that is associated with the specific elements in tables, and a Cascading Style Sheet set, CSS properties, that are of more general use. Each of table, caption, row, and cell can be considered as separate elements in the more general building of tables. In each case where an attribute refers to the same format as a CSS property at the same level of the same element, the CSS property takes priority. A short list of each style-set is given for quick reference though these listings are by no means complete. A link has been provided at the bottom of this drop-list for a full CSS properties reference. HTML Attributes for Tables; use the format; attribute1=value1 attribute2=value2 attributeN=valueN Example Values Element* Purpose >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> align=left** left,right,center, T, R, C positions table or text** (plus justify for text) in immediate container valign=top**** top, middle, bottom R, C vertical alignment of TEXT border=1***** 0 for none, 1-7 T all borders at once cellpadding=5px 0 for none, px, pt, em T padding for all cell text with one entry cellspacing=5px****** 0 for none, px, pt, em T between all table cells with one entry height=100px*** px, pt, cm, em, % C cell height, though likely to increase with contents width=200px*** px, pt, cm, em, % T, C table or cell width colspan="2" number of columns. C joins cells rightwards rowspan="2" number of rows. C joins cells downwards >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> * T=Table, R=Rows, C=Cells of any kind ** Align in cells applies horizontal text-alignment. *** If not specified, the dimensions will adjust to the text. **** If not specified, the default is middle ***** Do not use border spacing styles with this attribute; only ''cellspacing''. ****** Do not use border styles with this attribute; only the ''border'' attribute. CSS Style Rules; use the format; style="property1:value1; property2:value2; propertyN:valueN;" Example Values Elements** Purpose >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> caption-side:top top,right,bottom, T only some browsers and left text-align:right left,right,center, T, R, C horizontal alignment of text and justify vertical-align:top top, middle, bottom C Vertical-align text or image background:yellow name, rgb, hex, T, R, C background color and transparent color:blue name, rgb, hex T, R, C text color >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> font-family:arial font or family name T, R, C font or font-list font-size:20pt px, pt, cm, em, % T, R, C text size font-style:italic italic, normal T, R, C text style font-weight:bold bold, normal T, R, C text weight >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> padding:5px 0 0 0 px, pt, cm, em T, C sequence top,right,bottom,left margin:0 0 5px 0 px, pt, cm, em, % T sequence top,right,bottom,left border:2px solid red* width, type, color T, C border on all four sides border-collapse: separate or collapse T cell spacing or not border-spacing:10px px, pt, cm, em T cell spacing all-round border-spacing:7px 5px px, pt, cm, em T in form horizontal vertical table-layout:fixed auto or fixed T expands with text or not width:400px px, pt, cm, em % T, C sets table or cell width height:200px px, pt, cm, em % T, C sets table or cell height >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> line-height:2em*** px, pt, cm, em T, R, C height between text lines letter-spacing:5px px, pt, cm, em T, R, C space between text characters word-spacing:10px px, pt, cm, em T, R, C space between words of text white-space:pre-wrap browser issues T long line text wrapping,(soon) >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> * Separate border properties also exist; border-top,border-right,border-bottom, and border-left. ** T=Table, R=Rows, C=Cells of any kind *** Line-height applies only to Block Level Elements; e.g. <blockquote>, <center>,<div>, <h1-h6>, <hr>, <ol>, <p>, <pre>, <table>, and <ul>. Line-height fails within a <span>. Style Expression Spacing Rules for WIKITEXT Main Points to Avoid Line breaks are not permitted within style expressions. Let the software do the wrapping. Spaces are not permitted immediately before colons or semi-colons. These have Latitude Space between the various table symbols and the word style is OK. Space around any equals symbol is OK. Space between the style rules and their outside parentheses is OK. Spaces after colons and semi-colons are OK. A semi-colon can be placed immediately after the last style rule. In addition Compound values like '2px solid black' must be space-separated. HTML attributes must be separated from CSS style expressions with space. HTML element line-spacing is permitted but not for Wikitext elements. Wikitext and HTML table elements can be indented for clarity. Long lines in code LISTINGS can wrap only if there are some spaces added. Combining the two style rule methods: It is possible to mix the attributes with CSS styles provided that they keep to their own local formats. That is to say; nothing with an equals sign between the quotes, and no CSS rules outside of them. Note that the Wiki apostrophe codes and various HTML tags can still be used directly on text. An example of mixed styles is shown below. {| border=1 width=300px style="background:lightyellow;color:maroon;" | height=100px| <u>''First''</u> cell | style="background:black;color:white;" width=200px align=center|''Second'' cell |} Priorities for Inline Styles. When there is a contest at the same level between an attribute and a style, the style will have priority. When two similar properties exist in a style expression, each having a different value, the second value will be taken. When there are two entire style expressions in the same table line, the second is ignored. The same situation appplies for two similar attributes in a line; the second is ignored. Refer to CSS Reference List for more detailed descriptions of properties and values.

For now, it will suffice to note only that:

• A table is enclosed in these symbols: {| |}
• A new row is created with the symbols: |-
• A cell within a row is created with the symbol: |
• Style statements can exist at the table, row, or cell levels.
• An additional pipe symbol separates a cell's styles from its text. |
• Starting tables, rows and cells on new lines avoids many problems in templates.

Follow the reasoning in this description from the code.

The table container has background, width, margin, and border properties, and the align attribute assigned.

• Background;sets the background color for the whole table.
• Width; sets the overall width of the table
• Margin; removes margins of the table.
• Border: Sets the thickness, type, and color of the table border, all in one.
• Align: Permits the box to be placed on the page at left, right, or center.

The cell in the first row has text-align,padding, and the heading text.

• Text-align;positions the cell text horizontally at the center.
• Padding; sets the padding within the first cell for the box heading text.
• The Heading Text; is made bold with Wiki mark-up.

The next row has text-align. For properties like this that apply also to the cells within the row, some space can be saved in their use.

• Text-align;justifies text in the bottom cell - the main content.

The content cell has padding, and the content text.

• Padding;sets the spacing around the content text.
• The content text; is the main text for the box template.

Other properties could be specified for this textbox, for example, for the details of the fonts to use, but there is enough here for this example.

[edit] Parameters and Options

It is intended to provide three options along with the two parameters. The options are to be background,width, and align. The parameter names are to be 1 and 2, with the labels heading and content.

The options and parameters have been added to the code below:

Parameters have been made in place of the heading and content text. The formats for parameters one and two are:

Each parameter format consists of a parameter label,( heading or content), a pipe, symbol,|, and the true name of the parameter, (1 or 2). In each case, both the parameter name and the entire parameter expression are enclosed in triple curly brackets. {{{}}}.

Options have been made for the properties background, width, and align. The formats are :

Notice that the format of the bracketing is similar to the examples given in the making of text templates, and that the same strict format is used to identify the options and parameters.

A parameter can use the option format too. When a parameter does so, it must use the named parameter style in the template call. The advantage of such a parameter is that it can have any default value, including an image. The disadvantage of using the option format for a parameter is that the highly conspicuous numbered reminder is lost. You will recall that the more formal parameter style gives a parameter number as the default.

The template can be saved in the usual way. Assuming that the template were saved with the name Textbox, then it could be called for use by typing the following:

The variations in boxes are considerable. By adjusting the table structure, it is possible to add images and other effects. Most of the information boxes within Wikipedia and WikiBooks have a table basis for their construction.

[edit] Making Drop Controls

Drop-boxes save space on the page and can be used for both text and for images. Within WikiBooks these boxes are dynamic, and clicking the link on top drops the box to reveal its content; clicking it again, closes it.

There are some restrictions in their use; they cannot easily contain a table constructed in Wikitext. They can however, contain a styled HTML table. On the other hand, they have all of the properties available to them that are used in tables, both for their headings and their content areas, so they can be styled to a considerable extext. See the template Dropimage for an example of a drop-control template.

[edit] The Basic Drop-Box

The basic code for a drop-box and the result is just:

<div class="NavFrame">
<div class="NavHead">Title</div>
<div class="NavContent">
Hideable content
</div>
</div>

The above code produces a drop-box that extends across whole width of the page, and has a number of formats generated by the classes Navframe, NavHead, and NavContent. NavFrame contains the other two sections, NavHead refers to the panel with the link, and NavContent refers to the text box within the drop itself.

This structure could be placed at the left or the right of the page by using the Float property, but not at center page. To avoid this restriction it is placed in a table cell, so that the table acts as its container. A table can be placed at the center position provided that the table's side-margins are set to none. The revised shell and its appearance becomes:

{| align=center width=300px
|<div class="NavFrame">
<div class="NavHead">Title</div>
<div class="NavContent">
Hideable content
</div>
</div>
|}

By default, the contents are hidden when the page is loaded. To have the contents shown by default, add the class "selected" to the NavFrame div:

<div class="NavFrame selected">
<div class="NavHead">Title</div>
<div class="NavContent">
Hideable content, shown by default
</div>
</div>

Various style changes are made in the next section.

[edit] Modifying the Styles

Changes in layout can be obtained by changing styles. The following code has been revised to add margins, padding, colors, and font properties.

Many variations in styles are possible. This set of styles produces this appearance:

Image Example Hawthorn

Refer to the code module above. Style statements have been added to each of the <div> tags in the basic shell structure, and to the top line of the table code. These style statements take the same form as in the box-making example. Notice however,that some style rules have a slightly different format here. Instead of a semi-colon separator, HTML attributes use a space; in fact, they also exist outside of the CSS style expression and use an equals sign between attributes and their values. Both of these kinds of style rules are valid, though they should not be mixed within the parentheses, and the colon-separated kind cannot work outside of them.

The background colors of the table and the heading have been given the same value; the background color of the content is different. The fonts can be different for the two sections, and each has separate text padding. A margin has been set for the content.

Note that the colored content space is visible as a surround in the image example. The image should not use a thumbnail or frame, but just image details, and a size; it is best centered within the image code itself. The caption has been added with a hard break to place it below the image, and Wikitext mark-up has made the caption in italics. The content space has justified text.

Many other properties could be added, but these will suffice for this example. The general idea is to use the template without having to always type the options. This means choosing the property values and their defaults carefully. Then hopefully, the options will hardly be needed at all, but will be still be available for exceptions in the work. A well chosen set of defaults makes light work in the template's use.

[edit] Options and Parameters

It is proposed here to set a number of values as options, and to set the two parameters Heading and Content. The process for doing so uses the same formats as the box-making example.

Note that a coding was devised for the option names. It was necessary since many of the option names would otherwise be duplicated.

This code could be saved as a template in the usual way, though this example code has already been saved as Bluedrop. The template is called for use as follows:

The result is:

The three example types given in the above sections will hopefully introduce the reader to the making of templates. Bear in mind that there are many aspects of templates not discussed here; for example, the notions of conditional behaviour, loops, and defaults that themselves run as templates. Further reading about templates can be found in the links below.

[edit] See Also

• Sandbox  : The WikiBooks editing and test window
• Help:Template  : WikiBooks main templates article
• Making Tables  : WikiBooks table text
• Help-Table  : Wikitext methods for tables
• All Templates Namespace  : WikiBooks templates alphabetical list
• Templates Category  : WikiBooks templates listed by category
• CSS Programming  :Helpful for CSS context
• CSS Reference List  : An external CSS Properties Reference
• Web Colors  : A WikiBooks article on web colors
• Template:Codebits  : A template with notes on the same page
• Template:Dropimage  : A multi optioned drop-box template
• Template:Thetop :The most useful of the top section templates, for filling the space.
• Template:Plainlist  : A simple text box template
• Template:Lorem ipsum : Test paragraph template
• Class and Style Notes  : About Wikitext classes and styles, as opposed to style sheets
• Anatomy of a Template  : Wikipedia text with notes on templates as defaults, and conditionals.