• 374310c4-8be8-4b7b-b84d-b0ec2ad30181
  • 3d2ccaa9-b33d-44bc-e4e0-c29eb6dc51cb
  • 5aa30859-7d14-4878-f8c5-d614c3321b0f
  • 524ef1b4-2523-4ef0-ce52-9eee29397297
  • 1427517c-ac43-4907-e853-65ac62feba02

Tem­plate Typog­ra­phy

  • Drukuj
Szczegóły
Super User

Cre­at­ing Beau­ti­ful Con­tent With Sim­ple Code

Typog­ra­phy is a fun­da­men­tal part of a tem­plate, pro­vid­ing you with the tools to char­ac­terise your con­tent and bring it to life. There is a vast array of typog­ra­phy avail­able with Ionos­phere tem­plate, as is with our pre­vi­ous releases, from list styles, notice blocks and a diverse num­ber of other elements.

If you are using the TinyMCE edi­tor for HTML typog­ra­phy, go to Exten­sions → Plu­gin Man­ager → TinyMCE 2.0 → Set Code Clean-​up on Save to Never.

<h1> Head­ing Styles

H1. Head­ing 1

H2. Head­ing 2

H3. Head­ing 3

H4. Head­ing 4

H5. Head­ing 5

H1. Page Title

H1. Con­tent Title

<ul> List Styles

  • This is an exam­ple of a stan­dard list style. Lorem ipsum dolor sit amet, con­secte­tur adip­isc­ing elit. Donec sit amet nibh.
  • This is an exam­ple of a stan­dard list style. Lorem ipsum dolor sit amet, con­secte­tur adip­isc­ing elit. Donec sit amet nibh.
  • This is an exam­ple of a stan­dard list style. Lorem ipsum dolor sit amet, con­secte­tur adip­isc­ing elit. Donec sit amet nibh.
  • This is an exam­ple of a stan­dard list style. Lorem ipsum dolor sit amet, con­secte­tur adip­isc­ing elit. Donec sit amet nibh.
  • This is an exam­ple of a stan­dard list style. Lorem ipsum dolor sit amet, con­secte­tur adip­isc­ing elit. Donec sit amet nibh.

<p> Drop­Cap Styles

Prae­sent rutrum sapien ac felis. Phasel­lus ele­men­tum dolor quis turpis. Vestibu­lum nec mi vitae pede tin­cidunt non­ummy. Vestibu­lum facil­i­sis mol­lis neque. Sed orci. Cum sociis natoque penat­ibu. Pel­len­tesque vel enim urna, sit amet blandit ipsum. Mae­ce­nas quis sem sit amet nunc pretium mat­tis. Sed dapibus sem­per est, sed pretium erat.

Use the fol­low­ing for­mat: <p class=„dropcap”>…</p> (HTML) or [drop­cap class=„dropcap”]…[/dropcap] (ROKCANDY). You can use any let­ter, sym­bol or number.

Prae­sent rutrum sapien ac felis. Use this for­mat: <p class=„dropcap2”>…</p> (HTML) or [drop­cap class=„dropcap2”] … [/​dropcap] (ROKCANDY)

Prae­sent rutrum sapien ac felis. Use this for­mat: <p class=„dropcap3”>…</p> (HTML) or [drop­cap class=„dropcap3”] … [/​dropcap] (ROKCANDY)

Prae­sent rutrum sapien ac felis. Use this for­mat: <p class=„dropcap4”>…</p> (HTML) or [drop­cap class=„dropcap4”] … [/​dropcap] (ROKCANDY)

Prae­sent rutrum sapien ac felis. Use this for­mat: <p class=„dropcap5”>…</p> (HTML) or [drop­cap class=„dropcap5”] … [/​dropcap] (ROKCANDY)

<block­quote> Styles

To repli­cate, use the fol­low­ing for­mat­ting: <blockquote><p>.…</p></blockquote> (HTML) or [block­quote class=„default”]…[/blockquote] (ROKCANDY).


Prae­sent rutrum sapien ac felis. Phasel­lus ele­men­tum dolor quis turpis.

To repli­cate, use the fol­low­ing for­mat­ting: <block­quote class=„alignleft”><p>.…</p></blockquote> (HTML) or [block­quote class=„alignleft”]…[/blockquote] (ROKCANDY).

Lorem ipsum dolor sit amet, con­secte­tur adip­isc­ing elit. Mau­ris metus tortor.


Prae­sent rutrum sapien ac felis. Phasel­lus ele­men­tum dolor quis turpis.

To repli­cate, use the fol­low­ing for­mat­ting: <block­quote class=„alignright”><p>.…</p></blockquote> (HTML) or [block­quote class=„alignright”]…[/blockquote] (ROKCANDY).

Lorem ipsum dolor sit amet, con­secte­tur adip­isc­ing elit. Mau­ris metus tortor.

<pre> Code Styles

This is a sample <pre class="lines">...</pre> (HTML) or,
[pre2 class="{lines}"] ... [/pre2] (ROKCANDY) tag:

div.modulebox-black div.bx1 {
  background: url(../images/box_bl.png) 0 100% repeat;
}

div.modulebox-black div.bx2 {
  background: url(../images/box_tr.png) 100% 0 repeat;
}

This is a sample <pre>...</pre> (HTML) or,
[pre class="{lines}"] ... [/pre] (ROKCANDY) tag:

div.modulebox-black div.bx1 {
  background: url(../images/box_bl.png) 0 100% repeat;
}

div.modulebox-black div.bx2 {
  background: url(../images/box_tr.png) 100% 0 repeat;
}

<p> Notice Styles

This is a sam­ple of the Approved style. To repli­cate, use the fol­low­ing syn­tax: <p class=„approved”>.…</p> (HTML) or [notice class=„approved”] … [/​notice] (ROKCANDY).

This is a sam­ple of the Atten­tion style. To repli­cate, use the fol­low­ing syn­tax: <p class=„attention”>.…</p> (HTML) or [notice class=„attention”] … [/​notice] (ROKCANDY).

This is a sam­ple of the Notice style. To repli­cate, use the fol­low­ing syn­tax: <p class=„notice”>.…</p> (HTML) or [notice class=„notice”] … [/​notice] (ROKCANDY).

This is a sam­ple of the Alert style. To repli­cate, use the fol­low­ing syn­tax: <p class=„alert”>.…</p> (HTML) or [notice class=„alert”] … [/​notice] (ROKCANDY).

<span> Text Icon Styles

To repli­cate, the fol­low­ing for­mat: <span class=„text-icon iconname”>…</span> (HTML) or [icon class=„icon name”]…[/icon] (ROKCANDY). The class names are listed below, such as „text-​icon email”.



Text with a phone icon

Text with a quote icon

Text with a cart icon

Text with a rss icon

Text with a tags icon

Text with a write icon

Text with an info icon

Text with a sound icon

Text with a rightar­row icon

Text with a lef­t­ar­row icon

Text with a cir­clear­row icon

Text with a dow­nar­row icon

Text with an upar­row icon

Text with a per­son icon

Text with a cal­en­dar icon

Text with a doc icon
Text with a bulb icon



Text with a youtube icon

Text with a skype icon





Text with a video icon

Text with a drop­box icon

Text with a vimeo icon

Text with a pay­pal icon

<em> Empha­sis Styles

This is a empha­sis tag that allows you to high­light words or phrases. Use the fol­low­ing for­mat: <em class=„italic”>…</em> (HTML) or … (ROKCANDY)

This is a empha­sis tag that allows you to high­light words or phrases. Use the fol­low­ing for­mat: <em class=„bold”>…</em> (HTML) or … (ROKCANDY)

This is a empha­sis tag that allows you to high­light words or phrases. Use the fol­low­ing for­mat: <em class=„bold2”>…</em> (HTML) or [emphasisbold2]…[/emphasisbold2] (ROKCANDY)

This is a empha­sis tag that allows you to high­light words or phrases. Use the fol­low­ing for­mat: <em class=„highlight”>…</em> (HTML) or [high­light class=„default”]…[/highlight] (ROKCANDY)

This is a empha­sis tag that allows you to high­light words or phrases. Use the fol­low­ing for­mat: <em class=„highlight white”>…</em> (HTML) or [high­light class=„white”]…[/highlight] (ROKCANDY)

This is a empha­sis tag that allows you to high­light words or phrases. Use the fol­low­ing for­mat: <em class=„highlight black”>…</em> (HTML) or [high­light class=„black”]…[/highlight] (ROKCANDY)

This is a empha­sis tag that allows you to high­light words or phrases. Use the fol­low­ing for­mat: <em class=„highlight green”>…</em> (HTML) or [high­light class=„green”]…[/highlight] (ROKCANDY)

This is a empha­sis tag that allows you to high­light words or phrases. Use the fol­low­ing for­mat: <em class=„highlight yellow”>…</em> (HTML) or [high­light class=„yellow”]…[/highlight] (ROKCANDY)

This is a empha­sis tag that allows you to high­light words or phrases. Use the fol­low­ing for­mat: <em class=„highlight blue”>…</em> (HTML) or [high­light class=„blue”]…[/highlight] (ROKCANDY)

This is a empha­sis tag that allows you to high­light words or phrases. Use the fol­low­ing for­mat: <em class=„highlight red”>…</em> (HTML) or [high­light class=„red”]…[/highlight] (ROKCANDY)

<ul> List Styles (Icons)

To repli­cate, use the fol­low­ing for­mat: <ul class=„list-icon icon_name”><li>.…</li><li>.…</li>…</ul> (HTML) or [list class=„list-icon icon_name”]

  • .…
    • [li.…[/li][/list] (ROKCANDY). The icon names are listed below, such as „cart”.


    • A list item using the list-​icon phone class.
    • A list item using the list-​icon phone class.

    • A list item using the list-​icon quote class.
    • A list item using the list-​icon quote class.


    • A list item using the list-​icon youtube class.
    • A list item using the list-​icon youtube class.


    • A list item using the list-​icon cart class.
    • A list item using the list-​icon cart class.
    • A list item using the list-​icon tags class.
    • A list item using the list-​icon tags class.

    • A list item using the list-​icon write class.
    • A list item using the list-​icon write class.

    • A list item using the list-​icon info class.
    • A list item using the list-​icon info class.

    • A list item using the list-​icon sound class.
    • A list item using the list-​icon sound class.

    • A list item using the list-​icon rightar­row class.
    • A list item using the list-​icon rightar­row class.

    • A list item using the list-​icon skype class.
    • A list item using the list-​icon skype class.

    • A list item using the list-​icon rss class.
    • A list item using the list-​icon rss class.
    • A list item using the list-​icon lef­t­ar­row class.
    • A list item using the list-​icon lef­t­ar­row class.

    • A list item using the list-​icon cir­clear­row class.
    • A list item using the list-​icon cir­clear­row class.

    • A list item using the list-​icon drop­box class.
    • A list item using the list-​icon drop­box class.

    • A list item using the list-​icon vimeo class.
    • A list item using the list-​icon vimeo class.

    • A list item using the list-​icon dow­nar­row class.
    • A list item using the list-​icon dow­nar­row class.

    • A list item using the list-​icon video class.
    • A list item using the list-​icon video class.

    • A list item using the list-​icon upar­row class.
    • A list item using the list-​icon upar­row class.

    • A list item using the list-​icon per­son class.
    • A list item using the list-​icon per­son class.

    • A list item using the list-​icon cal­en­dar class.
    • A list item using the list-​icon cal­en­dar class.

    • A list item using the list-​icon bulb class.
    • A list item using the list-​icon bulb class.

    • A list item using the list-​icon pay­pal class.
    • A list item using the list-​icon pay­pal class.

    • A list item using the list-​icon doc class.
    • A list item using the list-​icon doc class.

    <ul> List Styles (CSS3)

    These list styles are based on the lat­est CSS3 tech­niques and are designed to work in mod­ern browsers (will not dis­play prop­erly in IE6-​IE8).

    To repli­cate, use the fol­low­ing for­mat: <ul class=„class name”><li>.…</li><li>.…</li>…</ul> (HTML) or [list class=„class name”]

  • .…
    • [li.…[/li][/list] (ROKCANDY). The class names are listed below, such as „check­mark red”.

    • Check­mark
    • Check­mark
    • Circle-​Checkmark
    • Circle-​Checkmark
    • Square-​Checkmark
    • Square-​Checkmark
    • Check­mark Green
    • Check­mark Green
    • Check­mark Yellow
    • Check­mark Yellow
    • Check­mark Red
    • Check­mark Red
    • Check­mark Blue
    • Check­mark Blue
    • Check­mark White
    • Check­mark White
    • Triangle-​Small
    • Triangle-​Small
    • Tri­an­gle
    • Tri­an­gle
    • Triangle-​Large
    • Triangle-​Large
    • Tri­an­gle Green
    • Tri­an­gle Green
    • Tri­an­gle Yellow
    • Tri­an­gle Yellow
    • Tri­an­gle Red
    • Tri­an­gle Red
    • Tri­an­gle Blue
    • Tri­an­gle Blue
    • Tri­an­gle White
    • Tri­an­gle White
    • Circle-​Small
    • Circle-​Small
    • Cir­cle
    • Cir­cle
    • Circle-​Large
    • Circle-​Large
    • Cir­cle Green
    • Cir­cle Green
    • Cir­cle Yellow
    • Cir­cle Yellow
    • Cir­cle Red
    • Cir­cle Red
    • Cir­cle Blue
    • Cir­cle Blue
    • Cir­cle White
    • Cir­cle White

    <span> Inset Styles

    Prae­sent rutrum sapien ac felis. Phasel­lus ele­men­tum dolor quis turpis. Vestibu­lum nec mi vitae pede tin­cidunt non­ummy. Vestibu­lum facil­i­sis mol­lis neque. Sed orci. Cum sociis natoque penat­i­bus et mag­nis dis par­turi­ent montes, nasce­tur ridicu­lus mus. Inset Right TitleYou will need to use the fol­low­ing for­mat­ting: <span class=„inset-right”> <span class=„inset-right-title”> .… </​span> … some con­tent … </​strong> (HTML) or [inset side=„right” title=„Inset Right Title”] … some con­tent …[/​inset] (ROKCANDY) Vestibu­lum facil­i­sis mol­lis neque. Sed orci. Cum sociis natoque penat­i­bus et mag­nis dis par­turi­ent montes, nasce­tur ridicu­lus mus. Sed euis­mod magna a nibh.

    Prae­sent rutrum sapien ac felis. Phasel­lus ele­men­tum dolor quis turpis. Vestibu­lum nec mi vitae pede tin­cidunt non­ummy. Vestibu­lum facil­i­sis mol­lis neque. Sed orci. Cum sociis natoque penat­i­bus et mag­nis dis par­turi­ent montes, nasce­tur ridicu­lus mus. Inset Left TitleYou will need to use the fol­low­ing for­mat­ting: <span class=„inset-left”> <span class=„inset-left-title”> .… </​span> … some con­tent … </​strong> (HTML) or [inset side=„left” title=„Inset Left Title”] … some con­tent …[/​inset] (ROKCANDY) Vestibu­lum facil­i­sis mol­lis neque. Sed orci. Cum sociis natoque penat­i­bus et mag­nis dis par­turi­ent montes, nasce­tur ridicu­lus mus. Sed euis­mod magna a nibh.

    Sed euis­mod magna a nibh. Prae­sent rutrum sapien ac felis. Phasel­lus ele­men­tum dolor quis turpis. Vestibu­lum nec mi vitae pede tin­cidunt non­ummy. Prae­sent rutrum sapien ac felis. Phasel­lus ele­men­tum dolor quis turpis. Vestibu­lum nec mi vitae pede tin­cidunt non­ummy. Vestibu­lum facil­i­sis mol­lis neque.

    Cum sociis natoque penat­i­bus et mag­nis dis par­turi­ent montes, nasce­tur ridicu­lus mus.Praesent rutrum sapien ac felis. Phasel­lus ele­men­tum dolor quis turpis. Vestibu­lum nec mi vitae pede tin­cidunt non­ummy. Vestibu­lum facil­i­sis mol­lis neque. Sed orci. Cum sociis natoque penat­i­bus et mag­nis dis par­turi­ent montes, nasce­tur ridicu­lus mus.