Editing Styles : Custom  JCK Typography

In this section we'll show you, how to start customising the JCK Typography style-sheet and how you can use it to bring the editor inline with your template. To do this we need to start by finding out what typography classes are being used in your template and add them to the editor. The best and easiest way of doing this is to use the famous Firebug plugin for Firefox. While other browsers like Chrome, Opera or IE have similar functionalities this Web Developer Tool is very user-friendly and probably the easiest tool to use.

If you haven’t done this before don't be worried as Firebug will do all the work for you, all you need to do is 'copy' and 'paste' to bring your styles into your editor's editing area. Once Firebug has been installed click on ‘F12’ (to open Firebug up in Firefox) and use the element path inspector () to select the required element. In this example I am selecting the main H1 Header, please see the screen-shot below:

Firebug has now told us that “font-family: DroidSansRegular, font-size: 36 px and line-height: 36px" is being used for the H1 header style. Next all we need to do is copy and paste this to the editor's typography style-sheet and save it - Job done!

To do this please go to 'Extensions' and click on ‘Plug-in Manager’ > and filter and click on the 'JoomlaCK' plug-in. In Joomla 2.5 click on the “Advanced Options”, in Joomla 3x this is found under the 'Basic Options' tab. Go to the ‘Edit JCK typography’ parameter and click on the ‘Expand View’ button (please see below). And lastly simply copy your header style to the H1 header on line 22 as seen in the exmaple below.

The editor will now correctly render the H1 style meaning what you see on the page will be an exact replication of your styles. Next you will need to repeat this exercise for the ‘body’ and for as many classes you wish to use.