Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 14, 2020 at 6:02 pm #1222488
    Tarakbc

    Hi!

    We have just started using the fullscreen slider with two buttons that slide in, but really we’d like to use three buttons for the three levels of courses that we offer.

    Is this possible?

    I presume you can’t just insert the button element on top of the fullscreen slider…

    Grateful for any help :)

    June 14, 2020 at 8:36 pm #1222508
    Tarakbc

    Hi,

    I have found part of the answer here:

    Fullscreen Slider

    However, I still need some help to change styling of the new button. I want all three buttons on the fullscreen slider to have the same styling, i.e. same size button and same color etc.

    Any ideas?

    Many thanks,

    June 14, 2020 at 9:10 pm #1222509
    Nikko

    Hey Tarakbc,

    Please follow the suggestion on this thread: https://kriesi.at/support/topic/full-width-easy-slider-3-buttons/#post-693504
    Then if you want to center those buttons, just add this CSS code in Quick CSS:

    .avia-fullscreen-slider .slideshow_caption .avia-caption-content {
    text-align: center;
}

.avia-fullscreen-slider .slideshow_caption .avia-button-wrap {
    display: inline-block;
    margin: 0 20px;
}

    Hope it helps.

    Best regards,
    Nikko

    June 15, 2020 at 3:12 pm #1222668
    Tarakbc

    Thanks! I will give this a try :)

    June 15, 2020 at 4:01 pm #1222700
    Tarakbc

    Hi,

    I now have the third button, but there is a line underneath the button indicating a link. How can I remove this line so that this button matches the other two buttons? (I still want the link to work)

    I found this post, https://kriesi.at/support/topic/remove-hide-underline-on-links-in-text/ but unfortunately adding this code to the quick css did not solve it and I cannot find the custom.css.

    Many thanks!

    June 15, 2020 at 11:31 pm #1222851
    Nikko

    Hi Tarakbc,

    Try using this CSS code instead, and add it in Quick CSS, located in Enfold > General Styling:

    .avia-fullscreen-slider .slideshow_caption .avia-caption-content .avia-button {
    text-decoration: none !important;
}

    If you want to have 3 horizontally aligned buttons, you can remove those 2 buttons on the settings and then add 2 more button shortcodes in caption. :)

    Best regards,
    Nikko

    June 16, 2020 at 12:23 pm #1222980
    Tarakbc

    That’s great! Thanks very much for your reply. It’s looking good now.

    One more small thing: the font size and font weight (i.e. bold, demi bold etc) of the text on all three buttons is not exactly the same.

    Is it possible to accomplish this, whilst keeping one button generated with short code and two buttons with the slider settings?

    Obviously this would be possible if we use short code for all three buttons, but I like the layout we currently have with one button (for our most popular course) generated by the short code above the other two courses (which are for our secondary courses) created using the slider settings.

    Many thanks!

    June 17, 2020 at 7:37 am #1223246
    Rikard

    Hi,

    Thanks for the update. Please try this CSS as well:

    #fullscreen_slider_1 .avia-caption-content .avia-button-center span.avia_iconbox_title {
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
}

    Best regards,
    Rikard

    July 4, 2020 at 1:42 pm #1227916
    Tarakbc

    Thanks for your reply Rikard!

    July 6, 2020 at 2:33 am #1228132
    Nikko

    Hi Tarakbc,

    Let us know if you need further assistance :)

    Best regards,
    Nikko

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