Disable Search Form Customizer

Ivory Search › Forums › Support › Disable Search Form Customizer

Tagged: , ,

Viewing 8 reply threads

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

  • Author
    Posts
    • July 23, 2020 at 7:24 PM #5361
      mtchnelson
      Participant
      • Topics: 1
      • Replies: 6

      Hello,

      This plugin has been very helpful. Thanks!

      I am using Salient 12 for my theme and it seems to be styling the forms incorrectly when the Search From Customization is enabled. BUT, on my default search form (which has the option for the customizer to be enabled/disabled) it displays beautifully.

      If I was only needing one search form, I would have no problem. Unfortunately I need multiple.

      Is there a way I am able to enable/disable the search form customizer on ALL my forms, not just the default one?

      Thank you!

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

      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,735

      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,735

      Awesome great to see you got that solved.

      Please advise if you have more questions.

      Have a fantastic day!

  • Author
    Posts
Viewing 8 reply threads

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