Style Playground
The style playground is used to demonstrate how different elements of your template are formatted and can be used as a reference when coding this template into your site.
View the source code to see how each element is coded in the XHTML.
Headings
The following are examples of header formats:
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Text
This paragraph shows how all text encapsulated only within <p></p> tags will appear.
More text examples are as follows:
This is emphasised text
This is strong text
This is an acronym
This is deleted text
This is a block of code
"This is a quote" - John Smith
Images
The following are examples of image formats:
Standard inline image format. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tortor non dolor. Donec nulla libero, ullamcorper sed, consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
A left aligned image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tortor non dolor. Donec nulla libero, ullamcorper sed, consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
A right aligned image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tortor non dolor. Donec nulla libero, ullamcorper sed, consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
A left aligned, linked image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed viverra tortor non dolor. Donec nulla libero, ullamcorper sed, consequat dignissim, luctus blandit, sapien. In ante. Proin aliquam odio ut sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lists
Unordered list
- List item example
- List item example
- Sub list item example
- Sub list item example
- List item example
Ordered list
- List item example
- List item example
- Sub list item example
- Sub list item example
- List item example
Definition list
- Definition title
- Definition description
- Definition title
- Definition description
Tables
Tables are used to format data. It is not recommended to use tables for layout purposes.
| Table header | Table header | Table header | Table header |
|---|---|---|---|
| Cell data | Cell data | Cell data | Cell data |
| Cell data | Cell data | Cell data | Cell data |
| Cell data | Cell data | Cell data | Cell data |
| Table header | Cell data | Cell data | Cell data |
|---|---|---|---|
| Table header | Cell data | Cell data | Cell data |
| Table header | Cell data | Cell data | Cell data |
| Table header | Cell data | Cell data | Cell data |
Forms
Custom styles
This section demonstrates all elements that can be styled differently to the above when adding a class or id attribute to the element.
List of links
This is a handy list of formatted links used on the homepage submenu. Just create an unordered list with a links class and add links as normal.
List of images
This is a handy list of images used on the homepage submenu. Just create an unordered list with an images class and add images as normal.
Info paragraph
If you add an info class to any <p> tag, it will be styled as follows:
This is my info paragraph
You will notice this styling has been used on the index page for blog post information. Using the cmt class on links inside the info paragraph will align them to the right, as shown below:
Posted: 12/10/07 @ 12:18pm
Comments (0)