CustomStyles"

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

(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 ...)
 
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
 
== CustomStyles ==
 
== 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:
 
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 style should apply to the 'Heading 2' (h2) format
 
* the font color is 'Blue'
 
* 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:
 
To add your custom style "MY STYLE 1" add the below code to the fckconfig.js file:
<pre>
+
<pre>FCKConfig.CustomStyles =  
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>
+
</pre>  
 +
As you may see the syntax of the function is very easy:
  
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 { }
 +
* '''Element''' points to the element you want your style to apply to e.g. h1,h2,h3
 +
* '''Style''' defines the attributes of your own unique style e.g. color, background-color,font-family

Latest revision as of 13:46, 15 January 2008

CustomStyles

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:

  • 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:

FCKConfig.CustomStyles = 
{
'Red Title' : { Element : 'h3', Styles : { 'color' : 'Red' } },
'MY STYLE 1' : {Element :'h2', Styles : {'color' : 'Blue' , 'background-color' : 'Red' } }
};

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

  • in '  ' apostrophe you type the name of your style
  • after the colon you type in the definition of your style inside the curly brackets { }
  • Element points to the element you want your style to apply to e.g. h1,h2,h3
  • Style defines the attributes of your own unique style e.g. color, background-color,font-family
This page was last edited on 15 January 2008, at 13:46.