Hi Janny,

Thank you for the inquiry.

Since this widget is loaded from an external script (https://public.tommbookingsupport.nl/reservation-inline.js), we recommend reaching out to the booking software support team to confirm whether they have any css customization guidelines or if there’s a native setting within their platform to control the styling.

We may also need screenshots to better understand the issue. You can use platforms like FreeImage, ImgBB, PostImages or Dropbox to upload and share the screenshot. Here are the steps to follow:

1.) Visit the website of your chosen platform, such as Savvyify, ImgBB, PostImages or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.

Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.

Best regards,
Ismael

Hi newki75,

Thank you for the clarification.

We were able to reproduce the issue when loading your Ballotins template on a new page. Since you’re experiencing this problem consistently when using the template, there may be conflicting code or a server-side issue preventing the publish action. To help us investigate further, we need to enable debug logging.

Please add these lines to your wp-config.php file:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Once added, WordPress will create a debug.log file in your wp-content folder. Check that file for any error messages when you attempt to publish a page with your template. Please share a screenshot of the relevant errors with us.

Let us know what you find.

Best regards,
Ismael

Hey Advantage09,

Thank you for the update.

Yes, your hosting company can safely delete the files in the dynamic_avia folder manually. That folder only contains cached css and js files that the theme regenerates automatically on the next page load, so there is no risk of losing any content or settings.

Before proceeding though, we recommend creating a full site backup or restore point just to be safe.

After the files are deleted, go to Enfold > Performance panel and enable the “Delete Old CSS And JS Files?” option and save. This tells the theme to clean up old cached files automatically going forward, which should prevent the folder from growing out of control again.

Once that is done, simply visit your site in a browser and the theme will regenerate only the files it actually needs.

Let us know if the issue persists.

Best regards,
Ismael

Hey debbiepeverelli,

Thank you for the inquiry.

1. The overlapping image is likely due to the absolute positioning, which causes it to appear incorrectly scaled on smaller screens. The best approach is to either hide it on mobile or manually adjust its size using css media queries.

You may need to apply a custom css class name to the overlapping image element.

— https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Once you have added a custom class, for example av-overlap-image, you can target it on smaller screens like this:

@media only screen and (max-width: 767px) {
    .av-overlap-image {
        display: none;
    }
}

Or if you prefer to keep it visible but resize it:

@media only screen and (max-width: 767px) {
    .av-overlap-image {
        width: 80px;
        height: auto;
        top: 20px;
        left: 10px;
    }
}

You can add these css rules to Enfold > General Styling > Quick CSS field and adjust the values as needed.

2. The light blue highlight on focused fields and the green success message are default styles applied to the contact form. You can override them by adding the following to Enfold > General Styling > Quick CSS field — adjust the color values to match your site:

#top .avia-form .avia-input:focus,
#top .avia-form .avia-textfield:focus {
    background-color: #yourcolor;
    border-color: #yourcolor;
}

#top .avia-form .avia-success {
    background-color: #yourcolor;
}

#top .avia-form .avia-success p {
    font-family: inherit;
    font-size: inherit;
    color: #yourcolor;
}

Replace #yourcolor with the hex values that match your site palette.

Let us know the result.

Best regards,
Ismael

Hey!

Thank you for the info.

We tried logging to the site but the previous credentials are invalid.

We adjusted the script a bit so it properly intercepts the click at the .av-horizontal-gallery-wrap level, check if the clicked target is an anchor pointing to a toggle or accordion item and override the default gallery behavior.

Please replace the existing script in functions.php with this updated version:

add_action( 'wp_footer', 'ava_wp_footer_script_mod', 99 );

function ava_wp_footer_script_mod() {
    ?>
    <script>
    (function($) {
        $(document).on('click', '.av-horizontal-gallery-wrap', function(e) {
            var $anchor = $(e.target).closest('a[href^="#toggle-id-"]');

            if (!$anchor.length) return;

            e.preventDefault();
            e.stopImmediatePropagation();

            var href = $anchor.attr('href');
            var targetId = href.slice(1);
            var $title = $('#toggle-toggle-' + targetId);
            var $wrap = $('#' + targetId);

            if (!$title.length) return;

            if (!$wrap.hasClass('active_tc')) {
                $title.trigger('click');
            }

            setTimeout(function() {
                $('html, body').animate({ scrollTop: $title.offset().top - 80 }, 500);
            }, 300);
        });
    })(jQuery);
    </script>
    <?php
}

Please make sure to purge the cache before testing. Let us know the result.

Best regards,
Ismael

Hey cherrmann,

Thank you for the info.

We took a look at the page and found that there is an invisible Separator / Whitespace element just above the footer that has a height of 300px. This is what is causing the large gap on mobile view.

You can locate this element in the layout builder and either remove it or you can try this css to adjust its height on mobile view:

@media only screen and (max-width: 767px) {
  #top .hr.hr-invisible.av-mljdspyf-71312ddfce3302f17c1d53863ec1237a {
    height: 50px;
  }
}

Let us know if the issue persists.

Best regards,
Ismael

Hey,

Thank you for the inquiry.

Unfortunately, we are not able to provide theme update files directly through support. Since Enfold is sold through Themeforest, the license and download are tied to the original purchaser’s Envato account. To get access to updates, you will need to obtain the purchase code and Envato account credentials from the original developer.

If the original developer is unreachable and you cannot recover the license, the recommended path would be to purchase a new license from Themeforest. Once purchased, you can download the latest version from the Downloads section of the buyer’s Envato account and install it manually via FTP.

— https://help.market.envato.com/hc/en-us/articles/202501014-How-to-download-your-items

Here is our documentation on how to update the theme via FTP:

— https://kriesi.at/documentation/enfold/theme-update/#update-via-ftp

For more details on Themeforest licensing, please refer to their license FAQ:

— https://themeforest.net/licenses/faq

Let us know if you have more questions.

Best regards,
Ismael

Hey oestersund,

Thank you for the update.

You’re right, the issue is that the previous css uses display: none !important; without scoping it to a specific page, so it ends up hiding #layer_slider_2 on all pages, not just the homepage.

The fix is to wrap those rules in a page-specific selector. The easiest way to do this is to use the unique body class that WordPress adds for each page. For example, if your homepage has the slug “home”, the body class would be something like page-id-123 or home. You can check the exact class by inspecting the body tag in your browser’s dev tools.

Once you have the body class for your homepage, update the css like this:

/*Homepage Slider Laptop Mobile*/
@media only screen and (min-width: 768px) {
    .page-id-123 #layer_slider_1 { display: block !important; }
    .page-id-123 #layer_slider_2 { display: none !important; }
}
@media only screen and (max-width: 767px) {
    .page-id-123 #layer_slider_2 { display: block !important; }
    .page-id-123 #layer_slider_1 { display: none !important; }
}

Replace .page-id-123 with the actual page ID class from your homepage body tag. This way the hide/show rules only apply on the homepage and all other pages with layer sliders will display normally on mobile again. This documentation should help.

— https://kriesi.at/documentation/enfold/add-custom-css/#how-to-inspect-an-element-on-the-page

Please make sure to purge the cache before testing. Let us know if the issue persists.

Best regards,
Ismael

Hey Erwin,

Thank you for the inquiry.

Yes, it is possible to add inline html to the post excerpt. You can go to Posts > All Posts, edit the post you want to modify, and add your custom html directly in the excerpt field. For example, you can wrap certain words in a span tag with a custom class, like this:

This is the <span class="av-highlight">highlighted word</span> in the excerpt.

Then you can style that class using custom css in Enfold > General Styling > Quick CSS or via Appearance > Customize > Additional CSS:

.av-highlight {
    color: orange;
}

Just keep in mind that the excerpt field in WordPress does not show a visual editor by default, so you would need to type the html directly in the plain text field. Also, some themes or plugins may strip html tags from the excerpt, but Enfold generally allows basic inline html tags like span to pass through.

Let us know if you have more questions.

Best regards,
Ismael

Hey cktanju,

Thank you for the update.

To set the sticky header background to black on mobile, you can add the following to the Quick CSS field in Enfold > General Styling > Quick CSS:

@media only screen and (max-width: 767px) {
    .html_header_sticky #header .header_bg {
        background-color: #000;
    }
}

If the header is using transparency before scrolling, you may also need to target the scrolled state specifically:

@media only screen and (max-width: 767px) {
    #header .header_bg {
        background-color: #000;
    }
}

Please make sure to purge the cache before testing. Let us know if the issue persists.

Best regards,
Ismael

Hey Tilman,

Thank you for the inquiry.

We adjusted the css code a bit.

@media only screen and (min-width: 768px) {
    #layerslider_1  { display: block !important; }
    #layerslider_25 { display: none !important; }
}

@media only screen and (max-width: 767px) {
    #layerslider_25 { display: block !important; }
    #layerslider_1  { display: none !important; }
}

Let us know how it goes.

Best regards,
Ismael

Hi,

Thank you for the update.

Please try editing the enfold/config-templatebuilder/avia-template-builder/php/class-save-buildertemplate.php file. Remove everything in the file, then replace it with the following code.

— https://pastebin.com/SUBcKrzs

IMPORTANT: Please make sure to create a site backup or restore point before applying the fix. Keep the admin_enqueue_scripts as is.

Let us know how it goes.

Best regards,
Ismael

Hey Elena,

Thank you for the inquiry.

Edit the page then try to set the Layout > Header visibility and transparency settings to No Transparency or Transparent & Glassy Header. To center the logo, please try this css code:

#header_main .inner-container {
    display: flex;
    align-items: center;
    width: 100%;
}

#header_main .main_menu,
#header_main .av-main-nav-wrap,
#header_main .av-main-nav {
    display: contents;
}

#header_main .logo {
    order: 35;
    flex-shrink: 0;
    margin: 0 40px;
    transform: translate(10px, 10px);
}

#header_main .menu-item-top-level-1 { order: 10; margin-left: auto; }
#header_main .menu-item-top-level-2 { order: 20; }
#header_main .menu-item-top-level-3 { order: 30; }
#header_main .menu-item-top-level-4 { order: 40; }
#header_main .menu-item-top-level-5 { order: 50; }
#header_main .menu-item-top-level-6 { order: 60; margin-right: auto; }

#header_main .av-burger-menu-main {
    display: none;
}

You may need to shorten the title of the “Cosa posso fare per te” menu item.

Best regards,
Ismael

Hey Pam Miller,

Thank you for the inquiry.

The server should have PHP version 8.0 or later to be compatible with the latest version of the theme, 7.1.4. You can download the latest version of the theme from your Themeforest account. After retrieving the latest version, you may need to manually install or upload it to your server via S/FTP. Please check the link below for more info.

— https://kriesi.at/documentation/enfold/theme-update/#update-via-ftp

Best regards,
Ismael

Hey Behnam,

Thank you for the inquiry.

You may need to manually install or import the Lawyer demo using the XML files. Please check the documentation below for more info.

— https://kriesi.at/documentation/enfold/import-demos/#how-to-manually-import-a-theme-demo

Best regards,
Ismael