Divi includes a number of pre-built color schemes, which is great for businesses with no pre-existing colour scheme.  But in reality most businesses have a logo or brand that uses specific colours – Wouldn’t it be great to easily add the color scheme of the business but continue to use the built-in Divi color scheme options?  Well I’ve extracted the CSS for the “Green” color scheme so you can implement a business’s colour scheme quickly and easily. If you’re wondering where to set a site’s color scheme – it can be found in the WP Dashboard, under Appearance > Customize > Color Scheme in the Divi theme It’s great used alongside a Style guide page, which I have created as a Divi template.  I’ll make this available as a download in the future.

/* Color Schemes - Gary Walker - Choose Green from the list */
.et_color_scheme_green a {
color: #88a00a;
}

.et_color_scheme_green .et_pb_counter_amount,
.et_color_scheme_green .et_pb_featured_table .et_pb_pricing_heading,
.et_color_scheme_green #top-header {
background: #88a00a !important;
}

.et_color_scheme_green.woocommerce a.button.alt,
.et_color_scheme_green.woocommerce-page a.button.alt,
.et_color_scheme_green.woocommerce button.button.alt,
.et_color_scheme_green.woocommerce-page button.button.alt,
.et_color_scheme_green.woocommerce input.button.alt,
.et_color_scheme_green.woocommerce-page input.button.alt,
.et_color_scheme_green.woocommerce #respond input#submit.alt,
.et_color_scheme_green.woocommerce-page #respond input#submit.alt,
.et_color_scheme_green.woocommerce #content input.button.alt,
.et_color_scheme_green.woocommerce-page #content input.button.alt,
.et_color_scheme_green.woocommerce a.button,
.et_color_scheme_green.woocommerce-page a.button,
.et_color_scheme_green.woocommerce button.button,
.et_color_scheme_green.woocommerce-page button.button,
.et_color_scheme_green.woocommerce input.button,
.et_color_scheme_green.woocommerce-page input.button,
.et_color_scheme_green.woocommerce #respond input#submit,
.et_color_scheme_green.woocommerce-page #respond input#submit,
.et_color_scheme_green.woocommerce #content input.button,
.et_color_scheme_green.woocommerce-page #content input.button,
.et_color_scheme_green .woocommerce-message,
.et_color_scheme_green .woocommerce-error,
.et_color_scheme_green .woocommerce-info {
background: #88a00a !important;
}

.et_color_scheme_green #et_search_icon:hover,
.et_color_scheme_green .mobile_menu_bar:before,
.et_color_scheme_green .footer-widget h4,
.et_color_scheme_green .et_pb_sum,
.et_color_scheme_green .et_pb_pricing li a,
.et_color_scheme_green .et_pb_pricing_table_button,
.et_color_scheme_green .comment-reply-link,
.et_color_scheme_green .form-submit input,
.et_color_scheme_green .et_pb_bg_layout_light .et_pb_newsletter_button,
.et_color_scheme_green .et_password_protected_form .et_submit_button,
.et_color_scheme_green .et_pb_bg_layout_light .et_pb_more_button,
.et_color_scheme_green .et_pb_bg_layout_light .et_pb_promo_button,
.et_color_scheme_green .et_overlay:before,
.et_color_scheme_green .entry-summary p.price ins,
.et_color_scheme_green.woocommerce div.product span.price,
.et_color_scheme_green.woocommerce-page div.product span.price,
.et_color_scheme_green.woocommerce #content div.product span.price,
.et_color_scheme_green.woocommerce-page #content div.product span.price,
.et_color_scheme_green.woocommerce div.product p.price,
.et_color_scheme_green.woocommerce-page div.product p.price,
.et_color_scheme_green.woocommerce #content div.product p.price,
.et_color_scheme_green.woocommerce-page #content div.product p.price,
.et_color_scheme_green #top-menu li.current-menu-ancestor > a,
.et_color_scheme_green #top-menu li.current-menu-item > a,
.et_color_scheme_green .bottom-nav li.current-menu-item > a {
color: #88a00a;
text-shadow: 0px 0px 4px rgba(0,0,0, 1);
}

.et_color_scheme_green .et_pb_contact_submit {
color: #ffffff;
}

.et_color_scheme_green.woocommerce .star-rating span:before,
.et_color_scheme_green.woocommerce-page .star-rating span:before {
color: #88a00a !important;
}

.et_color_scheme_green .et-search-form,
.et_color_scheme_green .nav li ul,
.et_color_scheme_green .et_mobile_menu,
.et_color_scheme_green .footer-widget li:before,
.et_color_scheme_green .et_pb_pricing li:before {
border-color: #88a00a !important;
}

  To assist the process it’s great to create a style guide to help inform the design of the website.  If you are lucky the business may even have a Style guide already, which helps immensely with the development of a website consistent with the overall branding of an organisation.

Divi WordPress Theme