Using Typography

Every RocketTheme theme is accompanied by custom content styles known as Typography. This guide outlines how to use Typography in your content.

Typography – Shortcodes Mode

All the typography in the template have shortcodes syntax which is outlined at the Shortcodes Examples page. In this guide, we will use the Attention Span Style, which uses the [div class=”attention” class2=”typo-icon”]…[/div] syntax.

  • Login to the WordPress Admin Dashboard
  • Go to Posts → Edit Post; or, if you wish to use the syntax in widgets, Go to Appearance → Widgets
  • Choose the Post, or place the text widget in any position
  • Insert [div class=”attention” class2=”typo-icon”] …. some content …. [/div]
  • Save

As shortcodes are not affected by the stripping functions of the WYSIWYG editor, you can insert the shortcodes snippets without any issue. If you are in HTML mode, the snippets will still function.

Typography – HTML Mode

Every shortcode typographical element can be used in its HTML form as outlined at the HTML Examples page. HTML typography allows for more custom control in the article but requires an additional step. In this guide, we will use the Attention Span Style, which uses the <div class=”attention”><div class=”typo-icon”>…</div></div> syntax.

Content Editor

  • Login to the WordPress Admin Dashboard
  • Go to Posts → Edit Post; or, if you wish to use the syntax in widgets, Go to Appearance → Widgets
  • Choose the Post, or place the text widget in any position
  • Click the HTML mode or equivalent in your editor
  • Insert <div class=”attention”><div class=”typo-icon”> … some content … </div></div>
  • Save

Note, with the Content Editor (WYSIWYG) enabled, you need to enter HTML mode otherwise the typography will not work.