Installation Guide v3 - Editing Styles : Bring the editor in line with your styles E-mail
Written by Paul (Team Member)   
Article Index
Installation Guide v3
System Requirements
Setup Wizard: Health Cheak
Setup Wizard: Editing Area
Setup Wizard: User Folders
Setup Wizard: Editing styles - Quick
Setup Wizard: Editing styles - Hybrid
Editing Styles : Bring the editor in line with your styles
Setup Wizard: Creating a editor.css file
Joomla Configuration: Enabling plug-ins
Joomla Configuration: Setting the editor as default
Joomla Configuration: Joomla User Accounts
Joomla Configuration: Text Filtering
JCK Manager: Plugin Manager
JCK Manager: Plugin Permissions
JCK Manager: Installing JCK Plugins
JCK Manager: Layout Manager
JCK Manager: Toolbar Assignment
JCK Manager: System Check
JCK Manager: Backup and Restore
JCK Manager: Upgrading - Automatic update process
JCK Manager: Upgrading - Using Joomla's Installer
JCK Manager: Upgrading JCK Plugins
JCK Manager: Sync
JCK Manager: Uninstalling
JCK Editor: Configuration Options
Troubleshooting - (Content being stripped away)
Troubleshooting - (Warning: the JCK Editor cannot find a default template.css...)
Troubleshooting - (File Browsers, Internal Linking and Install Wizard)
Troubleshooting - (File permissions)
Troubleshooting - (.htaccess & Admin Tools from Akeeba)
Troubleshooting - (Slow Performance)
All Pages

Editing Styles : Bring the editor inline with your styles

In this section we'll show you, how to start customising your 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 Monday, 19 May 2014 09:46

Share this post