The styling guide gives you a blueprint of this theme’s default post and page styles. The style guide is also an amazing reference for suggested typographic treatment and styling your content.
Typography Treatment
Our theme pays special attention to typography and type treatment, which make your content across all devices looking posh and sharp.
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Mixed list items styling
- Unordered list item one
- Unordered list item two
- Ordered list item one
- Ordered list item two
- Unordered list item one
- Unordered list item two
- Ordered list item one
- Ordered list item two
- Ordered list item three
- Unordered list item three
- Ordered list item three
- Unordered list item three
Code formatting
.intro {
border-bottom: solid 1px #eee;
border-top: solid 1px #eee;
text-transform: uppercase;
display: inline-block;
letter-spacing: 1px;
text-align: center;
font-size: 16px;
padding: 20px 0;
color: #aaa;
margin: 0;
}
Blockquote styling
The blockquote is used to indicate the quotation of a large section of text from another source.
There are no simple “right” answers for most Web design questions, at least not for the important ones. What works is good, integrated design that fills a need — carefully thought out, well executed, and tested.” – Steve Krug
Table styling
Table is a collection of related data held in a structured format, it consists of fields (columns), and rows.
| Year | Ship | Tonnage | Length | Country |
|---|---|---|---|---|
| 2002 | MS Navigator of the Seas | 139,570 | 1,021 ft (311 m) | Bahamas |
| 2004 | RMS Queen Mary 2 | 148,528 | 1,132 ft (345 m) | United Kingdom |
| 2006 | MS Freedom of the Seas | 154,407 | 1,112 ft (339 m) | Bahamas |
| 2009 | MS Oasis of the Seas | 225,282 | 1,186 ft (361 m) | Bahamas |
| 2016 | MS Harmony of the Seas | 227,700 | 1,194 ft (364 m) | Bahamas |
Text highlighting
To use the highlight, you simply need to add a span with the class highlight. This can be done in the Text editor view. You can see an example below:
<span class="highlight">This will be highlighted.</span>
Spoiler alert
A spoiler is an element of a disseminated summary or description of any piece of fiction that reveals any plot elements which threaten to give away important details concerning the turn of events of a dramatic episode. Typically, the details of the conclusion of the plot, including the ending, are especially regarded as spoiler material.
<span class="spoiler">This text will be a spoiler.</span>
Image styling
Gallery styling
Make sure you are linking to the Media file when creating gallery, not the attachment page.
Right Aligned Image
Images may be two-dimensional, such as a photograph, screen display, and as well as a three-dimensional, such as a statue or hologram. They may be captured by optical devices – such as cameras, mirrors, lenses, telescopes, microscopes, etc. and natural objects and phenomena, such as the human eye or water surfaces.
Left Aligned Image
The word image is also used in the broader sense of any two-dimensional figure such as a map, a graph, a pie chart, or an abstract painting. In this wider sense, images can also be rendered manually, such as by drawing, painting, carving, rendered automatically by printing or computer graphics technology.
Pull quote styling
To use the pull quote, you simply need to add a class of pull-right or pull-left to your content. This can be done in the Text editor view. See an example below:
<span class="pull-right">Pull this text right.</span>
This pull quote will be on the right side of the post.
A pull quote (also known as a lift-out quote) is a quotation or excerpt from an article that is typically placed in a larger or distinctive typeface on the same page, serving to entice readers into an article or to highlight a key topic. The term is principally used in journalism and publishing.
Placement of a pull quote on a page may be defined in a publication’s or website’s style guide. Such a typographic device may or may not be aligned with a column on the page. Some designers, for example, choose not to align the quote. In that case, the quotation cuts into two or more columns, as in the example shown.
And this pull quote is pulling text to the left, like a boss.
Pull quotes need not be a verbatim copy of the text being quoted; depending on a publication’s house style pull quotes may be abbreviated for space and/or paraphrased for clarity, with or without indication.
Publishing is the process of production and dissemination of literature, music, or information — the activity of making information available to the general public. In some cases, authors may be their own publishers, meaning: originators and developers of content also provide media to deliver and display the content for the same. Also, the word publisher can refer to the individual who leads a publishing company or imprint or to a person who owns a magazine.
Intro text
The introduction typically describes the scope of the document and gives the brief explanation or summary of the document. It may also explain certain elements that are important to the essay if explanations are not part of the main text. The readers can have an idea about the following text before they actually start reading it.
This is an example of an intro text, it can be not only in the beginning of the page or post, but used to underscore some important part of the text inside an article.
<span class="intro">This will be an intro to a post</span>
Dropcaps
Dropcap 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.
In illuminated manuscripts, initials with images inside them, such as those illustrated here, are known as historiated initials. They were an invention of the Insular art of the British Isles in the eighth century. Initials containing, typically, plant-form spirals with small figures of animals or humans that do not represent a specific person or scene are known as “inhabited” initials. Certain important initials, such as the B of Beatus vir… at the opening of Psalm 1 at the start of a vulgate Latin psalter, could occupy a whole page of a manuscript.
These specific initials, in an illuminated manuscript, also were called Initiums.
<span class="dropcaps">F</span>irst letter will be a dropcaps letter