Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1378799

    Love the enfold theme! good work!

    There is however a functionality that I think is present in some building blocks of enfold, but not in the testimonials block, which only offers ‘arrows’ ?
    I would love to have a dots navigation under the testimonial slider. Can I somehow utilise that function as a navigation for testimonials, for it to appear under the content of the testimonials?

    Hereby an example:
    example

    #1378802

    Hey the_digital_manager,
    Try this modification

    Best regards,
    Mike

    #1378823

    here is an edited testimonials.php on basis of the newest enfold : https://pastebin.com/9hje0Pg5

    you can see here some styling including the dot navigation: https://webers-testseite.de/testimonial-styling/

    for the dots in quick css:

    .responsive #top .avia-slideshow-dots.avia-slideshow-controls a {
      display: inline-block;
      bottom: -20px;
    }
    /*** if you like to show the dots always synchronized with the arrows - not only on hover ***/
    .avia_desktop #top .avia-slider-testimonials.av-slideshow-ui.av-nav-arrows-visible .avia-slideshow-dots a {
      opacity: 0.5;
    }
    .avia_desktop #top .avia-testimonial-wrapper.avia-slider-testimonials.av-nav-arrows-visible:hover .avia-slideshow-dots a {
      opacity: 1
    }
    
    • This reply was modified 1 year, 8 months ago by Guenni007.
    #1378847

    Hey,

    Thanks for your help as always @guenni007 :)

    Regards,
    Yigit

    #1395560

    @guenni007 thx for sharing, but I got countless of errors when I tried your php file. It started with an error about the lines with the code ‘protected funtion’. The enfold error code stated that these had to be changed to ‘public’. When I did that for all the public lines, after which I got several other error codes,.

    So, I tried the route @yigit proposed, I made a testimonials.php in the shortcodes folder and added the code to the child theme functions.php. I also added the CSS. Which changed nothing on the homepage, see https://schoonheidsinstituutdiane.nl/ section ‘hoe mijn klanten mij beoordelen’. What am I doing wrong?

    #1395802

    Hi,
    I found that the file Guenni007 linked to added the navigation dots to my testimonial element, this is the steps that I followed to add it to my child theme. First I ensured that my child theme functions.php had this code:

    function avia_include_shortcode_template( $paths )
    {
    	if( ! is_array( $paths ) )
    	{
    		$paths = array();
    	}
    	
    	$template_url = get_stylesheet_directory();
    	array_unshift( $paths, $template_url . '/shortcodes/' );
    
    	return $paths;
    }
    
    add_filter( 'avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1 );

    Then via FTP I added the directories /shortcodes/testimonials/
    Then I downloaded Guenni007 linked file above
    Enfold_Support_242.jpeg
    and uploaded it via FTP to my child theme testimonials directory so the structure from my child theme is like this:
    /enfold-child/shortcodes/testimonials/testimonials.php
    Then the css I used is:

    .responsive #top .avia-slideshow-dots.avia-slideshow-controls a {
      opacity: 1;
    }
    .avia-slideshow-dots a.active {
        background: #b0b0b0;
    }
    .avia-slideshow-arrows.avia-slideshow-controls {
    	opacity: 0;
    }

    This shows the navigation dots always and hides the navigation arrows:
    Enfold_Support_244.jpeg
    Thank you Guenni007 for thaking the time to edit this file and sharing it with us 🙂

    Best regards,
    Mike

    #1396533

    @mike @guenni007
    thx a lot! I didn’t place the testimonials in a folder with that name, perhaps that was the cause of the error, or perhaps the order I approached this (first uploaded the file, then added the code to functions.)

    Anyways, it’s getting there! I’m only struggling with overlap between the nav-dots-slider and the element/content that comes under it. I’m trying to tackle this by the following css, but I can’t seem to get it right. see https://mondzorgcentrum-winschoten.nl/ontmoet-ons/

    .avia-slideshow-dots {
    bottom: -40px;
    padding-bottom: 20px;
    }

    can you advice?

    #1396548

    Hi,
    Try adding this css:

    #top #team .avia-slider-testimonials.avia-testimonial-wrapper {
    	overflow: visible;
    }

    BTW, I couldn’t see your not-active dots because they are white, you might want to use an off-white so they will show like this:

    .avia-slideshow-dots a.goto-slide {
        background: #ccc;
    }

    Please see the screenshot in the Private Content area for the results I received
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1396570

    @mike, the overflow works, thx!

    I added this code to change the colours

    .avia-slideshow-dots a.goto-slide.active {
        background: #003e78;
    }
    .avia-slideshow-dots a.goto-slide {
    background: #969696;
    }

    the dots aren’t centered yet though.

    Also, is it possible to add arrows next to the images? to make it more clear that users can ‘swipe’ ?

    #1396580

    Hi,
    I see that you have this custom css:

    @media only screen and (max-width: 767px){
    .myslider {
        margin-left: -40px;
        margin-right: -25px;
        margin-top: 25px;
        margin-bottom: 0.5px;
    }
    }

    To center the items please change it to this:

    @media only screen and (max-width: 767px){
    .myslider {
        margin-top: 25px;
        margin-bottom: 0.5px;
    }
    }

    and then add this css:

    @media only screen and (max-width: 767px) { 
    .responsive #top #team .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
        padding: 0;
        font-size: 0.85em;
        display: flex;
        justify-content: center;
    }
    }

    Then to show the arrows remove your custom css:

    .avia-slideshow-arrows.avia-slideshow-controls {
        opacity: 0;
    }
    .avia-slideshow-arrows {
        display: none !important;
    }

    Then add this css:

    #top #team .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a {
        opacity: 1;
    }

    Please see the screenshot in the Private Content area of my test results.

    Best regards,
    Mike

    #1396612

    seemed like i messed up my CSS a bit along the way haha, thx!
    bonus question, answering this will result in me purchasing another 2 yrs of enfold support at least or an amount of donation to the enfold team, whatever your team prefers.

    how do I get the arrows to be centered in the photo, just on the side of the image? so it looks neat.

    #1396667

    Hi,
    Try this css:

    @media only screen and (max-width: 767px) { 
    #top #team .av-large-testimonial-slider .avia-slideshow-arrows a {
        top: 88px;
    }
    }

    Best regards,
    Mike

    #1398133

    Hi @mike, I’m trying to accomplish the same on another enfold site of mine, see https://schoonheidsinstituutdiane.nl/. but I am struggling for 2 hrs to get the image centered, make the arrows visible (they seem to be hidden at first, can’t find this in the CSS… and the previous given code to centre the arrows doesnt seem to work. what to do?

    #1398135

    Hi,
    For the new page for mobile up to 450px please try this css:

    @media only screen and (max-width: 450px) { 
    	#top .avia-testimonial-content {
        width: 100%;
    	}
    	#top #main .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a {
        opacity: 1;
        top: 12%;
    	}
    }

    Please see the screenshot in the Private Content area of the expected results

    Best regards,
    Mike

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Add dotted navigation to testimonial block’ is closed to new replies.