Style the search bar

Ivory Search › Forums › Support › Style the search bar

Viewing 1 reply thread

You must be logged in to create new topic or reply to the topic.

  • Author
    Posts
    • April 5, 2022 at 10:49 AM #11290
      Davidk
      Participant
      • Topics: 1
      • Replies: 1

      Hi,

      I just found your style customiser (might be time to update your docs!!!). The only thing I couldn’t work out was how to make the search bar higher (like the image I attached to the first post).

      Would really appreciate any tips/CSS code to do this.

      Thanks in advance.

    • April 5, 2022 at 7:16 PM #11298
      Fabio
      Participant
      • Topics: 0
      • Replies: 13

      Hi David,

      I hope you’re well today and thank you for contacting us.

      You can achieve this by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Admin Area -> Ivory Search -> Settings -> Settings (see image below):

      https://ivorysearch.com/wp-content/uploads/2018/12/custom-css-code-option.png

      /*CSS to add*/

.is-form-style.is-form-style-3 input.is-search-input,
.is-form-style.is-form-style-3 button.is-search-submit,
.is-form-style.is-form-style-3 button.is-search-submit .is-search-icon {
    height: 50px;
}

.is-form-style.is-form-style-3 button.is-search-submit,
.is-form-style.is-form-style-3 button.is-search-submit .is-search-icon {
    width: 50px;
}

.is-form-style.is-form-style-3 button.is-search-submit .is-search-icon {
    padding-top: 13px !important;
}

form.is-form-style.is-form-style-3 label {
    width: calc(100% - 50px)!important;
}

form.is-form-style.is-form-style-3 .is-search-icon svg {
    width: 26px;
}

      Best regards,
      Ivory Search Support Team

  • Author
    Posts
Viewing 1 reply thread

You must be logged in to create new topic or reply to the topic.