Custom CSS vs. Site Styler
From KickApps API Reference
There has been a lot of talk via message board posts and support tickets regarding the differences between use of the Site Styler and custom CSS, enough to warrant a tutorial.
You may have already read the Customizing Your Community Using CSS tutorial, but if not, be sure to take a look at it for much more information regarding the customization process. So lets get started!
There are several options under two headers when you open the site styler:
- Theme Manager
- Theme Gallery
- My Themes
- Theme Editor
- Background
- Header
- Navigation
- Sub-Navigation
- Main Area
- Content Blocks
- Links
- Footer
Getting Started with the Theme Manager
It is very simple to use the Theme Manager to create a theme for your community. Simply click the Theme Gallery button to slide down the preset themes, choose the theme that you desire, preview it and if you are impressed, click the Add To My Themes button. Now go to My Themes and select the theme you wish to activate, once again preview it and then click activate, and voila! You're done!
Using the Theme Editor
The theme editor allows for a much more in depth customization experience. There are several options to choose from, all of which are listed above. Once you select an option, Background for example, the rest is self-explanatory. You can customize the background-color, the background-image, the background-image's position, and whether or not it will repeat. Same rules apply for the rest of the options as well. It's pretty much a point and click interface.
Converting Your Site-Styler Edits To CSS
Here is where the fun starts! You can use your favorite web developer tool set to obtain the stylesheet attached to your site. My personal favorite is the Web Developers Tool Bar for FireFox but you can use FireBug or another similar extension. Once you have found the stylesheet you'll notice that there are a couple of elements with names preceded by ka_le_. This is the most important note in this tutorial so pay attention! THESE ELEMENTS WILL NO LONGER EXIST ONCE YOU INSERT CUSTOM CSS! This is where a lot of people get confused. ka_le_headerCont will no longer exist and instead you will have to make few adjustments to your styles and apply them to ka_header.
Copy the styles over from the CSS file attached to your page, make your edits, and save your CSS. Assuming you have made the correct adjustments, you have now taken a preset theme from the Site Styler and customized it to your liking!
Be sure to follow up with Customizing Your Community Using CSS To do even more!