Hi,

Did you toggle the Enfold > File Compression settings after adding the code? Please disable the file compression and then check the page again.

Best regards,
Ismael

Hi,

Yes, those are the css files. Those stylesheets contain the theme’s basic structure.

Best regards,
Ismael

Hi,

Thanks for the update. Add this filter in the functions.php file and then reselect the new marker size (160x160xpx).

add_filter('avf_template_builder_shortcode_elements', 'avf_template_builder_shortcode_elements_mod', 10, 1);
function avf_template_builder_shortcode_elements_mod($elements) {
    if($elements[2]['name'] == 'Add/Edit Map Locations') {
        foreach($elements[2]['subelements'] as $key => $options) {
            foreach($options as $name => $value) {
                if($options['name'] == 'Custom Map Marker Image Size') {			
                    $elements[2]['subelements'][$key]['subtype'] = array (
                        '20px * 20px' => '20',
                        '30px * 30px' => '30',
                        '40px * 40px' => '40',
                        '50px * 50px' => '50',
                        '60px * 60px' => '60',
                        '70px * 70px' => '70',
                        '80px * 80px' => '80',
                        '160px * 160px' => '160',
                    );			
                }
            }
        }
    }

    return $elements;
}

If it doesn’t work, we may need to modify the map js file directly.

Best regards,
Ismael

Hi,

You can use this script to reverse the milestones. Just add it in the functions.php file.

add_action('wp_footer', 'ava_custom_reverse_timeline');
function ava_custom_reverse_timeline(){
	?>
	<script type="text/javascript">
		(function($) {	
            $('.avia-timeline').each( function(e) {
                $.fn.reverse = [].reverse;
                var milestone = $(this).find('.av-milestone');
                $(this).empty().append(milestone.reverse());
            });
		})(jQuery);
	</script>
	<?php
}

Best regards,
Ismael

Hi,

Yeah, I did notice that. This should work.

.avia_transform .av-animated-generic {
  opacity: 0;
}

.avia_transform .avia_start_delayed_animation.right-to-left {
  -webkit-animation: avia-rtl 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) 3s forwards;
  animation: avia-rtl 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) 3s forwards;
}

Best regards,
Ismael

Hi,

Thanks for the update. We modified the script in the functions.php file a bit. It should be working properly now.

Best regards,
Ismael

Hi,

Upload a larger image. We can then add a custom css class attribute to the image container and limit the image width with css.

// https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

Example:

.example-custom-class-attribute img {
    width: 50%;
}

Best regards,
Ismael

Hi,

1-2.) This is certainly a bug. We’ll report the issue to the dev team. The builder manager doesn’t include the shortcodes in the widget areas. Please set the theme to load all elements temporarily. Or as a workaround, try to disable the default footer columns and then set a custom footer page. Go to the Enfold > Footer panel and then set the “Default Footer & Socket Settings” to “Select a page to display as footer and socket”.

3.) This is the same bug as the previous one. The footer columns are visible across the site and they don’t have to be updated per page, so I don’t think it’s necessary to use your custom shortcode or the theme’s Page Content element in that area.

Best regards,
Ismael

Hey eberswine,

Thank you for using Enfold.

The anchors are working properly when I check. Are you referring to the menu items “About” and “Reviews”? Try to add the site url before the anchor link, so you will have to convert “#about” to “http://www.domain.com/#about”.

Best regards,
Ismael

Hi,

Are you going to use mp4 videos on your site? This script might work for the portfolio grid but you have to add the videos as the portfolio items’ external url.

Add this in the functions.php file:

add_action('wp_footer', 'ava_custom_portfolio_video', 9999);
function ava_custom_portfolio_video(){
	?>
	<script type="text/javascript">
		(function($) {	
            $('.grid-entry').each( function(e) {
                var entry = $(this);
                var link = entry.find('.grid-image');
                var poster = link.find('img');
                var video = '<video class="w-100 grid-video" loop="" preload="true" controls="false" muted=""><source src="'+link.attr("href")+'" type="video/mp4"></video>';

                $(video).appendTo(entry);  
                var video = entry.find('video');
                
                $(this).hover( hoverVideo, hideVideo );

                function hoverVideo(e) {              
                    video.get(0).play(); 
                    link.css('z-index', '1');
                }

                function hideVideo(e) {
                    video.get(0).pause(); 
                    link.css('z-index', '3');
                }
            });

            $('.grid-video', 'body').avia_html5_activation({ratio:'16:9'});
		})(jQuery);
	</script>
	<?php
}

And then use this on the Quick CSS field:

.grid-video .mejs-controls, .grid-video .mejs-button, .grid-video .mejs-overlay-button {
  display: none !important;
}

.grid-video {
  position: absolute;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 2;
}

.grid-video video {
  object-fit: cover !important;
}

NOTE: This is not going to work for youtube or vimeo videos.

Best regards,
Ismael

Hey Justin,

Thank you for using Enfold.

Did you enable the theme’s Performance > File Compression settings? The site loads the minified version of the stylesheets and scripts generated by the cache plugin instead of those that are merged by the theme. The stylesheets loads roughly a third of second while the script loads completely after 500ms, which is why you see the site “flicker” on every page load. Please disable the plugin’s minify options and then enable the theme’s file compression. If it doesn’t work, you may need to enable the plugin’s minify option back and then exclude some of the stylesheets like “avia-base” and “avia-layout”.

Best regards,
Ismael

Hey Pattriek,

Thank you for using Enfold.

You can use the following css code to center align the caption.

.container.caption_container {
    width: 100%;
    max-width: 100%;
}

I don’t think this is necessary though, because anyone who needs to zoom a browser in or out is probably looking at some other content, not the slider.

Best regards,
Ismael

Hi,

Thanks for the update. We need to see the actual page so that we can inspect the image. Please provide the url of the site.

Best regards,
Ismael

Hey Wisith,

Thank you for using Enfold.

You can change how words break and wrap onto the next line, and you can also adjust the font size.

@media only screen and (max-width: 767px) {
#top #wrap_all .all_colors h1, #top #wrap_all .all_colors h2, #top #wrap_all .all_colors h3, #top #wrap_all .all_colors h4, #top #wrap_all .all_colors h5, #top #wrap_all .all_colors h6 {
    word-wrap: break-word;
    font-size: 1em;
}
}

Best regards,
Ismael

Hey vasileandrei,

Thank you for using Enfold.

Are you referring to the events navigation? It’s already situated at the top of the event items.

Best regards,
Ismael