|Installation Guide v3 - Setup Wizard: Editing styles - Custom - JCK Typography|
|Written by Paul (Team Member)|
Page 9 of 33
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.
|Last Updated on Friday, 06 September 2013 08:48|