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 templateThetop, and the other sections below include three boxes across the page and a trailer section, similar to the leader.
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 inTypical '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 pageTables.
Sometimes a page gets a bit cluttered. Muchdetailed 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 asDropimage orFullWidthDrop. 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 theEditing Wikitext series.
Image Example
A Purple Crocus
CSS Properties Summary
Commonly used style rules for Wiki markup tables :
There aretwo 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 oftable,caption,row, andcell can be considered as separateelements 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.
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 TEXTborder=1***** 0 for none, 1-7 T all borders at oncecellpadding=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 widthcolspan="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.
Example Values Elements** Purpose >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>caption-side:top top,right,bottom, T only some browsers and lefttext-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 imagebackground:yellow name, rgb, hex, T, R, C background color and transparentcolor:blue name, rgb, hex T, R, C text colormix-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 sizefont-style:italic italic, normal T, R, C text stylefont-weight:bold bold, normal T, R, C text weight>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>padding:5px 0 0 0 px, pt, cm, em T, C sequence top,right,bottom,leftmargin:0 0 5px 0 px, pt, cm, em, % T sequence top,right,bottom,leftborder:2px solid red* width, type, color T, C border on all four sidesborder-collapse: separate or collapse T cell spacing or notborder-spacing:10px px, pt, cm, em T cell spacing all-roundborder-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 linesletter-spacing:5px px, pt, cm, em T, R, C space between text charactersword-spacing:10px px, pt, cm, em T, R, C space between words of textwhite-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 arenot permittedwithin style expressions. Let the software do the wrapping.
Spaces are not permitted immediatelybefore colons or semi-colons.
These have Latitude
Space between the various table symbols and the wordstyle is OK.
Space around anyequals symbol is OK.
Space between the style rules and theiroutside parentheses is OK.
Spacesafter colons and semi-colons are OK.
A semi-colon can be placed immediatelyafter the last style rule.
In addition
Compound values like '2px solid black'must be space-separated.
HTML attributesmust be separated from CSS style expressions with space.
HTMLelement line-spacing is permitted but not for Wikitext elements.
Wikitext and HTML table elementscan be indented for clarity.
Long lines in code LISTINGS can wraponly 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 outsideof 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.
When there is a contest at the same level between an attribute and a style, thestyle will have priority.
When two similar properties exist in a style expression, each having a different value, thesecond value will be taken.
When there are twoentire style expressions in the same table line, the second isignored. The same situation applies for two similar attributes in a line; the second is ignored.
Refer toCSS Reference List for more detailed descriptions of properties and values.
Images cannot include captions unless the image syntax makes use of aframe or athumbnail. Borders tend also to be of a standard format and cannot ordinarily be customised.
These limitations are overcome by using the set of templatesNoframeleft,Noframeright,Noframecenter, andNoframenone. 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 pageThe Quick Course.
Mouse-over Images
Users of Internet Explorer will find that the mouseover functions do not work for them.
Gerbera:hover for more HoverImage as a thumbnail.
Chrysanthemum:the alternative 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 allowstwo 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 calledHoverImage.
HoverImage's first two parameters are thefile 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 likeposition,size, andtype 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:
{{HoverImage|Big yellow.jpg|Red chrysanthemum.jpg|right|thumb|200px|Gerbera:''hover for more<br />HoverImage alone as thumbnail.'' |Chrysanthemum: ''the alternative<br />HoverImage alone as thumbnail.''}}
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 thecontent of theDropimage template, and still works well; in this event set the image option tocenter.
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 imagewith a single caption. The image on theleft was made in this way. The coding for mouse-hover frameless images with a single caption is just:
{{noframeleft|margin=10px|cwidth=200px|{{HoverImage|Big yellow.jpg|Red chrysanthemum.jpg|200px}}|Gerbera:''Hover for the Chrysanthemum. HoverImage used within Noframeleft.''}}
This box is made with the templateTechnote 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 templateCaution 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 templateBlock 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 thediv tag it has very few differences from the main page.
A version calledBlockwrap also exists to be contained in sections of text that wrap left or right. This was needed to overcome a bug, wheredivs insist on using the full width of a page.
The templateBlock stacks neatly top to bottom for page-building like this:
The usual bullets make use of the page formats as its defaults.
These bullet points are banded and although the coloring normally extends across the entire available width, both the width and position of the container are options.
They are clumsy by template standards since they need the use of the three separate templatesContainer, and within it a stack ofDul, andLul to make it work.
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 templatesHiddenh1 throughHiddenh6 has been made to imitate the heading styles.
For example, the use ofHiddenh3 corresponds to alevel three heading in Wiki, and anh3 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 templateDrop. 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.
