This demonstration shows how the different content elements are styled in the theme. The elements demonstrated below are the ones you are likely to use, in the context that you are likely to use them.
Each section is preceded by a brief explanation of what that section is demonstrating. This is usually followed by the demonstration for that section, typically using the famous Lorem Ipsum dummy text as the content text.
Content paragraphs
This section is intended to demonstrate the line spacing within paragraph, as well as the spacing between paragraphs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis sollicitudin nunc vitae commodo. Mauris eu eros purus. In lacinia sodales vehicula. Ut posuere, eros ac pharetra tincidunt, mauris diam sagittis nisi, vitae vehicula lacus ipsum sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Curabitur porta ultrices ligula elementum elementum. Duis pulvinar, mi quis laoreet mollis, neque elit molestie nunc, eget sagittis metus est vitae nisl. Integer quis condimentum metus. Nullam vitae tortor nec neque auctor aliquet. Nunc a neque a tortor porta malesuada tempor eu nulla.
Proin viverra arcu leo. Maecenas tellus arcu, bibendum nec ultricies mattis, tristique molestie felis. Donec sed egestas urna. Curabitur sollicitudin elit non nisl scelerisque sit amet vestibulum risus elementum.
Links
This section shows how links are styled in the theme. It is intended mainly to demonstrate the default style of the link, as well as the styling when the mouse hovers over the link.
Pellentesque ac tellus eu mauris sodales tincidunt. Nulla tellus ante, tempor eu euismod vel, tincidunt vel erat. Sed porttitor, neque at eleifend imperdiet, eros nibh ultricies purus, sed molestie magna orci id lorem. Vestibulum ultrices lorem vitae augue semper condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
Morbi pellentesque elit consectetur mauris volutpat nec commodo nisl pellentesque. Curabitur ullamcorper ultrices eros. Maecenas molestie augue ut ipsum faucibus lobortis. Maecenas feugiat sodales lacinia. Sed eleifend ligula at justo cursus non accumsan purus tincidunt. Curabitur id mi et est condimentum luctus a non purus. Etiam fermentum enim eget diam vulputate ornare gravida neque ornare. Sed placerat luctus gravida.
Images
This section is intended to demonstrate how images inserted into the content are styled in the theme. Images can be aligned to the left, center, or right. They can also optionally be captioned with some explanatory text.
The width of the last image in this section actually exceeds the width of the available content area, but the theme automatically resizes the image so that it stays within the content area.
The image to the left shows a left-aligned image. Donec a hendrerit nunc. Suspendisse consectetur egestas dignissim. Sed vitae feugiat erat. Etiam a nisi leo, non gravida ipsum. Vestibulum in augue non nisl tincidunt mollis. Sed vestibulum felis eget risus tempor ornare. Nam vestibulum, velit cursus ultrices pulvinar, purus nibh dignissim elit, ut malesuada tellus massa a ipsum. Phasellus scelerisque euismod quam nec luctus. Fusce sit amet sapien odio. Duis porta sagittis mauris, ut mattis eros venenatis in. Vestibulum eu rutrum tortor. Integer libero risus, tristique porta suscipit vitae, porta quis dolor.
The image to the right shows a right-aligned image. Curabitur lectus diam, consequat ut auctor et, ornare ac risus. Etiam varius eleifend libero, sed scelerisque enim molestie non. Sed pretium varius magna, id porttitor nulla pharetra et. Vestibulum ornare luctus mauris ut consequat. Duis sit amet metus ligula. Sed erat dolor, suscipit quis volutpat at, pharetra in mauris. Suspendisse potenti. Duis condimentum mauris at eros ullamcorper gravida quis non nulla. Etiam elit nisi, accumsan et posuere vel, accumsan a dui. Pellentesque quis commodo est.
The image below shows a captioned, center-aligned images. Note that images with any alignment can be captioned, and not just the center-aligned image. Praesent metus nibh, gravida vel sodales a, ornare tincidunt sapien. Sed dolor enim, posuere lobortis placerat eu, rutrum vel ante. Etiam sollicitudin porta metus vehicula eleifend.Integer auctor enim a dui rutrum placerat. Nulla iaculis, ante et euismod congue, sem urna consectetur purus, non accumsan magna ante ut diam. Nulla at elit posuere nisl consequat scelerisque.
Eagle Ray (Aetobatus narinari) in the light near surface at a sea mountain called Crystal Rock, North of Gili Lawa Laut, an island North of Komodo Island, Indonesia.
The image below has a width that is greater than the width of the content area, but the theme resizes it automatically so that it stays within the content area and does not overflow. Maecenas varius orci id dolor condimentum sed imperdiet justo tincidunt. Morbi placerat sodales nibh, a luctus libero malesuada consequat. Etiam nibh enim, condimentum a ultricies at, imperdiet sed nisi.
Morbi augue tellus, accumsan sed ultrices sed, tristique non erat. Aenean dignissim faucibus massa egestas varius. Etiam sit amet eros nulla, id consectetur sem. Nunc convallis lacinia turpis, vel lacinia diam placerat ut. Suspendisse potenti. Aliquam sem libero, mollis in tempus eu, pretium at sapien.
Lists
This section is intended to demonstrate how lists are styled in the theme. Lists can be ordered (i.e. numerical), or unordered (i.e. bulleted).
The list below is an ordered list. Notice how the ordering changes from numerical to alphabetical for inner lists. Notice the margin of the lists, and the separation between list items, between lists, and between paragraphs and lists.
- List item 1
- List item 2
- Inner list item 1
- Inner list item 2
- List item 3
Aliquam gravida lobortis auctor. Proin velit quam, scelerisque sed imperdiet nec, lacinia ut neque. Vestibulum vitae blandit tellus. Nullam vel enim in dolor scelerisque faucibus. Nulla rhoncus lacus in diam iaculis at placerat dui consectetur. Etiam dictum tortor nec libero posuere nec lobortis nisl pharetra. Praesent non suscipit erat.
The list below is an unordered list.
- List item 1
- List item 2
- Inner list item 1
- Inner list item 2
- List item 3
Aliquam erat volutpat. Aenean risus erat, volutpat et tempus ac, dignissim id ligula. Maecenas sit amet dolor ut purus malesuada egestas. Nulla sit amet dui sed orci ullamcorper egestas. Nullam tortor dolor, dapibus a auctor auctor, venenatis eu felis. Duis sit amet metus felis. Fusce magna nulla, eleifend eget interdum in, malesuada eget diam. Phasellus interdum, purus quis imperdiet euismod, nisi nibh sagittis eros, id ultricies nulla sem in nulla.
Headings
Heading 3 has been used for the heading of all sections in this demonstration. In HTML, headings can range from heading 1 to heading 6. In the theme, each heading level is differentiated by the size of the font for that heading.
Heading levels are hierarchical. Heading 1 is considered “more important” than heading 2, which is “more important” than heading 3, and so on. This ties back to semantic web, but you should try to follow the hierarchy.
Generally in the theme, heading 1 is reserved for the post (or page) title, and heading 2 is reserved for the site title. Therefore, you should try starting any headings in your posts or pages from heading 3 onwards, as this demonstration post has done.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Aliquam at suscipit libero. Proin eleifend porttitor risus, sed ullamcorper orci consectetur quis. Proin commodo molestie felis, at porttitor sapien tristique vitae. Curabitur nec sodales metus. Proin euismod faucibus nulla sit amet vehicula. Nullam lectus tortor, auctor non mattis sed, viverra varius risus. Sed dignissim est et libero elementum ac pharetra quam eleifend. Sed suscipit auctor dui, at fermentum purus ultricies in.
Blockquote
A blockquote is a nifty element in HTML that allows you to properly quote some text from some other sources. For example:
And in the end it’s not the years in your life that count. It’s the life in your years.
Abraham Lincoln
Table
And finally, this section demonstrates how tables are styled in the theme.
| Title | Views | |
|---|---|---|
| About Test User | 1 |  |
| 260 | 1 | |
| Archives | 1 | |
| 235 | 1 | |
