WordPress.org

Ready to get started?Download WordPress

Forums

Easy Modal
How to fram in a URL (2 posts)

  1. redfoxbonds
    Member
    Posted 4 months ago #

    I cannot, for the life of me, figure out how to make a nice design inside of the easy modal using gravity forms. It's just a nasty, orange, form. So, I created a form page and simply want to frame that page inside of easy modal. How do I go about doing that? Here's the site: http://www.redfoxbonding.com/surety-bonds/construction-bonds/

    Click on one of the "Apply Now" links in the table on that page. It's an empty orange modal at this point. Unless I can figure out the design issues with Gravity Forms, I just want to frame in this page: http://www.redfoxbonding.com/surety-bonds/commercial-bonds/commercial-bond-application/

    https://wordpress.org/plugins/easy-modal/

  2. danieliser
    Member
    Plugin Author

    Posted 4 months ago #

    Hey redfoxbonds,

    The reason for this is that your theme is targeting only form fields within specific parents.

    Since the modals lie outside of those parents the styling isnt applied.

    To fix this you either need to duplicate the stylings using the .modal class as the parent or add .modal to your existing rules. For instance the rule that controls the bg color for the inputs is

    #top .main_color .input-text,
    #top .main_color input[type="text"],
    #top .main_color input[type="input"],
    #top .main_color input[type="password"],
    #top .main_color input[type="email"],
    #top .main_color input[type="number"],
    #top .main_color input[type="url"],
    #top .main_color input[type="tel"],
    #top .main_color input[type="search"],
    #top .main_color textarea,
    #top .main_color select

    You can either add lines like this for every rule

    .modal .input-text,
    .modal input[type="text"],
    .modal input[type="input"],
    .modal input[type="password"],
    .modal input[type="email"],
    .modal input[type="number"],
    .modal input[type="url"],
    .modal input[type="tel"],
    .modal input[type="search"],
    .modal textarea,
    .modal select

    Or remove the parent requirements from the rules like so

    .input-text,
    input[type="text"],
    input[type="input"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="url"],
    input[type="tel"],
    input[type="search"],
    textarea,
    select

    or lastly just build your own simple set of needed styles for the modals

    .modal input, .modal select, .modal textarea {}
    .modal input[type=button], .modal button {}

    etc

    Hope this helps.

Reply

You must log in to post.

About this Plugin

About this Topic