Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 26, 2016 at 12:48 am #677861
    Doris5ricevic

    Hy,
    I would like to know is it possible to change the look of the button, I’m talking about the button which you can add in fullscreen slider. I would like to have two buttons that look like keys. I can make the buttons (like a picture), but I don’t know coding and what to do with it. Is that possible to do? What should I do? Where do i need to change or insert codes? I hope that someone can help me. Thank you! Best wishes!

    August 26, 2016 at 2:35 am #677883
    Vinay

    Hey Doris5ricevic,

    If you share a mockup of exactly what you are trying to achieve we could help you better. But to answer your question yes this can be done but it would take a lot of time to customize it. But we are happy to point you in the right direction and help you :)

    First please enable custom css class name support and add the css class name to the button elements http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Browse the button styles you like here or which is similar and produce your own CSS for the button elements and add the css in Enfold > general Styling > Quick CSS

    Let us know if you have any questions.

    Best regards,
    Vinay

    August 29, 2016 at 8:00 pm #679118
    Doris5ricevic

    Hy,

    I think I made them but I’m not sure how that works and is it done correctly. Can you maybe see them on link: link ?

    Will that work if I put the css in Quick css in Enfold?

    I have also enabled cutom css.

    This is the site, the first what you see is fullscreen slider and inside I can choose to put two buttons and I can’t change them. I want them to be the keys which you can see on the first link.

    September 1, 2016 at 1:47 pm #680702
    Andy

    Hi,

    try this code inside Quick CSS field:

    a.avia-slideshow-button.avia-button.avia-color-light.avia-multi-slideshow-button {
content: url(https://i68.tinypic.com/2psn1mo.png);
}
a.avia-slideshow-button.avia-button.avia-color-light.avia-multi-slideshow-button.avia-slideshow-button-2 {
content: url(https://i67.tinypic.com/5xii6f.png) !important;
width: 17%;
}

    Best regards,
    Andy

    September 1, 2016 at 3:53 pm #680795
    Doris5ricevic

    Hy,

    It worked! I just needed to make the pictures smaller, thank you very much! I appreciate your concern. Just few more questions, is it possible to remove the borders for that buttons? So that it just stays like text which you can click. And, do you maybe know why on some computers the looks of buttons doesn’t change? They look like previous ones.
    + what do I need to put into quick css so when you enter on smartphone the button stays one next another?

    Thank you again!
    Best wishes!!!
    Doris

    • This reply was modified 8 years, 2 months ago by Doris5ricevic.
    September 5, 2016 at 12:49 pm #682102
    Andy

    Hi,

    you can remove the borders using this code:

    #top .avia-button.avia-color-light {
border: none;
}

    Make width in my code smaller for mobile devices, so buttons stay next to each others.

    Best regards,
    Andy

    September 5, 2016 at 10:25 pm #682364
    Doris5ricevic

    Hy,

    It worked again! Thank you very much!!! I enjoy working with enfold theme and the support is brilliant! Thank you!

    Best regards!
    Doris

    September 6, 2016 at 12:39 pm #682572
    Andy

    Hi,

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Button customization’ is closed to new replies.