Styling The HTML Editor, CKEditor

Adding your theme's CSS to CKEditor

Update: As of gpEasy 2.0 this information is no longer necessary. gpEasy 2.0 introduced inline WYSIWYG editing that takes advantage of your styles. For more information on making your theme compatible with gpEasy's True WYISIWYG please go here.


You can read the gpEasy documentation for CKEditor CSS integration and apply it if you like. I've noted potential pitfalls in the gpEasy Wiki. The main point is, when your CSS is integrated with CKEditor and you copy something you are copying the CSS formatted text; therefore, you will be pasting that text with all that CSS formatting code. It's a nice hack if you aren't doing a lot of copying and pasting in CKEditor. The main way around it is, copy the text then use the "paste as text" command. This will strip the CSS styling. No point in duplicating your CSS. Personally I love having the CSS integrated in CKEditor. It gives me a much better idea of what the final page will look like.

Additionally, you can make a separate css file in your themes folder just for CKEditor. I use my main theme's css for and place it in a file named ckeditor.css within the themes folder. I then @import that file into the ckeditor css described in the gpEasy documentation (/include/css/ckeditor_contents.css). This way I can specify certain things for CKEditor that I don't want affecting my site, like; p, li, pre {font-size:18px;} - this makes CKEditor much easier to reach while working in it.

The other reason I do this is because, CKEditor seems to make everything smaller, thus it doesn't really look optimal. Adding a larger font size for CKEditor makes it a lot easier to work in CKEditor. The default font size is very small especially on higher resolution screens. So, I make a separate file, ckeditor.css, in my themes folder and add my theme's css  and customize it for CKEditor and then @import that css file into /include/css/ckeditor_contents.css  and I'm good to go.

Another alternative importing your css in to the ckeditor css file it to change the css file loaded in the /include/js/ckeditor_config.js file discussed in the following hacks. You will see a line of code that looks like: .contentsCss=gpBase+'/include/css/ckeditor_contents.css';

That line tells CKEditor what css file to open when it starts. I simply change it to: g.contentsCss=gpBase+'/themes/ckeditor.css';

Then it will call the css file stored in the themes folder named ckeditor.css. This is a better way if you are going to apply any of the following hacks to the ckeditor_config.js file because you won't have to apply the @import hack--one less file to hack.

However, you will want to copy over the style code from the /include/css/ckeditor_contents.css file. You will also need to check to make sure it all works together. Here's what my /themes/ckeditor.css file looks like:

@import url("/themes/ThemeFolder/ThemeColor/style.css");
/* from /include/css/ckeditor_contents.css file */
html{_overflow-y: scroll }
img:-moz-broken{-moz-force-broken-image-icon :1;width :24px;height :24px;}
table td,table th{ border:1px dotted #ccc;vertical-align:top;}
/*custom ckeditor setting for readability*/
p, li, pre {font-size:18px;}
p {padding:0 10px 0 0;}

You can see that I'm importing my default theme's style.css that I'm using for my site. After that I've copied over the original css used. Then I add some styling to make text more readable--it's generally way too small and zooming the browser caused other CKEditor issues. OK, that should get you styling CKEditor to look however you like.


gpEasy B2sq Theme by CS @True Acupuncture