Styling the Forms

Anonymous

#203620

Hi I have a search form on my home page that is just the search box. I would like to make that 100% width and add some background styling and button styling changes and increase the overall font size, etc. Is there documentation on how to style the search forms to match your site?

Trevor

#203645

There is no documentation, sorry. If you are able to send me a live link/URL to your search page so I can take a look, then I could make some suggestions as to what the custom CSS might need to look like.

If you could also provide a link (use an image sharing site like cloudup) to an image (an annotated screenshot) showing what you plan in the context of your web site, that would help.

Anonymous

#203718

Thanks for your reply. The link is http://wherethunext.504mediasolutions.com. The first search box is for Search and Filter plugin. The 2nd one is a module within my theme thats styled like I wish search and filter to look.

Thanks!

Trevor

#203728

Something like this:

.searchandfilter li.sf-field-search label {
    width: 100%;
}
.searchandfilter > ul {
    border-radius: 3px;
    padding: 0 !important;
}
.searchandfilter li.sf-field-search {
    padding: 0;
    max-width: 100%;
}
.searchandfilter li.sf-field-search input::placeholder {
  color: #fff;
}
.searchandfilter li.sf-field-search input {
    color: rgb(102, 102, 102);
    text-shadow: rgb(12, 113, 195) 0px 2.2px 2.2px;
    text-transform: uppercase;
    width: 100%;
    background: rgb(25, 229, 135);
    border: 0;
    font-size: 22px;
    padding: 15.73px 122px 15.73px 15.73px;
}

But I can’t seem to get the border-radius to work.

Anonymous

#203767

This mostly works. Is there a way to attach a search button in a similar fashion to the right of the input box?

Trevor

#203769

Add the search button to the form, let me know, and I will look to it, maybe over the weekend, maybe on Monday.

Anonymous

#203776

I’ve updated the form to include the search button. Thanks!

Trevor

#203861

The CSS above now becomes:

.searchandfilter li.sf-field-search label {
    width: 100%;
}
.searchandfilter > ul {
    border-radius: 3px;
    padding: 0 !important;
}
.searchandfilter li.sf-field-search {
    padding: 0;
    width: calc(100% - 112.73px);
}
.searchandfilter li.sf-field-search input::placeholder {
  color: #fff;
}
.searchandfilter li.sf-field-search input {
    color: rgb(102, 102, 102);
    text-shadow: rgb(12, 113, 195) 0px 2.2px 2.2px;
    text-transform: uppercase;
    width: 100%;
    background: rgb(25, 229, 135);
    border: 0;
    font-size: 22px;
    padding: 15.73px 122px 15.73px 15.73px;
}
.searchandfilter .sf-field-submit input {
    color: #fff;
    cursor: pointer;
    position: absolute;
    right: 0px;
    text-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px;
    text-transform: uppercase;
    top: 0px;
    background: #0c71c3;
    border: none;
    font-size: 20px;
    padding: 17.6px 14.7px;
}

Anonymous

#203985

This works perfectly. Thanks!

[Author]

Posts