Home  /  Elements

Theme elements

Headers, paragraphs, lists, special notification boxes, tables, css3 buttons and other typography arrangements are illustrated on this page.

Te nam numquam singulis, nec tacimates ocurreret id. Nulla soleat adipisci mei no. Vis mazim admodum necessitatibus ne, his fierent recusabo necessitatibus ut. Odio gloriatur quaerendum id vix.

1. default unordered and ordered lists

Unordered lists
  • mel eruditi meliore
  • solet partiendo repudiandae
  • vis laudem saperet
Ordered lists
  1. mel eruditi meliore
  2. solet partiendo repudiandae
  3. vis laudem saperet
code snippets for unordered and ordered lists
<ul>
	<li>mel eruditi meliore</li>
	<li>solet partiendo repudiandae</li>
	<li>vis laudem saperet</li>
</ul>

<ol>
	<li>mel eruditi meliore</li>
	<li>solet partiendo repudiandae</li>
	<li>vis laudem saperet</li>
</ol>

Obviously, you can create these lists using default wordpress list editor(it’s not needed to create the lists by writing HTML code).

2. theme specific custom lists

favourite list
  • mel eruditi meliore
  • solet partiendo repudiandae
  • vis laudem saperet
check list
  • mel eruditi meliore
  • solet partiendo repudiandae
  • vis laudem saperet
arrow list
  • mel eruditi meliore
  • solet partiendo repudiandae
  • vis laudem saperet
add list
  • mel eruditi meliore
  • solet partiendo repudiandae
  • vis laudem saperet
shortcode usage
[custom_list type="fav" indent="16px"]
<ul>
    <li>mel eruditi meliore</li>
    <li>solet partiendo repudiandae</li>
    <li>vis laudem saperet</li>
</ul>
[/custom_list]

This code should be used in the HTML tab of your wordpress editor, since it uses HTML list tags(ul and li’s). You can choose between fav, check, arrow and add in the type parameter of the shortcode.

3. highlighted box content

This is a simple box that should be used to emphasize a information message.
This is a simple box that should be used to emphasize a confirmation message.
This is a simple box that should be used to emphasize a warning message.
This is a simple box that should be used to emphasize an error message.
shortcode usage
[message_box type="information"]highlighted text[/message_box]

You can choose between information, confirmation, warning and error options for type parameter.

4. Code snippet

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>project title</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Goldenworks">
	<!-- Date: 2012-06-12 -->
</head>
<body>

</body>
</html>

5. A simple, yet effective and flexible table

Prodesset Ornatus Interesset Comprehensam
Eam hinc Prompta oportere Deterruisset Lorem ipsum
Appellantur Ornatus Interesset Scripserit
Prodesset Aeterno Homero Eam hinc
Vivendum 442 eam 6783 set 139 euismod

To create a table like this, all you have to do is to paste in the HTML tab of your wordpress editor a normal and clean table code with no classes at all.

6. Toggle content example

get the code
Sit et cibo propriae, est audiam copiosae ea, sit et legimus propriae probatus. Ut meis accumsan ius. Sea fierent iudicabit ex, duis harum labore cum in.
Check out this information
Eos graeci nostro rationibus in, ea fugit movet per. An quo iudico aperiam, vide deterruisset no vim, ignota fabulas omnesque an sed. At nec harum adipisci voluptaria, at mei quaeque definiebas. Eam eius laudem civibus no, no eum ubique tractatos, ius quod meliore ut. Duis wisi modus vis in.
Deep inside the night
Eos graeci nostro rationibus in, ea fugit movet per. An quo iudico aperiam, vide deterruisset no vim, ignota fabulas omnesque an sed. At nec harum adipisci voluptaria, at mei quaeque definiebas. Eam eius laudem civibus no, no eum ubique tractatos, ius quod meliore ut. Duis wisi modus vis in.
Laboratory detailed documentation and license

Sit et cibo propriae, est audiam copiosae ea, sit et legimus propriae probatus. Ut meis accumsan ius. Sea fierent iudicabit ex, duis harum labore cum in.

Eos graeci nostro rationibus in, ea fugit movet per. An quo iudico aperiam, vide deterruisset no vim, ignota fabulas omnesque an sed. At nec harum adipisci voluptaria, at mei quaeque definiebas. Eam eius laudem civibus no, no eum ubique tractatos, ius quod meliore ut. Duis wisi modus vis in.

shortcode usage
[toggle title="Check out this information"]
content text, html, images, videos, etc.
[/toggle]

7. Tabs example

Eum petentium prodesset et, erant utinam copiosae quo te. Dolorum voluptatibus id nec, pri ad vidisse deleniti apeirian.
  • aliquip mentitum moderatius eos
  • meis aliquip tritani
  • aeque vivendum forensibus ut
 Ne qui officiis maluisset conclusionemque, in saepe vivendo mnesarchum his, quis voluptua duo ut. Ea facer dicunt audire ius.

Probo graeco nemore ea has. Odio minim scriptorem qui ne, graece mentitum vituperatoribus no eos.

an image inside a tab Tritani similique in quo. An nibh mollis ponderum mea, has eu ullum quando vituperata.

Ne nec assum clita alienum, sea pertinacia interesset instructior ad.

Rebum petentium constituto ei, ne sed doming impedit delicatissimi, etiam vocent denique eos ex. In salutandi constituto duo.

Quo viris singulis constituam eu, et pro nulla iudico assentior. Lorem laboramus eum id, ullum nullam vix te, eu admodum moderatius interpretaris mei.

Vitae dicant sit eu. Id quodsi deterruisset sit, in quo eros accusam perfecto. An sea verear sententiae constituam, ea quo vero interesset. Et enim abhorreant deterruisset ius.

Sea et case ubique suavitate, nam audiam fierent at. Mel ex consequat instructior, eu democritum delicatissimi qui.