CKEditor for Joomla/Custom Styles and Templates - Revision history

Anna: TOC added

2011-11-30T14:19:58Z

TOC added

Anna: Article added, Template files section

2011-11-30T14:19:26Z

Article added, Template files section

Anna: Article added, CSS files section

2011-11-30T13:58:41Z

Article added, CSS files section

Anna: Article added, Styles section

2011-11-30T13:37:51Z

Article added, Styles section

New page

{{#CUSTOMTITLE:Setting Custom Editor Styles and Templates}}
The look and feel of the editor installed in your Joomla! page can be modified to suit the character and style of your website. This article will explain how to add custom styles, CSS files, and templates to your CKEditor installation.

== Adding Styles to CKEditor Styles Drop-down List ==
If you want to add and display additional styles in the editor '''Styles''' drop-down list, proceed as described below.

First of all, you need to create the [[CKEditor_3.x/Developers_Guide/Styles|JavaScript file containing style definitions]]. Pay special attention to the definition format. You can also take the default file that is distributed with CKEditor for Joomla! and adjust it to your needs.

The style definitions file needs to be added to the <code>''Joomla_site''/plugins/editors/ckeditor/styles</code> directory.

[[Image:Joomla_adding_styles_01.png|frame|center|Style definition files for CKEditor]]

<note>The name given in the <code>addStylesSet</code> definition must be the same as the file name without the <code>.js</code> extension, like in <code>CKEDITOR.addStylesSet( 'my_style', )</code>.</note>

When the file is added, enter the '''CKEditor Configuration''' section in Joomla! Administration. Go to the '''Advanced Settings''' tab and add the style definition file name (in this example <code>my_style.js</code>) to the '''Styles''' definition file field.

[[Image:Joomla_adding_styles_02.png|frame|center|Adding a style definition file in CKEditor for Joomla!]]

Your newly defined styles will now be displayed in the '''Styles''' drop-down list and used in the editing area of CKEditor.

← Older revision		Revision as of 14:19, 30 November 2011
Line 1:		Line 1:
		+	__TOC__
	{{#CUSTOMTITLE:Setting Custom Editor Styles and Templates}}		{{#CUSTOMTITLE:Setting Custom Editor Styles and Templates}}
	The look and feel of the editor installed in your Joomla! page can be modified to suit the character and style of your website. This article will explain how to add custom styles, CSS files, and templates to your CKEditor installation.		The look and feel of the editor installed in your Joomla! page can be modified to suit the character and style of your website. This article will explain how to add custom styles, CSS files, and templates to your CKEditor installation.

@@ Line 3: / Line 3: @@
 == Adding Styles to the CKEditor Styles Drop-down List ==
-If you want to add and display additional styles in the editor '''Styles''' drop-down list, proceed as described below.
+If you want to add and display additional styles in the editor '''[[CKEditor_3.x/Users_Guide/Styling/Styles|Styles]]''' drop-down list, proceed as described below.
 First of all, you need to create the [[CKEditor_3.x/Developers_Guide/Styles|JavaScript file containing style definitions]]. Pay special attention to the definition format. You can also take the default file that is distributed with CKEditor for Joomla! and adjust it to your needs.
@@ Line 15: / Line 15: @@
-When the file is added, enter the '''CKEditor Configuration''' section in Joomla! Administration. Go to the '''Advanced Settings''' tab and add the style definition file name (in this example <code>my_style.js</code>) to the '''Styles''' definition file field.
+When the file is added, enter the '''CKEditor Configuration''' section in Joomla! Administration. Go to the '''Advanced Settings''' tab and add the style definition file name (in this example <code>my_style.js</code>) to the '''Styles definition file''' field.
 [[Image:Joomla_adding_styles_02.png|frame|center|Adding a style definition file in CKEditor for Joomla!]]
@@ Line 30: / Line 30: @@
-After the files are added, enter the '''CKEditor Configuration''' section in Joomla! Administration. Go to the '''Advanced Settings''' tab and add the semi-colon separated CSS file names (in this example <code>my_contents.css;my_new_contents.css</code>)  to the CSS files field.
+After the files are added, enter the '''CKEditor Configuration''' section in Joomla! Administration. Go to the '''Advanced Settings''' tab and add the semi-colon separated CSS file names (in this example <code>my_contents.css;my_new_contents.css</code>)  to the '''CSS files''' field.
 [[Image:Joomla_adding_CSS_02.png|frame|center|Adding a CSS file in CKEditor for Joomla!]]

@@ Line 2: / Line 2: @@
 The look and feel of the editor installed in your Joomla! page can be modified to suit the character and style of your website. This article will explain how to add custom styles, CSS files, and templates to your CKEditor installation.
-== Adding Styles to CKEditor Styles Drop-down List ==
+== Adding Styles to the CKEditor Styles Drop-down List ==
 If you want to add and display additional styles in the editor '''Styles''' drop-down list, proceed as described below.
@@ Line 21: / Line 21: @@
 Your newly defined styles will now be displayed in the '''Styles''' drop-down list and used in the editing area of CKEditor.