Support » Plugin: Ivory Search - WordPress Search Plugin » Rounded corners, width-adjust, color customization

Rounded corners, width-adjust, color customization

  • Resolved wynden

    (@wynden)


    2 years, 4 months ago

    Hello,

    I have a few questions about customization. I wonder if it’s possible to round the edges and to adjust the width of the box.

    Additionally, I am interested in replicating the search form style on this website called, “Search with icon” which removes the box frame entirely and changes the color when the form field is clicked. The css they provide is this:

    .active-cyan-2 input.form-control[type=text]:focus:not([readonly]) {
  border-bottom: 1px solid #4dd0e1;
  box-shadow: 0 1px 0 0 #4dd0e1;
}

.active-cyan .fa, .active-cyan-2 .fa {
  color: #4dd0e1;

    Would it be possible to replicate this with the Ivory Search?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    2 years, 4 months ago

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

    Yes, we can achieve this developing custom CSS code.

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

    Best regards,

    Thread Starter wynden

    (@wynden)

    2 years, 4 months ago

    The search bar is currently on this page: https://laughterofgods.com/archive/
    But I may add the styled search bar do a different page of the site.

    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    2 years, 4 months ago

    You can make its corner round by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Ivory Search -> Settings -> Settings

    input.is-search-input {
    border-radius: 5px 0 0 5px !important;
}
button.is-search-submit span.is-search-icon,
button.is-search-submit {
    border-radius: 0 5px 5px 0;
}
    Thread Starter wynden

    (@wynden)

    2 years, 4 months ago

    Thank you. 🙂

    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    2 years, 4 months ago

    You are always welcome here 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Rounded corners, width-adjust, color customization’ is closed to new replies.

Views