Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to add more Header Styles to Mai Lifestyle Pro
This topic is: not resolved
Tagged: Mai Lifestyle pro
- This topic has 1 reply, 2 voices, and was last updated 4 years ago by Anita.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorPosts
-
April 19, 2020 at 4:31 pm #498073alchemiztMember
I just wanted to share this. If you want to add more Header Styles to the Customizer in Mai Lifestyle Pro child theme, you can do it like this.
Create two new files mai-customizations.php and custom.js and include them in your functions.php file like this:
// Enqueue Custom JS script add_action( 'wp_enqueue_scripts', 'enqueue_custom_script' ); function enqueue_custom_script() { wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0.0' ); } // Add Mai Customizations require_once get_stylesheet_directory() . '/lib/mai-customizations.php';
In mai-customizations.php add the following code:
<?php add_action( 'wp_head', 'mai_header_fade_css' ); function mai_header_fade_css() { // Bail if in the Dasbhoard. if ( is_admin() ) { return; } /** * Fade onScroll. */ echo "<style> .site-header { opacity: var(--header-opacity); transition: opacity .8s ease-in-out; -moz-transition: opacity .8s ease-in-out; -webkit-transition: opacity .8s ease-in-out; background-color: rgba(255,255,255,var(--header-background)); } header:hover { opacity: 1; } </style>"; } /** * Add body class to enabled specific settings. * * @since Unknown. * * @param array $classes The body classes. * * @return array $classes The modified classes. */ add_filter( 'body_class', 'mai_do_settings_custom_body_classes' ); function mai_do_settings_custom_body_classes( $classes ) { // Header style. $header_style = genesis_get_option( 'header_style' ); if ( $header_style && ! is_page_template( 'landing.php' ) ) { switch ( $header_style ) { case 'sticky_fade': $classes[] = 'has-sticky-header'; $classes[] = 'has-fade-header'; break; case 'sticky_transparent': $classes[] = 'has-sticky-header'; $classes[] = 'has-transparent-header'; break; } } return $classes; } /** * Add custom options to the customizer menu.. */ add_action( 'customize_register', 'custom_mai_register_customizer_header_footer_settings',33 ); function custom_mai_register_customizer_header_footer_settings( $wp_customize ) { /* ************ * * Mai Settings * * ************ */ $section = 'mai_header_footer'; $settings_field = 'genesis-settings'; // Header style. $wp_customize->add_control( 'header_style', array( 'label' => __( 'Header style', 'mai-theme-engine' ), 'section' => $section, 'settings' => _mai_customizer_get_field_name( $settings_field, 'header_style' ), 'type' => 'select', 'priority' => 1, 'choices' => array( 'standard' => __( 'Standard Header' ), 'sticky' => __( 'Sticky Header' ), 'reveal' => __( 'Reveal Header' ), 'sticky_shrink' => __( 'Sticky/Shrink Header' ), 'reveal_shrink' => __( 'Reveal/Shrink Header' ), 'sticky_fade' => __( 'Sticky/Fade Header' ), 'sticky_transparent' => __( 'Sticky/Transparent Header' ), ), ) ); }
In custom.js add the following code:
document.addEventListener( 'DOMContentLoaded', function() { var body = document.querySelector( 'body' ), header = document.querySelector( '.site-header' ), hasFadeHeader = body.classList.contains( 'has-fade-header' ), hasTransparentHeader = body.classList.contains( 'has-transparent-header' ) // Make sure we have a header. if ( header ) { var customScroll = basicScroll.create({ elem: document.querySelector( '#header-trigger' ), from: 'top-top', to: 'bottom-top', props: hasFadeHeader ? { '--header-opacity': { from: '1', to: '0.25', }, } : hasTransparentHeader ? { '--header-background': { from: 1, to: .01, }, } : [] }); customScroll.start(); } });
This will add two new Header Styles to the customizer.
April 21, 2020 at 8:40 pm #498109AnitaKeymasterJust as a tip: If you use the code being provided above, be sure to make a backup of your theme files.
Love coffee, chocolate and my Bella!
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.