Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • January 15, 2023 at 10:29 pm #1378799
    the_digital_manager

    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

    January 15, 2023 at 10:44 pm #1378802
    Mike

    Hey the_digital_manager,
    Try this modification

    Best regards,
    Mike

    January 16, 2023 at 8:52 am #1378823
    Guenni007

    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, 10 months ago by Guenni007.
    January 16, 2023 at 12:44 pm #1378847
    Yigit

    Hey,

    Thanks for your help as always @guenni007 :)

    Regards,
    Yigit

    January 27, 2023 at 12:53 pm #1395560
    the_digital_manager

    @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?

    January 29, 2023 at 1:43 pm #1395802
    Mike

    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

    February 3, 2023 at 11:49 am #1396533
    the_digital_manager

    @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?

    February 3, 2023 at 2:55 pm #1396548
    Mike

    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

    February 3, 2023 at 5:47 pm #1396570
    the_digital_manager

    @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’ ?

    February 3, 2023 at 7:58 pm #1396580
    Mike

    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

    February 3, 2023 at 11:19 pm #1396612
    the_digital_manager

    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.

    February 4, 2023 at 5:07 pm #1396667
    Mike

    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

    February 15, 2023 at 8:49 pm #1398133
    the_digital_manager

    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?

    February 15, 2023 at 9:31 pm #1398135
    Mike

    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

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