Hi,

I'm newly to join CK. I created a few custom css files for styling web content. However, I don't know how to link up my custom css files using CK editor.

Hi JimmyJames,

Thank you for your post.

By default the editor looks for the template.css however you can configure it to look at a different css stylesheets.

Heres how:

Go to the backend and Login in with your ‘Username’ and ‘Password’. Go to 'Extensions' and click on ‘Plugin Manager’ > and select and open the 'JoomlaCK' Plug-in.

In the editor you will see a set of Parameters on the right:

* Set the “Use Template CSS classes?” to NO

* In “Use Custom CSS Classes?” field place the pathway to the CSS file you want to use with the editor (It will normal look something link this: templates/yourtemplatename/css/cssfile.css) and press Save.

* To apply the setting and close click on 'Save'.

Also the editor support the CSS import rule:

This can be used to include external styles sheet in the editor. Please see webdesign.about.com/cs/css/qt/tipcssatimport.htm

Hope that helps and take care,

P

Thanks for reply.

I already added the path in "Use Custom CSS Classes?" and "Location For Addition Stylesheets" .

However, I still can't select the custom div id & div class on the style selector in editor.(please see attached file)

Moreover, which file I should add the "@import in Cascading Style Sheets" tag to link up my custom css file?

Regards,

Ok here’s what to do.

1. Set the editor to look at your template.css file or equivalent css file.

2. At the top of the template.css file (or equivalent css file) use the css important rule to include external style-sheets. It should look something like this:



This will include the other styles in your other style-sheets into the editors style dropdown list. The other thing worth checking is your css tag. A CSS error in your style-sheet could cause the list not to populate.

Take care,

Paul

Finally , I get it.