Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/15/d609565857/htdocs/usadvice.ru/wp-content/plugins/wordpress-ping-optimizer/cbnet-ping-optimizer.php on line 533

Typography and styles

[media version=”lte-mobile”]

[mark color=”yellow”]This is shortened version of the page presenting styles and typography of Website theme. If you want to see it complete, visit it on tablet or desktop browser. This message is visible only on mobile an mini versions of this page.[/mark]

[line]

[/media]

This page presents almost all theme’s typographic elements, like: headers of all sizes, dropcaps, lists, quotes, code, highlights, images, tables, columns, buttons, form elements and horizontal lines. They all adapt to different screen sizes, so it looks good even at small mobile phones.

[line]

Place for credists

[media version=”lte-mobile” visible=”false”]

[dc]S[/dc]ullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. [tooltip title=”I’m tooltip” gravity=”s”]Move mouse here[/tooltip], porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

[dc]A[/dc]enean imperdiet.Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing consequat sem neque sed ipsum. [mark]This paragraph is invisible on mobile phones, and small smartphones.[/mark] Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et acu. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec [icon name=”donate”].

[line]

[column width=”1/2″ first=”yes”]

Headline one

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Headline two

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Headline three

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

Headline four

Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.

Headline five

Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

[/column]

[column width=”1/4″]

Example list with icons:

[list icon=”check”]

  • cras ultricies
  • turpis hendrerit fringilla
  • vestibulum ante ipsum
  • primis in faucibus orci
  • luctus et ultrices posuere
  • cubilia mi consectetuer
  • nam pretium turpis
  • duis arcu tortor

[/list]

There are 100 predefined icons for this purpose. Another example:

[list icon=”star”]

  • cras ultricies
  • turpis hendrerit fringilla
  • vestibulum ante ipsum
  • primis in faucibus orci
  • luctus et ultrices posuere
  • cubilia mi consectetuer
  • nam pretium turpis
  • duis arcu tortor

[/list]

[/column]

[column width=”1/4″ last=”yes”]

Example regular list:

  1. donec mollis hendrerit
  2. nam pretium turpis
    • primis in faucibus orci
    • luctus et ultrices posuere
    • cubilia mi consectetuer
  3. duis arcu tortor
  4. turpis hendrerit fringilla
  5. vestibulum ante ipsum

Examples of buttons (there are 100 icons to choose from):

[button type=”small” url=”#yourlink1″]Small button[/button] 

[button url=”#yourlink2″]Button[/button] 

[button icon=”heart” url=”#yourlink2″]Button[/button] 

[button type=”big” icon=”sign-in” url=”#yourlink3″]Button[/button] 

And the [button type=”tiny” url=”#yourlink4″]Tiny button[/button] as a bonus.

[/column]

[/media]

[line]

Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis.

[line]

[column width=”1/2″ first=”yes”]

[tab label=”Tab one” first=”yes”]

Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan nec. Vestibulum fringilla pede sit amet tortor malesuada. [mark]Example of highlighted text #1[/mark]. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum eliteneo. [mark color=”yellow”]Example of highlighted text #2[/mark]. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus.

[/tab]

[tab label=”Tab two”]

Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan nec. Vestibulum fringilla pede sit amet tortor malesuada. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc.

[/tab]

[tab label=”Tab three” last=”yes”]

Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan nec. Vestibulum fringilla pede sit amet tortor malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan nec.

[/tab]

[/column]

[column width=”1/2″ last=”yes”]

Place for credits

[/column]

[line]

[box color=”blue” icon=”comment” size=”big”]

Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit.

[/box]

[column width=”1/4″ first=”yes”]

[box color=”red”]Pellentesque posuere.[/box]

[/column]

[column width=”1/4″]

[box color=”orange” icon=”flag”]Aenean posuere tortor.[/box]

[/column]

[column width=”1/4″]

[box color=”green”]Phasellus dolor maecenas.[/box]

[/column]

[column width=”1/4″ last=”yes”]

[box color=”gray” icon=”issue”]Curabitur ligula sapien.[/box]

[/column]

[line]

[media version=”lte-mobile” visible=”false”]

[column width=”1/2″ first=”yes”]

@media only screen and (max-width: 739px) {
    #header h1 {
        border-right-width: 0;
        line-height: 52px;
        text-align: center;
        margin: 0;
        padding: 0;
    }
}

[/column]

[column width=”1/2″ last=”yes”]

Table footer
Header row Example
Nullam dictum felis eu pede. quisque
Vivamus elementum semper. rhoncus
Aenean leo ligula, porttitor eu. vitae
Nullam accumsan lorem in dui cras ultricies mi eu turpis hendrerit fringilla. libero
Aliquam lorem ante. sapien

[/column]

[line]

[/media]

This is more or less presentation of theme’s content styles. Thank you.