How to set background color for popup button?

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

Viewing 5 reply threads
  • 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
      Rolf
      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
      Rolf
      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>
      
Viewing 5 reply threads
  • You must be logged in to reply to this topic.