Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 28, 2015 at 4:14 pm #526237
    HKlearning

    Hello

    I would like to have a two different fullwidth buttons with the following specifications:

    – black boarder (white boarder)
    – black font (white font)
    – transparent background (transparent background)
    – hover background: white with opacity of 0.6 (white with opacity of 0.6)

    Question 1:
    Is it possibile to define two different fullwidth-button specifications?

    Question 2:
    How can I define, the specification while placing the button?

    Thank you for your help!
    Simon

    October 29, 2015 at 9:46 am #526611
    Rikard

    Hi Simon,

    I’m not sure I understand what you are trying to do there, could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    October 29, 2015 at 11:52 am #526672
    HKlearning

    Hey Rikard,

    I would like to have two different fullwidth buttons looking like this on our page (www.hklearning.info):

    Fullwidth buttons

    Thanks for your help!

    Regards,
    Simon

    October 29, 2015 at 3:35 pm #526855
    Yigit

    Hey!

    Can you please post the link to your website?
    Edit: You can try turning on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and give your elements custom classes and add following code to Quick CSS in Enfold theme options under General Styling tab

    .your-custom-class-white a { background: transparent !important; border: white 3px solid !important; color: white !important; }
.your-custom-class-white a:hover { background: rgba (255,255,255,0.5) !important; }
.your-custom-class-black a { background: transparent !important; border: black 3px solid !important; color: black !important; }
.your-custom-class-black a:hover { background: rgba(0,0,0,0.5) !important; }

    Best regards,
    Yigit

    • This reply was modified 9 years ago by Yigit.
    October 30, 2015 at 10:33 am #527279
    HKlearning

    You are my heroes! Thank you very much!

    On our Page: you can see the result. There is one small bug:

    The hover effect (left button) cuts the icon at the bottom. How can I fix this bug?

    Thank you for your answer.

    • This reply was modified 9 years ago by HKlearning.
    October 30, 2015 at 3:17 pm #527455
    Yigit

    Hi!

    Please change the code to following one for hover states

    .hkbutton-schwarz a:hover .avia_button_background {
    background: rgba(0,0,0,0.5) !important;
}

    Cheers!
    Yigit

    November 2, 2015 at 11:59 am #528354
    HKlearning

    Thank you, Yigit!

    Do you have also a solution for the cropped icon?

    Cheers!
    Simon

    November 2, 2015 at 1:10 pm #528415
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    #top .avia-button-fullwidth .avia_button_icon {
    overflow: visible;
}

    Best regards,
    Yigit

    November 2, 2015 at 2:28 pm #528492
    HKlearning

    Hey Ygit

    I added the code. Now the Quick CSS section concerning the fullwidth-button looks like this:

    .hkbutton-weiss a { background: transparent !important; border: white 2px solid !important; color: white !important; }
    .hkbutton-weiss a:hover .avia_button_background {
    background: rgba (35,49,65,0.5) !important;
    }
    .hkbutton-schwarz a { background: transparent !important; border: #233141 2px solid !important; color: #233141 !important;
    }
    .hkbutton-schwarz a:hover .avia_button_background {
    background: rgba (35,49,65,0.5) !important;
    }
    #top .avia-button-fullwidth .avia_button_icon {overflow: visible;}

    Unfortunately the transparent background in the hover state doesn’t word anymore. Do you know why?

    Thanks for an answer!

    Cheers
    Simon

    November 2, 2015 at 2:33 pm #528495
    HKlearning

    oh… I found the mistake I made:

    it’s the space between “rgba” and the brackets.

    sorry!

    November 2, 2015 at 2:34 pm #528497
    Yigit

    Hey!

    Do you mind creating a temporary admin login and posting it here privately?
    Glad you figured it out! :)

    Cheers!
    Yigit

    • This reply was modified 9 years ago by Yigit.
    January 11, 2017 at 12:55 pm #732016
    HKlearning

    Hey!

    Today I wanted to change a button, but did not finde the custom CSS Class anymore. Can you help me?

    Thank you very much!!

    January 12, 2017 at 10:23 am #732553
    HKlearning

    Hey Yigit!

    A while ago I turned on the CSS field for ALB elements. But now I don’t see this fields anymore. Did something change?

    Best regards
    Simon

    January 13, 2017 at 3:46 am #732934
    Nikko

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.

    Best regards,
    Nikko

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