Editing Wikitext/Templates Ready to Use

This page introduces a few existing templates, and others can be found:

• To make a template or modify one, refer to Templates A101.
• To search for templates alphabetically within Wikibooks, (not Wikipedia), follow the link to the All Templates Namespace.
• To search for templates organised by category, follow the link to Category:Templates.
• To search for a template by name, for example dropimage, then enter the following in the search box on the left of any Wiki page and select go:

Writers are encouraged to add links for useful Wikibooks templates, perhaps in tabular form within these or other sections.

Layout Options; template Thetop Pages each have certain similarities. Most of the time the text extends across the page and the colorings match the default set. Sometimes a more complicated layout is needed, and the setting of styles every time becomes laborious. This becomes especially tedious when there are lots of spaced elements such as tables, lists, images, and text. This template, within the perimeter border, has both page-wide sections and panels across the page. There are many options for each of its five parameters and configuring it is straightforward. This text is written in the leader section of the template Thetop, and the other sections below include three boxes across the page and a trailer section, similar to the leader.
<table border=1> <caption>Caption</caption> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>[[image:crocus_4.jpg|75px]]</td> <td>D</td> </tr> </table>	Caption Heading 1 Heading 2 A B D	The sections are adjustable Widths can be changed to remove a section or extend another. Padding can be changed, and colors too. Font details can be changed also. To make an empty section, enter a non-breaking space.
The width of this building block matches the top section template exactly. In fact, if it is preferred, this template could be used for a top section. By the use of such a building block, greater consistency is afforded, and the addition of background colors allows a more interesting panelled page. Note that a template is not needed to simply apply a more interesting color to a page. Writers and editors with this in mind need only place all of their page text within styled HTML ''div'' tags. The styling of tags is covered in Typical 'in-line' block formats, and if necessary, an example can be found near the top of the mark-up text for this page. An example of the template's use can be seen throughout the page Tables.

Sometimes a page gets a bit cluttered. Much detailed information is best tucked away where it can be accessed when needed, but where it does not detract from what is being said.

For this purpose there are templates such as Dropimage or FullWidthDrop. The quoted example presents a neat box with a heading and a link. The link toggles; left-clicking it the first time drops the box to show the contents. Clicking the link again closes the box. The amount of content can be considerable. Notice that whereas Dropimage can be narrower than the page, the template FullWidthPage is made to occupy it fully at all times.

Despite their names, both boxes also can contain text or other elements, including other templates. For Dropimage and FullWidthDrop, HTML tables are preferred to Wiki ones.

Examples of the use of Dropimage are shown below for an image, for text and for an HTML table. Further examples of its use can be seen throughout the Editing Wikitext series.

Image Example A Purple Crocus

CSS Properties Summary Commonly used style rules for Wiki markup tables : There are two different sets of style 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 is 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 rightward rowspan="2" number of rows. C joins cells downward >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> * 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 mix-blend-mode:multiply mode T blend mode >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 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 applies for two similar attributes in a line; the second is ignored. Refer to CSS Reference List for more detailed descriptions of properties and values.

සැකිල්ල:Lightcolors

Note this frame-less caption.

Images cannot include captions unless the image syntax makes use of a frame or a thumbnail. Borders tend also to be of a standard format and cannot ordinarily be customised.

These limitations are overcome by using the set of templates Noframeleft, Noframeright, Noframecenter, and Noframenone. A brief inspection of their names shows that there one for each of the standard image positions. These templates also have a number of options.

An example of the captioning is given with the image on the left, and can also be seen on the page The Quick Course.

Users of Internet Explorer will find that the mouseover functions do not work for them.

Images are usually fixed on the page but there is a technique that allows two images to occupy the same space. An example is shown on the right. When the mouse moves over the image, a different image is shown instead. It is designed by persons more clever than me as a template. The whole thing allows the use of the standard image options, and the template is called HoverImage.

HoverImage's first two parameters are the file names of the two images to use; the first is the default image and the second is the alternative. There are separate caption options too; they are written in the same sequence as the image names. The other options like position, size, and type of border can be added and apply to both images at once. The template can be used in places where a normal image syntax line is used. The code to make the hover-image on the right is just:

If the template is used for images with different shapes, some improvement is achieved by setting the height exactly and by setting the base dimension as some impossibly high value; in this way both images will be set to the intended height. Note also that the entire template can become the content of the Dropimage template, and still works well; in this event set the image option to center.

The unwanted white border in the image example is not a fault in the template but is a consequence of using images with frames on a colored page background; it is a bug. To avoid this, simply use a frame-less image. If a caption is needed as well then use the HoverImage template as the image parameter of e.g., Noframeleft, to make a frame-less image with a single caption. The image on the left was made in this way. The coding for mouse-hover frameless images with a single caption is just:

	This box is made with the template Technote and is intended for use at certain points within a technical page, possibly for excessively terse points that most choose to ignore. Since the heading can be changed also, it can take on any useful form for which the green tick-mark image is suitable.
Technical Note:

This box is made with the template Caution and could be used in pages to focus attention on possible hazards or difficulties needing more careful attention. It is similar in that the heading can be rephrased; thus it could also be used to indicate an error, or any form for which the red cross is appropriate.

There are many information boxes available within Wikibooks. The majority of them find use for administrative comments and reminders. The background color and the text alignment are options. As is clear from the above examples, the text can also contain hyperlinks.

The above example shows another box, this time made with the template Block to emphasise the code lines that need to be learned for some context or another.

It uses a Courier font for programming and mark-up code descriptions. It is intended for single lines though it will expand, and background color, font, alignment, and other elements are options.

At a more general level, the template can be used for page-building. When one instance of the template immediately follows another, color banding becomes possible. Since it is based on the div tag it has very few differences from the main page.

A version called Blockwrap also exists to be contained in sections of text that wrap left or right. This was needed to overcome a bug, where divs insist on using the full width of a page.

The template Block stacks neatly top to bottom for page-building like this:

Although this set of templates lacks elegance it has been found to save time over the more laborious method that involves a custom table. The template call for the above example uses a custom width and position and looks like this:

As will no doubt be known, every heading in a Wiki is listed as a link in the table of contents.

Sometimes, there is no need for a table of contents entry, but a heading is still needed. This is one way to avoid too many levels within the contents box. For this purpose, the set of six templates Hiddenh1 through Hiddenh6 has been made to imitate the heading styles.

For example, the use of Hiddenh3 corresponds to a level three heading in Wiki, and an h3 heading in HTML. Use them, for example, within drop-boxes, where otherwise closed boxes might cause listing confusion. Because they are not taken formally as listings, it will not be possible to link to such headings as would otherwise be the case.

drop capital is this big letter at the start of the paragraph. It is sometimes used in art work or to start stanzas in prose, though at the most general level, it finds use where there is no formal heading style. It is a form of text emphasis, in that it directs attention to the start of a section.

The example uses the template Drop. It is only the first letter that is contained in the template call, and in every case, the next text character, (ignore any space), is typed hard left against the template's closing brackets.

For those who need a more complicated format of their own, it will be necessary to make one, since as far as is known, this is the only one on file. A point worth noting is that drop capitals are unlikely to line up vertically, unless a mono-spaced font is found for the purpose. For this reason they tend to be used far enough apart to avoid the discrepancy.

While working on a page there is often some CSS code or color format that needs reference. To avoid the need for page-searching a number of templates containing such information can be placed adjacent to the work, on the page or sandbox, ready for use. The lists are compact since they are hidden in drop-boxes until they are needed. The list so far includes these:

• Tablestyles; a list of CSS styles and HTML attributes of particular use for making tables. The text also contains notes on code spacing and priorities.
• Lightcolors; a list of selected pastels and light color names, with their RGB and HEX values.
• Mediumcolors; a list of medium density color names and their codes.
• Darkcolors;a list of dark colors and their codes.
• Greycolors;a density spaced list of greys with their RGB values.
• Flowers;a gallery of high quality flower thumbnails for quick image-finding.