Topic: How do I change the color scheme of Kete using themes?
Topic type:
Some brief pointers on how to change the colors on your site with themes.
It's pretty straightforward to change the colors that Kete uses by adding new Cascading Style Sheet (CSS) rules in a theme.
One nice thing about themes, is that you can combine elements from existing themes and use them as building blocks to create a new one.
For example, if you like most of things about the default theme, but want to use a header background image to add your logo, etc., you can simply grab Default Theme with Header Image and follow the steps in Choose a Header Image for your Basket.
That may get you most of what you want, but you also want to change some colors of things like headlines, etc. to match your existing branding.
First, if you haven't already, download the theme mentioned above to your local machine and decompress it. You'll have a folder that follows Theme Conventions. What we'll want to do is add to that theme elements of other themes and edit their CSS to suit.
In the stylesheets folder under the with_header_image folder, add a file called "colors" with a ".css" extension. Download and decompress Green with Square Corners, copy the contents of the "colors_green.css" file in that theme's stylesheets folder to your new colors.css file. You'll also want to to copy over the whole "square_corners.css" file into the stylesheets folder for with_header_image, too. You'll need to remove the "rounded_corners.css" file from the with_header_image's stylesheets folder.
Now, this is the bit that requires some homework on your part, edit your new "colors.css" file and replace the color values with ones that you want. You'll need to have some basic understanding of CSS and know what colors you want for various things. After you are satisfied, rename the with_header_image folder to something that is specific to your project (no spaces or special characters in folder name please), make a zip folder of it, and add the theme to your site.
Notice anything? You lost the rounded corners that you see on a lot of Kete sites. If you have the same background colors as the default theme, you can simply replace the "square_corners.css" with http://old.kete.net.nz/themes/default/stylesheets/rounded_corners.css and repackage and upload your new theme.
What if your background colors have changed from the default? If you wanted rounded corners, this takes some work with a graphics program such as photoshop. We've provided a file to make this easier at Photoshop file for rounded corners theme. You'll want to look at the contents of an example theme such as White text on black with gradient image in header to see what is necessary.
Have fun experimenting with themes!
was the last to edit How do I change the color scheme of Kete using themes?
on Dec 11th, 2009 at 10:22 AM
created How do I change the color scheme of Kete using themes?
on Oct 16th, 2008 at 4:45 PM
