WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] submit button (9 posts)

  1. bladermaarraak
    Member
    Posted 7 months ago #

    I succesfully installed the plugin to have a contact form popped-up. But i would like to replace the 'contact us' hyperlink by a button. Is there a posibility to make this work?

    Thank you!

    http://wordpress.org/plugins/easy-fancybox/

  2. RavanH
    Member
    Plugin Author

    Posted 7 months ago #

    You could give the link an extra class like class="fancybox-inline button" (supposing you where using fancybox-inline before) and then add some style rules to your themes style.css to target this link.

    Something like:

    .button {
      display: inline-block;
      color: #fff!important;
      text-decoration: none;
      background-color: #67b94f;
      background: -moz-linear-gradient(top, #e4bc1e 0%, #d4aa07 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4bc1e), color-stop(100%,#d4aa07));
      background: -webkit-linear-gradient(top, #e4bc1e 0%,#d4aa07 100%);
      background: -o-linear-gradient(top, #e4bc1e 0%,#d4aa07 100%);
      background: -ms-linear-gradient(top, #e4bc1e 0%,#d4aa07 100%);
      background: linear-gradient(to bottom, #e4bc1e 0%,#d4aa07 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4bc1e', endColorstr='#d4aa07',GradientType=0 );
      font-size: 1.0em;
      padding: 5px 7px;
      border: 1px solid #d4aa07;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 5px;
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
      cursor: pointer;
    }
    .button:hover {
      text-decoration: none;
      background-color: #67b94f;
      background: -moz-linear-gradient(top, #d4aa07 0%, #e4bc1e 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4aa07), color-stop(100%,#e4bc1e));
      background: -webkit-linear-gradient(top, #d4aa07 0%,#e4bc1e 100%);
      background: -o-linear-gradient(top, #d4aa07 0%,#e4bc1e 100%);
      background: -ms-linear-gradient(top, #d4aa07 0%,#e4bc1e 100%);
      background: linear-gradient(to bottom, #d4aa07 0%,#e4bc1e 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4aa07', endColorstr='#e4bc1e',GradientType=0 );
    }

    which would create a big yellowish button... Modify at your desire ;) and do not hesitate to reuse the class for other buttons on your site to create coherence...

  3. bladermaarraak
    Member
    Posted 7 months ago #

    Thanks for your reply:

    I have put this code in a widget:

    Contact Us

    <div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop" class="hentry" style="width:250px;height:100px;">
    [si-contact-form form='1']
    </div>
    </div>

    Should i replace 'fancybox' by 'fancybox-inline button' in the widget, or somewhere else?

    Thank you for your patience!

  4. bladermaarraak
    Member
    Posted 7 months ago #

    in stead of the contact button, i meant to say: a href="#contact_form_pop" class="fancybox">Contact Us

  5. RavanH
    Member
    Plugin Author

    Posted 7 months ago #

    Yes, you should not use class='fancybox' (reserved for images) but class='fancybox-inline' for inline content. Also make sure you activate the Inline Content section on your Settings > Media admin page.

    Next, adding the 'button' class will allow you to dedicate specific styling to the link as per example.

  6. bladermaarraak
    Member
    Posted 7 months ago #

    Thank you.

    I think i did something wrong:

    I first activated the inline content section.
    In the text widget i have the following code:

    <a href="#contact_form_pop" class="fancybox-inline">Contact Us</a>
    
    <div style="display:none" class="fancybox-hidden">
        <div id="contact_form_pop" class="hentry" style="width:250px;height:100px;">
            [si-contact-form form='1']
        </div>
    </div>

    Then I have paste your .button code into the style.css of my child theme. But it still shows the hyperlink and not the button.

    Do you have any idea what i dit wrong? thanks again!

  7. RavanH
    Member
    Plugin Author

    Posted 7 months ago #

    In your text widget change class="fancybox-inline" to class="fancybox-inline button"

  8. bladermaarraak
    Member
    Posted 7 months ago #

    It had no effect unfortunately.

  9. bladermaarraak
    Member
    Posted 7 months ago #

    Great, i did exactly the same as yesterday, but this time it worked! Thanks.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.