Docs

[crawfordandjohn]

Hi there,

We’re using renew on one of our sites and are wanting to replace the search overlay form with our own custom form, perhaps a gravity form one even. Are you able to tell me exactly where the form content is for the x-searchform-overlay-inner so we can copy it into the child theme to change the content?

Many thanks 🙂

[Thai]

Hi There,

You can copy this file x/searchform.php to your child theme directory then edit it.

Hope it helps 🙂

[crawfordandjohn]

Amazing, thank you! I actually ended up doing it via the functions.php in my Child Theme with help from another post on the forum, see below:

// Navbar Searchform Popup
// =============================================================================

if ( ! function_exists( 'x_navbar_searchform_overlay' ) ) :
  function x_navbar_searchform_overlay() {

    if ( x_get_option( 'x_header_search_enable', '' ) == '1' ) :

      ?>

      <div class="x-searchform-overlay">
        <div class="x-searchform-overlay-inner">
          <div class="x-container max width">
           <?php gravity_form( 2, false, false, false, '', false ); ?>
          </div>
        </div>
      </div>

      <?php

    endif;

  }
  add_action( 'x_before_site_end', 'x_navbar_searchform_overlay' );
endif;

This works great, however, I was wondering if you could help me with two little problems.

1) How to style this form like the original form in there – I added the CSS Class ‘search-query’ to the gravity form, but perhaps that isn’t it?

2) When I try to click on any of the fields within the form, the window disappears – how could I rectify this?

The current domain whilst in dev mode is: okc-dev.crawfordandjohn.com – the overlay is still accessible via the magnifying glass 🙂

[Lely]

Hi There,

Class search-query should be added on each of your form fields not on the wrapper of the form . Adding this class on each field will also stop the search window from disappearing from the screen.
Then add the following CSS to adjust font color and font size:

.x-searchform-overlay .form-search .search-query {
    font-size:5em; 
    color: #2c3e50;
}

Feel free to adjust the values.

Hope this helps.

[crawfordandjohn]

Thanks for that – I added the class within the ‘custom css class’ of gravity form but it doesn’t look as though that adds the css class directly to the field, more so a wrapper of sorts around the individual field.

Perhaps as a workaround could you tell me the various bits of css etc. that are linked with the class ‘search-query’ that I could place against each field’s individual id’s instead?

Thanks 🙂

Steven

[Rupok]

Hi Steven,

Could you provide your URL so that we could have a look? This is to ensure that we can provide you with a tailored answer to your situation.
Once you have provided us with your URL, we will be happy to assist you with everything.

[crawfordandjohn]

Hi Rupok,

Certainly – the URL was above in a previous post :). The dev URL is okc-dev.crawfordandjohn.com

Thanks!

[Rupok]

Hi Steven,

Thanks for updating. Sorry I missed that. However you can use the following selector to control label and input fields :

.gform_wrapper .search-query .gfield_label {
  font-size: 100% !important;
}

.x-searchform-overlay .search-query input {
    font-size:5em; 
    color: #2c3e50;
}

Hope this helps.

Cheers!

[crawfordandjohn]

Thanks Rupok, however, I’ve just placed that CSS into the Custom CSS Panel in ‘Customise’ and unfortunately, the fields are still disappearing when I click on them. Any suggestions?

Thanks 🙂

Steven

[Lely]

Hi Steven,

Adding the class properties will not stop the search overlay form from disappearing. The javascript that handle this part of the code is using the class search-query. It should be added on the field class property. Unfortunately, as stated on the sidebar of this forum, we cannot provide support for third party plugins. Thank you for understanding. I did a little searching and I found this:https://kaspars.net/blog/wordpress/gravity-forms-input-field-type-css-class. If you’re not comfortable implementing the code, you may wish to consult a web developer.

[crawfordandjohn]

Thanks for your help! I couldn’t quite get my head around it but the link did help me to figure out a workaround. I ended up adding a bit of Custom Javascript to add the ‘search-query’ class to the ID of what I needed to change:

document.getElementById("input_2_1").className += " search-query";

Thanks for the help! 🙂

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[Author]

Posts