[dropcap] You can create some beautiful content by using some simple HTML elements. Fontaine theme offers some neat styles for all HTML elements and a great set of CSS classes to style your content. Basic HTML is very easy to learn and this small guide shows you how to use all styles using rokCandy shortcodes.[/dropcap]
[h2 dotted] Basic HTML Elements [/h2]
Here is a short demonstration of text-level semanticts. The <p> element creates a new paragraph. It will have some space before and after itself. To turn your text into hypertext just use the <a> element.
[row][column one-half]
This is an H1 Heading
This is an H2 Heading
This is an H3 Heading
This is an H4 Heading
This is an H5 Heading
This is an H6 Heading
[/column]
[column one-half]
H1 with a dotted line
H2 with a dotted line
H3 with a dotted line
H4 with a dotted line
H5 with a dotted line
H6 with a dotted line
[/column][/row]
[h2 dotted] Text-level semantics[/h2]
You can emphasize text using the <em> element or to imply any extra importance the <strong> element. Highlight text with no semantic meaning using the [mark][mark
] element[/mark
][/mark]. Markup document changes like inserted or deleted text with the [del][del
] element[/del
][/del] or [ins][ins
] element [/ins
][/ins]. To define an abbreviation use the [abbr title=”Abbreviation Element”][abbr
] element [/abbr
][/abbr] and to define a definition term use the [dfn title=”Defines a definition term”][dfn
] element [/dfn
][/dfn].
[h2 dotted]Simple Unordered List[/h2]
[row][column one-half]
[list bullet-1][li]Lorem ipsum dolor bullet-1
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list bullet-2][li]Lorem ipsum dolor bullet-2
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list bullet-3][li]Lorem ipsum dolor bullet-3
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list bullet-4][li]Lorem ipsum dolor bullet-4
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[/column]
[column one-half]
[list bullet-5][li]Lorem ipsum dolor bullet-5
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list bullet-6][li]Lorem ipsum dolor bullet-6
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list bullet-7][li]Lorem ipsum dolor bullet-7
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list bullet-8][li]Lorem ipsum dolor bullet-8
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[/column][/row]
To use the bullet list style create a list in the following format
[list bullet-1][li]...[/li][li]...[/li][/list]
[h2 dotted]Special Unordered List[/h2]
[row][column one-half]
[list special-1][li]Lorem ipsum dolor special-1
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list special-2][li]Lorem ipsum dolor special-2
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list special-3][li]Lorem ipsum dolor special-3
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list special-4][li]Lorem ipsum dolor special-4
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list special-5][li]Lorem ipsum dolor special-5
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list special-6][li]Lorem ipsum dolor special-6
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[/column]
[column one-half]
[list special-7][li]Lorem ipsum dolor special-7
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list special-8][li]Lorem ipsum dolor special-8
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list special-9][li]Lorem ipsum dolor special-9
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list special-10][li]Lorem ipsum dolor special-10
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list special-11][li]Lorem ipsum dolor special-11
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[list special-12][li]Lorem ipsum dolor special-12
[/li] [li]consectetur adipisicing elit[/li] [li]sed do eiusmod tempor[/li] [/list]
[/column][/row]
To use the special list style create a list in the following format
[list special-1][li]...[/li][li]...[/li][/list]
[h2 dotted]Quotations and Code[/h2]
Inline quotations can be defined by using the <q> element
.
[blockquote author=””]The blockquote element defines a long quotation which also creates a new block by inserting white space before and after the blockquote element. This is an emphasis within the blockquote[/blockquote]
To use the blockquote style create a paragraph in the following format
[blockquote author="name"
]some content here [/blockquote
]
To define a short inline computer code use the <code> element
. For a larger code snippet use the <pre> element which defines preformatted text. It creates a new text block which preserves both spaces and line breaks.
pre { margin: 15px 0; padding: 10px; font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 18px; white-space: pre-wrap; }
Use the <small> element for side comments and small print.
[h2 dotted]Block Numbers and Events[/h2]
[row][column one-half]
[block-number]1[/block-number] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[block-number]2[/block-number] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[block-number]3[/block-number] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
[/column]
[column one-half]
[event 03:dec] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.[/event]
[event 12:apr] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.[/event]
[event 30:may] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.[/event]
[/column][/row]
To use the block number style create a paragraph in the following format
[block-number]{number}[/block-number]
To use the event-time block style create a paragraph in the following format
[event 03:dec] your description here[/event]
[h2 dotted]Useful CSS Classes[/h2]
Here is a short demonstration of all style related CSS classes included in this theme.
[h2 dotted]Highlight Content[/h2]
[dropcap] Drop caps are the first letter of a paragraph which are displayed bigger than the rest of the text. You can create a drop cap using the CSS class dropcap
. To emphasize text with some small boxes use <em> element with the CSS class box
.[/dropcap]
[box content]This simple box is intended to group large parts of your content using the CSS class [box content
]…[/box
].[/box]
[box note]This is a simple box to highlight some text using the CSS class [box note
]…[/box
].[/box]
[box info]This is a simple box with useful information using the CSS class [box info
]…[/box
].[/box]
[box warning]This is a simple box with important notes and warnings using the CSS class [box warning
]…[/box
].[/box]
[box hint]This is a simple box with additional hints using the CSS class [box hint
]…[/box
].[/box]
[box download]This is a simple box with download information using the CSS class [box download
]…[/box
].[/box]
Use the CSS class dotted
to create a dotted horizontal rule.
[h2 dotted]Tables[/h2]
Create a zebra stripped table using using the CSS class zebra
.
Table Heading | Table Heading | Table Heading |
---|---|---|
Table Footer | Table Footer | Table Footer |
Table Data | Table Data | Data Centered |
Data Bold | Table Data | Data Centered |
Table Data | Table Data | Data Centered |
[h2 dotted]Definition Lists[/h2]
Create a nice looking definition list separated with a line by using the CSS class separator
.
- Definition List
- A definition list is a list of terms and corresponding definitions. To create a definition list use the <dl> element in conjunction with <dt> to define the definition term and <dd> to define the definition description.
- Definition Term
- This is a definition description.
- Definition Term
- This is a definition description.
- This is another definition description.
[h2 dotted]CSS3 Tags[/h2]
Blog Tags are used to highlight keywords or search words in a blog or site content. These tags have been designed with pure CSS3 and additional fallback for older browsers. Need more styles? Get them here
[tag url=”#”]Joomla[/tag] [tag url=”#”]Wordpress[/tag] [tag url=”#”]html[/tag] [tag url=”#”]envato[/tag] [tag url=”#”]themeforest[/tag] [tag url=”#”]codecanyon[/tag] [tag url=”#”]html5[/tag] [tag url=”#”]css3[/tag]
To use the CSS tags in your content use the following format:
[tag
url="{url}"]{your tag}[/tag
]
[h2 dotted]Toggles[/h2]
Toggles are a nice way to minimize hidden sections on a page by only showing titles of the hidden text while maximizing on space. This allows the user to only view what he/she is interested in with a sleek slide down/up of the hidden content. A good example on how to use them is FAQs.
[toggle state=”close code” title=”closed toggle”][toggle
state=”” title=”your title”]your hidden text here[/toggle
][/toggle]
[toggle state=”open code” title=”open toggle”][toggle
state=”open” title=”your title”]your hidden text here[/toggle
][/toggle]
[h2 dotted]Buttons[/h2]
[h3 dotted]Normal Button[/h3]
[button href=”#”]normal[/button] [button href=”#”]default[/button] [button href=”#”]This is an expandable button[/button]
To use the buttons in your content use the following format:
[button
href="#"]button text[/button
]
[h3 dotted]Arrow Button[/h3]
[button arrow href=”#”]normal[/button] [button arrow href=”#”]default[/button] [button arrow href=”#”]This is an expandable button[/button]
To use the buttons in your content use the following format:
[button arrow
href="#"]button text[/button
]
[h3 dotted]Color Button[/h3]
[button color href=”#”]normal[/button] [button color href=”#”]default[/button] [button color href=”#”]This is an expandable button[/button]
To use the buttons in your content use the following format:
[button color
href="#"]button text[/button
]
[h2 dotted]Forms[/h2]
Create a clearly arranged form layout with fieldset boxes using the CSS class box
.