Hi Robin,

You can drag a Button element to a new layout and then activate debug mode under Enfold->Layout Builder->Show advanced option in order to see the shortcodes for that button, then you can copy that shortcode to the location in question.

Best regards,
Rikard

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

#main a.avia-button {
  text-decoration: none; 
}

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

Best regards,
Mike

Hey rixi,

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

a.avia-button {
  text-decoration: none; 
}

Best regards,
Rikard

Hi,
Try this example CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field to make the background color red, font white, and remove the border radius:

#top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button {
    background-color: red;
    color: white;
    border-radius: 0;
}

adjust to suit.
To make the button background color blue on hover add this css:

#top #wrap_all .slideshow_inner_caption .avia-slideshow-button.avia-button:hover {
    background-color: blue;
    color: white;
    border-radius: 0;
}

you can also change the font color and border radius on hover.

Best regards,
Mike

Hi,
Please note the Lock icon on the button for the Insert Shape button, these means that it is a Premium Feature

Most features are included with the theme, but LayerSlider has reserved some features for the premium version.

Best regards,
Mike

Hey Yaphoon,

Thank you for the inquiry.

1.) To remove the author info, add this css code:

.blog-author, .entry-author-link, .date-container +.text-sep {
    display: none !important;
}

2.) You may need to increase the height of the sliders in order to create space for the buttons. Please add this css code:

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .av-8s87-7d0351f1511ec5a8401695817e77ff6a .avia-slideshow-inner,
  .av-8s87-7d0351f1511ec5a8401695817e77ff6a .avia-slideshow-inner li,
  .av-8s87-7d0351f1511ec5a8401695817e77ff6a .avia-slideshow-inner li img,
  .av-8s87-7d0351f1511ec5a8401695817e77ff6a .avia-slideshow-inner li>a {
    height: 360px !important;
    object-fit: cover;
  }
}

3.) To display the submenu items by default, you can set the Enfold > Main Menu > Burger/Mobile Menu > Menu Icon Submenu Items settings to the first option (Always display submenu).

Best regards,
Ismael

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