Boxed – Right Sidebar

Sometimes, we want to introduce the main article idea to user. This text will be larger than paragraphs in our post. You just have to add the “intro” CSS class.

And here is an example of normal paragraph which will be displayed in article.

We’re paying a lot of attention on typography and created this style guide page help you understand better how this theme works and what elements you can use. Let’s start with Dropcaps.

Dropcap or inital, in a written or published work is a letter at the beginning of a word, a chapter, or a paragraph that is larger than the rest of the text. The word is derived from the Latin initialis, which means standing at the beginning. An initial often is several lines in height and in older books or manuscripts, sometimes ornately decorated. [Source]. Words can also be used as dropcaps. All you have to do is to wrap the first letter(or, in case you want to dropcap a word – first word) in a span with the “dropcap” CSS class. You can copy this one: YOUR LETTER HERE and replace text with your letter.

Header one example

Header two example

Header three example

Header four example

Header five example

Header six example

Jora Theme Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997

Unordered Lists (Nested)

List item one
List item two
List item three
- List item one
  - List item one
  - List item two
  - List item three
  - List item four
- List item two
- List item three
- List item four
List item four
List item five: what to you know about premium WordPress themes?

Ordered List (Nested)

List item one
1. List item one
  1. List item one
  2. List item two
  3. List item three
  4. List item four
2. List item two
3. List item three
4. List item four
List item two
List item three
List item four

HTML Tags

These supported tags come from the WordPress.com code FAQ.

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (Link)

Links are displayed as underlined text.

Abbreviation Tag

The abbreviation wp stands for “WordPress”.

Cite Tag

“Code is poetry.” –Automattic

Code Tag

You will learn later on in this article where you can use this code: TEXT WRITTEN HERE WILL BE BIGGER

Delete Tag

This tag will let you ~~strikeout text.~~

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

This tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

Quote Tag

Developers, developers, developers… –Steve Ballmer

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H₂O, which should push the “2” down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC², which should lift the 2 up.

Definition Lists

Definition List Title: Definition list division.
Another Definition List Title: Another Definition list division
Lorem ipsum?: What we know about Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
Want to learn more about lorem ipsum?: Check this link for more information about lorem ipsum.

Tables

Table Head Column One	Table Head Column Two	Table Head Column Three
Table Footer Column One	Table Footer Column Two	Table Footer Column Three
Table Row Column One	Short Text	Testing a table cell with a longer amount of text to see what happens, you’re not using tables for site layouts are you?
Table Row Column One	Table Row Column Two	Table Row Column Three
Table Row Column One	Table Row Column Two	Table Row Column Three
Table Row Column One	Table Row Column Two	Table Row Column Three
Table Row Column One	Table Row Column Two	Table Row Column Three

Theme custom classes

If you want to highlight a specific piece of text, just wrap it in a span with “highlight” CSS class like in this example: HERE GOES TEXT WHICH NEED TO BE HIGHLITHED

If you want to underline a piece of text and have a nice effect on hover then you have to wrap it in a “word-underline” CSS class like in this example: HERE GOES UNDERLINED TEXT

Displaying text in columns
You can display text in 1 column(as it’s by default), two or 3 columns. If you want to display specific piece of text in two columns then you simply have to wrap it in a div and add “two-columns” class to it like in next example: HERE GOES TEXT WHICH NEED TO BE DISPLAYED IN 2 COLUMNS</div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

If you want to display specific piece of text in three columns then you simply have to wrap it in a div and add “three-columns” class to it like in next example: HERE GOES TEXT WHICH NEED TO BE DISPLAYED IN 3 COLUMNS</div>

Images

OK, so images can get quite complicated as we have a few variables to work with! For example the image below has had a caption entered in the WordPress image upload dialog box, this creates a shortcode which then in turn wraps the whole thing in a div with inline styling.

This is a test caption

The next issue we face is image alignment, users get the option of None, Left, Right & Center. On top of this, they also get the options of Thumbnail, Medium, Large & Fullsize.

Here is an example with image aligned on right:

Here is an example with image aligned on left:

How about a centered image?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

And let’s add a full width image(actually, it’s width is greater than content container width):

↑