Using Typography

A guide to implementing the included MetaMorph typography styles and elements into your site as well as instructions for inserting typography using the HTML editor option of your WYSIWYG editor.

Video Tutorial Currently Available!
Launch the Joomla Using Typography Video Tutorial now! (Requires Flash)

Every RocketTheme template has its own set of content styles, these styles are known as Typography. Typography can come in a number of varying and diverse formats, ranging from simple text modifications to image insertions to improve the look, layout of your website and give it life. This tutorial will take you through the necessary steps to adding typography to your Joomla! content.

Inserting Typography with the HTML Editor

To insert the Typography into your content, you must use the HTML feature of all Joomla! content editors. The following tutorial will outline the steps in which to does this with the default Joomla! content edit, TinyMCE. Please be aware, even though there are other content editors available, all are basically the same and the steps with be just as effective if you are using another Content editor.

Please note that the following tutorial will show you how to insert HTML (typography) into Static Content, the same procedure is apparent for Content Items and Custom modules. You may skip steps 4 and 5 if you are using No WYSIWYG editor.

Step 1 - Login

Login to the Joomla! Administration Control Panel. Go to www.yoursite.com/administrator. Enter the Administrator's Username and password.

Step 2 - Navigation

Navigate to the Static Content Manager. Hover over the Content link on the top taskbar, scroll down to Static Content Manager.

Step 3 - Static Content Manager

When you have selected the Static Content Manager link, you will be sent to the Static Content Manager control panel. Select either Edit (after selecting a particular content item) or New, depending on whether you want to add typography to an existing or new item.

Step 4 - HTML Icon

To add typography to your content, you must enter the HTML mode of your Content editor. In the TinyMCE editor, this an icon called "HTML", in some other content editors, it is a tab. Press the icon to enter HTML mode. This step is not necessary if you are using No WYSIWYG editor.

Step 5 - HTML Mode

A popup shall appear with your content in HTML format, only if you are using TinyMCE, with other editors, a new tab may become selected. You shall do all your editing here for typography.

Step 6 - Inserting HTML

You then proceed to add your HTML coding into the tab/textbox that appears in front of you. This can be any HTML such as span class typography or styled lists.
You will not see the effects in the content editor, all style affects are only visible on the Frontend of your Joomla! website.
 

RokContentRotator

This module is another fine way to introduce snippets of your top stories in a seamless fashion. You can view this module in action on the frontpage of this demo. Read More...

Edit the Logo

We provide a Adobe Fireworks PNG source file in which you can quickly and easily edit important elements of the template, in this case the logo. Simply open the source file in Adobe Fireworks and then follow the instructions Read More...

Logo Dimensions

This guide will inform of the steps needed to edit the dimensions of the logo. You will most likely need to perform this task when you change the logo to a larger or smaller image. Read More...
RocketTheme Joomla Templates