Hi,

Please try the following in Quick CSS under Enfold->General Styling:

#top div .av-dark-form input[type="text"], #top .av-custom-form-color .button {
  border-width: 1px !important;
}

Best regards,
Rikard

Hi,
You can use the button element options to create this:


The button element has many more options, please review them, as you choose “custom colors” in the drop down you will be given more options.

Best regards,
Mike

Hi,
Thank you for the link to your site and your patience, for your first slide with the button, it has a link so adding the button creates a nesting link, which typically wil cause issues, but it looks like this css will help:

#main .aviaccordion-excerpt p > a {
    text-decoration: none;
}

#main .main_color a.my-accordion-button {
	  text-decoration: none;
    background: blue;
    padding: 10px;
    border-radius: 2px;
    color: #FFF;
    position: relative;
    top: 135px;
}
#main .aviaccordion-slide-link .aviaccordion-title {
    top: -50px;
    position: relative;
}
#main .aviaccordion-slide-link {
    text-decoration: none;
}

this is the expected results:

Best regards,
Mike

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

#top .avia_cart_buttons {
    opacity: 1;
}
#top div.avia_cart_buttons a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover,
#top div.avia_cart_buttons a.button.show_details_button:hover {
    color: black !important;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey Stefan,
I believe that you are referring to this button:

It seems to look correct to me, the orange arrow expands the button options and they also show in the center of the mobile screen.
Perhaps a screenshot of what you see would help.

Best regards,
Mike

Hey Stefan,

Thank you for the inquiry.

There is no option for this by default but you might be able to use the avf_form_send filter to check the content of the contact form fields before sending the email. Usage examples can be found in the links below:

// https://kriesi.at/support/topic/contact-form-submit-button-hook/#post-1370093
// https://kriesi.at/support/topic/form_submit-event-not-fired-with-enfold-form/#post-1425948
// https://kriesi.at/support/topic/work-with-variables-sent-by-enfold-form-avia_process_form_data/#post-1070392

Best regards,
Ismael

Hey Yaphoon,

Thank you for the inquiry.

You can use the avia_social_share_link_arguments filter in the functions.php file to add more icons to icons to social share box. Please check the link below for more info:

// https://kriesi.at/documentation/enfold/social-share-buttons/#display-custom-social-icons-in-social-share-box

Best regards,
Ismael

Hi,
When I check your page on desktop the css I posted above is not applied, and this is what makes the button larger and center, so I don’t know if you have an error in your css, or if you didn’t add it because you didn’t understand, but this is the desktop part of the css that you should ensure to use:

@media only screen and (min-width: 768px) { 
#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
    width: 300px;
    height: 100px;
    font-size: 24px;
}
.html_header_transparency #top #main .caption_bottom .slideshow_caption {
    padding-top: 0;
}
}

this is the result:

I now assume that you now wanted the button to move up a little, so you would then add this css:

@media only screen and (min-width: 768px) { 
.slideshow_inner_caption {
	top: -100px;
}
}

for this result:

feel free to adjust to suit.

Best regards,
Mike

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

@media only screen and (min-width: 768px) { 
#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
    width: 300px;
    height: 100px;
    font-size: 24px;
}
.html_header_transparency #top #main .caption_bottom .slideshow_caption {
    padding-top: 0;
}
}
@media only screen and (max-width: 767px) { 
	#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
	padding: 10px 6px;
	font-size: 10px;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
I was just working on another thread where a similar issue was that the sub-menu and the burger menu were still open when the browser back button was used, this is due to the browser serving a browser cached version of the page. The following javascript solved this in my tests, and while my above solution worked for the custom button issue you are having I thought that perhaps this would be a better solution for you as it will also solve the use of the browser back button, so give this a try instead of the above solutions and see if it works for you. I recommend using the WP Code plugin then add a new snippet, in the top right corner use the javascript snippet as the code type:

and add this code:

window.addEventListener('pageshow', (event) => {
    if (window.matchMedia('(min-width: 990px)').matches) {
        document.querySelectorAll('.sub-menu').forEach((subMenu) => {
            subMenu.style.opacity = '0';
            subMenu.style.visibility = 'hidden';
        });
    } else {
        const overlay = document.querySelector('.av-burger-overlay');
        if (overlay) {
            overlay.style.display = 'none';
            overlay.style.opacity = '0';
        }
        const hamburger = document.querySelector('.av-hamburger');
        if (hamburger) {
            hamburger.classList.remove('is-active');
        }
        document.documentElement.classList.remove('av-burger-overlay-active', 'av-burger-overlay-active-delayed');
    }
});

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey Bruno,
Thanks for the screenshots, I tested this on my demo site with Safari on Mac and Firefox on Windows and the sub-menu and the burger menu were open when the browser back button was used, this is due to the browser serving a browser cached version of the page. The following javascript solved this in my tests, I recommend using the WP Code plugin then add a new snippet, in the top right corner use the javascript snippet as the code type:

and add this code:

window.addEventListener('pageshow', (event) => {
    if (window.matchMedia('(min-width: 990px)').matches) {
        document.querySelectorAll('.sub-menu').forEach((subMenu) => {
            subMenu.style.opacity = '0';
            subMenu.style.visibility = 'hidden';
        });
    } else {
        const overlay = document.querySelector('.av-burger-overlay');
        if (overlay) {
            overlay.style.display = 'none';
            overlay.style.opacity = '0';
        }
        const hamburger = document.querySelector('.av-hamburger');
        if (hamburger) {
            hamburger.classList.remove('is-active');
        }
        document.documentElement.classList.remove('av-burger-overlay-active', 'av-burger-overlay-active-delayed');
    }
});

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
When the menu is open this class is added: is-active

I don’t really understand why you are doing this, but I think it has to do with your custom button with the script onclick="window.history.back() it seems like if you didn’t use that you would not have this issue, correct?
Try using a button with a proper link.

Best regards,
Mike

Hey greg47,
Thanks for the video, the first thing that I notice is that you entered a second html & head tag ino your page with the script that ChatGPT gave you:

typically when ChatGPT gives you this it is to point out that the script goes into the head of your page, I recommend not adding this.
So it looks like you are creating a event that will click the burger menu, the check to see if the menu is open is missing the class is-active so the script will run in all cases, even if it is alread closed.
Try changing this line: var menuButton = document.querySelector('.av-hamburger.av-hamburger–spin.av-js-hamburger.av-inserted-main-menu');
to this var menuButton = document.querySelector('.av-hamburger.av-hamburger–spin.av-js-hamburger.av-inserted-main-menu.is-active');
Then it should only click the menu if it is open.
Best regards,
Mike

Hey Tanja,

You could try using the shortcodes which can be found here: https://kriesi.at/documentation/enfold/social-share-buttons/

Best regards,
Rikard

Hi,

Thank you for the update.

Please use this css code instead:

#top .tribe-events-c-subscribe-dropdown__button-text {
   display: none !important;
}

You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the code and make sure to purge the cache.

Best regards,
Ismael

Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

.coupon button {
  min-width: 100px;
  width: 100px;
}

Best regards,
Rikard

Hi,
Thanks for your patience, this is a older thread, I don’t recognize the screenshots that you provide, but most of the threads that I have seen all use javascript to capture the click and send it to GTM, it sounds like you have this part figured out but you want to use classes instead, I would expect that using a clstom class to trigger click would work for any element, like a image, or a button, these are clickable elements. If it will only work on the link “a” tag why don’t you add “a” after your custom class like .customClass a ?
But if you would like to request a new feature, the Dev Team has opened a new Github Feature Request for users to place requests and follow them as the Dev Team reviews them.

Best regards,
Mike

Hi,
First add the custom class specialHeight to each 1/4 column that you want the button the hot pepper image to line up below the special heading.
You don’t need to add this to the third odd item or items with no button or image.
Then typically I would add the following script to the end of your child theme functions.php file in Appearance ▸ Editor, but I see that you are not using a child theme so 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:

then add this code and save.

function custom_specialHeight_script() { ?>
  <script>
(function($){
  $('.flex_column_table').each(function(){  
     var $specialHeading = $('.specialHeight .av-special-heading',this);
     var specialHeadingHeight = Math.max.apply(Math, $specialHeading.map(function(){
         return $(this).height();
     }).get());
     $specialHeading.height(specialHeadingHeight);
  });
  var resizeId;
  window.addEventListener('resize', function() {
      clearTimeout(resizeId);
      resizeId = setTimeout(doneResizing, 300);
  });
  
  function doneResizing(){
      location.reload();
  }

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

I did this for you on your test site.

Best regards,
Mike