Forum Replies Created

Viewing 30 posts - 1,411 through 1,440 (of 10,893 total)
  • Author
    Posts
  • sorry boardsoft will replace my code snippet i use for the strings:
    the entities are important for the code to work.
    (click to enlarge)

    PS if you use lang setting of ch_X. use that instead

    Yes – there is a definition for those quotes in enfold-functions.php with avia_ampersand function.
    but even if i overwrite that function ( as a pluggable function – it is easy to do ) i can not set for quillemets ( » and. « )

    i think that the lang setting for that page is disturbing the way it might work.

    if you are using the de_X setting for your page try this in your child-theme functions.php:

    for copy and paste the function ( do not copy the leading <?php see pastbin : https://pastebin.com/JQfUCDqZ

    PPS: all credits goes to : https://www.buchundberger.net/blog/stefan-buchberger/

    in reply to: How to change a permalink #1409634

    First the permalink structure had to be set to what you like to have on : dashboard – settings – permalinks ( and for portfolio look to the Portfolio Entry Settings below that fields ) – all portfolios will be in that permalink structure. So first you had to adjust the structure there !


    then the addendum nomenklatur. If there exists allready a:
    https://intercettazioni.biz/cellulari-spia-android-telefono-spia/
    you can not rename the
    https://intercettazioni.biz/portfolio-articoli/cellulari-spia-android-pronti/
    to it !
    Be aware that for the Database a post do exist – even if it is inside the trash/bin !!
    So if it is that way – you first had to empty the trash !

    in reply to: Multiple images in light box #1409594

    hm – tested it on newest Enfold – seems not to work as expected – and even the known snippet of generating groups – does not work anymore in that manner that even if there are images in text-block element with that group-class are together in one Group.
    Between Image Alb even in different color-sections the snippet works!

    (on using group-1, group-2 etc. )

    function handle_lightbox_groups_in_gallery(){
    ?>
    <script>
    (function($){
        $(window).on('load',function() {
            $('.group-1 .lightbox-added').attr('data-group', '1');
            $('.group-2 .lightbox-added').attr('data-group', '2');
            $('.group-3 .lightbox-added').attr('data-group', '3');
            $('.group-4 .lightbox-added').attr('data-group', '4');
            $('.group-5 .lightbox-added').attr('data-group', '5');
            $('.group-6 .lightbox-added').attr('data-group', '6');
            $('.group-7 .lightbox-added').attr('data-group', '7');
            $('.group-8 .lightbox-added').attr('data-group', '8');
            // …
    
            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', 'handle_lightbox_groups_in_gallery');
    in reply to: Multiple images in light box #1409591

    to which element did you add this class? – it has to be on a parent of the image itself ( on image alb this is the case if you put that class to the image alb) – but for images inside text-block not if you inserted that class to the first input field: “Image CSS Class” – you had to insert it to “Link CSS Class”.

    in reply to: Adjust mobile menu slide out on desktop #1409590

    You do not need to make absolute settings for the scope of the slide out. Relative settings are also accepted here:
    In the meantime, the distribution of the property: backdrop-filter is very good, so that it is now quite possible to use it with high browser support.
    It will offer you a kind of frosted glas effect for the slide-out.

    @media only screen and (min-width:990px){
      .av-burger-overlay-scroll {
        background-color: rgba(255,255,255,0.7) !important;
        width: 40% !important;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
      }
    }
    in reply to: Buttons to bottom on row grid #1409559

    Whereas I actually like the use of columns within grid cells. Then I would put the element which should be placed at the bottom in the same height in an extra 1/1 column – the rest doesn’t matter.
    In that case the snippet for functions.php would stay the same, but the css would now refer to the last column instead of the button-wrapper.

    (click to enlarge the image)

    @media only screen and (min-width: 768px) {
      .responsive #top #wrap_all  #main .gridrow-special .flex_cell {
        padding-bottom: 100px !important
      }
      #top #wrap_all .gridrow-special .flex_cell .flex_column:last-of-type {
        position: absolute;
        margin-top: 0px;
        top: calc(100% - 80px);
        width: 33%;
      }
    }

    in the case that on the last 1/1 container is more content – you had to adjust those shift values of padding-bottom and top: calc … !
    The height of that last 1/1 container had to be at least the padding-bottom on the cells

    But: if you got troubles on that – just get back to me ;)

    in reply to: Buttons to bottom on row grid #1409555

    So you don’t have to set this class for all home pages, just leave the lines included.
    For the other grid-row elements you then have to set the custom-class gridrow-special

    function get_rid_of_flex_cell_inner(){ 
    ?>
    <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function () { 
      (function($) {
        $('#top.home #av-layout-grid-1 .flex_cell_inner > *').unwrap();
        $('#top .gridrow-special .flex_cell_inner > *').unwrap();
      })(jQuery);
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'get_rid_of_flex_cell_inner');
    @media only screen and (min-width: 768px) {
      .responsive #top.home #wrap_all #av-layout-grid-1 .flex_cell,
      .responsive #top #wrap_all #main .gridrow-special .flex_cell {
        padding-bottom: 100px !important
      }
      #top.home #av-layout-grid-1 .avia-button-wrap,
      #top #wrap_all #main .gridrow-special .avia-button-wrap {
        position: absolute;
        top: calc(100% - 80px);
        width: 33%;
      }
    }

    It goes without saying that if you take 4 grid cells you have to adjust the width of the button-wrapper to 25%.
    If you switch at 989px – you need to change the media query to that as well.

    in reply to: Buttons to bottom on row grid #1409490

    btw: for your language switcher it might be better if you have a bit more distance between each other and to better have contrast to the background – so give it a try:

    .gt_switcher_wrapper {
      padding: 5px;
      background-color: rgba(255,255,255,0.5);
      border-radius: 5px;
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
    }
    
    .gt_switcher_wrapper a {
      margin-right: 5px
    }

    and try:

    #titulo_portada .av-special-heading-tag {
      text-shadow:
       -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
         6px 6px 10px #000;
    }
    in reply to: Buttons to bottom on row grid #1409489

    the problem with it is the flex_cell_inner container – it hampers the absolute positioning of the button-wrapper.

    if you need this more than once – give a custom-class to those grid-rows – i now adjusted the code to that page only by ID.
    so to get rid of that container under preserving the child elements put this to your child-theme functions.php

    function get_rid_of_flex_cell_inner(){ 
    ?>
    <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function () { 
      (function($) {
        $('#top.home #av-layout-grid-1 .flex_cell_inner > *').unwrap();
      })(jQuery);
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'get_rid_of_flex_cell_inner');

    put this to your quick css:

    @media only screen and (min-width: 768px) {
      .responsive #top.home #wrap_all #av-layout-grid-1 .flex_cell {
        padding-bottom: 100px !important
      }
      #top.home #av-layout-grid-1 .avia-button-wrap {
        position: absolute;
        top: calc(100% - 80px);
        width: 33%;
      }
    }

    EDIT: – sorry i see that you got a lot of translations – so best ist to give a custom-class to that grid-row ( on all translated pages )
    e.g. : gridrow-special and use that

    If it is only that page – it is on all translations the home page – so #top.home will be a good selector for it – see above

    in reply to: Buttons to bottom on row grid #1409459

    is there a link to your site?
    Or better make a screenshot of the layout you have. From the frontend screenshot we could not see if the content inside the grid-cells is in one container or more than one container etc.

    in reply to: working solution for different logo on scroll #1409458

    Yes mike – but this is half the solution it could be.
    Better would be :

    maybe it is possible for a mod to change the code for a more global use, in the sense that only pages without transparent logo will have this filter.

    in reply to: working solution for different logo on scroll #1409434

    hm – my coding abilities are not good enought to check in a filter function if a page/post is a transparency page.
    i see that line on enfold-functions.php :

    $transparency = post_password_required() ? false : get_post_meta( $post_id, 'header_transparency', true );
    

    but can’t get it to run for all non transparency pages/posts

    what i got so far for my example page is:

    function an_alternative_logo( $sub ) {
    	if (is_page(2879) ) {
    		$sub .= '<img class="alternative-logo" src="path_to_your_alternative_logo" alt="alternativ Logo" />';
    	}
    	return $sub;
    }
    add_filter( 'avf_logo_subtext', 'an_alternative_logo' );
    
    function replace_alternative_svg_logo_with_inline_code() { 
    if (is_page(2879) ) {
    ?>
    <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function () { 
    	(function($){
    		$( ".avia-img-svg-logo-sub img" ).remove();
    		$.get('path_to_your_alternative_svg_logo', function(svg){
    		  $( ".avia-img-svg-logo-sub" ).html( svg );
    		}, 'text');
    	})(jQuery);
    });	
    </script>
    <?php 
    }
    }
    add_action('wp_footer', 'replace_alternative_svg_logo_with_inline_code');

    and for quick css:

    #top.page-id-2879 .alternative-logo {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: opacity 0.5s ease
    }
    
    #top.page-id-2879  .header-scrolled .alternative-logo {
      opacity: 1;
    }
    
    #top.page-id-2879 .header-scrolled .av-contains-svg > svg,
    #top.page-id-2879 .header-scrolled .av-contains-svg > img {
      opacity: 0;
      transition: opacity 0.5s ease
    }
    
    #top.page-id-2879 .subtext.avia-img-svg-logo-sub > svg {
      position: absolute;
      top: 0;
      left: 0;
    }
    
    #top.page-id-2879 :not(.header-scrolled) .subtext.avia-img-svg-logo-sub > svg {
      opacity: 0;
      transition: opacity 0.5s ease
    }
    
    #top.page-id-2879  .header-scrolled .subtext.avia-img-svg-logo-sub > svg {
      opacity: 1;
      transition: opacity 0.5s ease
    }

    maybe it is possible for a mod to change the code for a more global use, in the sense that only pages without transparent logo will have this filter.

    in reply to: working solution for different logo on scroll #1409425

    do you need inline svg for that alternative logo – or is a img src ok?
    see: https://webers-web.info/impressum/

    the trick will be to insert another subtext logo. But this logo is not in dependency to av_header_transparency but to header-scrolled class.

    Edit: just a moment – i had to optimize the codes

    in reply to: working solution for different logo on scroll #1409423

    what kind of mime type are your logos? png / jpg / svg ?

    in reply to: Full screen image with animation #1409394
    in reply to: Full screen image with animation #1409392

    on that pininfarina page? which button should i press? Or is there an enfold page to see in private content?
    see buttons on my color-section: https://basis.webers-testseite.de/home4/

    in reply to: Overlay over full slider #1409389

    And you used that option on editing the images slides ( click on those images ) on that second popup window to get the overlay:

    Doing this on the slides itself is nice to change the overlay color for each image/video

    in reply to: Full screen image with animation #1409382

    https://basis.webers-testseite.de/home4/

    it is a color-section with min-height at 100% – with background-video and selfhosted video
    on mobile i checked to not show the video but the inserted background-image due to performance reasons.

    in reply to: Full screen image with animation #1409375

    you want only an image – or a slideshow as body background?
    A fullscreen image is easy to have ( if you have on general Layout a boxed or fixed frame layout) – on enfold options: general styling : “body background”
    You have all those options to insert even a seamless background-image and have background-repeat etc.
    It is then simply implemented by means of a newly created extra container: bg_container.

    .bg_container {
      background-image: url(/wp-content/uploads/…);
      background-position: center center;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100%;
      width: 100%;
      position: fixed;
      z-index: -1;
      top: 0;
      left: 0;
    }

    this is the fixed version – but you can have different options.
    see on css-tricks: https://css-tricks.com/perfect-full-page-background-image/

    you can find on docu some info on how to influence the orderby options:
    https://kriesi.at/documentation/enfold/blog-post/#toggle-id-25

    But: this only allows you to orderby Title ( alphabetically).
    what do you mean by tags in your description – you set some post tags on post edit – then we had to find a different solution on that.

    ____________
    if you use that : “How to add an order/orderby option to the blog/post slider/portfolio/masonry grid element”
    in your child-theme functions.php

    if(!function_exists('avia_custom_query_extension')){
        function avia_custom_query_extension($query, $params){
            global $avia_config;
            if(!empty($avia_config['avia_custom_query_options']['order'])){
                $query['order'] = $avia_config['avia_custom_query_options']['order'];
            }
            if(!empty($avia_config['avia_custom_query_options']['orderby'])){
                $query['orderby'] = $avia_config['avia_custom_query_options']['orderby'];
            }
            unset($avia_config['avia_custom_query_options']);
            return $query;
        }
        add_filter('avia_masonry_entries_query', 'avia_custom_query_extension', 10, 2);
        add_filter('avia_post_grid_query', 'avia_custom_query_extension', 10, 2);
        add_filter('avia_post_slide_query', 'avia_custom_query_extension', 10, 2);
        add_filter('avia_blog_post_query', 'avia_custom_query_extension', 10, 2);
        add_filter('avf_magazine_entries_query', 'avia_custom_query_extension', 10, 2);
    
        function avia_custom_query_options($elements){
            $allowed_elements = array('av_blog','av_masonry_entries','av_postslider','av_portfolio','av_magazine');
            if(isset($_POST['params']['allowed']) && in_array($_POST['params']['allowed'], $allowed_elements)){
                $elements[] = array(
                    "name" => __("Custom Query Orderby",'avia_framework' ),
                    "desc" => __("Set a custom query orderby value",'avia_framework' ),
                    "id"   => "orderby",
                    "type" 	=> "select",
                    "std" 	=> "",
                    "subtype" => array(
                        __('Default Order',  'avia_framework' ) =>'',
                        __('Title',  'avia_framework' ) =>'title',
                        __('Random',  'avia_framework' ) =>'rand',
                        __('Date',  'avia_framework' ) =>'date',
                        __('Author',  'avia_framework' ) =>'author',
                        __('Name (Post Slug)',  'avia_framework' ) =>'name',
                        __('Modified',  'avia_framework' ) =>'modified',
                        __('Comment Count',  'avia_framework' ) =>'comment_count',
                        __('Page Order',  'avia_framework' ) =>'menu_order')
                );
                $elements[] = array(
                    "name" => __("Custom Query Order",'avia_framework' ),
                    "desc" => __("Set a custom query order",'avia_framework' ),
                    "id"   => "order",
                    "type" 	=> "select",
                    "std" 	=> "",
                    "subtype" => array(
                        __('Default Order',  'avia_framework' ) =>'',
                        __('Ascending Order',  'avia_framework' ) =>'ASC',
                        __('Descending Order',  'avia_framework' ) =>'DESC'));
            }
            return $elements;
        }
        add_filter('avf_template_builder_shortcode_elements','avia_custom_query_options', 10, 1);
    
        function avia_custom_query_add_query_params_to_config($meta, $atts, $content, $shortcodename){
            global $avia_config;
            if(empty($avia_config['avia_custom_query_options'])) $avia_config['avia_custom_query_options'] = array();
            if(!empty($atts['order'])){
                $avia_config['avia_custom_query_options']['order'] = $atts['order'];
            }
            if(!empty($atts['orderby'])){
                $avia_config['avia_custom_query_options']['orderby'] = $atts['orderby'];
            }
            return $meta;
        }
        add_filter('avf_template_builder_shortcode_meta', 'avia_custom_query_add_query_params_to_config', 10, 4);
    }

    you will have on element edit two more settings

    in reply to: Change number of blog columns via media query? #1409296

    The problem on that is that enfold organizes the entries (artikles) on a grid layout by column setting.
    See here example page of enfold grid layout blog: https://kriesi.at/themes/enfold-2017/blog/blog-default/
    if you take a look on developer tools you see that on a 3column grid groups of 3 entries are build to have that layout:
    in a three-column grid layout, 3 entries each have their own wrapper

    (click to enlarge the image)

    so if you have the chance to handle the whole grid as one wrapper and have some media queries to style them you had to bring all entries to one wrapper
    put this to your child-theme functions.php

    function wrap_articles_in_one_flex_container(){ 
    ?>
    <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function () { 
      (function($) {
        $('.avia-content-slider-inner .slide-entry-wrap .slide-entry').each( function() {
            $(this).detach().appendTo('.avia-content-slider-inner .slide-entry-wrap:first');
        });
        $('.avia-content-slider-inner .slide-entry-wrap:empty').remove();
      })(jQuery);
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'wrap_articles_in_one_flex_container');

    And then style that one wrapper f.e. with flexbox layout on quick css:

    #top .avia-content-slider .slide-entry-wrap {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
    }
    
    #top.blog .slide-entry::before, 
    #top.blog .slide-entry::after {
      display: none;
    }
    
    #top .avia-content-slider .slide-entry-wrap .slide-entry {
      flex: 0 1 calc(33% - 30px) ;
      margin: 0px 15px 30px !important;
      width: unset !important;
      padding: 0px !important;
    }
    
    @media only screen and (max-width:989px) {
      #top .avia-content-slider .slide-entry-wrap .slide-entry {
        flex: 0 1 calc(50% - 30px);
        margin: 0px 15px 30px !important;
      }
    }
    
    @media only screen and (max-width:767px) {
      #top .avia-content-slider .slide-entry-wrap .slide-entry {
        flex: 0 1 100%;
        margin-bottom: 30px !important;
      }
    }

    see here : https://webers-testseite.de/blog/

    One thing to mention: a paginated blog will not work correctly that way – because the amount of entries each page will not be influenced.

    PS: On the example page of enfold there is an audio entry – and on this one the width calculation does not work because of a setting by Enfold. On this page it would be necessary to set the width:

    #top .avia-content-slider .slide-entry-wrap .slide-entry .mejs-container {
      min-width: unset !important;
      width: unset !important;
    }
    in reply to: Header effect (only when scrolling down) #1409144

    this is what i see on all my browsers for screens bigger than 768px clicking the hamburger
    no menu can be seen

    in reply to: Header effect (only when scrolling down) #1409126

    Yes on mobile devices – it is ok – but click on hamburger on desktop browsers! ( screens bigger than 768px)

    in reply to: Header effect (only when scrolling down) #1409121

    your header – there must be some css mismatch.
    Because click on your hamburger!

    in reply to: Header effect (only when scrolling down) #1409120

    Now: see f.e. that page and its curtain effect footer: https://enfold.webers-webdesign.de/

    The content of that footer will end on small screens ( all columns are beneath each other ) at a height of 1176px.
    So even if i could set that option when curtain effect footer goes to scroll to 100% ( only 90% option is available ) there will be no space to show all the content on f.e. an iPhone 11 ( screen-height is : 812px) – so if that footer stays on fixed position there will be 364px that could not be seen.
    The only way to see the whole footer content is then to set position to relative and scroll with the content !

    if we are talking about your homepage ( link on your nick) The footer is still fixed on my mobile devices.
    but for mobile devices with less than 736px ( iPhone 6,7,8) it will scroll – because:
    your footer height will be on that screenwidth of 375px : 535px and this is nearby 80% of available screen-height. That is the reason why i give you the snippet to enlarge the allowed footer height to set to 90%.
    In this case your footer will be even fixed on Mobiles with 736px screen
    if you got iPhone 5 it is 568px available – no chance even on 90% to have a fixed footer with curtain effect.

    in reply to: Header effect (only when scrolling down) #1409111

    just to mention for that blurry effect:
    backdrop-filter: https://caniuse.com/css-backdrop-filter
    See comment 2 on that for iOS devices like iPhone : Currently only supported with the -webkit- prefix
    so do not forget to add to ismaels code that rule!

    #top #header .header_bg {
      background-color: rgba(20, 21, 23, 0.3);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
    
    #top #header.av_header_transparency .header_bg {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    next answer will have some thoughts on your curtain effect …

    in reply to: working solution for different logo on scroll #1409093

    so look again to the example page: https://webers-web.info/

    This is default behavior on transparency pages – showing first the logo (from options : header – transprency options – transparency logo) after shrinking finished the default logo is shown.

    And that is what you like to have on all pages – even those with header option : not transprency.

    in reply to: working solution for different logo on scroll #1409067

    But that’s what it sounds to me when it’s said: different logos on scroll ( means during the scroll ).

    if you want to show logo A only when loading the page – and while scrolling to the end of the shrunk header. After reaching the shrunk height of the header, logo B should be visible.
    This is analogous to the transparency header – but now with the same behavior on all pages.

    It would be best if we could see your logos to get an idea of what we have to work with.

    in reply to: working solution for different logo on scroll #1409050

    Your topic of that is the way i understand – different logo during scrolling – stop scrolling default logo:

    the method used for your aim depends on the logos you like to use.
    E.g. – Logo a and logo b are only colored differently (change of font color – change of branding color etc.). I would try to realize it by an svg logo just switching the fill colors by scroll event.
    Etc.

    F.e. two logo variants are by same dimensions. Insert your logo as usual – and set on quick css the other logo as background-image.
    on my example page these are svg files – but png or jpg is also a possibility.

    .av-contains-svg.invisible  {
      background-image: url(/wp-content/uploads/icon807.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
    }
    
    .av-contains-svg.invisible svg {
      opacity: 0;
      transition: opacity 1s ease-in-out
    }

    the jQuery function now on child-theme functions.php:

    function invisible_on_scrolling() { 
    ?>
    <script type="text/javascript">
    (function($){
      let timeout;
      let $targetOnScroll = $('.av-contains-svg');
    
      $(document).on("scroll", () => {
        $targetOnScroll.addClass("invisible");
        clearTimeout(timeout);
        timeout = setTimeout(() => $targetOnScroll.removeClass('invisible'), 200);
      });
    })(jQuery);
    </script>
    <?php 
    }
    add_action('wp_footer', 'invisible_on_scrolling');

    see: https://webers-web.info/datenschutz/

    Or: do you like to have different logo during shrink – after shrink finished – default logo
    can you link to my post that you are referring to?

Viewing 30 posts - 1,411 through 1,440 (of 10,893 total)