• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

The Cre8tive Diva - WordPress Developer

Digital Nomad | Helping WordPress & Genesis Framework Website Owners All Over the World

  • Home
  • About
    • Terms of Service & Privacy
    • Accessibility
  • Services
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
Home » Add Color Selector to Maker Pro Child Theme

Published on September 19, 2017 / Updated on October 20, 2018 / Reading Time: 3 minutes

Add Color Selector to Maker Pro Child Theme


Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 29 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 31 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 32 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 29 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 31 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 32 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 29 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 31 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 32 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

http://www.screencast.com/t/SShaZEvYIT

This morning someone asked if I had a demo of a certain website and I had to go to my Siteground account to search my staging areas. As I was looking, I ran across this demo site I had prepared for a photography client using the Maker Pro Child theme by JT Grauke of Design by Bloom and is sold on StudioPress.

When I was in development with the client he wanted to see what the theme would look like with the dark background. I created a color selector to switch back and forth. He ended up sticking with the white background.

Since I still have this staging area and the code is in action there, I decided to just drop the code into a blog post in case someone might be interested in adding it. Don’t forget to read all the way down. There’s some Bonus Code!!

Demo.
Click the colors on the Navigation.

I know the color selector inside the Customizer has become pretty popular, but there are some clients who are a “no fuss” kinda client who just wants to be able to select a few options and keep it moving. With the colors in the style sheet, you only need to change two colors. The default accent color can be changed inside the Customizer just fine.

Two files will need to be modified – the functions.php file and style.css. You can use an FTP application to modify your files or if you are pretty code savvy, you can edit inside the dashboard.

If you are unfamiliar with working with your theme files, stop and ask for help. If you are familiar with modifying your theme files – you should back them up before proceeding.

Adding the Function
Copy and paste the code to the bottom of the functions.php file. Then Save it.

//* Add support for additional color style options
add_theme_support( 'genesis-style-selector', array(
'maker-dark' => __( 'Maker Dark', 'maker' ),
'maker-medium' => __( 'Maker Medium', 'maker' ),
) );
view raw functions.php hosted with ❤ by GitHub

Adding the Styling
Copy and paste the code to the bottom of your style.css file. Then Save it.

/*
Theme Colors
---------------------------------------------------------------------------------------------------- */
/* Maker Dark
--------------------------------------------- */
.maker-dark .site-container,
.maker-dark .site-footer,
.maker-dark .footer-widgets {
background: #000;
}
.maker-dark body,
.maker-dark h2,
.maker-dark h1,
.maker-dark h3,
.maker-dark h4,
.maker-dark h5,
.maker-dark h6,
.maker-dark .site-title a,
.maker-dark .textwidget > p,
.maker-dark .entry-content > p,
.maker-dark .textwidget,
.maker-dark .entry-title > a,
.maker-dark .author-box-content,
.maker-dark .genesis-nav-menu a,
.maker-dark .site-footer p,
.maker-dark blockquote,
.maker-dark .footer-widgets .enews-widget p,
.maker-dark .entry-content ul li,
.maker-dark .entry ul li,
.maker-dark .entry-content ol li,
.maker-dark .entry ol li,
.maker-dark .widget li.current-menu-item a,
.maker-dark .entry-meta,
.maker-dark .menu-toggle:before,
.maker-dark .nf-form-cont,
.maker-dark .site-footer {
color: #fff;
}
/* Maker Medium
--------------------------------------------- */
.maker-medium .site-container,
.maker-medium .site-footer,
.maker-medium .footer-widgets {
background: #f9f9f9;
}
.maker-medium body,
.maker-medium h2,
.maker-medium h1,
.maker-medium h3,
.maker-medium h4,
.maker-medium h5,
.maker-medium h6,
.maker-medium .site-title a,
.maker-medium .textwidget > p,
.maker-medium .entry-content > p,
.maker-medium .textwidget,
.maker-medium .entry-title > a,
.maker-medium .author-box-content,
.maker-medium .genesis-nav-menu a,
.maker-medium .site-footer p,
.maker-medium blockquote,
.maker-medium .footer-widgets .enews-widget p,
.maker-medium .entry-content ul li,
.maker-medium .entry ul li,
.maker-medium .entry-content ol li,
.maker-medium .entry ol li,
.maker-medium .widget li.current-menu-item a,
.maker-medium .entry-meta,
.maker-medium .menu-toggle:before,
.maker-medium .nf-form-cont,
.maker-medium .site-footer {
color: #12302e;
}
view raw style.css hosted with ❤ by GitHub

Select your new color
Now that you’ve added the selector. Browse over to Genesis > Theme Settings. You should now see the “Color Style” drop down. Section your color and visit the website.

That’s it. 🙂

BONUS CODE!!
You will notice with my demo we opted to use the free version of Soliloquy Responsive Slider the in Front Page 5 widget area. We decided to reposition and vertically align the default pager buttons, as well as remove the navigation arrows using CSS. In the Pro Version of Soliloquy, there is a setting to hide the arrows. To do this, just copy and paste the following code into your style sheet. One thing to keep in mind, you may need to change 50% on Line 25 to adjust the buttons depending on how many images you add to your slider.

/* # Additional CSS for SPS
---------------------------------------------------------------------------------------------------- */
.soliloquy-container .soliloquy-prev,
.soliloquy-container .soliloquy-next {
display: none !important;
}
.soliloquy-container .soliloquy-pager {
text-align: right !important;
}
/* # Vertical Pagination Buttons on the far right of the slider
---------------------------------------------------------------------------------------------------- */
.soliloquy-container .soliloquy-pager-link {
height: 20px !important;
}
.soliloquy-pager-link > span {
display: none;
}
.soliloquy-container .soliloquy-pager {
bottom: 50% !important;
display: table;
height: 14px;
margin: 0 auto;
position: absolute;
right: 10px;
text-align: center;
width: 1% !important;
}
.soliloquy-container, .soliloquy-container * {
line-height: 2px !important;
}
view raw soliloquy.css hosted with ❤ by GitHub

Now that’s really it! 🙂

  • Like my Signature? Get the Signature Widget for Genesis right here!

  • FacebookTweetPinPrintShares4

    Filed Under: Genesis Framework, Tipsy Tuesday, Tutorials Tagged With: genesis child theme, maker pro

    A recent conflict was found when Genesis Simple Share is activated and configured while using the Posts and Page Grid in Genesis Blocks. The error can be seen when viewing the content on the front end. The error does not display in edit mode. Below is a temporary fix that will allow you to manually set […]

    Primary Sidebar

    It's just me and my dog Bella. I am a freelance web developer at Cre8tiveDiva.com. I build websites using WordPress and the Genesis Framework, WooCommerce and provide troubleshooting and support. I also build with Shopify. I love chocolate, lots of coffee!

    Sign Me Up!

    Receive my blog posts, tips and updates delivered to your inbox!

    Yes, Sign Me Up

    *By signing up you will receive new blogs, updates on products, services and important alerts.

    Categories

    • Design
    • eCommerce
    • Five on Friday
    • Fonts
    • Free Themes
    • Freebie Friday
    • Genesis Framework
    • Genesis Plugins
    • Genesis Themes
    • Genesis Untapped
    • Instagram
    • MailChimp
    • News
    • Plugins
    • Press This News
    • Social Media
    • Tipsy Tuesday
    • Troubleshooting
    • Tutorials
    • Uncategorized
    • Web Development
    • WooCommerce
    • WordPress
    • WordPress Plugins

    Footer

    Digital Nomad! I can be anywhere I wanna be now.

    Latest Blog Posts

    • Temporary Fix When Using Genesis Blocks Posts and Page Grid with Genesis Simple Share
    • How to Add Reading Time to a WordPress Genesis Child Theme Without a Plugin
    • How to Add “Shop” to WooCommerce Breadcrumbs when Using Yoast

    Looking for Something?

    Copyright © 2012–2022 · Designed with by Me! · Hosted on SiteGround

    We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkPrivacy policy