Forum Replies Created

Viewing 30 posts - 31 through 60 (of 11,708 total)
  • Author
    Posts
  • in reply to: 3 lines border options for top header area. #1489807

    try this
    ( but it looks better if your header does not have shadow )

    use next css code instead

    play with top position – what fits best for you.
    and maybe you set the height of the before pseudo-container to an absolute value ( e.g: height: 120px;) then it will not shrink with the header height.

    in reply to: Animated boxes underneath the video #1489780

    you have choosen for the #av_section_1 a z-index of : 200
    so the z-index of the flex_columns had to be bigger. (300) next – hint
    do not forget to give the outer flex_columns a background-color of #172738

    in reply to: Add buttons to blog posts in grid layout #1489779

    try – and have a look if this fits your needs of “button” look-alike:

    #top .avia-content-slider .slide-entry-wrap {
      display: flex !important;
      flex-flow: row wrap;
      justify-content: space-between;
      gap: 30px;
      
    }
    
    #top .avia-content-slider .slide-entry {
      width: unset;
      flex: 1 1 calc(25% - 30px);
      margin: 0 !important;
      display: flex;
      flex-flow: column wrap;
      background-color: #eee;
      padding: 15px
    }
    
    @media only screen and (max-width:1049px) {
      #top .avia-content-slider .slide-entry {
        flex: 1 1 calc(50% - 30px);
      }
        #top .avia-content-slider .slide-entry a  {
        margin-left: 0;
      }
    }
    
    @media only screen and (max-width:767px) {
      #top .avia-content-slider .slide-entry {
        flex: 1 1 100%;
      }
    }
    
    .slide-content {
      margin-bottom: 60px
    }
    
    .entry-footer {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: auto;
      top: calc(100% - 60px);
      display: flex;
      justify-content:  space-evenly;
      flex-flow: row wrap;
    
    }
    
    .entry-footer a {
      margin-top: 10px;
      display: inline-block;
      padding: 3px 8px;
      transition: all 1s ease;
    }
    
    .entry-footer .read-more-link a {
      background-color: #000;
      color: #FFF !important;
    }
    
    .entry-footer a:hover {
      box-shadow: 0 3px 5px #aaa;
      transform: translateY(-5px) scale(1.03);
    }
    
    .entry-footer .biljetter a {
      background-color: #bf2e11;
      color: #FFF !important;
    }
    
    .entry-footer a path {
      fill: #FFF;
    }

    and check the responsive behaviour aswell.

    in reply to: Add buttons to blog posts in grid layout #1489774

    so if you only like to link if there are biljetservice links on the images above the titles – then take snippet two from this link

    in reply to: Add buttons to blog posts in grid layout #1489773

    if you take the second snippet it will only have two links if the one goes to your juliusbiijettservice pages.

    on the first image in your row – (Snedtänkt) there is the one link and on read-more the other link.

    Here you have it the way it works:
    (click to enlarge the images)

    but on your rockyhorror read-more link and image link are the same ! – so i could not transfer it to the second button .

    Since my backend is in German, I always have to double-check how the elements are named in English.

    in reply to: Add buttons to blog posts in grid layout #1489763

    or if you only like to have those buttons if the link goes to a certain string:

    function custom_entry_link_if_biljetter_link(){
    ?>
    <script>
    (function($){
        $(document).ready(function(){
            const triggerString = "juliusbiljettservice";
            $('.avia-content-slider .slide-entry').each(function() {
                var readMore = $(this).find('.read-more-link'),
                    biljetterLink = $(this).find('.slide-image').attr('href');
                    if (biljetterLink && biljetterLink.includes(triggerString)) { 
                        biljetterButton = $('<div class="biljetter"><a href="'+biljetterLink+'" class="biljett-link">Biljetter<span class="more-link-arrow avia-svg-icon avia-font-svg_entypo-fontello" data-av_svg_icon="right-open-big" data-av_iconset="svg_entypo-fontello"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="32" viewBox="0 0 15 32" preserveAspectRatio="xMidYMid meet" role="graphics-symbol" aria-hidden="true"><path d="M0.416 27.84l11.456-11.84-11.456-11.904q-0.832-0.832 0-1.536 0.832-0.832 1.536 0l12.544 12.608q0.768 0.832 0 1.6l-12.544 12.608q-0.704 0.832-1.536 0-0.832-0.704 0-1.536z"></path></svg></span></a></div>');
                        $(this).closest('.slide-entry').find('.entry-footer').prepend($(biljetterButton));
                    }
                    $(this).closest('.slide-entry').find('.entry-footer').prepend($(readMore));        
            });
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_entry_link_if_biljetter_link');

    in this case only a second link is added if it goes to a page with juliusbiljettservice inside the link

    .entry-footer {
      display: flex;
      flex-flow: row wrap;
      gap: 20px;
      justify-content: flex-start;
    }
    
    .entry-footer a {
      display: inline-block;
      padding: 3px 8px;
    }
    
    .entry-footer .read-more-link a {
      background-color: #000;
      color: #FFF !important;
    }
    
    .entry-footer .biljetter a {
      background-color: #bf2e11;
      color: #FFF !important;
    }
    
    .entry-footer a path {
      fill: #FFF;
    }
    in reply to: Add buttons to blog posts in grid layout #1489761

    if you have on all Images the link to your biljetter you can do it this way.

    for styling the “buttons” you may be able to do this too:
    maybe a custom class on those post-sliders would be a good idea – not to influence all post-sliders

    put this to your child-theme functions.php:

    function custom_entry_link(){
    ?>
    <script>
    (function($){
        $(document).ready(function(){
            $('.avia-content-slider .slide-entry').each(function() {
                var readMore = $(this).find('.read-more-link'),
                    biljetterLink = $(this).find('.slide-image').attr('href'),
                    biljetterButton = $('<div class="biljetter"><a href="'+biljetterLink+'" >Biljetter<span class="more-link-arrow avia-svg-icon avia-font-svg_entypo-fontello" data-av_svg_icon="right-open-big" data-av_iconset="svg_entypo-fontello"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="32" viewBox="0 0 15 32" preserveAspectRatio="xMidYMid meet" role="graphics-symbol" aria-hidden="true"><path d="M0.416 27.84l11.456-11.84-11.456-11.904q-0.832-0.832 0-1.536 0.832-0.832 1.536 0l12.544 12.608q0.768 0.832 0 1.6l-12.544 12.608q-0.704 0.832-1.536 0-0.832-0.704 0-1.536z"></path></svg></span></a></div>');
                $(this).closest('.slide-entry').find('.entry-footer').prepend($(biljetterButton));
                $(this).closest('.slide-entry').find('.entry-footer').prepend($(readMore));        
            }); 
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_entry_link');

    with minimal styling:

    .entry-footer {
      display: flex;
      flex-flow: row wrap;
      gap: 20px;
      justify-content: flex-start;
    }

    it looks this way:

    in reply to: Add buttons to blog posts in grid layout #1489757

    you like to do it this way of the first row – but with two buttons : read-more and the link from your featured-image.
    (Title and featured image do link to your events – like on the grid beneath the “biljetter” Button)

    in reply to: Add buttons to blog posts in grid layout #1489753

    do these buttons have always the same link? or is it an individual link?

    the content-slider element is something different than that what you are using on your page – you are using the post-slider element – so try mikes code
    in The DOM these elements got the classes : avia-content-sllider – so that is my mistake that i believe that you are using th content-slider element.

    try Mikes Solution – did not know why the content-slider.php does not rule that – see next post

    in reply to: .scroll-down-link #1489663

    on google ratings:

    .ti-next:before,
    .ti-prev:before {
      display: none !important;
    }
    .ti-next:after,
    .ti-prev:after {
      display: flex;
      position: absolute;
      justify-content: center;
      align-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      border-radius: 100%;
      transition: all 200ms ease-out;
      font-size: 24px;
      font-family: "entypo-fontello";
      color: var(--enfold-header-color-color);
    }
    
    .ti-prev:after {
      content: "\E874" !important;
    }
    .ti-next:after {
      content: "\E875" !important;
    }
    
    .ti-prev:hover:after,
    .ti-next:hover:after{
      color: #FFF !important;
      background-color: var(--enfold-header-color-color);
    }
    in reply to: .scroll-down-link #1489662

    try instead:
    these are the bold versions

    function avia_replace_default_icons($icons){
     $icons['svg__scrolldown'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'down-open');
     $icons['svg__prev'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'left-open');
     $icons['svg__next'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'right-open');
     return $icons;
    }
    add_filter('avf_default_icons','avia_replace_default_icons', 10, 1);
    in reply to: .scroll-down-link #1489653

    add to the snippet from above the missing instructions:

    function avia_replace_default_icons($icons){
     $icons['svg__scrolldown'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'down-open');
     $icons['svg__prev'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'left-open-big');
     $icons['svg__next'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'right-open-big');
     return $icons;
    }
    add_filter('avf_default_icons','avia_replace_default_icons', 10, 1);

    after that – we had to see if position had to be adjusted.

    in reply to: .scroll-down-link #1489652

    ok – but even if you like to replace those icons:

    .carousel-slider.arrows-outside .owl-nav svg {
      display: none
    }
    
    .carousel-slider.arrows-outside .owl-nav .owl-prev:before,
    .carousel-slider.arrows-outside .owl-nav .owl-next:before {
      font-family: 'entypo-fontello';
      font-size: 52px;
    }
    
    .carousel-slider.arrows-outside .owl-nav .owl-next:before {
      content: "\E875";
    }
    
    .carousel-slider.arrows-outside .owl-nav .owl-prev:before {
      content: "\E874";
    }

    now the other ones …

    in reply to: .scroll-down-link #1489650

    are these icons – enfold mangaged icons?
    Or do they belong to your carousel plugin or instagram plugin ;)

    in reply to: .scroll-down-link #1489645

    btw. i do not see if you have set this rule yourself ( merged styles ):

    @media only screen and (min-width: 485px) and (max-width: 1023px) {
      .html_av-submenu-hidden .av-submenu-indicator {
        margin-right: 175px;
        opacity: 100% !important;
        font-weight: bold !important;
      }
    }

    the margin-right value causes the icon to be overlaid with the text.

    in reply to: .scroll-down-link #1489644

    ok then i misunderstood your aim.
    you like to change these icons here:

    these are font-icons and could be replaced by css
    (inside your quick css):

    .html_av-submenu-hidden #top .av-submenu-indicator::before {
      content: "\E875";
      font-family: 'entypo-fontello';
      font-size: 24px;
    }
    in reply to: cookie consent message popup does not open on firefox #1489575

    with that filter ?

    add_filter( 'avf_default_lightbox_no_scroll', '__return_true' );

    ________
    if i like to place an unlock button e.g. for youtube:
    [av_privacy_accept_button wrapper_class="" id="" class=""]accept Youtube[/av_privacy_accept_button]

    where to get the correct Id’s for each service?
    is it only possible to unlock both external Video Hosters? (aviaPrivacyVideoEmbedsDisabled)

    in reply to: cookie consent message popup does not open on firefox #1489573

    i have removed all child-theme functions.php entries – and now it works – so i will try to find what is causing this.

    it is the :
    add_filter( 'avf_default_lightbox_no_scroll', '__return_true' );

    but why does chrome and safari open the popup and only firefox not?

    in reply to: color section arrow not working #1489562

    or – if you like to replace it by a different svg graphic – you can do it by an uploaded graphic to media-library:

    function avia_replace_default_icons($icons){
     $icons['svg__scrolldown'] =  array( 'font' =>'svg_wp-media-library', 'icon' => '50913');
     return $icons;
    }
    add_filter('avf_default_icons','avia_replace_default_icons', 10, 1);

    change the icon ID to your file id

    ____________________________________________________________________________________________________
    you can find the attachment-ID best in media-library list-view
    or in grid-view if you open the attachment-details ( look to the url that is opened )

    in reply to: Critical Error on Website Caused by the Child Theme Plugin #1489561

    Have you updated from a slightly older version of Enfold to the latest version?
    And do you have on your child-theme custom header.php or footer.php ?

    These would be extra files in your child theme folder. If you have updated from an older version, a lot has changed in these files. You would then need to know why they were placed there in order to reincorporate these reasons into a current header.php or footer.php.

    in reply to: .scroll-down-link #1489559

    or the arrow thought even more demanding ;)

    :root {
      --burger-main-icon-width: 40px; /* === adjust to your needs === */
    }
    
    @media only screen and (max-width:1150px) {
      .av-hamburger {display: none}
    
      #header #avia-menu li.av-burger-menu-main.menu-item-avia-special,
      #top #wrap_all #header .av-small-burger-icon a:before{
        width: var(--burger-main-icon-width);  
      }
      
      #top #wrap_all #header .av-small-burger-icon a {
        display: flex; 
        justify-content: center;
        align-content: center;
        align-items: center;
      }
    
      #top #wrap_all #header .av-small-burger-icon a:before {
        content: "\e873";
        font-family: "entypo-fontello";
        font-size: var(--burger-main-icon-width);  
        color: var(--enfold-main-color-primary);
        text-align: center;
      }
    
      .av-burger-overlay-active #top #wrap_all #header .av-small-burger-icon a:before{
        font-size: calc(1.5 * var(--burger-main-icon-width));  /* === only if you like it === */
        color: #FFF;
        content: "\e877 \A \e873";
        line-height: 0.35em;
        animation: avia_fade_move_down 2s ease-in-out infinite;
      }
    }
    in reply to: .scroll-down-link #1489528

    this burger menu is not a font icon or a svg icon. These are simple containers with a given width and height.
    The top and the bottom lines are pseudo-containers (before and after).

    try in quick css: see next post for better solution ;)

    in reply to: webp images not opening in lightbox #1489520

    on my installation it works without any problem – if you use the webp images from media-library!
    https://webers-testseite.de/webp-lightbox/

    or: next suggestion – you are using a plugin that replaces jpgs by webp images ( f.e. from shortpixel – automatic calculation of jpgs to webp- and replacement in DOM )

    As mentioned above

    var defaults = {
    	groups :	['.avia-slideshow', '.avia-gallery', '.av-horizontal-gallery', '.av-instagram-pics', '.portfolio-preview-image', '.portfolio-preview-content', '.isotope', '.post-entry', '.sidebar', '#main', '.main_menu', '.woocommerce-product-gallery'],
    	autolinkElements : 'a.lightbox, a[rel^="prettyPhoto"], a[rel^="lightbox"], a[href$=jpg], a[href$=webp], a[href$=png], a[href$=gif], a[href$=jpeg], a[href*=".jpg?"], a[href*=".png?"], a[href*=".gif?"], a[href*=".jpeg?"], a[href$=".mov"] , a[href$=".swf"] , a:regex(href, .vimeo\.com/[0-9]) , a[href*="youtube.com/watch"] , a[href*="youtube.com/shorts"] , a[href*="screenr.com"], a[href*="iframe=true"]',
    	videoElements  : 'a[href$=".mov"] , a[href$=".swf"] , a:regex(href, .vimeo\.com/[0-9]) , a[href*="youtube.com/watch"] , a[href*="youtube.com/shorts"] , a[href*="screenr.com"], a[href*="iframe=true"]',
    	exclude  :	'.noLightbox, .noLightbox a, .fakeLightbox, .lightbox-added, a[href*="dropbox.com"], .pagination a'
    },

    a[href$=webp] is an autolinkElement – so there must be something that hampers this on your installation.

    in reply to: webp images not opening in lightbox #1489494

    In my opinion, webp makes sense if you use it as a replacement for png. If you have an image without transparency, jpg is just as good.

    in reply to: .scroll-down-link #1489481

    ok – you are right that on that icon the down-open-mini is used ! – you can change it by code snippet inside your child-theme functions.php:

    function avia_replace_default_icons($icons){
     $icons['svg__scrolldown'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'down-open');
     return $icons;
    }
    add_filter('avf_default_icons','avia_replace_default_icons', 10, 1);

    you find those settings including the filter in init-base-data.php
    there you see that the scrolldown icon is correlated with the down-open-mini svg.

    charmap can be found in: charmap-svg.php

    Isn’t it just a question of size? Wouldn’t specifying the width/height alone lead to the same result?
    PS: in your case you are already use the svg icons. if someone uses the font-icons the snippet will be different –
    and correlation is on default by:
    'scrolldown' => array( 'font' => 'entypo-fontello', 'icon' => 'ue877' ),

    in reply to: .scroll-down-link #1489479

    Would you like to have an upward arrow to indicate a downward movement? … ( on top you are talking about scroll-top-link )
    Does that really make sense?

    if you only want to turn arround :

    
    #top .scroll-down-link.avia-svg-icon svg:first-child {
      transform: scaleY(-1)
    }
    

    but now you are talking about down-open arrow – but isnt it the down-open arrow on default?

    in reply to: .scroll-down-link #1489418

    try f.e.:

    
    #top .scroll-down-link {
      height: 50px;
      width: 50px;
      bottom: 50px;
      background-color: rgba(255,255,255,0.3);
      border: 1px solid var(--enfold-socket-color-border);
      backdrop-filter: blur(4px);
      border-radius: 10px;
      /*** animation: none; ***/
    }
    #top .scroll-down-link.avia-svg-icon svg:first-child {
      height: 50px;
    }
    
    #top .scroll-down-link:hover {
      background-color: rgba(255,255,255,0.8);
    }
    
    #top .scroll-down-link svg path {
      fill: var(--enfold-main-color-primary);
    }
    
    

    if you do not like the animation – just get rid of the outcommenting /*** ***/

Viewing 30 posts - 31 through 60 (of 11,708 total)