Forum Replies Created

Viewing 30 posts - 481 through 510 (of 11,584 total)
  • Author
    Posts
  • in reply to: too much distance – no idea anymore #1474969

    ja – genau Ismaels Code.

    lest ihr etwas die Posts nicht durch?
    hier steht präzise wo der große Abstand herkommt!: https://kriesi.at/support/topic/too-much-distance-no-idea-anymore/#post-1471969 und das man diese Standard Werte ändern soll.

    Ich fürchte, die werten Mitstreiter lesen nicht mehr – sondern copy pasten irgendeinen Code der angezeigt wird und das wars dann.
    Echt frustrierend für jemand der Hilfe zur Selbsthilfe praktiziert. Ich habe doch nichts davon, wenn ich nur Code anbiete, der zwar funktioniert, aber den ihr nicht nachvollziehen könnt. und der auf der nächsten Seite auch nicht mehr funktioniert. Sorry Martin, das es jetzt dich traf – aber langsam habe ich keine Lust mehr.

    ____________

    yes – Ismaels Code.

    are you not reading the posts?
    https://kriesi.at/support/topic/too-much-distance-no-idea-anymore/#post-1471969

    it says exactly where the large gap comes from! – and that you should change that default values.

    I’m afraid that the other participants don’t read any more – they just copy and paste some code that is displayed and that’s it.
    Really frustrating for someone practicing self-help. I have nothing to gain from offering code that works, but which you can’t understand and which doesn’t work on the next page. I’m sorry, Martin, that it’s you who’s getting my frustration now, but it’s no fun anymore.

    in reply to: Creating a wide footer #1474966

    Better to have a sample page to inspect. From previous posts to this site, I can’t see a footer that attempts to do that.

    in reply to: Align the icon box #1474965

    and to center the flex_columns itself :

    
    #av-layout-grid-2 .flex_cell .flex_column {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
    }

    but as always all rules here do work on all elements that fit- better is to work more specific by a custom class set by you f.e. on that grid-row element.

    in reply to: Logo sliding option in bar #1474952

    you are talking about marquee but with images
    https://way2tutorial.com/html/html_marquee_image.php

    in reply to: Mute button in Vimeo video #1474885

    Yes – but don’t miss to do that on all languages. ;)

    in reply to: Mute button in Vimeo video #1474876

    can you try to insert the video like this:

    https://vimeo.com/1038124745?background=1

    in reply to: Mute button in Vimeo video #1474829

    i do not know if this works – because the button is inside an iframe – so external.

    Try:

    .ToastBase_module_toast__fb6cbe17 {
      display: none;
    }

    but isn’t that an option that could be made on vimeo itself on editing there the settings?

    in reply to: Image alignment in text box with captions #1474808

    the trick is to have the correct proportion starting from a png with always the same size.
    on my testpage all png got the outer-size of 400px x 600px and the dimension of the content is set by its relation to each other.
    have you downloaded that zip from : https://kriesi.at/support/topic/image-alignment-in-text-box-with-captions/#post-1471811 and use them instead !

    i think koksourcing belongs to the second level menu:

    #top .av-main-nav ul ul {
        margin-left: 0;
        left: 208px;
        position: absolute;
    }
    in reply to: Custom Menu-bar Shape – Part 2 #1474684

    OK – bis bald dann

    in reply to: Change Position on Mobile #1474681

    I know that this worked once, in a previous version. I am now wondering why this no longer works, or why the elements can no longer be accessed. Should there actually be an error there?

    it is not a matter of version – that order element remains to columns beside each other – and you could not handle the next row with it.
    But. you can set 3 times 1/3 columns beside each other ( please do only insert these three columns to that color-section and nothing else )
    now give a custom class to that color-section f.e.: one-three-two. (you know why) – and do not choose the equal height option !!!
    see here the setting and the code to have the third column be bigger than the others – read the comments on the codes to understand the way.
    https://webers-testseite.de/zar/

    in reply to: Custom Menu-bar Shape – Part 2 #1474645

    ok – dann geht es ja auch in deutsch.
    Durch die optische Erhöhung des Headers ( du hast 100px eingestellt ) stimmt jetzt das padding-top von #main nicht mehr.
    Um es wieder auf die korrekte Distanz zu bringen, kann man die neue Variable (–enfold-header-height) nutzen.

    Leider kommt dann eine Farbe zum Vorschein, die über das hier gesetzt wurde (rhein_designer.css) :
    bitte entfernen, oder eben die Farbe neu definieren – siehe unten

    #main,
    .avia-msie-8 .av_header_sticky_disabled#header {
      background-color:var(--enfold-header-color-bg); 
    }

    auch dein Hamburger Background sieht so aus. – schau mal ob es in den Enfold Optionen gesetzt wurde.

    .html_header_top.html_header_sticky #top #main {
      padding-top: calc(var(--enfold-header-height) + 100px) !important;
      background-color: #FFF;
    }
    
    @media only screen and (max-width: 767px) {
      .html_header_top.html_header_sticky #top #main {
        padding-top: 100px !important;
      }
      
      .logo.avia-svg-logo svg {
        top: 15px !important;
      }
    }
    
    .html_header_top.html_header_sticky #top.page-id-28 #main {
      background-color: #b3daa2;
    }
    
    #top .container_wrap {
      border: none !important;
    }
    in reply to: switch logo below certain screen width 1024 #1474644

    if this also works on mobile devices (I remember that it didn’t work with older browsers), then it is probably the best performing solution. Because a script solution would have to constantly query the screen width, which is why a “debounce and resize” function would have to be used for performance reasons. Enfold itself provides such a function. (Enfold’s debouncedresize function is a performance-optimized way to handle resize events without triggering excessive function calls)

    function custom_logo_for_mobile(){
    ?>
    <script>
    (function($) {
        function updateLogo() {
            var $logo = $('.logo img'); // Select the logo image
            var mobileLogo 	= "/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.webp";
            var defaultLogo = "/wp-content/uploads/desert-tortoise-council-50th-ann-logo.webp";
    
            if ($(window).width() <= 1024) {
                $logo.attr('src', mobileLogo); // Use mobile logo
            } else {
                $logo.attr('src', defaultLogo); // Use default logo
            }
        }
    
        // Trigger logo update on debouncedresize
        $(window).on('debouncedresize', function() {
            updateLogo();
        });
    
        // Run logo update on initial load
        $(document).ready(function() {
            updateLogo();
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_logo_for_mobile', 20 );

    so this works too – but the srcset originally generated (during loading) remains and is then also displayed.
    I don’t know how to change the srcset as well. If I switch off the responsive images under Performance, the change of logo images is also displayed at the frontend.

    in reply to: Is it possible to animate automatically the Icon Circles? #1474615

    the last codesnippet works on all browsers. sadly on safari and chrome the avia-icon-circles-main-logo is only showing for a small moment.
    On Firefox it works a bit nicer. i could not find a solution yet for that …

    It doesn’t seem to work completely. After a few cycles it gets a little out of hand. It’s difficult (for me) because the main logo ( avia-icon-circles-main-logo ) is not part of the elements within avia-icon-circles-inner

    … I’m sticking to one solution – because it might be a nice option to have.

    in reply to: switch logo below certain screen width 1024 #1474612

    hm – that works best till now:
    :lol

    @media only screen and (max-width: 1024px) {
        .av-logo-container img {
            content: url('https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
        }
    }
    in reply to: switch logo below certain screen width 1024 #1474610

    sadly – i tested it on a working page and the responsive images option does disturb that change :
    see screenshot on less than 1025px :

    you see that it is replaced – but the srcset is untouched on that. – so this is not the solution!

    in reply to: switch logo below certain screen width 1024 #1474609

    Can you please remove the relevant snippets from your functions.php (save them to your desktop) and insert this instead?

    function change_logo_with_screenwidth(){
    ?>
    <script>
    window.addEventListener("DOMContentLoaded", function () { 
    	(function($){
    		
    		// this is for loading the page on smaller screen-width 
    		if ($(window).width() < 1025) {
    			$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
    		}
    		else {
    			$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo.png');
    		}
    
    		function b() {
    			if ($(window).width() < 1025) {
    				$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
    			}
    			else {
    				$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo.png');
    			}
    		}
    
    		$(window).on('debouncedresize', function() {
    			b();
    		});
    
    	})(jQuery);
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'change_logo_with_screenwidth');

    we had to see if the srcset inserted images will follow that script …

    in reply to: switch logo below certain screen width 1024 #1474608

    can you check first that custom script and replace with:
    the console reports an error in the script ( looks like there is a superfluous round bracket )

    function ava_custom_script(){
    ?>
    <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function () { 
    	(function($){	
    		if($(window).innerWidth() <= 1024){
    			$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
    		}
    	})(jQuery);
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'ava_custom_script');

    but : i guess we had to find a way – where a resize might be included.

    in reply to: switch logo below certain screen width 1024 #1474607

    The if(wp_is_mobile()) { is a check if you are watching it on a mobile device ! : Link

    is that what you try to do – or do you always want to change the logo if the header turns to header top posiiton – even for desktop screens lower than a given value (1024px)

    this maybe a quick and dirty way – and please test if it works on other browsers – and mobile browsers too:
    ( in that case – you do not need those functions.php entries – but i will look if there is a solution for that too)

    @media only screen and (max-width: 1024px) {
        .av-logo-container img {
            content: url('https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
        }
    }
    in reply to: Color Section Glitch? #1474601

    i’m participant as you are- so no private content is readable for me.
    But maybe it is enough to see the single frontend page.

    btw. as an interim solution, you can use the Quick CSS rule:

    #top #footer-page .av-section-color-overlay {
      opacity: 0.5;
      background-color: #185cc5;
    }

    PS : what if you just go to enfold footer settings and remove the settings on “Default Footer & Socket Settings” to default behaviour. Then open that page – edit – save – and switch then back to footer page setting.

    in reply to: Color Section Glitch? #1474599

    So it’s about the footer page as a page in the frontend not loading the background; because in the frontend of the other pages you can see the background of that footer section.

    could you please link the single page link for the footerpage?
    f.e.: https://new.fiermanlawfirm.com/footer-page

    in reply to: Color Section Glitch? #1474597

    but it does not belong to : madisonstudios.com ? with that enfold version 4.8

    i hope – if Günter or Ismael knows a much easier way to obtain that. ;)

    i think that the above mentioned transition to show the text disturbs a bit the whole timing.
    but try with a bit more delay

    #top .avia-icon-circles-icon-text {
      transition: all 1s cubic-bezier(.175,.885,.32,1.275);
    }

    for child-theme functions.php:

    function rotation_of_active_circle_icons(){
    ?>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
        const parent = document.querySelector('.avia-icon-circles-inner');
        const icons = parent.querySelectorAll('.avia-icon-circles-inner .avia-icon-circles-icon');
        const texts = parent.querySelectorAll('.avia-icon-circles-inner .avia-icon-circles-icon-text');
        let currentIndex = 0;
        let intervalId;
    
        function updateActiveClass() {
            // Remove the 'active' class from all elements
            icons.forEach(icon => icon.classList.remove('active'));
            texts.forEach(text => text.classList.remove('active'));
    
            // Add the 'active' class to the current index
            setTimeout(() => {
    			icons[currentIndex].classList.add('active');
    			texts[currentIndex].classList.add('active');
    		}, 1500);
    
            // Update the index to the next element (loop back to 0 if at the end)
            currentIndex = (currentIndex + 1) % icons.length;
        }
    
        function startIntervalWithDelay() {
            // Add a delay before starting the interval
            setTimeout(() => {
                updateActiveClass(); // Ensure the first activation happens after the delay
                intervalId = setInterval(updateActiveClass, 6000);
            }, 3000); // 3-second delay before starting the interval
        }
    
        function stopInterval() {
            clearInterval(intervalId);
        }
    
        // Start the interval with delay
        startIntervalWithDelay();
    
        // Pause on hover and resume on mouse leave
        parent.addEventListener('mouseenter', stopInterval);
        parent.addEventListener('mouseleave', startIntervalWithDelay);
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'rotation_of_active_circle_icons');

    yes – you are right. I did not check the other browsers ( on firefox it works the way i intendet to do so ). Sorry. But i do not see in the code any browser-specific selectors or commands.
    i have to check this. …

    here is the result for that script and your “home” page:
    https://webers-testseite.de/circle-rotator.mp4

    or with a background-image on your text:

    
    #top .avia-icon-circles-icon-text {
      background-image: url(https://coachcristina.com/wp-content/uploads/2024/12/WhatsApp-Image-2024-12-11-at-11.09.04.jpeg) !important;
      background-repeat: no-repeat !important;
      background-position: center center !important;
      transition: all 1s cubic-bezier(.175,.885,.32,1.275);
    }
    
    #top .avia-icon-circles-icon-text-inner * {
      color: #FFF
    }

    that example page : on hover the normal behaviour is working on mouseleave the animation starts. every 3sec the active state is changing.
    ???

    the default behaviour is important for me – because i do have links on each icon. So if the animation still is working that hampers the default action.

    in reply to: Filter avf_sync_sc_defaults_array useless? #1474563

    ok on github the filter has on top the comment: link

     * Allows to modify the default shortcode values if an attribute is missing in shortcode.
     * This will not change set attributes in shortcode.

    so it is clear now – but why then the separator could be set on that example?

    in reply to: Filter avf_sync_sc_defaults_array useless? #1474562

    i guess the reason for that changing of default values is that you like all default hr’s change to those new values – so the css solution did that job.

    #top .hr.hr-default {
      height: 30px;
    }
    #top .hr.hr-default .hr-inner {
      border: none !important;
    }

    but I also understand your desire to make it possible via that filter.

    in reply to: Is it possible to animate automatically the Icon Circles? #1474560

    PS: that delay comes from the default transition timing:

    .avia-icon-circles-icon-text {
      transition:all .8s cubic-bezier(.175,.885,.32,1.275);
    }

    it you set it to none – there will be no delay – see example page. But then not center image is shown.

    #top .avia-icon-circles-icon-text {
      transition: none;
    }
    in reply to: Filter avf_sync_sc_defaults_array useless? #1474530

    i do not know why the filter does not work in this case – and even if you use it as in the github example:

    function custom_avf_sync_sc_defaults_array( $defaults, $sc_class, $is_modal_item, $content ){
    	if( $sc_class instanceof avia_sc_hr ){
    		$defaults['height'] = '30';
    		$defaults['class'] = 'invisible';
    	}
    	return $defaults;
    }
    add_filter( 'avf_sync_sc_defaults_array', 'custom_avf_sync_sc_defaults_array', 10, 4 );

    it does not change the allready set default hr’s

    you can change them to that value via css :

    
    #top .hr.hr-default {
      height: 30px;
    }
    #top .hr.hr-default .hr-inner {
      border: none !important;
    }
    
Viewing 30 posts - 481 through 510 (of 11,584 total)