Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 20, 2018 at 12:15 pm #999324
    Dario

    Hello,
    I notice that there’s a conflict with the plug-in Twenty20:
    https://wordpress.org/plugins/twentytwenty/

    The border-color of main_color div and main_color span generated dynamically from the avia, overrides the border-color of the arrows causing a bad visualization of the elements.

    Could you please suggest a css snippet in order to override the issue?

    Many thanks in advance for your help!

    August 20, 2018 at 4:41 pm #999480
    Nikko

    Hey Dario,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    .main_color span.twentytwenty-left-arrow, 
.main_color span.twentytwenty-right-arrow {
    border-color: transparent;
}

.main_color span.twentytwenty-left-arrow {
    border-right-color: white !important;
}

.main_color span.twentytwenty-right-arrow {
    border-left-color: white !important;
}

    Hope it helps :)

    Best regards,
    Nikko

    August 20, 2018 at 6:38 pm #999548
    Dario

    Many thanks, Nikko!
    Works perfectly.
    I added a new attribute for the circle… hope this will be useful for other users!

    .main_color span.twentytwenty-left-arrow, .main_color span.twentytwenty-right-arrow {
    border-color: transparent;}

    .main_color div.twentytwenty-handle, .main_color span.twentytwenty-handle {
    border-color: white !important;}

    .main_color span.twentytwenty-left-arrow {
    border-right-color: white !important;}

    .main_color span.twentytwenty-right-arrow {
    border-left-color: white !important;}

    August 21, 2018 at 6:39 am #999668
    Rikard

    Hi Dario,

    Great, glad you got it working and thanks for sharing your final code :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    August 26, 2018 at 8:19 pm #1001997
    Dario

    Hi Rikard,
    just one last detail… hope you can help me to find a solution.
    I’ve used the content slider to include Twenty20 and with some CSS and snippets to show the arrows (found in another post) and it works correctly.
    The issue is related with the tablets: when the page is shown in a tablet (>787px), the Twenty20 feature is overridden to the manual slide used by an iPad or similar (the gesture to move the image horizontally with the finger).
    Even if the slide is set “autorotation=no”, when I try to use the slider in a tablet with Twenty20, I’m able to change slide and sometimes it works only partially with the before/after effect.
    Any hint, please?
    Many thanks in advance!

    • This reply was modified 6 years, 2 months ago by Dario.
    August 27, 2018 at 5:55 am #1002134
    Ismael

    Hi,

    Thanks for the update.

    You have to disable the slider’s swipe functionality. Edit the config-templatebuilder > avia-shortcodes > slideshow > slideshow.js file. Look for this code around line 364:

    this.$slider.avia_swipe_trigger();

    Replace it with:

    // this.$slider.avia_swipe_trigger();

    Don’t forget to purge the cache or toggle the theme’s Performance > File Compression options.

    Best regards,
    Ismael

    August 27, 2018 at 2:05 pm #1002279
    Dario

    Many thanks Ismael,
    it works excellent!
    Could be integrated in function.php in my child theme?
    Many thanks again for your efforts in replies.
    Best regards

    August 27, 2018 at 4:21 pm #1002347
    Victoria

    Hi Dario,

    No, this file needs to be copied to the child theme, it cannot be done in functions.php.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.