Disable Search Form Customizer

Tagged: search customization, styles, theme

This topic has 9 replies, 2 voices, and was last updated 4 years, 9 months ago by Ivory Search.

Viewing 7 reply threads

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

Author
Posts

July 23, 2020 at 8:41 PM #5363
mtchnelson
Participant
- Topics: 1
- Replies: 6
The site in question is here: https://lead.tfiadvocate.org/resources
July 23, 2020 at 9:51 PM #5366
Ivory Search
Keymaster
- Topics: 0
- Replies: 1,790
I hope you are well today and thank you for your question.
Currently, there is no option to display custom form look like default search form by deactivating its customization but I will implement it in the future version of the plugin.
In meanwhile, will it work If I assist you to style the custom form look like the default search form by using CSS code?
Best regards,
Ivory Search Support
- July 23, 2020 at 10:00 PM #5367
  mtchnelson
  Participant
  Topics: 1
  Replies: 6
  Adding the feature to enable/disable the customizer in the future, sounds like a great plan. Thank for considering it!
  And yes, CSS support would be great. I really like the way the default ivory search bar is styled on that page. How can I get CSS to make the second bar look the same?
July 24, 2020 at 4:19 AM #5371
mtchnelson
Participant
- Topics: 1
- Replies: 6
Hello,
I realize my request is potentially time consuming, but when should I expect a response.
I greatly appreciate any help.
Thank you.

July 24, 2020 at 3:05 PM #5374

Ivory Search

Keymaster

Topics: 0
Replies: 1,790

You can achieve this by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Ivory Search -> Settings -> Settings


.is-form-style.is-form-style-3 label {
    width: calc(100% - 58px)!important;
}
.is-form-style.is-form-style-3 input.is-search-input {
    height: 48px;
    background-color: rgba(255,255,255,0.75)!important;
    border-radius: 4px;
    color: #444444!important;
}
.is-form-style.is-form-style-3 input.is-search-input:focus {
    background-color: rgba(255,255,255)!important;
}
body form.is-form-style.is-form-style-3 button.is-search-submit {
  padding: 0 !important;
  transform: none !important;
}
.is-form-style.is-form-style-3  button.is-search-submit .is-search-icon {
  height: 48px;
  padding: 13px 19px!important;
  width: 58px;
  background: #f9b829!important;
  border: 0;
  border-radius: 4px;
}

.is-form-style-3 .is-search-input::-webkit-input-placeholder {
  color: #000 !important;
}
.is-form-style-3 .is-search-input::-moz-placeholder {
  color: #000 !important;
}
.is-form-style-3 .is-search-input:-ms-input-placeholder {
  color: #000 !important;
}
.is-form-style-3 .is-search-input:-moz-placeholder {
  color: #000 !important;
}

.is-form-style.is-form-style-3 button.is-search-submit  path {
    fill: #FFF;
}

July 24, 2020 at 5:45 PM #5376
mtchnelson
Participant
- Topics: 1
- Replies: 6
Wow, this is very helpful!
Unfortunately, while everything is looking nice in Chrome and Firefox, Safari is having some issues.
Any help with that? Screenshot attached.
Thanks again!
Attachments:
You must be logged in to view attached files.
July 24, 2020 at 9:15 PM #5380
mtchnelson
Participant
- Topics: 1
- Replies: 6
I have been able to add this code to stop Safari from styling the input field.
```
input {
-webkit-appearance: none;
}
```
This still incorrectly renders the button. I feel close to the solution, but am inexperienced.
Please help.
Thank you very much.

July 24, 2020 at 11:06 PM #5381

mtchnelson

Participant

Topics: 1
Replies: 6

I was able to get it to look how I want. This is all the code in my Custom CSS:

input {
-webkit-appearance: none!important;
}
.is-form-style {
    display: inline-flex;
    width: 85%;
}
.is-form-style.is-form-style-3 input.is-search-input {
    height: 48px;
    background-color: rgba(255,255,255,0.75)!important;
    border-radius: 4px 0 0 4px!important;
    color: #444444!important;
}
.is-form-style.is-form-style-3 input.is-search-input:focus {
    background-color: rgba(255,255,255)!important;
}
body form.is-form-style.is-form-style-3 button.is-search-submit {
  padding: 0 !important;
  transform: none !important;
}
.is-form-style.is-form-style-3  button.is-search-submit .is-search-icon {
  height: 48px!important;
  padding: 13px 19px!important;
  width: 58px!important;
  background: #fdb415!important;
  border: 0;
  border-radius: 0 4px 4px 0!important;
}

.is-form-style.is-form-style-3  button.is-search-submit .is-search-icon:hover {
  background: #fdbb2c!important;
  box-shadow: none!important;
}
body[data-form-submit="regular"] input[type=submit], body[data-form-submit="regular"] button[type=submit] {
border-radius: 0 4px 4px 0!important;
-webkit-border-radius: 0 4px 4px 0!important;
width: auto;
height: auto;
}
body[data-form-submit="regular"] input[type=submit]:hover, body[data-form-submit="regular"] button[type=submit]:hover {
opacity:1!important
}

body[data-button-style="slightly_rounded_shadow"] .container-wrap button[type="submit"]:hover {
box-shadow:none!important;
}

.is-form-style-3 .is-search-input::-webkit-input-placeholder {
  color: #000 !important;
}
.is-form-style-3 .is-search-input::-moz-placeholder {
  color: #000 !important;
}
.is-form-style-3 .is-search-input:-ms-input-placeholder {
  color: #000 !important;
}
.is-form-style-3 .is-search-input:-moz-placeholder {
  color: #000 !important;
}

.is-form-style.is-form-style-3 button.is-search-submit  path {
    fill: #FFF;
}

I know nothing, haha, so I’m sure this is super repetitive and unclean code.

Any help cleaning it up would be great. If not, my problem is solved. Thank you.

July 25, 2020 at 4:24 PM #5384
Ivory Search
Keymaster
- Topics: 0
- Replies: 1,790
Awesome great to see you got that solved.
Please advise if you have more questions.
Have a fantastic day!

Author
Posts

Viewing 7 reply threads

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

Attachments: