Education: Changing colors and fixing menus

Community Forums Forums Design Tips and Tricks Education: Changing colors and fixing menus

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  rlansing 10 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #54107

    rlansing
    Participant
    Post count: 4

    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
    #54110

    anitac
    Participant
    Post count: 7027

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


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #61153

    fannin
    Participant
    Post count: 1

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

    #61155

    rlansing
    Participant
    Post count: 4

    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!

    • This reply was modified 10 months, 3 weeks ago by  rlansing.
    • This reply was modified 10 months, 3 weeks ago by  rlansing.
    #61161

    rlansing
    Participant
    Post count: 4

    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;
    }`

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.