How to set background color for popup button?

Home Forums Easy FancyBox Pro How to set background color for popup button?

This topic contains 5 replies, has 2 voices, and was last updated by  RavanH 2 years, 7 months ago.

  • Author
    Posts
  • #3734

    Max
    Participant

    Hi Sir,
    I purchased the Easy FancyBox Pro plugin, I want to use it with Contact Form 7 and make a popup effect, I already installed Contact Form 7 and the Easy FancyBox plugins.

    I found instruction on Internet to make popup effect by using such code as follows:

    <a href="#contact_form_pop" class="fancybox">Contact Us</a>
    <div style="display:none" class="fancybox-hidden">
        <div id="contact_form_pop">
            [contact-form-7 id="XX" title="Contact form 1"]
        </div>
    </div>

    The popup button is Contact Us and it works, now I want to add rectangle (with round border) background for the words “Contact Us” and fill the rectangle with certain color.

    How should I do to make the effect?

    Your reply will be appreciated.

  • #3736

    RavanH
    Keymaster

    Hi Max,

    To make a link look like a button, you can use CSS style rules. First give the link a specific class like “button-link”:

    
    <a href="#contact_form_pop" class="button-link fancybox">Contact Us</a>
    

    Then open your themes stylesheet in the theme editor or, if you are not using your own custom theme, install JetPack and activate the Custom CSS module. Then you’ll have a new page called Edit CSS in the Appearance admin section where you can add any style rules you like.

    Now for the style rules themselves I can suggest a good tutorial like:
    http://usabilitypost.com/2012/01/10/pressed-button-state-with-css3/

    Hope that helps you create a nice looking button 🙂

  • #3750

    Max
    Participant

    Thanks for your kind reply, Ravan.

    I thought I can set background for Contact Us button by using the Easy FancyBox Pro plugin as I saw support for “Background color, Opacity and Border radius for rounded corners” in the introduction, it seems I did not understand it in a right way.

    How can I send you a private message? May I know you mail address or something like that?

  • #3770

    Max
    Participant

    Can anyone reply me?

    Need some help here, thanks.

  • #3776

    Max
    Participant

    Hi Sir,

    I know how to make pop-up contact form by using easy fancy box, but do not know how to make a button design come with the pop-up

    below is code for pop-up contact form

    <a href="#contact_form_pop" class="fancybox">Contact Us</a>
    <div style="display:none" class="fancybox-hidden">
        <div id="contact_form_pop">
            [contact-form-7 id="XX" title="Contact form 1"]
        </div>
    </div>

    and here is the button design instruction of the theme I want to use, http://hogash-demo.com/kallyas_wp/button-designs/

    I just do not know how to combine them to make the words “Contact Us” show on a button.

    Can you please help?

    Thanks a lot.

  • #3781

    RavanH
    Keymaster

    Hi Max, this is all part of the theme. Not something that is controlled by FancyBox. Background/color options are about the lightbox frame, not the link on your page…

    Reading the theme instructions there quickly, I would guess something like the example under “Anchor element” might work for you:

    
    <a href="#contact_form_pop" class="fancybox btn btn-large btn-primary disabled">Contact Us</a>
    

You must be logged in to reply to this topic.