Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #1222488


    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 :)



    I have found part of the answer here:

    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,


    Hey Tarakbc,

    Please follow the suggestion on this thread:
    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,


    Thanks! I will give this a try :)



    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, but unfortunately adding this code to the quick css did not solve it and I cannot find the custom.css.

    Many thanks!


    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,


    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!



    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,


    Thanks for your reply Rikard!


    Hi Tarakbc,

    Let us know if you need further assistance :)

    Best regards,

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