Hi,

You can add this css code to adjust the top padding of the main container based on the header layout.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */

  .responsive #top #main {
    padding-top: 88px !important;
  }

  .response.html_header_transparency #main {
    padding-top: 0 !important;
  }
}

This should apply an 88px top padding on pages with header transparency disabled.

Best regards,
Ismael

Hi,

The arrows seem to be displaying as they should. How would you like the arrows to appear on mobile view?
Please note that the css code above should remove the border both on desktop and mobile view. If you want to apply it on desktop view only, please use this css code.

@media only screen and (min-width: 768px) {

  /* Add your Desktop Styles here */
  #top .av-control-minimal-dark .avia-slideshow-arrows a:before {
    border-color: transparent;
  }
}

Best regards,
Ismael

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

#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > .av-active-burger-items > a {
    font-weight: 900;
    color: red !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.
Please see the screenshot in the Private Content area of the expected results.

Best regards,
Mike

Hi,
Thanks for the screenshot I believe that you want to embed one page into another and have the links open in the same embed section.
Such as embed the blog in one side of a grid row and then open the clicked posts in the same section, this is quite tricky but I believe that I have achieved it on this test page.

in the backend I have a grid row element and one side has a background image and the other side has a code block element:

the code block element has this code:

<div id="embedded-section"></div>

<script>
window.addEventListener('DOMContentLoaded', function() {
    (function($) {
        var initialContent = null; // Variable to store the initial content

        // Function to load content via AJAX
        function loadContent(url, initialLoad = false) {
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'html', // Explicitly expect HTML
                success: function(data) {
                    var content;
                    // Determine the selector based on whether it's the initial load
                    if (initialLoad) {
                        content = $(data).find('#av_section_1').html();
                    } else {
                        // Try the first selector
                        content = $(data).find('.av-main-single').html();
                        // If not found, try the second selector
                        if (!content) {
                            content = $(data).find('.post-entry').html();
                        }
                    }

                    // Check if content was found
                    if (content) {
                        if (!initialLoad) {
                            content = '<a href="#" class="back-link">Back</a>' + content; // Prepend back link to content
                        } else {
                            initialContent = content; // Save initial content if it's the initial load
                        }
                        $('#embedded-section').html(content);
                        bindLinkClicks(); // Re-bind click events to new links within the content
                    } else {
                        console.error('Requested content not found using the provided selectors.');
                        $('#embedded-section').html('Requested content not found.');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error loading content:', error);
                    $('#embedded-section').html('Error loading content.');
                }
            });
        }

        // Bind click events to links within the embedded section
        function bindLinkClicks() {
            $('#embedded-section a').off('click').on('click', function(event) {
                event.preventDefault(); // Prevent default link behavior
                var linkUrl = $(this).attr('href'); // Get the URL of the clicked link
                
                if ($(this).hasClass('back-link')) {
                    // If the back link is clicked, load the initial content
                    $('#embedded-section').html(initialContent);
                    bindLinkClicks(); // Re-bind click events
                } else {
                    console.log('Attempting to load:', linkUrl);
                    loadContent(linkUrl); // Load content via AJAX, not initial load
                }
            });
        }

        // Initial loading of content with specific section
        loadContent('https://enfold.savvyify.com/embed-2', true);

        // Initial binding of click events on page load
        bindLinkClicks();
    })(jQuery);
});

</script>

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Please change the url in the code to your page with the blog element, look for this part of the code:

// Initial loading of content with specific section
        loadContent('https://enfold.savvyify.com/embed-2', true);

Now the page that is embeded is a ALB page with a color section set to 100% height and a blog element inside:

by default the first color section of a ALB page has the ID av_section_1, this is important because it is what the script calls and will only show this section, not the header, footer, or sidebar, but set this page to no sidebar as the content width is affected.
Now to show the posts with no header, footer or sidebar we will use the class av-main-single for Classic Editor pages and if that is not found because it is a ALB post we will try post-entry, so when a post link is clicked the post will load in the same section:

Now since the back button on the browser won’t work we added a small “back” link at the top of the embed section:

Please give this a try.
Please note that this will only work for pages and links on your site.
Please note Page Preloading will interfere, so please disable.

Best regards,
Mike

Hey dowlassmoss,
Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 480px) { 
	#top.home .avia-slideshow-button {
		display: none;
	}
}

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.
this will hide the buttons below 480px and then the caption will show.

Best regards,
Mike

Hi,
It doesn’t look like that for me on Android or in the inspector on desktop, the page css uses the same font, so I’m not sure why you are seeing this. Please see the screenshot in the Private Content area.

Best regards,
Mike

Hey Diana,
I’m not sure why it looks centered on the desktop, the css is text-align: left, nonetheless this will center for mobile and tablet:

#main .av-fixed-rotator-width .av-rotator-text {
	text-align: center;
}

for mobile you will want to make the font smaller because the left padding will push the text off the screen on the right.

Best regards,
Mike

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

#top #wrap_all #header .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
    color: #000;
    font-size: 16px;
}

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 Steve,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter('avia_layout_filter', 'avia_change_post_layout', 10, 2);
function avia_change_post_layout($layout, $post_id) {
	if( is_shop() || is_product_tag() || is_product_category() || is_cart() || is_checkout()) {
        $layout['current'] = $layout['fullsize'];
        $layout['current']['main'] = 'fullsize';
    }
	if( is_product() ) {
	$layout['current'] = $layout['fullsize'];
        $layout['current']['main'] = 'fullsize';
    }
    return $layout;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add the above code and save.

Best regards,
Mike

Hi,

The section below the slider is set to a to have a large negative top margin and is therefore covering the slider, you could try to add the image in a 1/3 element instead.

Best regards,
Rikard

Hi,
Please give this a try, add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function group_lightbox_images(){
?>
<script>
(function($){
    $(window).on('load', function() {
        $('.lightbox-added').each(function() {
            var parentClass = $(this).closest('[class*="group-"]').attr('class');
            if (parentClass) {
                var match = parentClass.match(/group-(\d+)/);
                if (match && match[1]) {
                    $(this).attr('data-group', match[1]);
                }
            }
        });

        var groups = {};
        $('.lightbox-added').each(function() {
            var id = parseInt($(this).attr('data-group'), 10);
            if (!groups[id]) {
                groups[id] = [];
            }
            groups[id].push(this);
        });

        $.each(groups, function() {
            $(this).magnificPopup({
                type: 'image',
                mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded',
                closeOnContentClick: false,
                closeBtnInside: false,
                gallery: { enabled: true }
            });
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'group_lightbox_images');

If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add the above code and save.
Then add the custom class group-1 to each accordion slider, changing the number for each one, ie: group-2, group-3, etc.

Then when the image in any group is opened only the other images in the same group will show.

Best regards,
Mike

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

.avia_desktop #top .av-masonry-entry:hover .av-masonry-image-container {
    transform: scale(1, 1);
}

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 Eleina,
I didn’t find a way to do this so I created a shortcode to create a button that will play a audio file and show a progress bar for the audio track while it is playing

The shortcode to use on your page:
[audio_player src="URL_TO_YOUR_AUDIO_FILE.mp3" text="Custom Button Text"]
Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

// use this shortcode: [audio_player src="URL_TO_YOUR_AUDIO_FILE.mp3" text="Custom Button Text"]
function custom_audio_player_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'src' => '',
            'text' => 'Play Audio',
        ),
        $atts,
        'audio_player'
    );

    // Generate a unique ID for this instance
    $uid = uniqid('audio_player_');

    ob_start();
    ?>
    <style>
        .custom-audio-player {
            position: relative;
            max-width:200px;
            margin-bottom:10px;
        }

        .audio-control {
            position: relative;
            overflow: hidden;
            padding: 10px;
            border: none;
            background-color: #007bff;
            color: #ffffff;
            cursor: pointer;
            width:200px;
            transition: background-color 0.3s ease;
        }

        .audio-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 5px;
            background-color: #ff0000;
            width: 0;
            max-width: 100%;
            transition: width 0.1s linear;
        }
    </style>
    <div class="custom-audio-player" id="<?php echo $uid; ?>">
        <button class="audio-control"><?php echo esc_html($atts['text']); ?></button>
        <div class="audio-progress"></div>
    </div>
    <audio class="custom-audio" src="<?php echo esc_url($atts['src']); ?>"></audio>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var player = document.getElementById('<?php echo $uid; ?>');
            var audio = player.nextElementSibling;
            var button = player.querySelector('.audio-control');
            var progress = player.querySelector('.audio-progress');
            var originalButtonText = "<?php echo esc_js($atts['text']); ?>";

            button.addEventListener('click', function() {
                if (audio.paused) {
                    audio.play();
                    button.textContent = 'Pause Audio';
                } else {
                    audio.pause();
                    button.textContent = originalButtonText; // Use originalButtonText instead of hardcoding
                }
            });

            audio.addEventListener('timeupdate', function() {
                var duration = audio.duration;
                var currentTime = audio.currentTime;
                var progressWidth = (currentTime / duration) * 100 + '%';
                progress.style.width = progressWidth;
            });

            audio.addEventListener('ended', function() {
                button.textContent = originalButtonText;
            });
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('audio_player', 'custom_audio_player_shortcode');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add the above code and save.
You can adjust the css in the code above to suit your site.

Best regards,
Mike

Hi,

Please try this CSS as well:

#top .av-control-minimal-dark .avia-slideshow-arrows a::before {
  border-color: transparent;
}

Best regards,
Rikard

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

#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content * {
	color: red;
}

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,

Great, I’m glad that you got it working. Please let us know if you should need any further help on the topic, or if we can close it.

Thanks @guenni007 for helping out :-)

Best regards,
Rikard

Hi,

Great, I’m glad that you got it working. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard