Education: Changing colors and fixing menus

[rlansing]

Hey everyone!
I am new to web design and wordpress, but in the course of developing a site for a new non-profit I went through the effort of adding a new color option and tweaking the menu appearance for the Education theme. So I thought I would share my efforts...
Mainly its color tweaking, but I also addressed the issue that sub-menus or dropdowns don't appear correct right from the start. They needed some tweaking so that they weren't jumping around due to a border size difference in the "active" vs. "hover" CSS.

1. In Functions.php I added the 'Light Red' option:

/** Create additional color style options */
add_theme_support( 'genesis-style-selector', array(
'education-black' => __( 'Black' , 'education' ),
'education-green' => __( 'Green' , 'education' ),
'education-purple' => __( 'Purple' , 'education' ),
'education-red' => __( 'Red' , 'education' ),
'education-teal' => __( 'Teal' , 'education' ),
'education-light-red' => __( 'Light Red' , 'education' ),
) );

2. Then in Style.css I copied the code from the 'Red' style and adjusted the values:

/* Education light-red
------------------------------------------------------------ */

.education-light-red ::selection {
background-color: #692828;
color: #fff;
}

.education-light-red #home-featured .call-to-action {
text-shadow: #692828 1px 1px !important;
}

.education-light-red a,
.education-light-red a:visited,
.education-light-red #title a:hover,
.education-light-red h2 a,
.education-light-red h2 a:visited {
color: #a44f3e;
}

.education-light-red a:hover,
.education-light-red li a:hover,
.education-light-red a:visited:hover {
color: #ed5642;
}

.education-light-red ::-moz-selection,
.education-light-red ::selection,
.education-light-red .navigation li a:hover {
background-color: #a44f3e;
}

.education-light-red #inner {
background: url(images/light-red/bg-top.jpg) repeat-x top;
}

.education-light-red #header .menu li a:active,
.education-light-red #header .menu .current_page_item a,
.education-light-red #header .menu .current-cat a,
.education-light-red #header .menu .current-menu-item a,
.education-light-red #header .menu .current_page_item a:hover,
.education-light-red #header .menu .current-cat a:hover,
.education-light-red #header .menu .current-menu-item a:hover {
background: #a44f3e url(images/light-red/menu-active.png) repeat-x;
color: #fff !important;
border-bottom: 3px solid #a44f3e;
text-shadow: #692828 -1px -1px;
}

.education-light-red .menu-primary a,
.education-light-red .menu-secondary a,
.education-light-red .menu-primary li a:active,
.education-light-red .menu-primary li a:hover,
.education-light-red .menu-primary .current_page_item a,
.education-light-red .menu-primary .current-cat a,
.education-light-red .menu-primary .current-menu-item a,
.education-light-red .menu-secondary li a:active,
.education-light-red .menu-secondary li a:hover,
.education-light-red .menu-secondary .current_page_item a,
.education-light-red .menu-secondary .current-cat a,
.education-light-red .menu-secondary .current-menu-item a {
text-shadow: #692828 -1px -1px;
}

.education-light-red input[type="button"],
.education-light-red input[type="submit"],
.education-light-red .more-link,
.education-light-red .more-link:visited {
background: #a44f3e url(images/light-red/button-gradient.png) repeat-x;
border: 1px solid #5f2020;
text-shadow: #692828 1px 1px;
}

.education-light-red input:hover[type="button"],
.education-light-red input:hover[type="submit"],
.education-light-red .more-link:hover {
background: #914637;
}

.education-light-red #sidebar-alt {
background: #914637 url(images/light-red/bg-sidebar.jpg);
color: #f0dbd7;
text-shadow: #2a0e0e -1px -1px;
}

.education-light-red #sidebar-alt p,
.education-light-red #sidebar-alt a {
color: #fff;
text-shadow: #2a0e0e -1px -1px;
margin: 0 0 10px;
}

.education-light-red #sidebar-alt h4 {
margin: 0 0 5px;
}

.education-light-red #sidebar-alt .widget {
background: none;
border-bottom: 2px solid #75382c;
border-top: 1px solid #75382c;
margin: 0;
}

.education-light-red #header .menu .current-menu-item a {
background: #a44f3e url(images/light-red/menu-active.png) repeat-x;
color: #fff !important;
border-bottom: 3px solid #a44f3e;
text-shadow: #692828 -1px -1px;
}
.education-light-red #header .menu .current-menu-item li a {
background: none;
color: #747474 !important;
border-bottom: 1px dotted #747474;
text-shadow: none;
}

.education-light-red #header .menu ul li.current-menu-item a {
background: #a44f3e url(images/light-red/menu-active.png) repeat-x;
color: #fff;
border-bottom: 1px dotted #747474;
text-shadow: #692828 -1px -1px;
border-bottom-left-radius: 5px !important;
border-bottom-right-radius: 5px;
}

.education-light-red #header .menu .current-menu-item li a:hover,
.education-light-red #header .menu li li a:hover {
background: none;
color: #ed5642 !important;
border-bottom: 1px dotted #747474 !important;
text-shadow: none;
}

Hope it helps someone!

http://umbrellaforlife.org

[AnitaC]

You did a great job. Thanks for sharing. I am sure it will be useful information.

---

Need help with customization or troubleshooting? Reach out to me.

[fannin]

I am getting the '500 Internal Server Error' message after setting up a Gold color following this process. Darn!

[rlansing]

I should have said that you need to copy the style.css code and paste it back into style.css after all of the other color options above the responsive section. Take care not to break brackets formatting the css. I realize now that I wrote this post a little early with a few missing steps...
In order to make everything work you need to make a copy of an images folder in the wp-content/themes/education/images. And rename it to the correct name you are referencing in the styles.css.. you will need to edit these images in Photoshop or gimp so that they match your color.
Hope that helps sorry for the confusion!

[rlansing]

Here is my updated CSS as well:
In the future I will attempt to remove the references to the image files and have it all computed as gradients.
Also, take a look at the banner image files in the wp-content/themes/education/images folder for areas that need to be changed if you are changing the color of the theme.

`
/* Education light-red
------------------------------------------------------------ */

.education-light-red ::selection {
background-color: #692828;
color: #fff;
}

.education-light-red #home-featured .call-to-action {
text-shadow: #692828 1px 1px !important;
}

.education-light-red a,
.education-light-red a:visited,
.education-light-red #title a:hover,
.education-light-red h2 a,
.education-light-red h2 a:visited {
color: #ed5642;
}

.education-light-red a:hover,
.education-light-red li a:hover,
.education-light-red a:visited:hover {
color: #ed5642;
}

.education-light-red ::-moz-selection,
.education-light-red ::selection,
.education-light-red .navigation li a:hover {
background-color: #ed5642;
}

.education-light-red #inner {
background: url(images/light-red/bg-top.jpg) repeat-x top;
}

.education-light-red #header .menu li a:active,
.education-light-red #header .menu .current_page_item a,
.education-light-red #header .menu .current-cat a,
.education-light-red #header .menu .current-menu-item a,
.education-light-red #header .menu .current_page_item a:hover,
.education-light-red #header .menu .current-cat a:hover,
.education-light-red #header .menu .current-menu-item a:hover {
background: #d14f3e url(images/light-red/menu-active.png) repeat-x;
color: #fff !important;
border-bottom: 3px solid #a44f3e;
text-shadow: #692828 -1px -1px;
}

.education-light-red .menu-primary a,
.education-light-red .menu-secondary a,
.education-light-red .menu-primary li a:active,
.education-light-red .menu-primary li a:hover,
.education-light-red .menu-primary .current_page_item a,
.education-light-red .menu-primary .current-cat a,
.education-light-red .menu-primary .current-menu-item a,
.education-light-red .menu-secondary li a:active,
.education-light-red .menu-secondary li a:hover,
.education-light-red .menu-secondary .current_page_item a,
.education-light-red .menu-secondary .current-cat a,
.education-light-red .menu-secondary .current-menu-item a {
text-shadow: #692828 -1px -1px;
}

.education-light-red input[type="button"],
.education-light-red input[type="submit"],
.education-light-red .more-link,
.education-light-red .more-link:visited {
background: #d14f3e url(images/light-red/button-gradient.png) repeat-x;
border: 1px solid #5f2020;
text-shadow: #692828 1px 1px;
}

.education-light-red input:hover[type="button"],
.education-light-red input:hover[type="submit"],
.education-light-red .more-link:hover {
background: #914637;
}

.education-light-red #sidebar-alt {
background: #914637 url(images/light-red/bg-sidebar.jpg);
color: #f0dbd7;
text-shadow: #2a0e0e -1px -1px;
}

.education-light-red #sidebar-alt p,
.education-light-red #sidebar-alt a {
color: #fff;
text-shadow: #2a0e0e -1px -1px;
margin: 0 0 10px;
}

.education-light-red #sidebar-alt h4 {
margin: 0 0 5px;
}

.education-light-red #sidebar-alt .widget {
background: none;
border-bottom: 2px solid #75382c;
border-top: 1px solid #75382c;
margin: 0;
}

.education-light-red #header .menu .current-menu-item a {
background: #d14f3e url(images/light-red/menu-active.png) repeat-x;
color: #fff !important;
border-bottom: 3px solid #a44f3e;
text-shadow: #692828 -1px -1px;
}
.education-light-red #header .menu .current-menu-item li a {
background: none;
color: #747474 !important;
border-bottom: 1px dotted #747474;
text-shadow: none;
}

.education-light-red #header .menu ul li.current-menu-item a {
background: #d14f3e url(images/light-red/menu-active.png) repeat-x;
color: #fff;
border-bottom: 1px dotted #747474;
text-shadow: #692828 -1px -1px;
border-bottom-left-radius: 5px !important;
border-bottom-right-radius: 5px;
}

.education-light-red #header .menu .current-menu-item li a:hover,
.education-light-red #header .menu li li a:hover,
.education-light-red #header .menu ul li.current-menu-item a:hover {
background: none;
color: #ed5642 !important;
border-bottom: 1px dotted #747474 !important;
text-shadow: none;
}`

[Author]

Posts