Getting CKEditor to show styles from style.css

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
8/23/2012 10:15:56 AM
Gravatar
Total Posts 133
J

Getting CKEditor to show styles from style.css

I would like CKeditor to display the styles used in the HTMLContent as defined in styl.css, ideally both in the body of the editor and in the dropdown. Do I cretae style templates to match the Heading styles etc and or edit content.css in the CK folder under clientscript?

Can't seem to find an answer for this.

John

 

8/23/2012 10:21:06 AM
Gravatar
Total Posts 1204
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Getting CKEditor to show styles from style.css

I'm not sure about styling the content of the entries in the dropdown list, but you can override the styling of the content area by using the selector body.wysiwygeditor to make it look the way you want. For instance:

body.wysiwygeditor h1 { font-size: 20px; margin: 21px 0 12px 0; }
body.wysiwygeditor h2 { font-size: 18px; margin: 19px 0 12px 0; }
body.wysiwygeditor h3 { font-size: 17px; margin: 18px 0 12px 0; }
body.wysiwygeditor h4 { font-size: 16px; margin: 17px 0 12px 0; }
body.wysiwygeditor h5 { font-size: 15px; margin: 16px 0 12px 0; }
body.wysiwygeditor h6 { font-size: 13px; margin: 14px 0 12px 0; }
body.wysiwygeditor ul, ol { font-family: Arial, Helvetica, Sans-Serif; font-size: 13px; margin: 0 0 0 2em; padding: 0; }
body.wysiwygeditor p { font-family: Arial, Helvetica, Sans-Serif; font-size: 13px; margin: 12px 0; }

Hope that helps,

Jamie

8/23/2012 10:26:29 AM
Gravatar
Total Posts 133
J

Re: Getting CKEditor to show styles from style.css

Thanks Jamie - will get that sorted. I am more used to FCK the old version where you defined styles in a file called styles.xml that were picked up by the editor for the dropdown but CK seems to do things differently. Getting the main element slooking OK will be fine

 

J

8/23/2012 10:34:34 AM
Gravatar
Total Posts 18439

Re: Getting CKEditor to show styles from style.css

See the article Creating Content Style Templates

Hope that helps,

Joe

3/22/2013 10:41:56 AM
Gravatar
Total Posts 28

Re: Getting CKEditor to show styles from style.css

Do you recommend placing those styles in style.css, or another stylesheet?

For example:

body.wysiwygeditor h1 { font-size: 20px; margin: 21px 0 12px 0; }

I am able to target iframe.cke_wysiwyg_frame in style.css, but trying to target anything further down in the hierarchy is not working for me. I am using CKEditor, and the latest version of mojo. Even a call like iframe.cke_wysiwyg_frame h1 fails to be read from style.css.

Thanks!
Kiersten

You must sign in to post in the forums. This thread is closed to new posts.