Special attention to the typography of this theme ensures a great user experience. This page was created to be a useful reference when using the theme and creating your posts and pages.


This is an example of paragraph text. We have strong text, regular text and italic text, and here is a link.. The environment, after all, is where we all meet, where we all where we all have a mutual interest. It is one thing that all of us share. It is not only a mirror of ourselves, but a focusing lens on what we can become.


Example of H1 Title

Example of H2 Title

Example of H3 Title

Example of H4 Title

Example of H5 Title
Example of H6 Title

Highlight Your Text

This is highlighted text.

<span class="highlight">This is highlighted text.</span>

Blockquote

«Earth provides enough to satisfy every man’s needs, but not every man’s greed.»

A N Other

    <blockquote>"Earth provides enough to satisfy every man's needs, but not every man's greed."</blockquote>
    <cite>A N Other</cite>

Wide Format Images

Wide format, or outside the grid, images are available in pages and posts easily. Ensure you upload a large image, with a minimum width of 1200px preferably, and add to your post as full width image and no alignment. Then wrap the image in a div called ‘breakout’ — like this:

<div class="breakout"><img src="https://wylsa.com/beta/wp-content/uploads/2015/02/rare_post6.jpg" alt="A caption can go here" width="1200" height="400" class="size-full wp-image-1189" /></div>
A caption can go here

A caption can go here

Right Side Note

Here is a right side note. Proin posuere est vitae ligula. Etiam euismod. Cras a eros.Side notes are a great way of calling out an interesting point in your paragragh. This theme allows both right and left side notes as shown below.

<span class="right_side_note">Here is a right side note. Proin posuere est vitae ligula. Etiam euismod. Cras a eros.</span>

Left Side Note

Here is a left side note. Proin posuere est vitae ligula. Etiam euismod. Cras a eros.Side notes are a great way of calling out an interesting point in your paragragh. This theme allows both right and left side notes as shown below.

<span class="left_side_note">Here is a left side note. Proin posuere est vitae ligula. Etiam euismod. Cras a eros.</span>

Code Formatting

Use the pre tag whenever you wish to display code.

pre {
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 96%;
    overflow: auto;
    padding: 3%;
    position: relative;
    font-family: "Roboto", sans-serif;
}

Image Alignment

Centered Image with Caption

Centered Image

Left Image Alignment

rare_post1

Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui.


Right Image Alignment

yellowstone1

Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui.


Mosaic Gallery via JetPack

This mosaic style gallery is produced by the free JetPack plugin. Linking images will display them larger once clicked in a lightbox.


Icon Button Examples

3 Min Theme Color Button 3 MinRed Button3 MinGreen Button

<a class="icon-button blue ripple" href="#/"><span class="fa fa-clock-o">3 Min</span>Theme Color Button </a>
<a class="icon-button red ripple" href="#/"><span class="fa fa-clock-o">3 Min</span>Red Button</a>
<a class="icon-button green ripple" href="#/"><span class="fa fa-clock-o">3 Min</span>Green Button</a>

Regular Button Examples

Click MeLove MeTheme Color Button

<a class="button red ripple" href="#/">Click Me</a>
<a class="button green ripple" href="#/">Love Me</a>
<a class="button blue ripple" href="#/">Theme Color Button</a>

White Social Icon Button Examples

PinterestTwitterGoogleFacebookEmail

<a class="button white ripple" href="#/"><span class="fa fa-pinterest-p"></span>Pinterest</a>
<a class="button white ripple" href="#/"><span class="fa fa-twitter"></span>Twitter</a>
<a class="button white ripple" href="#/"><span class="fa fa-google-plus"></span>Google</a>
<a class="button white ripple" href="#/"><span class="fa fa-facebook"></span>Facebook</a>
<a class="button white ripple" href="#/"><span class="fa fa-envelope-o"></span>Email</a>

List Style ‘line’

<ul>
<li class="line"><a href="#/">Dashboard</a></li>
<li class="line">My Account</li>
<li class="line"><a href="#/">Direct Messages</a></li>
</ul>

List Style no class

<ul>
<li><a href="#/">Chat Rooms</a></li>
<li>Settings</li>
<li><a href="#/">Logout</a></li>
</ul>

List Style ‘check’

<ul>
<li class="check"><a href="#/">Chat Rooms</a></li>
<li class="check">Settings</li>
<li class="check"><a href="#/">Logout</a><li>
</ul>

Ordered / unordered lists

  1. Nam malesuada ornare dolor
  2. Nam malesuada ornare dolor
  3. Nam malesuada ornare dolor
  4. Nam malesuada ornare dolor

Nested Lists

  1. Nam malesuada ornare dolor
  2. Nam malesuada ornare dolor
    1. Nam malesuada ornare dolor
    2. Nam malesuada ornare dolor
    3. Nam malesuada ornare dolor
    4. Nam malesuada ornare dolor
  3. Nam malesuada ornare dolor
  4. Nam malesuada ornare dolor

Mixed Lists

  • Unordered list item one
  • Unordered list item two
    1. Ordered list item one
    2. Ordered list item two
      • Unordered list item one
      • Unordered list item two
        1. Ordered list item one
        2. Ordered list item two
        3. Ordered list item three
      • Unordered list item three
    3. Ordered list item three
  • Unordered list item three

Table Styling

Theme Author Rating
SquareCode Cr3ativ 5 Stars
Business Essentials 2 Cr3ativ 5 Stars
Swiss Cr3ativ 5 Stars
Ink Cr3ativ 5 Stars

Если вы нашли ошибку, пожалуйста, отправьте автору подзатыльник! Выделите фрагмент текста и нажмите Ctrl+Enter.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: