Style the search bar

Ivory Search › Forums › Support › Style the search bar

Viewing 2 reply threads

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

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

      Hi,

      I’m considering using your plugin but I need to be able to style the search bar. In the attached picture you’ll see the top search bar is styled using elementor. The bottom search bar is the ivory search plugin search bar. What CSS do I need to make the ivory search bar look like the elementor one?

      Specifically:
      1. How can I make the search bar higher?
      2: How can I change the colour of the magnifying glass to orange (see attached image)?
      3. How can I put the words “enter building name or address” in the search bar in light grey font”
      4. How can I make sure it looks good on mobile with this CSS?

      Many thanks for your help and I hope I can use your plugin.

      Attachments:
      You must be logged in to view attached files.
    • 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 2 reply threads

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