Editing Wikitext/Templates Ready to Use
From Wikibooks, the open-content textbooks collection
[edit] Introduction
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.
[edit] Page Top Sections
|
Help with the Top Section; template Textontop
The writing of WikiBooks pages gives a rapid education on the need for effort-saving methods. This becomes all the more obvious when something a little different is needed. The format used for this top-section is made with the template, Textontop. A border has been applied to show the template's boundary, but it is optional, and would not normally be used for the usual WikiBooks colors. This layout removes the white-space that usually exists to the right of a page's table of contents. Notice that this text starts right at the top. The template adds the table of contents automatically. Options are available, and a background color can be added for other layout plans. An example of this template's use can be seen as the top section of the page Adjusting Brakes. |
In the event that the top section is to hold images, or images and text, there are two other templates for that purpose. Because only one table of contents can exist on a page, these other templates cannot be demonstrated on the same page as Textontop. They are:
- Image2ontop allows a table of contents and two images or text in place of any of the images.
- Image3ontop allows a table of contents and three images or text in place of any of the images.
[edit] Page Building Blocks
|
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> |
|
The sections are adjustable
|
||||||
| 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. |
||||||||
[edit] Hidden Contents
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 the templates Dropimage and DropBox. Both present 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. The amount of content can be considerable. Clicking the link again closes the box.
Despite their names, both boxes also can contain text or other elements, including other templates. For Dropimage, HTML tables are preferred to Wiki ones. They are useful for making writers tools, where they can sit in the closed state in the sandbox until needed for reference.
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 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 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.
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.
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>.
Main Points to Avoid
These have Latitude
In addition
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
|}
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. |
|
Light Colors
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
[edit] Image Templates
|
| 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.
HoverImage as a thumbnail.
HoverImage as a thumbnail.
|
|
| Gerbera:Hover for the Chrysanthemum. HoverImage used within Noframeleft. |
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:
[edit] Information Boxes
 |
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. |
| Please be careful: |
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.
[edit] Highlight Blocks
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:
[edit] Banded Bullet Points
|
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:
{{dul|first point}}
{{lul|second point}}
{{dul|third point}}
etc...
}}
[edit] Hidden Headings
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.
[edit] Drop Capitals
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.
[edit] Writers' Data Lists
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.
Other Pages
|
