› Forums › Easy FancyBox Pro › How to set background color for popup button?
- This topic has 5 replies, 2 voices, and was last updated 9 years, 1 month ago by
RavanH.
-
AuthorPosts
-
-
7 October 2014 at 05:46 #3734
Max
ParticipantHi 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.
-
7 October 2014 at 10:48 #3736
RavanH
KeymasterHi 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 🙂
-
7 October 2014 at 13:09 #3750
Max
ParticipantThanks 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?
-
7 October 2014 at 16:03 #3770
Max
ParticipantCan anyone reply me?
Need some help here, thanks.
-
8 October 2014 at 13:59 #3776
Max
ParticipantHi 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.
-
10 October 2014 at 10:21 #3781
RavanH
KeymasterHi 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>
-
-
AuthorPosts
- You must be logged in to reply to this topic.