Forum Replies Created

Viewing 30 posts - 271 through 300 (of 11,715 total)
  • Author
    Posts
  • in reply to: Home page automatically scrolling on mobile #1485671

    but you do not belong to the up and down of “Kia Ora!” section?

    This comes from the slider above – that has 3 Groups and the last only got 4 items. So it’s height is less than the others.

    what do you mean by “only works” is it present but does not show prev. next slides ? or is there no slider at all?

    the element itself got an option on Advance Tab to show/hide the slider for responsive cases:

    are there any checkmarks checked inside your slider?

    Did it solve your problem, or did you find it to be less important than you thought?

    in reply to: Show portfolio categories via the navigation #1485616

    ok – then a link to a page to which the question refers would have been helpful.
    http://wordpress.p691093.webspaceconfig.de/portfolio_entries/harfen-treppen/

    in reply to: Show portfolio categories via the navigation #1485588

    I had understood him differently. For example, if he opens the page : Link via the menu, then it should open directly in the opened ajax style.

    Versuch doch mal das in der child-theme functions.php:

    function trigger_click_on_ajax_categories(){
    ?>
    <script>
    (function($){
        $(window).on('load', function(){
            // Prüfen, ob das Element mit der Klasse 'grid-links-ajax' auf der Seite existiert
            if ($('.grid-links-ajax').length > 0) {
                setTimeout(function() {
                    // Sicherstellen, dass das erste Element vorhanden ist, bevor der Klick ausgelöst wird
                    const firstGridItem = $(".grid-links-ajax .grid-entry.first");
                    if (firstGridItem.length) {
                        firstGridItem.find('.grid-image').trigger('click');
                    }
                }, 300);
            }
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'trigger_click_on_ajax_categories');

    eventuell musst du das timing etwas erhöhen.

    in reply to: menu boarded items #1485586
    #menu-item-2351 {
      margin-left: 5px;
    }
    #av-burger-menu-ul .menu-item-2351 {
      margin-top: 10px !important;
    }
    

    if you like to have more distance in hamburger menue too.

    in reply to: Glassy and transparent header or transparent header #1485584

    you mean when hamburger is visible.

    put that rule of ismael inside a media-query:

    @media only screen and (min-width: 989px) {
      #top .av_header_transparency .header_bg {
        opacity:1;
        background:linear-gradient(to bottom,#132444,rgba(17,18,53,0))
      }
    }
    in reply to: Make arrows more visible in slideshow #1485577

    try this:

    #top .avia-slideshow .avia-slideshow-arrows a::before {
      background: rgba(0,0,0,0.7) !important;
    }
    
    #top .avia-slideshow .avia-slideshow-arrows svg {
      height: 2em;
      margin-top: 0 !important;
      line-height: 0 !important;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      left: 50%;
    }
    
    #top .avia-slideshow .avia-slideshow-arrows a:hover svg {
      fill: yellow;
      transition: all 0.7s ease;
    }
    
    #top .avia-slideshow .avia-slideshow-arrows a:hover svg path {
      stroke-width: 1;
      stroke: yellow;
      stroke-linecap: round;
    }

    because now i guess these icons are svg files allready. so to make them thicker use stroke-width on the path.

    in reply to: svg logo’s in header and transparant header. #1485572

    To prevent this from happening with logos, you could also switch to setting the classes (usually only fill information) as inline information directly on the vector f.e. : <path fill="#197889" d=" . . . "></path>
    Try here to get rid of classes: https://jakearchibald.github.io/svgomg/

    check “inline styles” and “styles to attributes”

    in reply to: Accessibility Issue with Search Icon #1485564

    by the way – it is nice to have an embedded tab navigation now on Enfold – but to prevent that mouse events do show the focus setting – it might be better to go to the focus-visible or focus-within setting. These rulesets do not influence the click or hover states of links / buttons etc.

    f.e. :

    
    #menu-item-search a.avia-svg-icon:focus {
      outline: none !important;
    }
    #menu-item-search a.avia-svg-icon:focus-visible > svg {
      outline: 3px solid red !important;
      outline-offset: 5px;
    }

    now we got the ugly outline by navigation with mouse !
    you can see here a manually set tab navigation with only focus-visible settings. Click a link to see that the states are not influenced.
    https://guenterweber.com/

    in reply to: hide the icon mouse-over label #1485563

    btw. ismael – I have no success with the filter either:

    in reply to: svg logo’s in header and transparant header. #1485561

    see a similar Problem with an inline svg in the content. https://kriesi.at/support/topic/svg-transparent/#post-1469552
    both svg logos are present in the DOM only opacity rules the visibility. The transparency logo is after the normal logo:

    if there are same classes defined inside the inline svg files the last one (transparency logo inside the subtext) will win the css race ;)

    Look with a good text editor to your svg files to see the culprit.

    If you can make the link to your page public – i can give you better advice.

    in reply to: hide the icon mouse-over label #1485532

    i use for title attributes on links, images etc. this function in my child-theme functions.php:

    function temporary_removal_title_tags(){
    ?>
    <script>
      window.onload = function() {
        var elementsWithTitle = document.querySelectorAll('a, img, *[title]');
        for (var i = 0; i < elementsWithTitle.length; i++) {
            var element = elementsWithTitle[i];
    
            element.setAttribute("data-original-title", element.title);
    
            element.addEventListener("mouseenter", function() {
                this.title = ""; 
            });
    
            element.addEventListener("mouseleave", function() {
                this.title = this.getAttribute("data-original-title"); 
            });
    
            element.addEventListener("mousedown", function() {
                this.title = this.getAttribute("data-original-title");
            });
        }
      };
    </script>
    <?php
    }
    add_action('wp_footer', 'temporary_removal_title_tags');

    BUT this will not influence the <title> inside the xml code of a svg file!

    you can get rid of those <title> but i do not know a way to get them back by mouseleave or mousedown event:
    the code above with a little addon – so use instead:

    function temporary_removal_title_tags_and_get_rid_of_svg_titles(){
    ?>
    <script>
      window.onload = function() {
          var elementsWithTitle = document.querySelectorAll('a, img, *[title]');
    
          for (var i = 0; i < elementsWithTitle.length; i++) {
              var element = elementsWithTitle[i];
    
              element.addEventListener("mouseenter", function() {
                  if (this.title) { 
                      this.setAttribute("data-original-title", this.title);
                      this.title = ""; 
                  }
              });
    
              element.addEventListener("mouseleave", function() {
                  var storedTooltip = this.getAttribute("data-original-title");
                  if (storedTooltip !== null) { // Prüfen, ob ein Originaltitel gespeichert wurde
                      this.title = storedTooltip;
                      this.removeAttribute("data-original-title"); // Aufräumen
                  }
              });
    
              element.addEventListener("mousedown", function() {
                  var storedTooltip = this.getAttribute("data-original-title");
                  if (storedTooltip !== null) {
                      this.title = storedTooltip;
                      this.removeAttribute("data-original-title");
                  }
              });
          }
    
          var allSvgs = document.querySelectorAll('svg');
          allSvgs.forEach(function(svg) {
              var svgTitles = svg.querySelectorAll('title');
              
              svgTitles.forEach(function(svgTitleElement) {
                  if (svgTitleElement.textContent.trim() !== '') {
                      svgTitleElement.setAttribute("data-original-svg-title", svgTitleElement.textContent);
                      svgTitleElement.textContent = ""; // Leeren des SVG-Titels
                  }
              });
          });
      };
    </script>
    <?php
    }
    add_action('wp_footer', 'temporary_removal_title_tags_and_get_rid_of_svg_titles');

    why not delete all title tags: sometimes these are needed for lightbox bottom bar

    in reply to: Hiding Image on Mobile not working #1485528

    maybe you get rid of that top border by:

    #after_full_slider_1.container_wrap {
      border-top-width: 0;
    }
    in reply to: Hiding Image on Mobile not working #1485523

    check this page with your iPhone: https://webers-testseite.de/sam/
    if you have convinced yourself that it works on mobile devices – I will take my site down again.

    on my iPhone i got this message from your page: “Please set a mobile device fallback imgage for this video in your wordpress backend.”
    so now i recognise that you use the fullwidth-slider.

    i used for the video a color-section with video background. And set on
    “Section Minimum Height – …(responsive section) to 56% (9/16*100)”. ( on a 16/9 video)

    in reply to: Hiding Image on Mobile not working #1485464

    First : i’m talking about a custom class : hide-on-smallscreens – not an ID
    and maybe put your two columns inside a color-section.

    with my solution you can then remove all other trials to hide the column.

    PS: you are still on Enfold 6.0.2 my testpage is on 7.1.1 – i only mention that because i can not reproduce a negative margin-top value on the img tag itself.

    • This reply was modified 4 months, 2 weeks ago by Guenni007.
    in reply to: Hiding Image on Mobile not working #1485455

    Why do you have that text as double content?

    Lets try if a css only solution will do the job:

    Do not create that extra text section. This means: your 1/3 column on the left – the 2/3 column with your text on the right. As probably before, move the line column upwards (-200px) using the setting via Advanced – Position relative in the Row Settings – Row Screen Options setting and let the columns wrap at 989px. Give the column with the image its own meaningful class, e.g.: hide-on-smallscreens.

    Now insert it into the Quick CSS:

    @media only screen and (max-width: 989px) {
     #top .flex_column.hide-on-smallscreens {
        display: none !important;
      }
      #top .flex_column.hide-on-smallscreens + .flex_column {
        width: 100%;
      }  
    }
    

    maybe it is better to shift the image via position relative.

    in reply to: Hiding Image on Mobile not working #1485440

    maybe it is because the ID is set twice ID=samhide
    remove it from the image

    or because the image is inside a column why not using the options inside the column element to hide the column?

    in reply to: How to center footer widgets #1485425

    so it is not your own page? Its for a different page?

    in reply to: How to center footer widgets #1485422

    or if you like to have it for responsive case too ( centered )

    replace with:

    #footer .container {
      display: grid;
      gap: 20px;  
      grid-template-columns: repeat(3, 1fr);
      justify-content: space-between;
    }
    
    #footer .container .flex_column {
      width: unset;
      padding: 0;
      justify-self: center;
    }
    
    #footer .container .flex_column:nth-child(1) {
      justify-self: left;
    }
    
    @media only screen and (max-width: 767px) {
      #footer .container {
        gap: 0;
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        justify-items: center;
      }
      #footer .container .flex_column {
        width: unset !important;
        margin: 0;
        padding: 0;
        justify-self: center !important; 
      }
    }
    in reply to: How to center footer widgets #1485421

    try:

    @media only screen and (min-width: 768px) {
      #footer .container {
        display: grid;
        gap: 20px;  
        grid-template-columns: repeat(3, 1fr);
        justify-content: space-between;
      }
      #footer .container .flex_column {
        width: unset;
        padding: 0;
        justify-self:center;
      }
      #footer .container .flex_column:nth-child(1) {
        justify-self: left;
      }
    }

    if you like to have the first column to be centered in its container too ( the text preserves align left ) – then erase the last rule for first child column

    in reply to: Rotating Banner of Logos #1485420

    PS: i changed the script! That even a normal Enfold Content Slider could be present too.
    PPS: I didn’t want to install endless scrolling. I think it would be necessary to have the entry-slide in a separate entry-slide-wrap. That’s where the trick lies, that I collect all entry-slides and move them into the first entry-slide-wrap. Then delete the empty wrappers. I therefore decided to change the direction of the slider. My content slider solution stops at mouseenter – and starts again at mouseleave

    in reply to: Rotating Banner of Logos #1485416

    I have added to the code that the slider reacts to smaller screen widths – i.e. deviates from the number initially set via the user class.

    in that part:

    // Responsive Anpassung der Spaltenanzahl für verschiedene Bildschirmgrößen
    if (window.innerWidth < 480) {
        currentVisibleColumns = 2;
        console.log('Custom Slider: (updateResponsiveColumns) Screen width < 480px. Setting visible columns to 2.');
    } else if (window.innerWidth < 768) {
        currentVisibleColumns = 3;
        console.log('Custom Slider: (updateResponsiveColumns) Screen width < 768px. Setting visible columns to 3.');
    } else if (window.innerWidth < 1024) {
        currentVisibleColumns = 4;
        console.log('Custom Slider: (updateResponsiveColumns) Screen width < 1024px. Setting visible columns to 4.');
    } else {
        currentVisibleColumns = initialColumnsFromClass;
        console.log('Custom Slider: (updateResponsiveColumns) Screen width >= 1024px. Using initial columns from class:', initialColumnsFromClass);
    }

    PS: you can only implement something like this properly with the help of AI. I just know how to prompt the right questions.
    ;)

    in reply to: Rotating Banner of Logos #1485410

    see here – read carefully:
    https://webers-testseite.de/partnerlogo-element/

    you can erase all the cosole logs – they are only for me to check.

    in reply to: New tag getting auto injected #1485338

    do you have a yoast seo installed and perhaps a premium version? Because there is a beta tool:



    but
    i think the allready placed p-tags had to be removed manually
    maybe other plugins with AI support can cause this too (Rank Math or an AI content helper)

    Of course, there are different ways to incorporate translations in WPML.
    For smaller sites, I prefer to call up the page I want to edit in my default language and edit everything there until I am satisfied, rather than using the individual modules of WPML. On the right-hand side of the editor page, I can now see which language I am currently using. I can then choose whether to translate the page or click on the pencil icon to edit the translation in another language. A clone of the English page now opens. I can then set the translations there (content) but, if you open the element you mentioned above now, you can also edit those texts there.

    • This reply was modified 4 months, 3 weeks ago by Guenni007.
    • This reply was modified 4 months, 3 weeks ago by Guenni007.

    you can edit the element itself. On WPML there should be for each language a separate page.
    Open the element and look for : Content – Buttons : “Before Button Text” and. “After Button Text” – you can enter your own phrase on that. And because of separate pages for each language you can have your own translated text there.

    in reply to: Special underlined Main Menu #1485208

    maybe you had to synchronize it with the border-top-width color and width. #top .av-main-nav > li > ul
    and mega-div – because if there are sub-level dropdown menues – they will have a border too.

    in reply to: Special underlined Main Menu #1485207

    on default there are allready these lines : https://kriesi.at/themes/enfold/portfolio/

    maybe you set it to display: none ? search for selector .avia-menu-fx

    you then can influence by – f.e.:

    #top .header_color .avia-menu-fx {
      height: 4px
    }
    
    #top .header_color.av_header_transparency .menu-item a:hover .avia-menu-fx {
      background: red
    }
    
    #top .header_color:not(.av_header_transparency) .avia-menu-fx {
      background: green
    }
    in reply to: Make the 2nd column sticky only on Portfolio Pages #1485180

    in most cases these columns will be inside a color-section. Inside that section the one that should scroll has to be with huge content. the other one with less.
    Do not use the equal height option on the coluns!

    i would give a custom class to that section! f.e. : sticky-parent (this is not the direct parent of those columns. But we can address now better – and use it for that case generally.
    The column that should stick got the custom class: sticky-element

    then we have:
    (we can have the overflow setting inside the media query too – it only needs to work there)
    NB: the media query min-width depends on your setting where the columns should go to 100% width – if it is 989px then change that value

    @media only screen and (min-width: 767px) {
      .responsive #top {
        overflow-x: visible !important;
      }
      .responsive #top #wrap_all {
        overflow: visible !important;
      }
      #top .sticky-parent .entry-content-wrapper {
        display: flex;
      }
      #top .sticky-element { 
        height: unset !important;
        width: unset !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 80px;
        align-self: flex-start;
        min-width: 40%;
      }
    }

    again – see: https://webers-testseite.de/sticky-elements/

Viewing 30 posts - 271 through 300 (of 11,715 total)