EMAIL [email protected]
Call Now + 353 1 414 2235
The CRY Helpline Freephone Ireland | 1800 714 080 N. Ireland / UK | 00 44 8006 40 62 80
Donate Now!
  • Home
  • About CRY
    • About Us
    • Our Team
    • Our Policies
    • Governance
  • Need help
    • Information
    • CRYP Centre
      • CRYP Screening Centre
      • Cardiac Screening Tests
      • What is an ICD?
    • Family Support Programme
      • FAMILY SUPPORT PROGRAMME
      • Useful Links
      • CRY Team – Psychotherapists
  • News & Events
    • Events
      • Event List
      • Events Calendar
    • Our News
    • Thank You Messages
  • Get involved
    • Upcoming Events
    • Donate
      • Online Donations
      • Buy tickets
      • Ways to donate
      • Tax Relief
    • Organise an Event
    • Fitness Challenges
    • Corporate Fundraising
  • Research
    • Research
    • Clinical Research
    • Michael Greene Summer Studentship
    • 2024 Michael Greene Summer Studentship
  • Contact Us

Template Typography

Posted by wordpress
0 0

Creating Beautiful Content With Simple Code

Typography is a fundamental part of a template, providing you with the tools to characterise your content and bring it to life. There is a vast array of typography available with the template, as is with our previous releases, from list styles, notice blocks and a diverse number of other elements.

If you are using the TinyMCE editor for HTML typography, go to Extensions → Plugin Manager → TinyMCE 2.0 → Set Code Clean-up on Save to Never.

<h1> Heading Styles

H1. Heading 1

H2. Heading 2

H3. Heading 3

H4. Heading 4

H5. Heading 5

H1. Page Title

H1. Content Title

<ul> List Styles

  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
 

<p> DropCap Styles

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibu. Pellentesque vel enim urna, sit amet blandit ipsum. Maecenas quis sem sit amet nunc pretium mattis. Sed dapibus semper est, sed pretium erat.

Use the following format: <p class=”dropcap”>…</p> (HTML) or [dropcap class=”dropcap”]…[/dropcap] (ROKCANDY). You can use any letter, symbol or number.

Praesent rutrum sapien ac felis. Use this format: <p class=”dropcap2″>…</p> (HTML) or [dropcap class=”dropcap2″] … [/dropcap] (ROKCANDY)

Praesent rutrum sapien ac felis. Use this format: <p class=”dropcap3″>…</p> (HTML) or [dropcap class=”dropcap3″] … [/dropcap] (ROKCANDY)

Praesent rutrum sapien ac felis. Use this format: <p class=”dropcap4″>…</p> (HTML) or [dropcap class=”dropcap4″] … [/dropcap] (ROKCANDY)

Praesent rutrum sapien ac felis. Use this format: <p class=”dropcap5″>…</p> (HTML) or [dropcap class=”dropcap5″] … [/dropcap] (ROKCANDY)

<blockquote> Styles

To replicate, use the following formatting: <blockquote><p>….</p></blockquote> (HTML) or [blockquote class=”default”]…[/blockquote] (ROKCANDY).

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

To replicate, use the following formatting: <blockquote class="alignleft"><p>….</p></blockquote> (HTML) or [blockquote class=”alignleft”]…[/blockquote] (ROKCANDY).

Lorem ipsum dolor sit amet, consecetur adipiscing elit. Mauris metus tortor.

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

To replicate, use the following formatting: <blockquote class="alignright"><p>….</p></blockquote> (HTML) or [blockquote class=”alignright”]…[/blockquote] (ROKCANDY).

Lorem ipsum dolor sit amet, consecetur adipiscing elit. Mauris 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 sample of the Approved style. To replicate, use the following syntax: <p class=”approved”>….</p> (HTML) or [notice class=”approved”] … [/notice] (ROKCANDY).

This is a sample of the Attention style. To replicate, use the following syntax: <p class=”attention”>….</p> (HTML) or [notice class=”attention”] … [/notice] (ROKCANDY).

This is a sample of the Notice style. To replicate, use the following syntax: <p class=”notice”>….</p> (HTML) or [notice class=”notice”] … [/notice] (ROKCANDY).

This is a sample of the Alert style. To replicate, use the following syntax: <p class=”alert”>….</p> (HTML) or [notice class=”alert”] … [/notice] (ROKCANDY).

 

<span> Text Icon

To replicate, the following format: <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 an email icon

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 rightarrow icon

Text with a leftarrow icon

Text with a circlearrow icon

Text with a downarrow icon

Text with an uparrow icon

Text with a person icon

Text with a calendar icon

Text with a doc icon

Text with a bulb icon

Text with a twitter icon

Text with a youtube icon

Text with a skype icon

Text with a facebook icon

Text with a like icon

Text with a video icon

Text with a dropbox icon

Text with a vimeo icon

Text with a paypal icon

<em> Emphasis Styles

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="italic">…</em> (HTML) or [emphasis]…[/emphasis] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold">…</em> (HTML) or [emphasisbold]…[/emphasisbold] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold2">…</em> (HTML) or [emphasisbold2]…[/emphasisbold2] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight">…</em> (HTML) or [highlight class="default"]…[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight white">…</em> (HTML) or [highlight class="white"]…[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight black">…</em> (HTML) or [highlight class="black"]…[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight green">…</em> (HTML) or [highlight class="green"]…[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight yellow">…</em> (HTML) or [highlight class="yellow"]…[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight blue">…</em> (HTML) or [highlight class="blue"]…[/highlight] (ROKCANDY)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight red">…</em> (HTML) or [highlight class="red"]…[/highlight] (ROKCANDY)

 

Font Awesome Icons

Font Awesome is a pictographic language of web-related actions which delivers 220 icons. The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0 and you can find the full examples of usage at Font Awesome – http://fortawesome.github.com/Font-Awesome

To replicate, use the following format: <span class=”icon-name“></span> or [span class="icon-name"]…[/span] (ROKCANDY). The icons name are listed below, such as “icon-signal“.

Text using icon-adjust

Text using icon-asterisk

Text using icon-calendar

Text using icon-flag

Text using icon-external-link

Text using icon-gift

Text using icon-print

Text using icon-group

Text using icon-signal

Text using icon-shopping-cart

Text using icon-leaf

Text using icon-download-alt

 

<ul> List Styles (Icons)

To replicate, use the following format: <ul class=”list-icon icon_name”><li>….</li><li>….</li>…</ul> (HTML) or [list class=”list-icon icon_name”][li]….[/li][li….[/li][/list] (ROKCANDY). The icon names are listed below, such as “cart“.

  • A list item using the list-icon email class.
  • A list item using the list-icon email class.

  • 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 twitter class.
  • A list item using the list-icon twitter 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 facebook class.
  • A list item using the list-icon facebook 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 rightarrow class.
  • A list item using the list-icon rightarrow 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 leftarrow class.
  • A list item using the list-icon leftarrow class.

  • A list item using the list-icon circlearrow class.
  • A list item using the list-icon circlearrow class.

  • A list item using the list-icon dropbox class.
  • A list item using the list-icon dropbox 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 downarrow class.
  • A list item using the list-icon downarrow 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 like class.
  • A list item using the list-icon like class.
  • A list item using the list-icon uparrow class.
  • A list item using the list-icon uparrow class.

  • A list item using the list-icon person class.
  • A list item using the list-icon person class.

  • A list item using the list-icon calendar class.
  • A list item using the list-icon calendar 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 paypal class.
  • A list item using the list-icon paypal 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 latest CSS3 techniques and are designed to work in modern browsers (will not display properly in IE6-IE8).

To replicate, use the following format: <ul class=”class name”><li>….</li><li>….</li>…</ul> (HTML) or [list class="class name"][li]….[/li][li….[/li][/list] (ROKCANDY). The class names are listed below, such as “checkmark red“.

  • checkmark
  • checkmark
  • circle-checkmark
  • circle-checkmark
  • square-checkmark
  • square-checkmark
  • checkmark green
  • checkmark green
  • checkmark yellow
  • checkmark yellow
  • checkmark red
  • checkmark red
  • checkmark blue
  • checkmark blue
  • checkmark white
  • checkmark white
  • triangle-small
  • triangle-small
  • triangle
  • triangle
  • triangle-large
  • triangle-large
  • triangle green
  • triangle green
  • triangle yellow
  • triangle yellow
  • triangle red
  • triangle red
  • triangle blue
  • triangle blue
  • triangle white
  • triangle white
  • circle-small
  • circle-small
  • circle
  • circle
  • circle-large
  • circle-large
  • circle green
  • circle green
  • circle yellow
  • circle yellow
  • circle red
  • circle red
  • circle blue
  • circle blue
  • circle white
  • circle white
 

<span> Inset Styles

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inset Right TitleYou will need to use the following formatting: <span class="inset-right"> <span class="inset-right-title"> …. </span> … some content … </strong> (HTML) or [inset side=”right” title=”Inset Right Title”] … some content …[/inset] (ROKCANDY) Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inset Left TitleYou will need to use the following formatting: <span class="inset-left"> <span class="inset-left-title"> …. </span> … some content … </strong> (HTML) or [inset side=”left” title=”Inset Left Title”] … some content …[/inset] (ROKCANDY) Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Post Reply

Cancel reply

Your email address will not be published. Required fields are marked *

Logo

  • The CRY Centre, Unit B14, Tallaght Cross West, Dublin 24, D24 R3HC
  • +353 1 414 2235
  • 1800 714 080 - The CRY Helpline (Ireland) Freephone
  • 00 44 8006 40 62 80 - The CRY Helpline (N.Ireland / UK) Freephone
  • [email protected]
  • CHY 14506

Quick Links

  • About Us
  • Events
  • Mission
  • Privacy Policy
  • News
  • Thank you
  • Contact

Latest News

Remembering Rory
Mar 24, 2026
Thank You
Mar 24, 2026
Final Charity Race Numbers Available for Team ...
Mar 11, 2026

CRY on Twitter

Tweets by @CRYIre
Cry takes privacy and the protection of personal data very seriously and your data is stored securely. Under the General Data Protection Regulation you have the right to ask for your data, to ask us to stop processing your data, or to ask for this data to be deleted.

If you have any questions on this you can contact our Data Protection Coordinator at [email protected]

Proudly Supported By 
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Cookie settingsACCEPT
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.

CookieDurationDescription
cookielawinfo-checbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Advertisement

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.

CookieDurationDescription
NID11 monthsCookie is set by Google Ads Optimization. Functionality is to enable ad delivery or retargeting& store of user preferences. Purpose is marketing/tracking

Analytics

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.

Functional

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.

CookieDurationDescription
charitable_session11 monthsTracks website behaviour between the charitable donation plugin and the payment gateway. Essential to allow the site to securely process a donation when instructed by the user.
wordpress_test_cookie11 monthsCookie is placed by WordPress. Functionality is to check if cookies can be placed. Purpose is functionality

Google

All GA cookies live here

Others

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.

Performance

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

SAVE & ACCEPT