Hi,

Thank you for the update. With entypo-fontello disabled, you won’t be able to use the default icons on the page. You will need to replace them with images or SVG icons manually. Unfortunately, it’s not possible to automatically inject SVG icons as a replacement for the icon fonts.

Best regards,
Ismael

Hey Helmut,

Thank you for the inquiry.

Those are the thumbnails registered by the theme. If you need to remove them, be sure to create a site backup, then use the remove_enfold_image_sizes function provided in this thread: https://kriesi.at/support/topic/prevent-auto-multi-image-generation/#post-1431800

Best regards,
Ismael

Hey goldengate415,

Thank you for the inquiry.

There are elements with this option, such as the Masonry element or pagination for Blog Posts, but it is not available for an entire page. For text elements, you can use the Fold/Unfold option but it may not have any significant effect on performance. If you have a fairly large homepage, consider moving some content to subpages and reduce the use of images. If you can provide the site URL, we’ll try to check the site further.

Best regards,
Ismael

Hey Pierre,

Thank you for the inquiry.

You can add this filter to the functions.php file to adjust the thumbnail size used in the lightbox container.

function avf_alb_lightbox_image_size_mod($size) {
  return "full";
}
add_filter('avf_alb_lightbox_image_size', 'avf_alb_lightbox_image_size_mod', 10, 1);

To disable scrolling when lightbox is active, use this code in the Quick CSS field.

.mfp-zoom-out-cur {
    height: 100vh;
    overflow: hidden;
}

.mfp-bg {
    height: 100vh !important;
}

Best regards,
Ismael

Hey Jochen,

Thank you for the inquiry.

This should be possible with a custom script. Please try this code in the functions.php file:

add_action( 'wp_footer', 'auto_click_sort_button_by_tag', 100 );
function auto_click_sort_button_by_tag() {
    ?>
    <script>
    document.addEventListener("DOMContentLoaded", function () {
        const urlParams = new URLSearchParams(window.location.search);
        const tag = urlParams.get("tag");

        if (tag) {
            const buttonClass = tag + "_sort_button";
            const button = document.querySelector("." + buttonClass);

            if (button) {
                button.click();
            }
        }
    });
    </script>
    <?php
}

This should automatically activate the corresponding masonry sorting button based on the value of the ?tag= parameter in the URL. For example:

https://site.com/masonry?tag=images

Best regards,
Ismael

Hi,
Perhaps it has something to do with your language characters, your word Batliner has the HTML entities ­ twice in it:
Bat­li­ner

and the script doesn’t seem to be able to read the HTML entities.
I’m not sure if or how this could be fixed, hopefully Guenni007 will have a solution for it.

Best regards,
Mike

Hi,

Did you look in the text element using the “code” tab instead of the visual tab?

Best regards,
Mike

Hi,
Thanks, between each image in your text element, you have a line break “br” and you also have a paragraph tag “p” wrapping some of your images, if you remove these the images will line up.

It would be easier for you to see these in the text element using the “code” tab instead of the visual tab.

Best regards,
Mike

Hi,
I see that you have this custom css:

#top .avia-smallarrow-slider:not(.av-slideshow-ui) .avia-slideshow-arrows a, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-prev a.prev-slide, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-next a.next-slide {
    width: 24px !important;
    opacity: 1;
}

this is forcing the width to 24px, you can change this css and then add the css above, or try this css instead:

#top .avia-smallarrow-slider:not(.av-slideshow-ui) .avia-slideshow-arrows a, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-prev a.prev-slide, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-next a.next-slide {
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
    font-size: 20px !important;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows {
  position: relative;
  width: 120px;
  left: auto;
  height: 50px;
  right: 10px;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon svg:first-child, #top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon img[is-svg-img="true"] {
    height: 20px;
    margin-top: 17px;
}

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

with this new css:

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

Best regards,
Mike

Hey Kat,
Thank you for your patience and the link to your site, I tested with my Android device and with Safari on Mac in Responsive Design Mode to emulate a iPhone, but the burger menu and header image worked correctly. Unfortunately, I don’t have a iPhone to test with.
Try disabling your plugins and clear your iPhone cache and check again.
Please note that iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hi,
When I check my single post using the Default (Business) blog style, the Tags show at the bottom of the page without the filter above:

To move them in line with the categories and other meta try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function move_tag_meta_inline_with_other_meta_on_single_posts() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    if (document.querySelector('.single-post')) {
        const blogTags = document.querySelector('.blog-tags');
        const blogCategories = document.querySelector('.blog-categories');
        
        if (blogTags && blogCategories) {
            const strongTag = blogTags.querySelector('strong');
            if (strongTag && strongTag.textContent === 'Tags:') {
                strongTag.replaceWith(strongTag.textContent);
            }
            
            const separator = document.createElement('span');
            separator.className = 'text-sep';
            separator.textContent = '/';
            
            blogCategories.insertAdjacentElement('afterend', separator);
            separator.insertAdjacentElement('afterend', blogTags);
        }
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'move_tag_meta_inline_with_other_meta_on_single_posts', 99 );

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

Best regards,
Mike

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

@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all #header .social_bookmarks {
        display: block;
    }
    #avia2-menu #menu-item-8506,#avia2-menu #menu-item-9168,#avia2-menu #menu-item-6813 {
    	display: none;
    }
    #header_main #text-8,#main .main-title {
    	display: none;
    }
    #top #main .title_container .container {
    padding-bottom: 0;
    min-height: 25px;
    }
    #full_slider_1 *:not(.avia-caption-title, .avia-caption-content, .avia-caption-content p) {
    	min-height: 90px;
    }
}

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

with this css:

Best regards,
Mike

Hi,
Your section with the ID #samplewebsites is hidden on small mobile devices:

probably because you wanted to show the next section only on small mobile:

but that section has no ID, so the mobile menu can’t link to it.
Note that all IDs on a page must be unique and used only once, so to correct your issue, add a ID to the second color section like “mobilesamplewebsites”
then add a second menu item under the current samplewebsites menu item, with the custom classes “av-desktop-hide av-medium-hide av-small-hide” and a link of #mobilesamplewebsites
and then add the custom class “av-mini-hide” to the current samplewebsites menu item.

Best regards,
Mike

Hey Oriano,
Users with “edit_published_posts” permissions such as Administrators, Editors and Authors can view the site.

You could edit line 304 in /enfold/includes/classes/class-avia-custom-pages.php
but there is not a way to change this in your child theme, so you would need to update this file for each version update.
Your best option would be to use a plugin instead.

Best regards,
Mike

Hi,
It looks like you had a duplicate thread for the overlay icon, check here.

Best regards,
Mike

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

.avia_transform a:hover .image-overlay {
    opacity: 1 !important;
    background: transparent !important;
}
.avia_transform .image-overlay {
    background: transparent !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

Hey Martin,
To add a red border to items that you tab to, you can add this css:

a:focus,button:focus {
  border:1px solid red !important;
}

adjust the color and size to suit.
Your accessibility plugin is at the bottom of the page in the DOM, so you would need to tab the whole page to get to it, perhaps the plugin settings has an option to move it to the top of the DOM? The plugin button also has a tabindex of -1 so you can’t tab to it, check the plugin settings.
If you can’t change these in the settings, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
	const accessibilityButton = document.querySelector('#accessibility-trigger-button');
    const messageBar = document.querySelector('#accessibility-button');
    const body = document.querySelector('body#top');
    body.prepend(messageBar);
    accessibilityButton.setAttribute('tabindex', '1');
});
</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.
This javascript will move the accessibility-button in the DOM to the top of the page so it is the first tab, the icon will still show at the bottom of the page, it will also change the tabindex so you can tab to it. With the css above to add a red border, the first tab will show this:

and then if you hit the enter key it will open:

Best regards,
Mike

Hi,
Change this css:

#av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
	color: yellow;
}

to this:

#av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
	color: yellow;
	font-size: 20px;
	line-height: 20px;
}

then add this css:

.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.av-show-submenu li {
    line-height: 20px;
}

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

Best regards,
Mike