WordPress.org

Forums

Easy FancyBox
[resolved] submit button (9 posts)

  1. bladermaarraak
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year ago #

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

  8. bladermaarraak
    Member
    Posted 1 year ago #

    It had no effect unfortunately.

  9. bladermaarraak
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.