CKEditor Skin

CKEditor default skins are fugly, up until now I've been using the Office2003 skin due to lack of available skins for ckeditor that don't look like puke, I've started on my own. Not all parts are themed, just the functions I use. Icons are Famfamfam silk and base skin is Office2003 from ckeditor. I've tried to keep it simple, colourless and plain. I plan to update the skin as i discover bugs and or require new features. Please send comments or contact me if you have any suggestions, etc.

Download v0.1 here

Screenshots:

Edit Oct 05 2011: Now officially named "Slick". I will be working towards minor bugfix release in asap and a major release for the CKEditor add-ons forum.

Edit Dec 01 2011: Thanks for all the feedback. I am busy with work but still promise to make a new release soon. The new release will also have a different license pending response from Silk icon creator. GPL would be nice. And a GIT repository for updates. Cheers, thanks for being patient. Chris.

Submitted by Chris Herberte on Wed, 2010-12-15 16:53

Posted in

34 Comments Posted

Nice work; I like the default

Nice work; I like the default "kama" skin except the REALLY bad choice of colors in the popups and the "office2003" skin should have been silver/gray, which is exactly what you seem to have done. So thanks! You should try and get this into the official distribution.
Is there a more recent version of this skin or is 0.1 pretty much final as is?

Submitted by Martijn on Wed, 2010-12-22 01:12.

Love this skin, thanks for

Love this skin, thanks for the upload!! However some icons appear to have a black background in IE 7/8...I tried to modifiy your stylesheets but have not been successful in figuring this out.

Submitted by Greg on Tue, 2011-01-04 05:17.

Thanks for the skin! It's

Thanks for the skin!
It's clean, simple and beautiful. I like it!

By the way, there are some RTL issues with the skin:
(1) There is no icons set for RTL mode (icons_rtl.png). As a result, the buttons appear with no images in it. I've just created a one for the skin. There are no big differences.. just some flipped icons. It would be nice if you merge it with the skin (it just needs to be put inside the main skin folder using the name icons_rtl.png.)
(2) The same thing is for the pop-up window borders. First it needs a flipped image for the side (dialog_sides_rtl.png) which you can find it here also (to be added in images folder). Second, some CSS rules must be changed/added. Here is the firebug log for the changed values (using Firebug changes plugin):

Please note that the previous adjacent value, if exists, is the modified one (e.g. in background-position:-15px-16px -517px; -15px should replaces the old value: -16px)

CSS Set Property:Firebug Change١ كانون الثاني, ٢٠١١ ١٠:٥٦:١١ م
/style()[@href='http://mysite.com/wp-content/themes/p2custom/ckeditor/skins/chris/dialog.css']/rule()[16]
.cke_skin_chris .cke_dialog_ml {
background-position:0px-1px 00pt;
}

CSS Set Property:Firebug Change١ كانون الثاني, ٢٠١١ ١٠:٥٦:٢٧ م
/style()[@href='http://mysite.com/wp-content/themes/p2custom/ckeditor/skins/chris/dialog.css']/rule()[10]
.cke_skin_chris .cke_rtl .cke_dialog_bl {
background-position:-15px-16px -517px;
}

CSS Set Property:Firebug Change١ كانون الثاني, ٢٠١١ ١٠:٥٦:٤٣ م
/style()[@href='http://mysite.com/wp-content/themes/p2custom/ckeditor/skins/chris/dialog.css']/rule()[5]
.cke_skin_chris .cke_rtl .cke_dialog_tl {
background-position:-15px-16px -397px;
}

CSS Set Property:Firebug Change١ كانون الثاني, ٢٠١١ ١٠:٥٨:٠٤ م
/style()[@href='http://mysite.com/wp-content/themes/p2custom/ckeditor/skins/chris/dialog.css']/rule()[17]
.cke_skin_chris .cke_dialog_mr {
background-position:-15px-16px 00pt;
}

CSS Set Property:Firebug Change١ كانون الثاني, ٢٠١١ ١٠:٥٨:١٩ م
/style()[@href='http://mysite.com/wp-content/themes/p2custom/ckeditor/skins/chris/dialog.css']/rule()[12]
.cke_skin_chris .cke_rtl .cke_dialog_br {
background-position:-17px-16px -584px;
}

And here what should be added:

.cke_skin_chris .cke_rtl .cke_resizer {
background-position: 0 -1115px;
cursor: sw-resize;
float: left;
}

Now your nice skin have a RTL support! :)
Thanks!

Submitted by Ma'moun on Fri, 2011-01-07 00:21.

Great work! That kama theme

Great work! That kama theme is so bad! I can't believe how bad it looks, especially with the dialogs.

Submitted by Steve on Tue, 2011-01-11 13:47.

Yes default skins are

Yes default skins are abysmal, maybe you should ask CKEditor people to take your skin as default, and they would add the extra features as they appear.

License? Is this free for any use? Do I have to slab URLs or author names somewhere, if thats the case I cannot use it.

Thanks.

Submitted by Ciantic on Mon, 2011-01-24 22:55.

See license in the footer of

See license in the footer of this page.

Submitted by Chris Herberte on Wed, 2011-09-14 10:42.

This is the best skin I have

This is the best skin I have seen so far. Good job!

Submitted by Anonymous on Wed, 2011-01-26 18:02.

Ths skin doesnt seem to be

Ths skin doesnt seem to be working for me, the icons show up with black pixels in them on IE and some of them dont show in chrome.

Submitted by Jon on Thu, 2011-02-10 07:37.

it appears as if the icons

it appears as if the icons you included with this set are not correct

Submitted by Jon on Thu, 2011-02-10 07:44.

Is it possible to put the

Is it possible to put the code on Github, or am I allowed to? I would like to fork the project.
Thanks

Submitted by stijndm on Thu, 2011-02-24 01:12.

Very nice. This is an

Very nice. This is an excellent start to a professional skin.

1. Multi-row toolbars need to be supported. The toolbar background doesn't extend below the first row.

2. I'd prefer button border styling like google docs (i.e. dark blue) instead of the lower contrast brown.

3. The unsupported buttons need to be updated. It's not clear to my why they are there but almost transparent.

Submitted by Chris on Wed, 2011-03-02 02:07.

I was wondering if it is

I was wondering if it is possible to post the code on github. I would like to fork the project and do some further work on this. Or if you don't mind, I'll just go ahead and start a github porject from this code.

Submitted by stijndm on Thu, 2011-03-03 18:30.

Thanks for the skin. I've

Thanks for the skin. I've recently started to use CKEditor and while it's functionally everything I want, the skins leave a lot to be desired.

Submitted by Michael Camden on Fri, 2011-03-11 09:21.

Thanks a lot Chris, I was

Thanks a lot Chris, I was sharpening my CSS knives to begin the long process of changing the theme on my CKEditor (those button colors on the Kama theme--what were they thinking?) but now you've saved me a lot of time since this looks awesome as it is. Also, I've used the Silk icons in a bunch of sites before, they're great!

This will look great on my Drupal site, thanks a lot.

Submitted by Adrian Pauly on Wed, 2011-03-23 17:39.

Really like this skin!

Really like this skin! Minimalist and clean. Keep us posted as you update ..

Cheers.

Submitted by Simon on Fri, 2011-04-01 22:11.

Hi, The styling of your

Hi,

The styling of your link-dialog is wrong in IE9 (perhaps IE8 as well). Could you please fix this?

Example: http://img822.imageshack.us/i/screenshot2011041312073.png/

Submitted by Giel Berkers on Wed, 2011-04-13 20:11.

Thanks.Really appreciate!

Submitted by Anonymous on Sun, 2011-04-17 18:33.

Excellent! Thanks for

Excellent! Thanks for sharing.

Submitted by Mike Fahl on Sun, 2011-04-17 19:33.

Hi This skin is really

Hi
This skin is really elegant but I have a small problem with it.Some icons are grayed-out as shown in picture below.Any idea?

http://www.4freeimagehost.com/show.php?i=b75c50c72879.png

Submitted by Anonymous on Thu, 2011-05-05 16:38.

the best ck editor skin i

the best ck editor skin i ever seen.

Submitted by luglio7 on Tue, 2011-05-10 20:35.

Very nice skin! Much much

Very nice skin! Much much better, than the included ones.
Can you share the psd files for the sprites? Or, alternatively, point me to some resource which explains how to craft those. I want to play with it myself. Thanks!

Submitted by Roman on Wed, 2011-05-11 03:27.

Very nice skin! Much much

Submitted by Roman on Wed, 2011-05-11 03:28.

The skin is MUCH better than

The skin is MUCH better than the others but some of the icons are practically invisible. I hope there's a newer version coming out soon.

Submitted by Steffan on Sun, 2011-05-15 10:13.

Looks great. How do you

Looks great.

How do you enable it (without hacking)?

Submitted by Anonymous on Sun, 2011-05-22 16:38.

Thanks guy.

Submitted by Peiman Nourani on Tue, 2011-05-31 16:02.

This skin is fantastic! It

This skin is fantastic! It would be even better if every available button was skinned. Some of them look grayed out to me.

Submitted by Brentini on Thu, 2011-06-09 06:52.

Holy! This need to be exposed

Holy! This need to be exposed to community more than currently is!

I've installed and hooked. But I get quite different result from your screen. I'm using Drupal 7 with the latest Wysiwyg module.
See attached here

I noticed the icon also rearranged, how could I do custom about it?
Do you use Wysiwyg or CKeditor module?

PS: You site have a nice tone, very good eye.

Submitted by John Carlton on Sat, 2011-07-16 04:28.

The lines to the right of the

The lines to the right of the popup dialog elements appear in the Drupal "Seven" theme. You can override this in css with:

.cke_skin_chris .cke_dialog tr td:last-child {
border-right: none;
}

Submitted by Anonymous on Fri, 2012-02-24 09:41.

Hi, I love this skin. For

Hi,
I love this skin. For sure it's far better than what comes with ckeditor. Let me know if you have any updates, or other skins.

Submitted by kidmoses on Mon, 2011-09-12 08:49.

I've tried to promote this as

I've tried to promote this as default skin in CFKeditor tracker, please vote here: Ticket #7085

If you want better support, please vote there!

Submitted by Ciantic on Wed, 2011-09-28 05:37.

We would have liked to use

We would have liked to use your skin, but we have to use the commercial license version of CKEditor.

Submitted by Anonymous on Sat, 2011-11-26 06:04.

Hi, Very nice skin

Hi,

Very nice skin indeed.
One thing about the license: I can't use it in our projects (as they're commercial)
Can you license it under one which is also for commercials?

Please contact me by email.

- Michael

Submitted by Michael on Tue, 2011-11-08 23:38.

hello, thanks that was so

hello, thanks that was so helpful

Submitted by ehsan on Sun, 2011-11-27 21:22.

Hi, I have seen one bug,

Hi,
I have seen one bug, maybe you know, but I must to say. In dialog.css it is defined the class

...

.cke_skin_chris .cke_dialog .ImagePreviewBox {
background-color:#FFF;
border:2px ridge #000;
height:160px;
overflow:scroll;
white-space:normal;
padding:2px;
width:230px;
}

.cke_skin_chris .cke_dialog .ImagePreviewBox table td {
white-space:normal;
}

.cke_skin_chris .cke_dialog .ImagePreviewLoader {
background-color:#e4e4e4;
filter:alpha(opacity=90);
height:160px;
margin:2px;
opacity:.9;
overflow:hidden;
padding:2px;
position:absolute;
white-space:normal;
width:230px;
}

.cke_skin_chris .cke_dialog .FlashPreviewBox {
background-color:#FFF;
border:2px ridge #000;
height:160px;
overflow:auto;
padding:2px;
white-space:normal;
width:390px;
}
...

I have installed you nice skin in django, v0.1 version, and when view in Firefox 8.0.1 for Macbook. The upload image dialog doesnt respect the width of the our windows.

I have changed these classes, because in the CKEditor css code these classes are id's. Also I added one line for to see the preview more nice.

...

.cke_skin_chris .cke_dialog #ImagePreviewBox {
background-color:#FFF;
border:2px ridge #000;
height:160px;
overflow:scroll;
white-space:normal;
padding:2px;
width:230px;
}

.cke_skin_chris .cke_dialog #ImagePreviewBox table td {
white-space:normal;
}

.cke_skin_chris .cke_dialog #ImagePreviewLoader {
background-color:#e4e4e4;
filter:alpha(opacity=90);
height:160px;
margin:2px;
opacity:.9;
overflow:hidden;
padding:2px;
position:absolute;
white-space:normal;
width:230px;
}

.cke_skin_chris .cke_dialog #FlashPreviewBox {
background-color:#FFF;
border:2px ridge #000;
height:160px;
overflow:auto;
padding:2px;
white-space:normal;
width:390px;
}
...

Thanks for your skin, is very cool. Sorry for my english

Submitted by mesono on Wed, 2011-11-30 00:44.

CKEditor Skin

34 Comments Posted

Nice work; I like the default

Love this skin, thanks for

Thanks for the skin! It's

Great work! That kama theme

Yes default skins are

See license in the footer of

This is the best skin I have

Ths skin doesnt seem to be

it appears as if the icons

Is it possible to put the

Very nice. This is an

I was wondering if it is

Thanks for the skin. I've

Thanks a lot Chris, I was

Really like this skin!

Hi, The styling of your

Thanks.Really appreciate!

Excellent! Thanks for

Hi This skin is really

the best ck editor skin i

Very nice skin! Much much

Very nice skin! Much much

The skin is MUCH better than

Looks great. How do you

Thanks guy.

This skin is fantastic! It

Holy! This need to be exposed

The lines to the right of the

Hi, I love this skin. For

I've tried to promote this as

We would have liked to use

Hi, Very nice skin

hello, thanks that was so

Hi, I have seen one bug,

Post new comment

Categories