Hey Jak73,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#footer-title {
font-size: 38px;
font-weight: bold;
font-family: arial;
color: #222;
float: right;
top: -38px;
position: relative;
left: -10%;
}

Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
document.addEventListener("DOMContentLoaded", function() {
    var titleText = document.querySelector("h1.av-special-heading-tag").textContent;
    var footerTitleDiv = document.createElement("div");
    footerTitleDiv.id = "footer-title";
    footerTitleDiv.textContent = titleText;
    document.getElementById("socket").appendChild(footerTitleDiv);
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

This is the expected result:

Best regards,
Mike

Hey mnydish,
I see a few issues, first the code should be in your child theme functions.php file, second your images don’t have the full path, third I recommend using the page ID instead of the page or post title, please see this example:

add_filter('avf_logo','av_change_logo');
function av_change_logo($logo)
{
    if(is_page(1301) )
    {
    $logo = "http://kriesi.at/wp-content/themes/kriesi/images/logo.png";
    }
    if(is_page(1410) )
    {
    $logo = "http://kriesi.at/wp-content/themes/kriesi/images/logo.png";
    }
    if(is_page(1286) )
    {
    $logo = "http://kriesi.at/wp-content/themes/kriesi/images/logo2.png";
    }
    return $logo;
}

See this thread.

Best regards,
Mike

Hi,

For 6.0 I added filter avf_form_datepicker_args that allows to change all arguments. See https://github.com/KriesiMedia/enfold-library/blob/master/actions%20and%20filters/ALB%20Elements/Contact%20Form/avf_form_datepicker_args.php

@Guenni007

today button

This is the default behaviour of this element.

Best regards,
Günter

Hey Thumphreys,

Thank you for the inquiry.

You can adjust the text by modifying the comments.php file. The specific string is located around line 174:

echo		'<span class="minitext">' . __( 'Want to join the discussion?', 'avia_framework' ) . '
' . __( 'Feel free to contribute!', 'avia_framework' ) . '</span>';

Another option is to use the following plugin:

// https://wordpress.org/plugins/say-what/

Best regards,
Ismael

Hi,
To change this so it only works on screens larger than 768px I changed the code to this, which also adds some body margin so it won’t overlap the page content, and I make the menu items closer and I adjusted the social icons, please check.

function create_a_sidebar_header_with_burger_menu() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    // Check if the HTML element has the "wp-toolbar" class
    if (document.documentElement.classList.contains('wp-toolbar')) {
        return; // Exit the script if "wp-toolbar" class is found
    }

    // Check if the screen width is larger than 768px
    if (window.innerWidth <  768) {
        return; // Exit the script if the screen width is less than 768px
    }

    // Create the main toolbar div
    const toolbar = document.createElement('div');
    toolbar.id = 'right-toolbar';

    // Create the inner content divs
    for (let i = 1; i <= 3; i++) {
        const contentDiv = document.createElement('div');
        contentDiv.className = 'toolbar-content';
        contentDiv.id = 'content' + i;
        toolbar.appendChild(contentDiv);
    }

    // Append the toolbar to the body
    document.body.appendChild(toolbar);

    // Add the CSS styles
    const style = document.createElement('style');
    style.innerHTML = `
        #right-toolbar {
            position: fixed;
            right: 0;
            top: 0;
            width: 100px;
            height: 100%;
            background-color: #f8f8f8;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        #content1 .main_menu {
        	position: relative;
        }
        .toolbar-content {
            width: 80px;
            height: 100px;
            background-color: #f8f8f8;
            margin-bottom: 10px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: start;
        }

        .toolbar-content:last-child {
            margin-bottom: 0;
        }

        .rotated-logo {
            transform: rotate(90deg);
            transform-origin: center;
        }
        #content2 .logo {
        float: none;
        position: relative;
    		left: unset;
    		height: unset;
        }
        #content3 .social_bookmarks {
            /*transform: rotate(90deg);*/
            transform-origin: center;
        }
        
        .html_header_top.html_header_sticky #main {
    		padding-top: 0;
				}
				#av_section_1 {
				    height: 100vh;
				}
				#menu-item-shop,#menu-item-search {
				display: none;
				}
				#top #content1 .av-small-burger-icon {
    		transform: scale(1);
				}
				.html_cart_at_menu.html_main_nav_header #top .main_menu .menu>li:last-child {
				    padding-right: 0;
				    margin-right: 0;
				}
				.avia-menu.av_menu_icon_beside {
			    padding-right: 0;
			    margin-right: 0;
			    border-right-width: 0;
			    border-right-style: none;
				}
				.html_av-overlay-side-classic #top .av-burger-overlay li a {
    			border-bottom-style: none;
				}
				@media only screen and (min-width: 768px) {
				  .responsive #top #content1 .av-main-nav .menu-item-avia-special.av-burger-menu-main {
				      display: block!important;
				  }
				  #top #content1 .av-main-nav > li.menu-item  {
				    display: none!important;
				  }
					.html_av-overlay-side #top .av-burger-overlay li {
   					 margin: 0;
 				   height: 50px;
					}
				  #content1 .av-main-nav-wrap {
				      float: right;
				  }
				}
				#header {
					visibility: hidden;
				}
				body {
				margin-right: 100px
				}
				#content3 {
				height: 300px;	
				}
				#top .social_bookmarks li {
 				 display: inline-block;
 				 clear: both;
  				margin-bottom: 10px;
				}
    `;
    document.head.appendChild(style);

    // Move the logo to #content2 and rotate it
    const logo = document.querySelector('.avia-standard-logo');
    if (logo) {
        const content2 = document.getElementById('content2');
        content2.appendChild(logo);
        logo.classList.add('rotated-logo');
    }

    // Move the menu to #content1
    const menu = document.querySelector('.main_menu');
    if (menu) {
        const content1 = document.getElementById('content1');
        content1.appendChild(menu);
    }

    // Move the social bookmarks to #content3
    const socialBookmarks = document.querySelector('.social_bookmarks');
    if (socialBookmarks) {
        const content3 = document.getElementById('content3');
        content3.appendChild(socialBookmarks);
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'create_a_sidebar_header_with_burger_menu', 99 );

Best regards,
Mike

Hey Aubin,
You will need a addon to do this, see this documentation for this one. This article points to some other plugins and options.
I found this code in this thread

function custom_script() { ?>
  <script>
jQuery( document ).ready( function( $ ) {
    var title_text = $( '.product-type-variable .product_title' ).text(); // get default title
    function add_variation_txt_to_title() {
        var new_title_text = '';
        $( '.variations select' ).each( function() {
            new_title_text += ' ' + $( this ).find( ':selected' ).val(); // collect all variation selected <options>
        })
        $( '.product-type-variable .product_title' ).text( title_text + new_title_text ); // set new title
    }
    add_variation_txt_to_title(); // call on load
    $( '.variations select' ).change( function() { // call on <select >change 
        add_variation_txt_to_title();
    })
})
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

and it sort of works on my test site:


so give it a try. PLease note that not all plugins work with Enfold so you will need to test different plugin options to find one that works with your variable products the way you want.

Best regards,
Mike

Hi,
Sorry I was thinking about the sidebar and not the sidebar header. For the sidebar header menu items, Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter('wp_nav_menu_items', 'do_shortcode');
function go_back_shortcode() {
    return '<a href="javascript:history.back()" class="go-back-link">Go Back</a>
            <script>
            document.addEventListener("DOMContentLoaded", function() {
                var goBackLink = document.querySelector(".go-back-link");
                if (goBackLink) {
                    goBackLink.parentElement.classList.add("go-back-parent");
                }
            });
            </script>';
}
add_shortcode('go_back', 'go_back_shortcode');
function custom_go_back_css() {
    echo '
    <style>
    .go-back-parent a:not(.go-back-link) {
        padding: 0 !important;
        margin: 0 !important;
    }
    </style>
    ';
}
add_action('wp_head', 'custom_go_back_css');

Then in the menu item use a hash tag “#” as the URL and add this shortcode [go_back] to the title:

Then on the frontend you will have a working “Go Back” menu link:

Best regards,
Mike

Hi,
This is quite tricky but perhaps this might get you started and you can adjust further to suit. Using a Menu And Logo Position of Logo left & menu right, & a sticky header with no topbar – If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add this code and save.

function create_a_sidebar_header_with_burger_menu() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
	 // Check if the HTML element has the "wp-toolbar" class
    if (document.documentElement.classList.contains('wp-toolbar')) {
        return; // Exit the script if "wp-toolbar" class is found
    }
    // Create the main toolbar div
    const toolbar = document.createElement('div');
    toolbar.id = 'right-toolbar';

    // Create the inner content divs
    for (let i = 1; i <= 3; i++) {
        const contentDiv = document.createElement('div');
        contentDiv.className = 'toolbar-content';
        contentDiv.id = 'content' + i;
        toolbar.appendChild(contentDiv);
    }

    // Append the toolbar to the body
    document.body.appendChild(toolbar);

    // Add the CSS styles
    const style = document.createElement('style');
    style.innerHTML = `
        #right-toolbar {
            position: fixed;
            right: 0;
            top: 0;
            width: 100px;
            height: 100%;
            background-color: #f8f8f8;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        #content1 .main_menu {
        	position: relative;
        }
        .toolbar-content {
            width: 80px;
            height: 100px;
            background-color: #f8f8f8;
            margin-bottom: 10px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .toolbar-content:last-child {
            margin-bottom: 0;
        }

        .rotated-logo {
            transform: rotate(90deg);
            transform-origin: center;
        }
        #content2 .logo {
        float: none;
        position: relative;
    		left: unset;
    		height: unset;
        }
        #content3 .social_bookmarks {
            transform: rotate(90deg);
            transform-origin: center;
        }
        
        .html_header_top.html_header_sticky #main {
    		padding-top: 0;
				}
				#av_section_1 {
				    height: 100vh;
				}
				#menu-item-shop,#menu-item-search {
				display: none;
				}
				#top #content1 .av-small-burger-icon {
    		transform: scale(1);
				}
				.html_cart_at_menu.html_main_nav_header #top .main_menu .menu>li:last-child {
				    padding-right: 0;
				    margin-right: 0;
				}
				.avia-menu.av_menu_icon_beside {
			    padding-right: 0;
			    margin-right: 0;
			    border-right-width: 0;
			    border-right-style: none;
				}
				.html_av-overlay-side-classic #top .av-burger-overlay li a {
    			border-bottom-style: none;
				}
				@media only screen and (min-width: 768px) {
				  .responsive #top #content1 .av-main-nav .menu-item-avia-special.av-burger-menu-main {
				      display: block!important;
				  }
				  #top #content1 .av-main-nav > li.menu-item  {
				    display: none!important;
				  }
				  #content1 .av-main-nav-wrap {
				      float: right;
				  }
				}
				#header {
					visibility: hidden;
				}
    `;
    document.head.appendChild(style);

    // Move the logo to #content2 and rotate it
    const logo = document.querySelector('.avia-standard-logo');
    if (logo) {
        const content2 = document.getElementById('content2');
        content2.appendChild(logo);
        logo.classList.add('rotated-logo');
    }

    // Move the menu to #content1
    const menu = document.querySelector('.main_menu');
    if (menu) {
        const content1 = document.getElementById('content1');
        content1.appendChild(menu);
    }

    // Move the social bookmarks to #content3
    const socialBookmarks = document.querySelector('.social_bookmarks');
    if (socialBookmarks) {
        const content3 = document.getElementById('content3');
        content3.appendChild(socialBookmarks);
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'create_a_sidebar_header_with_burger_menu', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
This should give you a sidebar header with the burger menu, logo & social icons like this:

and the burger menu should open like this:

It probably needs some more css, but perhaps you can give it a try.

Best regards,
Mike

Hi,

Thank you for the update.

Please create a backup of the previous modification, then replace it with this updated code:

function ava_custom_script_change_offset()
{ ?>
    <script>
        (function ($)
        {
            var width = $(window).width();

            $('a[href*="#"]:not([href="#"])').click(function ()
            {
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname)
                {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length)
                    {
                        var offset = 0;
                        if (width < 767)
                        {
                            offset = 220;
                        } else if (width >= 767 && width < 989)
                        {
                            offset = 170;
                        } else if (width >= 989)
                        {
                            offset = 180;
                        }

                        $('html, body').animate({
                            scrollTop: target.offset().top - offset
                        }, 1000);
                        return false;
                    }
                }
            });

            $(window).on('load', function ()
            {
                var hash = location.href.split("#")[1];
                if (hash)
                {
                    var target = $('#' + hash);
                    if (target.length)
                    {
                        var offset = 0;
                        if (width < 767)
                        {
                            offset = 220;
                        } else if (width >= 767 && width < 989)
                        {
                            offset = 170;
                        } else if (width >= 989)
                        {
                            offset = 180;
                        }

                        $('html, body').animate({
                            scrollTop: target.offset().top - offset
                        }, 1000);
                        return false;
                    }
                }
            });

        })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'ava_custom_script_change_offset', 99);

Best regards,
Ismael

Hi,
The use this to make “Portfolio” h2

function custom_script() { ?>
  <script>
(function($) {
    function replaceElementTag(targetSelector, newTagString) {
      $(targetSelector).each(function(){
        var newElem = $(newTagString, {html: $(this).html()});
        $.each(this.attributes, function() {
          newElem.attr(this.name, this.value);
        });
        $(this).replaceWith(newElem);
      });
    }
    replaceElementTag('.page-id-4783 h1.main-title.entry-title', '<h2></h2>');
}(jQuery)); 
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

and manually change “NOS REALISATIONS EN CREATION DE SITES INTERNET” as h1
“Découvrez notre portfolio” is h2
as they look to be in a text element that you manually added.

Best regards,
Mike

Hey YMen45,
Thank you for the link to your site, the title bar h1.main-title is the correct h1 for the page, but I see that you manually added two more on the page

use the following code at the end of your child theme functions.php file in Appearance ▸ Editor to change the correct one to a “p” tag, and then you can change the two manually added ones to use just one H1 tag.

function custom_script() { ?>
  <script>
(function($) {
    function replaceElementTag(targetSelector, newTagString) {
      $(targetSelector).each(function(){
        var newElem = $(newTagString, {html: $(this).html()});
        $.each(this.attributes, function() {
          newElem.attr(this.name, this.value);
        });
        $(this).replaceWith(newElem);
      });
    }
    replaceElementTag('.page-id-4783 h1.main-title.entry-title', '<p></p>');
}(jQuery)); 
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hey dburton77,
Thank you for the link to your site, it looks like only some of your column rows are set as equal height:
CARDBOARD ▸ CLEAN PAPER
PET ▸ HDPE
and in these the equal height is working for the columns, but the tables in the columns are not controlled by this setting so that is what you see as not equal height.
For these adding this code to the end of your child theme functions.php file in Appearance ▸ Editor will help, for this one page

function custom_equal_height_tables_script() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    const rows = document.querySelectorAll('.page-id-4431 .av-equal-height-column-flextable');
    rows.forEach(function(row) {
        const tables = row.querySelectorAll('.avia-table');
        let maxHeight = 0;
        tables.forEach(function(table) {
            const tableHeight = table.offsetHeight;
            if (tableHeight > maxHeight) {
                maxHeight = tableHeight;
            }
        });
        tables.forEach(function(table) {
            table.style.height = maxHeight + 'px';
        });
    });
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_equal_height_tables_script', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Please check your other columns so they also get the class av-equal-height-column-flextable and add this script.

Best regards,
Mike

Hey carollee,

Thank you for the inquiry.

What is the current version of the theme? The error above is a PHP error, which has been patched in the latest version of the theme. Please make sure to update the theme to version 5.7.1. Let us know of the result.

Best regards,
Ismael