Bringing Your Skin to Life

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

(Created page with "{{#CUSTOMTITLE:Bringing Your Skin to Life}} At this stage you have a started a skin that is eventually identical to the existing one you have chosen. Now it is time to bring y...")
 
 
Line 6: Line 6:
 
To start, it is recommended opening all files in the skin folder and understanding their scope and contents. The Kama skin is fully documented, so its files are the best learning resources for in-depth technical aspects.
 
To start, it is recommended opening all files in the skin folder and understanding their scope and contents. The Kama skin is fully documented, so its files are the best learning resources for in-depth technical aspects.
  
Skin developers have powerful tools available, which make it easy to work on CSS files. The most important tool is the "elements inspector", available in applications like Firebug (Firefox), Opera Dragonfly or the Developer Tools of Google Chrome. With this tools you can change or add CSS style rules to elements and see the results on the fly. Then just port the changes to the CSS files. We strongly recommend this approach.
+
Skin developers have powerful tools available, which make it easy to work on CSS files. The most important tool is the "elements inspector", available in applications like [http://getfirebug.com/ Firebug] (for Firefox), [http://www.opera.com/dragonfly/ Opera Dragonfly] or the [https://developers.google.com/chrome-developer-tools/ Google Chrome Developer Tools]. With this tools you can change or add CSS style rules to elements and see the results on the fly. Then just port the changes to the CSS files. We strongly recommend this approach.

Latest revision as of 17:25, 26 July 2012

At this stage you have a started a skin that is eventually identical to the existing one you have chosen. Now it is time to bring your ideas to life, by making changes to the skin files.

The bad part of basing your work on an existing skin is the tendency of making both skins too similar. Or to reuse many of the solutions proposed on the base skin. Because of this, try to see your skin with different eyes and keep in mind that you can change it drastically if you want, having something that has nothing to do with the original skin.

To start, it is recommended opening all files in the skin folder and understanding their scope and contents. The Kama skin is fully documented, so its files are the best learning resources for in-depth technical aspects.

Skin developers have powerful tools available, which make it easy to work on CSS files. The most important tool is the "elements inspector", available in applications like Firebug (for Firefox), Opera Dragonfly or the Google Chrome Developer Tools. With this tools you can change or add CSS style rules to elements and see the results on the fly. Then just port the changes to the CSS files. We strongly recommend this approach.

This page was last edited on 26 July 2012, at 17:25.