Forum Replies Created

Viewing 30 posts - 5,641 through 5,670 (of 11,891 total)
  • Author
    Posts
  • Try this:

    add_filter('avf_logo_link','av_change_logo_link');
    function av_change_logo_link($link){
      if ( is_user_logged_in() ) {
          $link = "url1"; 
      }
      if ( !is_user_logged_in() ) {
          $link = "url2"; 
      }
        return $link;
    }
    in reply to: Design & Pic effect #1216538

    The css code comes to quick css – but read carefully – there is a custom-class to set for a parent-element of the images.
    If you like every image in a color-section with a link to have that hover style – give the class to the color-section.
    If you only want it for some images give the class to the image alb itself.

    If you like to have that style for Masonry Entries – we had to change the code.

    It was important for me that you understand the procedure and then transfer it yourself.
    So you’ve got two containers, so to speak, lying on top of each other.
    One has a height of 0 and grows in the Y-direction – the other one has a width of 0 and grows in the X-direction.

    If you are not able to transfer it to other containers – tell me – i will help you then –
    it is easier to do it on a live site – so if you can make the page public tell me.

    But take the setting anyway: large gap !

    See Example Page again: https://webers-testseite.de/masonry-4on1big/

    and :) you also have to chew by yourself a little when eating.
    In other words – adjust it to your needs now ( media query break points or spacing ) i set up now a 3px ( on default large gap is 6px )

    in reply to: Alt for transparent header image #1216395

    by the way – don’t know why now two filter can change the alternate logo now ( f.e. for some pages to show a different transparent logo)

    
    function my_custom_attributes_for_alternate_logo($header_filtered){
    	$header_filtered['header_replacement_logo']  = "https://url-to-the-new-logo";
    	return $header_filtered;
    }
    add_filter( 'avf_transparency_logo_data', 'my_custom_attributes_for_alternate_logo' );

    and this still works too:

    function replace_transparent_logo_on_some_pages($header){
        if( is_front_page( ) ){
            $header['header_replacement_logo'] = "https://url-to-the-new-logo";
        }
        return $header; 
    }
    add_filter('avf_header_setting_filter','replace_transparent_logo_on_some_pages');
    in reply to: Alt for transparent header image #1216275

    Wow Thanks!
    here we go:
    besides the alt and title of that image in the media library
    we have now the way to change main logo alt and title via filter:

    /** for main logo these two will do the job ***********/
    function avf_change_logo_title($title) {
       $title = "The new Title is here";
       return $title;     
    }
    add_filter('avf_logo_title', 'avf_change_logo_title');
    
    function avf_change_logo_alt($alt) {
       $alt = "New Alt Text Here";
       return $alt;     
    }
    add_filter('avf_logo_alt', 'avf_change_logo_alt');

    and now we got a new filter: avf_transparency_logo_data
    Guess this must work since Enfold 4.7.4.1:

    function my_custom_attributes_for_alternate_logo($header_filtered){
    	$header_filtered['header_replacement_logo_title']  = 'Alternate Logo Title';
    	$header_filtered['header_replacement_logo_alt']  = 'Alternate Logo Alt';
    	return $header_filtered;
    }
    add_filter( 'avf_transparency_logo_data', 'my_custom_attributes_for_alternate_logo' );

    ps: please correct me if i’m wrong
    this will do the job too – its just a bit different syntax:

    add_filter('avf_transparency_logo_data', function($header_filtered){
    		$header_filtered['header_replacement_logo_title']  = 'Alternate Logo Title';
    		$header_filtered['header_replacement_logo_alt']  = 'Alternate Logo Alt';
    		return $header_filtered;
    }, 10, 2);

    don’t know if $priority and $accepted_args are needed here.

    in reply to: Transition speed in slider ALB. #1216240

    By the way : on Enfold 4.7.5 – it stays the same on fading ( sliding is ok ! )
    The transition last slide to first slide is different. ( on the example page i set it now via alb to 8000ms and autorotation to 10s.

    in reply to: Design & Pic effect #1216196

    To your image hover effect.
    i did a custom-class to a parent container to the image: hoverstyle1

    In this case – if you want different selectors ( like categorie links or portfolio links etc. ) there must be analog css rules.
    The point is to understand what is done – that is a good starting point.
    The “framed on hover” element is styled via pseudo-containers ( before and after) – these containers got a border ( border left/right on after – and border top/bottom on before container )


    these containers itself has no background-color – but borders – and are scaled to zero.
    on hovering these container grow to 100% ( scale(1))

    see result here: https://webers-testseite.de/hover-images/

    here is the css code ( i did set the overlay to display none)

    .hoverstyle1 .image-overlay {
      display: none !important;
    }
    
    /* hover styling images */
    .hoverstyle1 a.avia_image:before, 
    .hoverstyle1 a.avia_image:after {
      content: '';
      position: absolute;
      top: 10px;
      right: 10px;
      bottom: 10px;
      left: 10px;
      -webkit-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      transition: all 0.5s ease;
      pointer-events: none;
      background: transparent;
      width: auto;
      height: auto;
      z-index: 10;
    }
    
    .hoverstyle1 a.avia_image:before {
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
      -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
      transform: scaleX(0);
    }
    
    .hoverstyle1 a.avia_image:after {
      border-left: 2px solid #fff;
      border-right: 2px solid #fff;
      -webkit-transform: scaleY(0);
      -ms-transform: scaleY(0);
      transform: scaleY(0);
    }
    
    .hoverstyle1 .avia-image-overlay-wrap:hover a.avia_image:before, 
    .hoverstyle1 .avia-image-overlay-wrap:hover a.avia_image:after {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
    • This reply was modified 5 years, 7 months ago by Guenni007.
    in reply to: Transition speed in slider ALB. #1216078

    Last Attempt – i think it is very obvious that the slide effect works good – and even the transition between slide3 to slide1 is equivalent to the others.
    But with fading there is a different speed ( from 1 to 2, and 2 to 3 this is preselect 10s : very smooth blending )
    but on the transition 3 to 1 it looks totaly different:

    Video

    or does he like to : A way to change any Fullwidth Easy Slider Caption Title to H1 from inside WP?

    the filter : avf_customize_heading_settings is now in newest enfold only in the av-helper-slideshow.php
    I thought it was on former versions in each slider type.
    So i only found a way to influence the whole default_heading tag by this in your child-theme functions.php:
    It only changes the default_heading – if you have set a custom heading tag ( see posting of mine before with the image) it will not overwrite that.

    function my_avf_customize_heading_settings( array $args, $context, array $extra_args = array() ){
    	if( $context == 'avia_slideshow' ){
    		$default_heading = ! empty( $dev_tags['heading_tag'] ) ? $dev_tags['heading_tag'] : 'h1';
    		$args['heading'] = $default_heading;					
    		$args['extra_class'] = $dev_tags['heading_class'];	
    	}
      return $args;
    }
    add_filter( 'avf_customize_heading_settings', 'my_avf_customize_heading_settings', 10, 3 );

    i did not see a way to use this filter only for the full-width slider
    if you only like to influence the default_heading on fullwidth easy slider you can have your own
    child-theme slideshow_fullsize.php
    and change on line 810 to:
    'theme_default' => 'h1',

    in reply to: Change columns number from child functions.php #1216055

    Such a question is exactly the reason why I am also happy to answer questions here as a fellow participant. It is a challenge and i will learn the most from it. If a customer shows up and expresses exactly such a wish, I don’t stand there and won’t know what to say.
    So thank you from my point of view, too.

    in reply to: Change columns number from child functions.php #1216042

    Yes the pipe will have the “or” in the if clause.
    That will work! – i’m only unsure if i had to insert that global $posts and if there is a more elegant way for the syntax.

    in reply to: prev, next arrows on portfolio and posts #1216015

    Well Mike – i guess he likes to have it fixed.
    But this would only be usefull if the footer itself does not take away a big part of the screen height.
    On some installations i have my #socket set to fixed – but this is only approx 100px.

    in reply to: Change columns number from child functions.php #1215884

    can you try this – don’t know if this is the correct way to use this filter but it might work in combination with blog-grid style
    just check for context: archive , index, tag

    add_filter('avf_post_slider_args', function($atts, $context){
    	global $posts;
    	if($context == 'index') { $atts['columns']  = 4;}
    	return $atts;
    }, 10, 2);

    why not simple:
    just create a masonry gallery with set up for 4 columns.

    guess this is self-explanatory: https://webers-testseite.de/masonry-4on1big/

    btw: if you have 5 additional images in there – you can change the code to :

    .masonry41 .av-masonry-entry:nth-of-type(5n) {
      width: 100% !important;
    }
    
    .masonry41 .av-masonry-entry:nth-of-type(5n) img {
      width: 100% !important;
      height: auto;
    }
    in reply to: Farbe von Waffelmenü/ Waffle menu color #1215879

    do you mean this here – that is called hamburger – because it looks a littel bit like a burger

    this to quick css:

    .header_color .av-hamburger-inner, 
    .header_color .av-hamburger-inner::before, 
    .header_color .av-hamburger-inner::after {
        background-color: #db0d0d !important;
    }
    in reply to: prev, next arrows on portfolio and posts #1215416

    sorry – wrong posting

    in reply to: nav bar and background issues #1215409
    #main, .main_color, .html_stretched #wrap_all,
    .avia-msie-8 .av_header_sticky_disabled#header {
      background-color: transparent !important;
    }

    but with background-attachment: fixed you will have some troubles on OS X Safari Systems.
    see here: https://kriesi.at/support/topic/theme-is-shaking-a-lot-in-safari/

    The trick will be to have a pseudo before container with same background-image and to set the whole pseudo container to position : fixed then.

    Look to the differece on a safari browser on scrolling fast with or without that:

    #top {
      clip-path: inset(0 0 0 0);
      background-size: 0 !important;
    }
    
    #top:before {
      background-image: inherit !important;
      background-repeat: no-repeat;
      content: "";
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-size: cover;
      background-position: right center;
      will-change: transform;
    }
    
    #main, .main_color, .html_stretched #wrap_all,
    .avia-msie-8 .av_header_sticky_disabled#header {
      background-color: transparent !important;
    }
    
    .main_color {
        z-index: 5 !important;
        position: relative;
    }

    you had to know your page id ( in my example here page-id-3 ) of this page
    and if the header scrolls away – it does not make sence to have shrinking too – so
    put this to your child-theme functions.php:

    add_filter('avf_header_setting_filter', 'avf_header_not_sticky', 50, 1);
    function avf_header_not_sticky($header_settings) {
    	if ( is_page(3) ) {
    		$header_settings['header_sticky'] = "";
    		$header_settings['header_shrinking'] = "";
    	}
    	return $header_settings;
    }

    if you have more than one page where you like to change it just set the if clause to an array f.e.:
    if ( is_page( array( 3, 18, 303, 500 ))) {

    in reply to: content elements as jump links? #1215404

    if you are at the actual Enfold Version – you have on each Column its own Advanced Tab : Developer Settings.
    There you can insert a unique ID.
    But for just a unique CSS selector you do not need IDs – you can use classes as well.

    on Fullwidth-Easyslider : Content-Tab (first tab) – click on one image to go to the slide option window.
    Go to “Advanced Tab” ( Third tab ) – there you have the option to switch for each slide to a heading tag you want.

    in reply to: prev, next arrows on portfolio and posts #1215339

    hm on my page this works even without setting the rule to !important:
    look f.e.: https://webers-testseite.de/portfolio/wordpress-webdesign/

    is there a page i can see- because my installations have only footer postion relative

    in reply to: How to replace the Advanced Layerslider #1215309

    Fine – you are welcome

    in reply to: prev, next arrows on portfolio and posts #1215300

    and why not make the z-index of footer bigger?

    #footer, #socket {
        z-index: 502;
    }
    in reply to: How to replace the Advanced Layerslider #1215293

    first – how did you get the 28,67 vw height?
    you are using the image with 1500 x 630 ?
    so height has to be : 42vw

    so remove please the other code – and replace with

    try :

    .responsive-colorsection {
        width: 100vw !important;
        height: 42vw;
    }
    
    .responsive-colorsection .container {
      position: relative;
      height: 100% !important;
      top: 0 !important;
    }
    
    .responsive-colorsection .container .content {
      position: absolute;
      bottom: 10px !important;
      width: auto !important;
    }
    
    .responsive-colorsection .container .av-special-heading {
      background-color: rgba(255,255,255,0.9);
      padding: 10px 30px;
      border-radius: 0.5em;
    }
    
    .responsive-colorsection .template-page .entry-content-wrapper h1 {
      text-transform: none !important;
    }
    in reply to: Change only mobile menu font style #1215209

    Hi Guenni007, I meant mobile devices

    in this case you had to know that enfold adds a class for mobile devices to the html so you can use .responsive.avia_mobile
    to influence only css on mobile devices.

    f.e.: something like this has influence on ipad landscape – allthough this is 1024px width or more – but has no effect on desktop browsers
    ( by the way the pendent to that mobile class is: avia_desktop )

    .responsive.avia_mobile #top #avia-menu .avia-menu-text {
        color: red !important;
    }
    in reply to: How to replace the Advanced Layerslider #1215206

    On Styling Tab :

    but you can implement the attribute on css too:

    .responsive-colorsection {
        width: 100vw !important;
        height: 56.25vw;
        background-size: cover !important;
    }
    in reply to: icon boxes not equal height #1214689

    That’s why I wrote it down like a recipe.
    The only thing i did not show explicitly is how to give a custom-class to the color-section:
    – open the options of the color section – click on tab “Advanced” and put in the input field “Custom CSS Class” the text ( allthough classes have on css a dot in front – enter here without that dot – it will be added by enfold )
    you see on the right side an image of the alb layout.
    On the left you see the code for the quick css. If you accept the prism script on my page you will have a copy button on top right.
    Thats all. I wouldn’t know how else to pass it on to inexperienced internet users.

    Edit : the solution is now private.

    in reply to: How to replace the Advanced Layerslider #1214409

    you take your color-section with background-image.
    Set the background-image to cover.
    The color-section with custom-class f.e: responsive-colorsection
    and : no minimum height – thats ruled by quick css

    now you have to know the aspect ratio of your image ! mine on the testpage is nearly a 16:9 image
    so if the image-width is 100% the height must be 56.25%

    so:

    .responsive-colorsection {
      width: 100vw !important;
      height: 56.25vw;
    }
    
    .responsive-colorsection .container {
      position: relative;
      top: calc(100% - 150px) !important;
    }

    for a more banner like image take a different aspect ratio image !
    See example page from above.

    btw.: I hope you have performance optimized the pictures with the same vigor ;)

    in reply to: Change only mobile menu font style #1214406

    First i had to ask you what you are understanding on “mobile version”
    do you mean small screen width or do you mean the mobile devices ?

    in reply to: Disable landscape mode on mobile #1214399

    hm – i see this on my iphone emulation developer tools:

    isn’t that what you want?

    The only missing is a rule for the header – because it is in position:fixed – it is not influenced by wrap_all

    Try this instead:

    @media only screen and (max-width:767px) {
      .responsive #top #wrap_all {
        margin-left: auto;
        margin-right: auto;
        max-width: 352px;
      }
      .responsive #top #header {
        position: fixed !important;
        max-width: 352px;
      }
    }

    if you only like to have that for mobile devices you can use the class on responsive : avia_mobile to be more selective:

    @media only screen and (max-width:767px)  {
      .responsive.avia_mobile #top #wrap_all {
        margin-left: auto;
        margin-right: auto;
        max-width: 352px;
      }
      .responsive.avia_mobile #top #header {
        position: fixed !important;
        max-width: 352px !important;
      }
    }
Viewing 30 posts - 5,641 through 5,670 (of 11,891 total)