Hi,

Thank you for the update.

Try to replace the selector “.home” with “.page-id-362”.

.page-id-362 .av-image-caption-overlay-center p {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-main-color-button-font);
    background: var(--enfold-main-color-button-border);
    transition: all 0.4s ease-in-out;
    box-shadow: none;
    border: 0;
    padding: 25px 50px 23px;
    font-size: 28px;
    min-width: 200px;
}

Please make sure to purge the cache before checking the page.

Best regards,
Ismael

Hi,

Thanks for the update. If you only want the CSS to apply to the home page, then you can use this instead:

.home .av-image-caption-overlay-center p {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-main-color-button-font);
    background: var(--enfold-main-color-button-border);
    transition: all 0.4s ease-in-out;
    box-shadow: none;
    border: 0;
    padding: 25px 50px 23px;
    font-size: 28px;
    min-width: 200px;
}

Best regards,
Rikard

Hey Monika,

Thank you for the inquiry.

You can use this css code to adjust the style of the caption overlay.

.av-image-caption-overlay-center p {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-main-color-button-font);
    background: var(--enfold-main-color-button-border);
    transition: all 0.4s ease-in-out;
    box-shadow: none;
    border: 0;
    padding: 25px 50px 23px;
    font-size: 28px;
    min-width: 200px;
}

Best regards,
Ismael

Hi,
For the Separator / Whitespace element you use Short Separator position left

result

For the button it is large, no icon Theme Color Subtle

result

Best regards,
Mike

Hey Susanne,
1) do you mean the caching plugins were preventing your site from knowing that a update was available for the theme? I have not heard of this issue before, but you could try the WP Fastest Cache plugin, or when Envato (Theme Forest) notify you that an update is available you could disable your plugin and then check for the update.
2) In my demo the “blog” page is selected as the “blog”

and that page uses ALB elements to create the blog

please see our demo here
3) on your site it looks like you have custom css added causing the dark color, perhaps it is from a plugin:

a:visited {
                color: #333333;
            }

4) if you want to override the color for all buttons try this:

#top .main_color .avia-color-theme-color-highlight,
#top .main_color .avia-color-theme-color {
	background-color: red;
	border-color: red;
}

adjust to suit

Best regards,
Mike

Hey craig374,

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

#custom_html-2 button {
  background-color: var(--enfold-header-color-primary);
  color: var(--enfold-header-color-constant-font);
  border-radius: 3px;
}

#custom_html-2 button:hover {
  color: #000;
}

Best regards,
Rikard

Hey Tanja,
Try using the shortcode wand

which will let you use the button element to build your button like your others so they match.
Or you could use Avia Layout Builder Debugger so you can view the shortcode of the other buttons.
The shortcode that you used above doesn’t have all of the attributes for the colors, size, etc.

Best regards,
Mike

Hey birte5,
Thanks for your patience, with I check your video “Roar”, linked below, on Android mobile the video will play in screen with the fullscreen button, this video is not autoplay:



I don’t have a iPhone so I don’t know if it is different. Please check this page and see if this is the same for you.

Best regards,
Mike

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

These will work on pages created with the WordPress Editor but not on pages created with the Advanced Layout Builder because it can not highlight text inside of elements.
I don’t know of any other plugins with this feature.
For some features you will need to ensure that the Enfold Theme Options ▸ SEO Support ▸ Preprocessing Shortcodes In Header ▸ allow to preprocess shortcodes is enabled.

Best regards,
Mike

Hey Tanja,

Thank you for the inquiry.

You can use this css code to adjust the style of the submit button in the footer widget:

#footer .field-wrap>div input[type=checkbox], #footer .field-wrap button, #footer .field-wrap input[type=button], #footer .field-wrap input[type=submit] {
    width: auto;
    border-radius: 3px;
    padding: 10px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: 400;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-alternate-color-button-font);
    border-color: var(--enfold-alternate-color-button-border);
    background-color: var(--enfold-alternate-color-primary);
    min-width: 180px;
}

Best regards,
Ismael

Hey schweg33,
Try this CSS in your <strong style=’color:#000′>Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 1224px) { 
#top.home .avia-button.avia-size-small {
	min-width: 100%;
} 
}

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,
You can try and since most of these you are not using on your site you can disable them at Enfold Theme Options ▸ Performance ▸ Disable Template Builder Elements

Blue means that it is disabled, you should see text next to the button unused or in use to help you so you don’t disable elements in use:

Best regards,
Mike

Hey northorie,

Thank you for the inquiry.

You can add mew buttons for cookie bar in the Enfold > Privacy & Cookies > Cookie Handling > Buttons section. Simply click the green plus icon (+) to add a new button.

Best regards,
Ismael

Hey sailentpooN,
Thank you for your patience and the link to your slider, I recommend using the LayerSlider for your situation, I created a test page linked below so you can see that it will work better and I linked the LayerSlider export file of my example if you want to try it on your site, just use the import project button in the LayerSlider:

Best regards,
Mike

Hey AlyssaMandy,
To fade-in try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.avia_transform .active-slide .avia-caption-title, 
.avia_transform .active-slide .avia-caption-content, 
.avia_transform .active-slide .avia-slideshow-button-2, 
.avia_transform .active-slide .avia-slideshow-button {
    -webkit-animation: avia-fadein 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;
    animation: avia-fadein 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important; 
}

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,

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

@media only screen and (max-width: 767px) {
.home .avia-fullscreen-slider .caption_bottom .slideshow_caption {
    bottom: 250px;
}
.home .slideshow_inner_caption .avia-slideshow-button.avia-button {
    background-color: #a37652;
    color: white;
    border-radius: 10px;
}
}

Best regards,
Rikard

Hi,

Thank you for the info.

You may need to check this thread: https://kriesi.at/support/topic/no-in-smart-quantity-woo-plugin/#post-1435087

The plugin might be conflicting with the theme’s custom quantity button. This can be fixed by editing the enfold/config-woocommerce/woocommerce-mod.js file and removing this code around line 131:

avia_apply_quant_btn();

Best regards,
Ismael

Hi,
Thank you for your patience, I set the function above back to the original code from the documentation and then added a custom searchform.php file to your child theme with this:

<?php
if( ! defined( 'ABSPATH' ) )   { exit; }

global $avia_config;


// Modify the search parameters for custom search URL
$search_params = apply_filters('avf_frontend_search_form_param', array(
    'placeholder'   => __('Search', 'avia_framework'),
    'search_id'     => 'swps',  // Changed from 's' to 'swps'
    'form_action'   => home_url('/') . '?swp_form%5Bform_id%5D=1', // Appended custom query string
    'ajax_disable'  => false
));

$disable_ajax = $search_params['ajax_disable'] == false ? '' : 'av_disable_ajax_search';

$icon = av_icon_char('search');
$class = av_icon_class('search');
?>

<form action="<?php echo $search_params['form_action']; ?>" id="searchform" method="get" class="<?php echo $disable_ajax; ?>">
    <div>
        <input type="submit" value="<?php echo $icon; ?>" id="searchsubmit" class="button <?php echo $class; ?>" />
        <input type="text" id="s" name="<?php echo $search_params['search_id']; ?>" value="<?php echo esc_attr(get_search_query()); ?>" placeholder="<?php echo esc_attr($search_params['placeholder']); ?>" />
    </div>
</form>

now your ajax form “Show all results” link points to ?swp_form%5Bform_id%5D=1&swps=

and lands on your custom SearchWP results page:

Best regards,
Mike

Hey peterolle,
To remove the “Add to Cart” button that changes to “Read More” for products without a price and add the class single_button to the div avia_cart_buttons so the button is centered add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_action('woocommerce_before_shop_loop_item', 'start_custom_output_buffer', 9);
function start_custom_output_buffer() {
    ob_start();
}
add_action('woocommerce_after_shop_loop_item', 'modify_and_end_custom_output_buffer', 25);
function modify_and_end_custom_output_buffer() {
    $output = ob_get_clean();
    global $product;
    if ('' === $product->get_price()) {
        $output = str_replace("avia_cart_buttons", "avia_cart_buttons single_button", $output);
    }
    echo $output; 
}
add_filter('woocommerce_loop_add_to_cart_link', 'custom_woocommerce_loop_add_to_cart_link', 10, 2);
function custom_woocommerce_loop_add_to_cart_link($button, $product) {
    if ('' === $product->get_price()) {
        return '';
    }
    return $button;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
This is the expected results:

Best regards,
Mike