Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • May 22, 2015 at 5:58 pm #448525
    entrepreneur41

    Hello,

    I’m hoping this is doable, but not sure:

    I’d like to have a Button with the text “Call Us” set up so that when you either click the button or mouse hover over it, the text changes to a phone number.

    I don’t want to navigate to a new page just to show the number. I just want it to appear either from a mouse hover over the button or a click of the button on the same page.

    Is there a way to do this?

    Thanks so much

    May 22, 2015 at 7:56 pm #448578
    Josue

    Hi!

    Defiantly possible, you can do something like this (button has custom class of “call_us”):

    .call_us .avia_iconbox_title {
    font-size: inherit;

}
.call_us .avia_iconbox_title:after{
    content: "303023023";
    font-size: 0;

}
.call_us:hover .avia_iconbox_title {
    font-size: 0;

}
.call_us:hover .avia_iconbox_title:after{
    font-size: 14px;
}

    Regards,
    Josue

    May 23, 2015 at 12:14 am #448746
    entrepreneur41

    Hi again,

    Thanks for the quick reply.

    I copied and pasted the code with no luck. Unfortunately, I have no coding experience.

    Sorry to be basic, but can you explain what a “custom class” is?
    The button in question reads “Call us” (not “call_us”).

    Any further assistance would be greatly appreciated.

    Thanks

    May 23, 2015 at 12:17 am #448749
    Josue

    Oh sorry, you need to enable this first:
    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Then in the button in question set the class of call_us:

    Cheers!
    Josue

    May 23, 2015 at 12:31 am #448756
    entrepreneur41

    Yes! Thanks!

    May 23, 2015 at 12:35 am #448759
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

    May 23, 2015 at 2:20 am #448812
    entrepreneur41

    Just a quick follow up:

    1) When I hover, the width of the button changes (it gets wider); how can I make the width static? (it’s X large);

    2) When I hover, the button changes shade slightly. I don’t want it to change colors on the hover. How can I turn this off?

    Thanks!

    May 23, 2015 at 2:24 am #448815
    Josue

    Hey!

    Try this:

    .call_us{
   min-width: 250px;
}
.call_us:hover{
   opacity: 1;
}

    If it doesn’t work please post a link to your site.

    Cheers!
    Josue

    May 23, 2015 at 2:29 am #448819
    entrepreneur41

    That didn’t work, and I’m running the site on MAMP.

    Have you any other ideas?

    Thanks

    May 23, 2015 at 2:37 am #448820
    Josue

    This should do it:

    .call_us .avia-button {
   min-width: 150px;
}
.call_us:hover .avia-button {
   opacity: 1;
}
    May 23, 2015 at 2:39 am #448821
    entrepreneur41

    That fixed the color issue, thanks. But the sizing is still off.

    What’s the normal width in px for X-large buttons? Would this work:

    .call_us .avia-button {
    max-width: XXXpx;
    }

    May 23, 2015 at 2:40 am #448822
    entrepreneur41

    the issue is that the button gets larger when I hover over it. I just want it to stay the same size, e.g., the typical X-large size.
    Thanks

    May 23, 2015 at 2:43 am #448825
    Josue

    Play with the value, maybe 350px:

    .call_us .avia-button {
   min-width: 350px;
}

    Regards,
    Josue

    May 23, 2015 at 2:51 am #448826
    entrepreneur41

    I don’t think that’s the right code.

    When I hover, the box gets larger, not smaller. So setting the minimum width value doesn’t solve the problem.

    I tried substituting “max-width” for “min-width” and got the button to stop getting wider upon hovering, but now it gets TALLER upon hovering instead. I have no idea why. Weird.

    Any ideas?

    May 23, 2015 at 2:52 am #448828
    Josue

    It’s really hard to debug this kind of issue without seeing the actual page, leave this for now and let me know through this topic when you upload the site.

    Best regards,
    Josue

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