How can I customize my search button to look like my desired outcome?

  • Resolved holamigos666

    (@holamigos666)


    4 years, 10 months ago

    Hi everyone, I am trying to make my Ivory search bar to look like this: https://imgur.com/zaclwfN – rounded corners and the search button is part of the search form.

    Right now, my Ivory search bar is the default look: https://imgur.com/GGcvbhd – The corners are squared and the search button is outside the search form.

    I tried using the below code that I found on another thread in this forum, but the search buttons is outside the search form, and the button is not rounded as well. https://imgur.com/lnzQXXt

    .is-search-form label input.is-search-input {
    width: 100%;
    border-radius: 10px;
    outline: 0;
}
Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter holamigos666

    (@holamigos666)

    4 years, 10 months ago

    Addon: I am also using OceanWP’s Architect demo theme if it’s relevant. https://architect.oceanwp.org/

    My desired search button can be seen when you view the demo site in mobile site, and press on the hamburger menu.

    • This reply was modified 4 years, 10 months ago by holamigos666.
    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    4 years, 10 months ago

    I hope you are well today and thank you for your question.

    Could you please share the page URL from your site where the ivory search form is displaying so that I can help you to achieve it?

    Best regards,

    Thread Starter holamigos666

    (@holamigos666)

    4 years, 10 months ago

    Hi Vinod @vinod-dalvi, my site is tinyurl.com/wphelpsearch Thank you!

    • This reply was modified 4 years, 10 months ago by holamigos666.
    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    4 years, 10 months ago

    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

    form.is-form-id-367 input#is-search-input-367 {
    border-radius: 15px 0 0 15px;
    border: 0 !important;
}

form.is-form-id-367 span.is-search-icon {
    background: #FFF;
    border: 0;
    border-radius: 0 15px 15px 0;
}
    Thread Starter holamigos666

    (@holamigos666)

    4 years, 10 months ago

    Hi Vinod Dalvi @vinod-dalvi, the code worked well. Thank you for your amazing help. Take care and stay safe!

    Thread Starter holamigos666

    (@holamigos666)

    4 years, 10 months ago

    Hi again Vinod, when I viewed the website on my iPhone, the search button is detached from the search bar. https://imgur.com/b0ZK3YE
    It looked fine when I view it in responsive mode on the computer.
    How can I fix this? Thank you.

    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    4 years, 10 months ago

    Please try also using the below CSS code.

    form.is-form-id-367 button.is-search-submit {
    border-radius: 0 15px 15px 0 !important;
}
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘How can I customize my search button to look like my desired outcome?’ is closed to new replies.