Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • November 24, 2015 at 8:31 pm #541912
    Julie

    Hello,

    How do I make the text on a button in the full-width easy slider larger and not capitalized?

    I have tried solutions in other threads but nothing seems to be working.

    Link to site is below, hope you can help.

    Thanks!

    November 24, 2015 at 10:22 pm #541978
    Basilis

    Hi Julie!

    You can control the button CSS with :
    #top .avia-slideshow-butto

    here is what it has now:

    #top .avia-slideshow-button {
    border-radius: 3px;
    text-transform: uppercase;
    padding: 15px 16px;
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    font-weight: bold;
    }

    You can change those values with that you want to change.
    let us know if you have any further questions

    Regards,
    Basilis

    December 4, 2015 at 7:27 pm #547229
    Julie

    Strangely, changing text-transform to none changes it on mobile views but not wider screens. Any idea how to fix that?

    Also, how can I make the background color of the button match the theme color (#4e81c9)?

    Last, with the most recent update, the default animation changed so now it zooms in from the left. I preferred the old animation, where it kind of floated down. How can I change that?

    Thanks for your help.

    December 5, 2015 at 8:09 am #547372
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold–>General Styling:

    #top .avia-slideshow-button {
    text-transform: initial !important;
}

    Best regards,
    Rikard

    December 7, 2015 at 6:17 pm #548191
    Julie

    Hi,

    I added this but it still does not transform on wide screens.

    I would also like the animation to be the old version, where it floated down instead of zooming in from the left, and I would like the button color to be #4e81c9.

    Can you help?

    Thanks in advance,
    Julie

    December 8, 2015 at 7:40 am #548562
    Rikard

    Hi,

    Above what screen sizes exactly?

    Regards,
    Rikard

    December 8, 2015 at 9:05 pm #549220
    Julie

    Hi Rikard,

    It looks like screens over 767px wide are still transforming to all caps.

    • This reply was modified 8 years, 11 months ago by Julie.
    December 9, 2015 at 12:09 am #549332
    Yigit

    Hi!

    You had some CSS errors in your Quick CSS field and i fixed them in/for another thread. All codes you add to Quick CSS should be working fine now. Can you please check if this thread is resolved as well so we can mark it as resolved or assist you further :)

    Cheers!
    Yigit

    December 9, 2015 at 11:51 pm #550039
    Julie

    Hi Yigit,
    Thank you so much for checking on this.
    I am still not seeing the change– I saw it for a second and then it reverted back to all caps again. :(

    If you can help me with changing the animation so it doesn’t zoom in from the left and instead floats down like it used to, and to change the background color of the button to #4e81c9, that will be good enough and I will just leave this as it is until the client can hire a developer to fix this.

    Thanks a million!

    December 10, 2015 at 5:54 pm #550594
    Yigit

    Hey!

    Replied you here – https://kriesi.at/support/topic/enlarge-theme-button-font-size/#post-550591
    If that does not help, please let us know

    Regards,
    Yigit

    December 10, 2015 at 7:11 pm #550637
    Julie

    The text-transform and font size is now fixed– THANK YOU!

    Last 2 things:

    1. How to change button background color to #4e81c9? That is not in the list of options under .avia-slideshow-button.
    2. How to change animation so button floats down instead of zooming in from the left? It used to do that, but a recent theme update changed it, I think.

    Thank you so much for all of your help and patience.

    December 10, 2015 at 7:22 pm #550644
    Yigit

    Hi!

    Please add following code to Quick CSS 

    #top .avia-slideshow-button {
    background: #4e81c9;
}
.avia_transform .av_slideshow_full .active-slide .avia-slideshow-button, .avia_transform .av_fullscreen .active-slide .avia-slideshow-button {
    -webkit-animation: caption-top 1.2s 1 cubic-bezier(0.985, 0.005, 0.265, 1);
    animation: caption-top 1.2s 1 cubic-bezier(0.985, 0.005, 0.265, 1);
}

    Regards,
    Yigit

    December 10, 2015 at 8:18 pm #550673
    Julie

    Works GREAT– thanks! Not sure what those settings do, but I played with them to get the effect I want. Would be great to have a list of what the animation options are and what the values do for future reference, maybe in documentation.

    Last question about this element– is there an easy way to make the button a little bigger (about the same size as large enfold theme button) on large screens?

    December 10, 2015 at 8:30 pm #550678
    Yigit

    Hi!

    Please add following code to Quick CSS as well and adjust as needed

    #top .avia-slideshow-button {
    padding: 10px;
}

    If we had such post in our documentation, i believe it would be so complicated since that would be thousands of lines of CSS with alternatives :)

    Cheers!
    Yigit

    December 10, 2015 at 9:24 pm #550709
    Julie

    Hi,

    Thanks– I’ve got it exactly the way I want it now, and it is awesome! :)

    I was hoping to make it so I could figure out more of this myself without having to trouble you, but if there are that many, I guess that wouldn’t save you much work!

    Guess I will just keep coming to you for help when I need it. You guys are always very great, I really appreciate it.

    You can close this thread, I am all done. :)

    December 10, 2015 at 9:26 pm #550710
    Yigit

    Hi!

    Sure, feel free to come to us whenever you have a theme related question. We are always happy to help :)

    Cheers!
    Yigit

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘How to make button text on full-width easy slider larger/not capitallized’ is closed to new replies.