FCKeditor: problem to customize the "Style" toolbox combo list (or "Format")

[Skiron]

I'm trying to change the list of the available styles in the "Style" toolbox combo list (or in the "Format" toolbox combo list) such that it uses the style defined in my CSS file. (I'm using WB2.7)

I found how to customize the "style" list by changing the "modules/fckeditor/wb_config/wb_fckstyles.xml" file and how to customize the "Format" list using
http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options/FontFormats
(http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options/CustomStyles and http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options/CoreStyles may be usefull).

But the point is that I want to use "class" or "id" style from a "div" box. (and the previous examples only allow me to customize existing keywords such as "p", "h1", "img",... ...).

So I used the solution given here:
http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options/BodyId_and_BodyClass.
which says that assuming that my CSS file is given by:

Code:

body {background-color:#000;}
h1 { color:#FFF;}
#news {background-color:#FFF;}
#news h1 {color:#333;}

By specifying in the config file:

Code:

FCKConfig.BodyId = 'news' ;

a new item named "news" should appear in the "Style" and "Format" lists, but in my case, it doesn't.
I searched in the config files, I tried several tricks, but it doesn't work... I don't know what I'm doing wrong.

I searched on the FCKeditor and WebsiteBaker forums, but I didn't find any answer.
Does anybody has succeded in using this solution ?

[ruebenwurzel]

Hello,

for to get your styles in the dropdownlist of the FCKEditor Modul for WB you have two options:

1.) Add a editor.css file to your Template with the styles in it you need
2.) Adapt the file modules/fckeditor/wb_config/wb_fckstyles.xml

No other changes on the modul files are required.

Matthias

[Ruud]

..and don't forget to clear your browser cache when changing something.

Ruud

[Skiron]

Thank you for this quick answer.
I rapidly had a look on this two solutions, and here are my comments:

1.) Using the editor.css file
It does what I was expecting except one point:
-> it only detects the "class" attribute in the css file (".sample{...}") and not the "id" ones ("#sample{...}") thus, cascaded classes after and id ("#sample1 .sample2{...}") are not detected. Is it normal ?

2.) Adapting the "modules/fckeditor/wb_config/wb_fckstyles.xml" file
Well, I succeded to create a style with particular attribute, for instance:

Code:

<Style name="Sample" element="span">
    <Style name="color" value="yellow" />
</Style>

But this will save the page with the style attribute (here the color) WITHOUT using my CSS file where a class "sample" is defined by

Code:

.sample{color: yellow; }

And of course, if I want to change the look and feel of my website, changing the CSS file will not be enough.

I don't know how to create a style in the "wb_fckstyles.xml" file which is going to use my CSS file. Is it possible ?

Once again, thank you Matthias for the answer, and RuudE, I noticed (by chance) that clearing the cache was needed to take the changes into account (not so user-friendly when developping...) and I lost some time on that... so thanks for reminding !

[thone]

Skiron, did you already find a solution?

If not, here it is:

to add a style with an attribute add the attribute-tag in the style like so:

Code:

<Style name="name-of-style ie smallheader" element="element-of-style ie div">
    <Attribute name="name of attribute ie class" value="value of attribute ie smallheader" />
</Style>