Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 13, 2016 at 5:59 am #631807
    clairemartindigital

    Hi there,

    I would like to change the arrows from the prev/next navigation to an image.

    I would also like to not have the flyout with the image of the next item appear. Instead just have the image to indicate the next portfolio item.

    Thanks in advance!

    May 16, 2016 at 5:50 am #632729
    Ismael

    Hey clairemartindigital!

    Thank you for using Enfold.

    Are you using a slider? Which one? Please post the website url here so that we can check it. Or provide a screenshot.

    Cheers!
    Ismael

    May 16, 2016 at 6:03 am #632737
    clairemartindigital

    Hi Ismael,

    not using a slider.

    http://globalspeed.com.au/portfolio-item/example-9/

    Thanks

    May 17, 2016 at 9:39 am #633581
    Ismael

    Hi,

    Use this in the Quick CSS field to remove the “flyout” animation:

    .avia-post-nav:hover .entry-info-wrap {
    width: 0;
}

    Are you going to use different image for each arrow or just an arrow image? A screenshot would be great. Try to add the image as background:

    #top .avia-post-nav {
    background: url(IMAGE URL HERE);
}

    Best regards,
    Ismael

    May 17, 2016 at 10:13 am #633594
    clairemartindigital

    Hi Ismael,

    I am after not having any background. But more so replacing the white arrow with an arrow image.

    May 18, 2016 at 12:00 pm #634338
    clairemartindigital

    Ok, so i guess i’ll try to make it clearer what it is i’d like to achieve. I’d like to customise the prev/next icon (currently < & >) on
    http://globalspeed.com.au/portfolio-item/example-9/ with 2 different images.

    For the < icon i’d like to use below image:

    View post on imgur.com

    and for the > icon i’d like to use the below image:

    View post on imgur.com

    How can I achieve that?

    Thanks

    May 18, 2016 at 1:16 pm #634399
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    a.avia-post-nav.avia-post-prev span {
    opacity: 0;
}
a.avia-post-nav.avia-post-prev {
    background: url(https://i.imgur.com/NdHbMPk.png)!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
    background-position: 50% 50%!important;
}
a.avia-post-nav.avia-post-next span {
    opacity: 0;
}
a.avia-post-nav.avia-post-next {
    background: url(https://i.imgur.com/4tlGdhF.png)!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
    background-position: 50% 50%!important;
}

    Best regards,
    Yigit

    May 19, 2016 at 1:32 am #634842
    clairemartindigital

    Thanks Yigit, that worked.

    And if i want to achieve the same with the navigation of the image pop up (within the portfolio item – after clicking onto on of the images )?

    View post on imgur.com

    May 19, 2016 at 11:39 am #635114
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .mfp-arrow-left:before,.mfp-arrow-right:before {
    color: transparent!important;
}
.mfp-arrow-left {
    left: 0;
    background: url(https://i.imgur.com/NdHbMPk.png)!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
    background-position: 50% 50%!important;
}
.mfp-arrow-right {
    background: url(https://i.imgur.com/4tlGdhF.png)!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
    background-position: 50% 50%!important;
}

    Best regards,
    Yigit

    May 23, 2016 at 5:32 am #636534
    clairemartindigital

    Thanks! You can close this ticket.

    P

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Customize prev/next post/portfolio navigation’ is closed to new replies.