How do I create a custom color scheme for the Karma WordPress theme?

Posted in: ,
Please note: This article will refer to the Karma demo site for all coding examples: Karma Demo Site
To prevent losing any custom coding changes during a theme upgrade we highly recommend adding these changes to your theme’s Site Options Panel:
Appearance > Site Options > Styling and CSS > Custom CSS
Or to the ChildTheme if applicable

Overview

This article describes how to create a custom color scheme for your Karma WordPress Theme. We’ll cover everything you need to know to get a fully custom color variation.

General Instructions:

  1. Create the custom images to be used for header, footer, and main content areas.
  2. Upload the custom images to your web server.
  3. Add custom CSS outlined below to point to these newly created images.

Step 1: Create the custom images

  • In this step you will create your custom images. You can use the supplied PSD or PNG files to export your own custom graphics.
  • You’ll be creating 5 custom images if you plan to update header, footer, and main content areas.
  • Here are samples of these images:
    - header image
    - big header image (for jQuery2 and 3D homepage templates)
    - main content image
    - footer image
    - footer bottom image

Step 2: Upload the custom images to your web server

  • The simplest method is to upload the custom images via your WordPress Media Library.
  • From within your WordPress Dashboard click on: Media > Add New
  • Upload all images and make note of their URL locations. For example:
    http://www.yoursite.com/wp-content/uploads/new-header.jpg

Step 3: Add custom CSS to point to the newly created images

In this example we’ll be adding this code to the styling section our theme’s Site Options Panel:
Appearance > Site Options > Styling and CSS > Custom CSS

Please note: the URL’s in the code below will need to be modified to correctly point to the images on your web server.

Completed Code:

#header .header-holder {background: url(http://www.yourwebsite.com/wp-content/uploads/new-header-image.jpg) 0 0 repeat-x #19292E !important;}

.big-banner #header .header-holder { background: url(http://www.yourwebsite.com/wp-content/uploads/new-big-header-image.jpg) 0 0 repeat-x #19292E !important;}

#main {background: url(http://www.yourwebsite.com/wp-content/uploads/new-content-image.jpg) 0 0 repeat-x transparent !important;}

#footer {background: url(http://www.yourwebsite.com/wp-content/uploads/new-footer.jpg) 0 0 repeat-x #19292E !important;}

#footer_bottom {background: url(http://www.yourwebsite.com/wp-content/uploads/new-footer-bottom.jpg) 0 0 repeat-x #111C20 !important;}

customize header, customize footer, header image, footer image, header background image, footer background image, header png, footer png, header overlay, footer overlay, custom color scheme, custom skin, karma change color, change scheme, color skin