Formatting search box and fields

Anonymous

#250620

Hello. (Using the Pro version) I have read you are working on a new plugin version. Where can I know which new features or improvements we will find. I whish so much that each field in each field form will be easily formatted not only through css but through search form settings when creating. I’m currently struggling for getting a nice layout for a search form that doesn’t position on the left (leaving an ugly white space) and trying the search field could clean after each search without adding a reset button. Could you help me while waiting for V3? Thanks

Trevor

#250663

V3 is due in a few months, and it will offer improved ways to format the forms, yes.

Are you able to send me a live link/URL to your search page so I can take a look?

Can you show me one or more annotated screenshot(s) of the design change(s) you want? If you can do that, you would need to upload the screenshot image(s) to a file sharing site (like the WordPress Cloudup site) and share the link with me?

Anonymous

#250700

This reply has been marked as private.

Trevor

#250727

If there is a place where you entered all the CSS, so it is easy to remove, let me know here what you wrote. Paste it here inside code tags (it is the back tick symbol, on my UK keyboard it is next to the 1 key).

Then remove the code so I can start with a clean sheet.

I will be back on this tomorrow, as we are now closed for the evening.

Anonymous

#250738

This reply has been marked as private.

Anonymous

#250740

Sorry, forget the previous code:

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    width: 100%;
    border: 2px dotted #aaa;
    border-radius: 25px;
    padding: .2rem .5rem;
    transition: all .3s;
    font-size: 14px;
    font-weight: 500;
}

.searchandfilter ul li {
    list-style: none;
    display: inline-flex;
    padding: 10px 10px;
    margin: 0;
    border-radius: 20px !important;
}

Trevor

#250779

I am working on this now for you, but one thing I need to mention that is important. You have the same search form twice in the page. It MIGHT work, but often, doing this (having more than one instance of the same form, or even multiple forms) will mean that they don’t work together. Just be aware that this is possible, so if you have problems with the results not working, that might be why. Normally, we suggest only one form instance on the results page.

Trevor

#250781

Does this CSS work for you?

.searchandfilter[data-sf-form-id="20636"] .sf-field-search input.sf-input-text[type="text"] {
  border-radius: 20px;
  border: 2px dotted #aaa;
}
.searchandfilter[data-sf-form-id="20636"] ul {
  padding-left: 0;
}
.searchandfilter[data-sf-form-id="20636"] ul {
  display: table;
  margin: 0 auto;
}

Anonymous

#250902

This reply has been marked as private.

Trevor

#250916

It all works now?

[Author]

Posts