FCKeditor 2.x/Developers Guide/Configuration/Configuration Options/CustomStyles - Revision history

W.olchawa at 12:46, 15 January 2008

2008-01-15T12:46:37Z

W.olchawa at 12:30, 15 January 2008

2008-01-15T12:30:06Z

W.olchawa: New page: == CustomStyles == The CustomStles feature will allow you to add your own Styles into the "Styles" Context Menu. You may define as many styles as you want due to your needs. Adding a new ...

2008-01-15T12:22:51Z

New page: == CustomStyles == The CustomStles feature will allow you to add your own Styles into the "Styles" Context Menu. You may define as many styles as you want due to your needs. Adding a new ...

New page

== CustomStyles ==

The CustomStles feature will allow you to add your own Styles into the "Styles" Context Menu. You may define as many styles as you want due to your needs. Adding a new style is very easy. An example will show you how to do it properly:

Example: you want to create a new style called: "MY STYLE 1" which will have the following attributes:
* the style should apply to the 'Heading 2' (h2) format
* the font color is 'Blue'
* the background color is 'Red'

To add your custom style "MY STYLE 1" add the below code to the fckconfig.js file:
<pre>
FCKConfig.CustomStyles =
{
'Red Title' : { Element : 'h3', Styles : { 'color' : 'Red' } },
'MY STYLE 1' : {Element :'h2', Styles : {'color' : 'Blue' , 'background-color' : 'Red' } }
};
</pre>

As you may see the syntax of the function is very easy:
* in ' '

@@ Line 1: / Line 1: @@
 == CustomStyles ==
-The CustomStles feature will allow you to add your own Styles into the "Styles" Context Menu. You may define as many styles as you want due to your needs. Adding a new style is very easy. An example will show you how to do it properly:
+The CustomStles feature will allow you to add your own Styles into the "Styles" menu. You may define as many styles as you want due to your needs. Adding a new style is very easy. An example will show you how to do it properly:
 Example: you want to create a new style called: "MY STYLE 1" which will have the following attributes:

@@ Line 4: / Line 4: @@
 Example: you want to create a new style called: "MY STYLE 1" which will have the following attributes:
 * the style should apply to the 'Heading 2' (h2) format
 * the font color is 'Blue'
@@ Line 9: / Line 10: @@
 To add your custom style "MY STYLE 1" add the below code to the fckconfig.js file:
-<pre>
+<pre>FCKConfig.CustomStyles =
+{
-	'Red Title'	: { Element : 'h3', Styles : { 'color' : 'Red' } },
+'Red Title'&nbsp;: { Element&nbsp;: 'h3', Styles&nbsp;: { 'color'&nbsp;: 'Red' } },
-	'MY STYLE 1' : {Element :'h2', Styles : {'color' : 'Blue' , 'background-color' : 'Red' } }
+'MY STYLE 1'&nbsp;: {Element&nbsp;:'h2', Styles&nbsp;: {'color'&nbsp;: 'Blue' , 'background-color'&nbsp;: 'Red' } }
 };
 </pre>
-As you may see the syntax of the function is very easy:
+* in '&nbsp; ' apostrophe you type the name of your style
-* in ' '
+* after the colon you type in the definition of your style inside the curly brackets { }