Creating Custom CSS for Multifondo
Here are the most common CSS styles to style most elements with the Multifondo theme.
Match the [PRIMARY COLOR] , [SECONDARY COLOR] , and [ACCENT COLOR] to those values you have set in the Elementor Global settings (these are not currently passed automatically.
These rules can be copy and pasted into the Appearance » Customize » Additional CSS field.
/* PRIMARY COLOUR STYLES */
.progression_studios_force_light_navigation_color .progression-sticky-scrolled #progression-inline-icons .progression-studios-social-icons a:hover, .progression_studios_force_dark_navigation_color .progression-sticky-scrolled #progression-inline-icons .progression-studios-social-icons a:hover, .progression_studios_force_dark_navigation_color .progression-sticky-scrolled #progression-studios-header-search-icon:hover i.pe-7s-search, .progression_studios_force_dark_navigation_color .progression-sticky-scrolled #progression-studios-header-search-icon.active-search-icon-pro i.pe-7s-search, .progression_studios_force_dark_navigation_color .progression-sticky-scrolled #progression-studios-header-login-container:hover a.progresion-studios-login-icon, .progression_studios_force_dark_navigation_color .progression-sticky-scrolled #progression-studios-header-login-container.helpmeout-activated-class a.progresion-studios-login-icon, .progression_studios_force_dark_navigation_color .progression-sticky-scrolled #progression-inline-icons .progression-studios-social-icons a:hover, .progression_studios_force_dark_navigation_color .progression-sticky-scrolled #progression-shopping-cart-count a.progression-count-icon-nav:hover, .progression_studios_force_dark_navigation_color .progression-sticky-scrolled .sf-menu a:hover, .progression_studios_force_dark_navigation_color .progression-sticky-scrolled .sf-menu li.sfHover a, .progression_studios_force_dark_navigation_color .progression-sticky-scrolled .sf-menu li.current-menu-item a, .progression_studios_force_light_navigation_color .progression-sticky-scrolled #progression-studios-header-search-icon:hover i.pe-7s-search, .progression_studios_force_light_navigation_color .progression-sticky-scrolled #progression-studios-header-search-icon.active-search-icon-pro i.pe-7s-search, .progression_studios_force_light_navigation_color .progression-sticky-scrolled #progression-studios-header-login-container:hover a.progresion-studios-login-icon, .progression_studios_force_light_navigation_color .progression-sticky-scrolled #progression-studios-header-login-container.helpmeout-activated-class a.progresion-studios-login-icon, .progression_studios_force_light_navigation_color .progression-sticky-scrolled #progression-inline-icons .progression-studios-social-icons a:hover, .progression_studios_force_light_navigation_color .progression-sticky-scrolled #progression-shopping-cart-count a.progression-count-icon-nav:hover, .progression_studios_force_light_navigation_color .progression-sticky-scrolled .sf-menu a:hover, .progression_studios_force_light_navigation_color .progression-sticky-scrolled .sf-menu li.sfHover a, .progression_studios_force_light_navigation_color .progression-sticky-scrolled .sf-menu li.current-menu-item a, #progression-studios-header-login-container:hover a.progresion-studios-login-icon, #progression-studios-header-login-container.helpmeout-activated-class a.progresion-studios-login-icon, #progression-studios-header-search-icon:hover i.pe-7s-search, #progression-studios-header-search-icon.active-search-icon-pro i.pe-7s-search, #progression-inline-icons .progression-studios-social-icons a:hover, #progression-shopping-cart-count a.progression-count-icon-nav:hover, .sf-menu a:hover, .sf-menu li.sfHover a, .sf-menu li.current-menu-item a {
color: [PRIMARY COLOR] !important;
}
.woocommerce-MyAccount-content {
border-left-color: [PRIMARY COLOR] !important;
}
body #content-pro a.wp-block-button__link, .helpmeout-registration-page .wpneo-user-registration-wrap #wpneo-registration .wpneo-single input#user-registration-btn, input.wpneo-submit-campaign, #wpneo-registration input#user-registration-btn, .woocommerce form input.button, .woocommerce form input.woocommerce-Button, .helpmeout-rewards-select_button button.select_rewards_button, button.wpneo_donate_button, .sidebar ul.progression-studios-social-widget li a, footer#site-footer .tagcloud a, .tagcloud a, body .woocommerce nav.woocommerce-MyAccount-navigation li.is-active a, .post-password-form input[type=submit], #respond input.submit, .wpcf7-form input.wpcf7-submit, #boxed-layout-pro .woocommerce .shop_table input.button, #boxed-layout-pro .form-submit input#submit, #boxed-layout-pro #customer_login input.button, #boxed-layout-pro .woocommerce-checkout-payment input.button, #boxed-layout-pro button.button, #boxed-layout-pro a.button ,#woocomerce-tabs-container-progression-studios .woocommerce-tabs ul.wc-tabs li.active, .memberdeck button, .memberdeck input[type="submit"], .memberdeck form .form-row input[type="submit"], .neo-progressbar > div, .ignitiondeck.idc_lightbox .form-row.submit input[type=submit], #fivehundred .ignitiondeck.idc_lightbox .form-row.submit input[type=submit] {
background: [PRIMARY COLOR];
}
.memberdeck .checkout-title-bar span.active:after {
border-bottom: 3px solid [PRIMARY COLOR];
}
ul#progression-studios-panel-login, #progression-checkout-basket, #panel-search-progression, .sf-menu ul {
border-top: 3px solid [PRIMARY COLOR];
}
.memberdeck .checkout-title-bar span.currency-symbol, .memberdeck .checkout-title-bar span.currency-symbol .checkout-tooltip i.tooltip-color, .memberdeck form a, .woocommerce-MyAccount-content p a, .woocommerce-account .addresses .title .edit, .woocommerce-orders-table__cell-order-number a {
color: [PRIMARY COLOR];
}
.progression-studios-shop-index-content a:hover h2 {
color: [PRIMARY COLOR] !important;
}
/* SECONDARY COLOUR STYLES */
body #content-pro a.wp-block-button__link:hover, .helpmeout-registration-page .wpneo-user-registration-wrap #wpneo-registration .wpneo-single input#user-registration-btn:hover, input.wpneo-submit-campaign:hover, #wpneo-registration input#user-registration-btn:hover, .woocommerce form input.button:hover, .woocommerce form input.woocommerce-Button:hover, .helpmeout-rewards-select_button button.select_rewards_button:hover, button.wpneo_donate_button:hover, body #progression-checkout-basket a.cart-button-header-cart:hover, #boxed-layout-pro .woocommerce-shop-single .summary button.button:hover, #boxed-layout-pro .woocommerce-shop-single .summary a.button:hover, .mc4wp-form input[type='submit']:hover, .progression-studios-blog-cat-overlay a, .progression-studios-blog-cat-overlay a:hover, .sidebar ul.progression-studios-social-widget li a:hover, footer#site-footer .tagcloud a:hover, .tagcloud a:hover, #boxed-layout-pro .woocommerce .shop_table input.button:hover, #boxed-layout-pro .form-submit input#submit:hover, #boxed-layout-pro #customer_login input.button:hover, #boxed-layout-pro .woocommerce-checkout-payment input.button:hover, #boxed-layout-pro button.button:hover, #boxed-layout-pro a.button:hover, .post-password-form input[type=submit]:hover, #respond input.submit:hover, .wpcf7-form input.wpcf7-submit:hover, .memberdeck button:hover, .memberdeck input[type="submit"]:hover, .memberdeck form .form-row input[type="submit"]:hover {
background: [SECONDARY COLOR];
}
.woocommerce-shop-single .product_meta a:hover, .woocommerce-shop-single .woocommerce-product-rating a.woocommerce-review-link:hover, .woocommerce-MyAccount-content p a:hover, .woocommerce-account .addresses .title .edit:hover, .woocommerce-orders-table__cell-order-number a:hover {
color: [SECONDARY COLOR] !important;
}
/* MAIN NAV RESTING STATE COLOUR */
.memberdeck a:hover, .sf-menu a, #progression-studios-header-search-icon i.pe-7s-search {
color: [ACCENT OR CONTRASTING COLOR];
}
/* WHEN USING THE BETTER SHARING PLUGIN */
/* STYLE BSWP BTN TO THEME */
/* BSWP BTN RESTING STATE */
.bswp-twitter-btn,
.bswp-facebook-btn,
.bswp-linkedin-btn,
.bswp-link-btn,
.bswp-email-btn {
background-color: [PRIMARY COLOR] !important; /* may need to add !important to rule */
}
/* BSWP BTN HOVER STATE */
.bswp-twitter-btn:hover,
.bswp-facebook-btn:hover,
.bswp-linkedin-btn:hover,
.bswp-link-btn:hover,
.bswp-email-btn:hover {
background-color: [SECONDARY COLOR] !important; /* may need to add !important to rule */
}
If using a custom header and manual IDC Account links (Create Account/My Account, Login/Logout), see Custom User Account links documentation for the URLs and CSS required.