Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • October 9, 2017 at 9:16 am #861787
    micropoleinstitut

    Hello,

    Can you tell me how to make a white frame and white typography and a transparent background for this button. And put white background and pink typography when you pass the mouse over this button?

    Here’s the button: https://imgur.com/a/D3MnA

    Here is the link from my page: http://www.micropole-learning-solutions.com.qual.micropole.com/index.php/innovation-lab/

    I thank you in advance

    October 10, 2017 at 4:01 am #862217
    Nikko

    Hey micropoleinstitut,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    .page-id-674 .avia-builder-el-23 a.avia-button {
    background: rgba(255,255,255,0.5) !important;
    border: 0 !important;
}

.page-id-674 .avia-builder-el-23 a.avia-button font {
    color: #fff !important;
}

.page-id-674 .avia-builder-el-23 a.avia-button:hover font {
    color: #d2046a !important;
}

    Hope this helps :)
    Best regards,
    Nikko

    October 10, 2017 at 10:14 am #862388
    micropoleinstitut

    Hi,

    That’s almost it, but I would like the font to change in pink as the mouse moves over the button.

    Currently the font remains in white when I pass the mouse on the button (I can not put it in pink).

    Here is the link from my page : http://www.micropole-learning-solutions.com.qual.micropole.com/index.php/innovation-lab/

    I am using this css code :

    .page-id-674 .avia-builder-el-23 a.avia-button {
    background: rgba(255,255,255,0.0) !important;
    border: 2px solid white !important;
    color: white !important;
    }

    .page-id-674 .avia-builder-el-23 a.avia-button font {
    color: white !important;
    }

    .page-id-674 .avia-builder-el-23 a.avia-button:hover {
    background: white !important;
    color: white !important;
    }

    I thank you in advance

    October 11, 2017 at 5:35 am #862724
    Rikard

    Hi,

    Thanks for the feedback. Please try replacing the last CSS block with this:

    .page-id-674 .avia-builder-el-23 a.avia-button:hover {
background: white !important;
color: pink !important;
}

    Best regards,
    Rikard

    October 11, 2017 at 9:26 am #862778
    micropoleinstitut

    Hi,

    It does not work… I don’t understand ?

    Thanks for your help

    October 12, 2017 at 7:11 am #863219
    Rikard

    Hi,

    I think it’s not working because you have added a font tag with inline styles:

    <font color="#D2046A">Text</font>

    Not sure why you have done that?

    Best regards,
    Rikard

    October 12, 2017 at 9:15 am #863266
    micropoleinstitut

    Hi,

    Can you just give me the whole CSS code to do what I ask please because I am lost…

    Thank you

    October 12, 2017 at 12:46 pm #863380
    Victoria

    Hi micropoleinstitut,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    October 12, 2017 at 2:53 pm #863455
    micropoleinstitut

    Hi,

    I’ll be clearer, when I hover the mouse over the button the text is white while I want it pink : https://imgur.com/a/JcpZn

    I am currently using this CSS code, which is probably not good but I don’t understand my error :

    .page-id-674 .avia-builder-el-23 a.avia-button {
    background: rgba (255,255,255,0.0)!
    border: 2px solid white! important;
    color: white! important;
    }

    .page-id-674 .avia-builder-el-23 a.avia-button font {
    color: white! important;
    }

    .page-id-674 .avia-builder-el-23 a.avia-button: hover {
    background: white! important;

    }

    Here is the link from my web page: http://www.micropole-learning-solutions.com.qual.micropole.com/index.php/innovation-lab/

    I’m sure it’s easy, but I’m blocked.

    Thank you

    October 12, 2017 at 3:37 pm #863478
    Victoria

    Hi micropoleinstitut,

    This is the rule added by you that makes it white on hover with !important, just remove it and it should work fine.
    And add this if you need:

    
.page-id-674 .avia-builder-el-23 a.avia-button:hover {
    background: #d40072 !important;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    • This reply was modified 7 years, 1 month ago by Victoria.
    October 12, 2017 at 4:53 pm #863537
    micropoleinstitut

    Hi,

    I tried this css code, but it still does not work. Indeed, there is no white background and pink font as the mouse moves over the button :

    .page-id-674 .avia-builder-el-23 a.avia-button {
    background: rgba(255,255,255,0.0) !important;
    border: 2px solid white !important;
    color: white !important;
    }

    .page-id-674 .avia-builder-el-23 a.avia-button font {
    color: white !important;
    }

    .page-id-674 .avia-builder-el-23 a.avia-button:hover {
    background: #D40072 !important;

    }

    Can you give me the entire CSS code with the new notifications please ?

    Thank you

    October 13, 2017 at 10:16 am #863824
    micropoleinstitut

    It’s good I have succeeded, thanks for your help

    October 13, 2017 at 2:11 pm #863953
    Rikard

    Hi,

    Great, glad you got it working and thanks for letting us know. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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