Monday, June 27, 2011

Change Color Wordpress Theme Template - Graphene Theme

After downloading the application Firebug, I found that it is easy to change the color on a Wordpress theme or template.  The following changes were applied to the Graphene theme.

The original file is seen below with a white, blue, and gray theme:
 The following themes were updated to coordinate with home pages: 

http://www.x-factor-seo.com

http://www.tlclawco.com/blog/
You can create a Wordpress Child Theme by following the instructions and then install the text below into a style.css file and place it in your template directory >Public HTML>Directory Folder>wp-content>themes.  After the css file is uploaded, you just need to update your theme in Wordpress.  The child folder will be at the same level as your main theme.  Then you can pick two colors from your main page to create the gradient in the Graphene theme.
 /*
Theme Name:     Graphene Child
Theme URI:      http://www.x-factor-seo/blog/
Description:    Child theme for the Graphene theme
Author:         X-Factor-SEO
Author URI:     http://www.x-factor-seo.com/
Template:       graphene
Version:        1.0
*/
@import url("../graphene/style.css");
/* Your modification goes here */
.featured_slider {
    background: -moz-linear-gradient(left top , #63b62d, #5da829) repeat scroll 0 0 transparent;
    margin-bottom: 20px;
    padding-bottom: 25px;
    padding-top: 15px;
    position: relative;
    width: 100%;
}
.sidebar h3 {
    background: -moz-linear-gradient(#63b62d, #5da829) repeat scroll 0 0 transparent;
    border-bottom: 1px solid ##5da829;
    border-radius: 5px 5px 0 0;
    color: #FFFFFF;
    font: bold 16px/20px arial;
    margin: -15px 0 5px -12px;
    padding: 7px 12px;
    text-shadow: 0 -1px 0 #555555;
    width: 100%;
}
.sidebar div.sidebar-wrap {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid ##63b62d;
    box-shadow: 0 0 5px ##63b62d;
    margin-bottom: 16px;
    padding: 10px 12px;
    position: relative;
    width: 230px;
}
#content {
    background: none repeat scroll 0 0 #000000;
    border-top: 21px solid #000000;
    padding-bottom: 20px;
}
.sidebar div.sidebar-wrap {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #808080;
    box-shadow: 0 0 5px #BBBBBB;
}
#nav {
    background: url("images/sprite_h.png") repeat-x scroll left top light grey;
    border-bottom: 3px solid #000000;
    border-top: 1px solid #333333;
    height: 46px;
    padding-top: 12px;
    position: relative;
    width: 100%;
    z-index: 100;
}



No comments:

Post a Comment