Hi,
As you might know, I've created the "Moono Color" skin for CKEditor. Every time a new version of CKEditor comes out, I update my skin (if nesacessary).
Now I'm a bit confused. When I build my skin with ckbuilder.jar, and I look at the "icons.png" image that has been created, then the icons shown in this image are in alfabethic order, like "about, anchor, anchor-ltr" etc...
When I download CKEditor, with CKBuilder, with the Moono Color skin, the "icons.png" image is different from the image I created when building the skin locally with ckbuilder.jar, now the icons are listed as "about, bold, italic, strike, etc...".
How can this be? When I upload a new version of my skin with a .zip file, do you guys at CKEditor recreate the skin or?? I have people complaining about the skin not working propperly when they just download the skin from the Add-ons page, but the reason why this is not working is because of the fact that the "icons.png" image of the Add-ons download is different from the one you get when using CKBuilder, to get CKEditor from the website.
Could someone explain this to me if I'm doing something wrong or ... ?!?
Thanks!
Thu, 08/01/2013 - 00:24
#1
The order of icons does not matter
Hi webtrix,
First of all, thanks for creating such an awesome skin!
It shouldn't matter where the skin has been created - even if the icons are sorted in a random way, then the skins css file (editor.css) always has the correct position of each icon in a strip image.
The problem lays here: https://dev.ckeditor.com/ticket/10685 - it's the lack of timestamp that is not appended to the strip with icons. When people replace CKEditor with a different package, the old strip may be shown to them due to browser caching.
Note that for example the icons.png file that is created for a skin available for download from the addons site will be always different than icons.png created with online builder. Why? icons.png within a skin available for download will always contain all the icons provided by skin. While icons.png included in a skin downloaded from online builder, will contain just the icons necessary for included plugins.
So even if they were sorted alphabetically in all places, the toolbar would be messed up due to caching if user will just replace e.g. "standard package + moonocolor skin downloaded separately" with: "custom preset with moonocolor, created with online builder"
If something is still not clear, please let me know!
Wiktor Walc
CTO, CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
I've been trying to use a
I've been trying to use a custom build CKEditor with this gorgeous skin, but with a local install of CKBuilder because I will need to add some custom plugins.
The first step of downloading it directly using that "Download" button here it's a disaster; ok, the icons.png is already built and so it won't be optimized and setup correctly when a different set of plugins is used (which would make the download button completely useless for a skin if it's true)
So I went to the github repository and downloaded the source with each icon as a separate file. Loading the editor in development mode worked great!
So I tried to build a simple version but it's a total failure, icons are misplaced and completely wrong. For a comparision, here's a build with the default skin
http://www.martinezdelizarrondo.com/ckplugins/imagepaste.demo4/
and this is the one that gets generated by changin in the config file for the builder to use moonocolor:
http://www.martinezdelizarrondo.com/ckplugins/imagepaste.demo4.color/
But, downloading from this site a standard version of CKEditor with this skin works great, so why can't I build that same skin?
I've been debugging it for some hours since I started with this mess (I thought that it would take me just a few minutes do finish all this task, but clearly I was wrong), and I've found that in the css that CKBuilder generates online it includes twice the rules for the toolbar buttons, but with different offsets, this is an excerpt:
Of course that last rule overrides the first one, so CKBuilder is generating garbage there, but the problem turns out to be that in my local version, only the first version with the wrong offset is generated, the second one is missing and so none of the icons are displayed right.
@Wiktor:
If you need any other info just send me a message and I'll provide you all the files, but I think that you should be able to reproduce the problem. (and understand why it happens, I have no clue about that)
@Webtrix:
Do you have anyway so I can make a little donation to you?
I think that it would be great if you could keep on developing the skin as needed and I know that most of the people won't even say "thank you", so I would like to show you that some people care about a nice job.
I have just replaced the
I have just replaced the icons of the original skins v4.2
http://ckeditor.com/forums/Skins-and-Icon-Sets/Moono-2-Color
@web28, Thanks, but I want to
@web28, Thanks, but I want to build CKEditor, not just replace the png file because that won't work unless I use exactly the same configuration as you.
I'm working on a custom skin
I'm working on a custom skin tutorial. Might as well share what I got so far (didn't get to the builder part yet). This is how Wiktor told me it needs to be done:
Customizing Icons
We need to do this because Moono has all the required assets to make a custom skin but it lacks that particular folder, and that’s where we will edit our new icons.
Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn
If you think you found a bug in CKEditor, read this!
Thanks sebstefanov that seems
Thanks sebstefanov that seems to be the way to go:
I've followed your instructions and created my own skin and now CKBuilder works correctly. I get the toolbar working as expected and now it would be a matter of polishing some details in the skin and icons to have something beautiful.