The forums are closed and will be removed when we launch our new site.
Looking for support? You can access the support system via your account.
Forums › Forums › Search & Filter Pro › Change values with css?
- This topic has 15 replies, 2 voices, and was last updated 4 years, 6 months ago by Trevor.
-
Carlos Miguel(Private) February 24, 2020 at 11:01 am #234691
Good morning
I’m going crazy, please tell me how to change the S&F module search fields, Background and size (the fields do not have the same height), borders, these things, I’ve been reading the blog for three days.
Thanks for your time.Trevor Moderator(Private) February 24, 2020 at 11:34 am #234694Are you able to send me a live link/URL to your search page so I can take a look?
Any annotated screenshots (of what you want) you can make to help me would be appreciated. You will need to upload images to an external file sharing site, like dropbox, and share the link(s) with me.
Carlos Miguel(Private) February 25, 2020 at 2:08 am #234786We have done this to align it on the page:
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}And this to change the size of “search” and “submit”:
.searchandfilter[data-sf-form-id=”9080″] .sf-field-search input {
color: #000;
padding: 10px 10px;
font-family: “Raleway”;
background: #eee;
font-size: 16px;
}
.searchandfilter[data-sf-form-id=”9080″] .sf-field-submit input {
color: #fff;
font-size: 16px;
font-family: “Raleway”;
padding: 10px 10px;
background: #1890ff
}Regards
Trevor Moderator(Private) February 25, 2020 at 2:30 pm #234833Does this look better:
.searchandfilter[data-sf-form-id="9080"] > ul > li:first-child { margin-left: 0; } .searchandfilter[data-sf-form-id="9080"] > ul > li { margin-left: 20px; float: left; } .searchandfilter[data-sf-form-id="9080"] { float: left; width: 100%; } .searchandfilter[data-sf-form-id="9080"] select { color: black; font-family: "Raleway", Sans-serif; font-size: 16px; background: #eee; padding: 9px; border-radius: 6px; } .searchandfilter[data-sf-form-id="9080"] select, .searchandfilter[data-sf-form-id="9080"] .sf-field-search input { min-width: 240px; } .searchandfilter[data-sf-form-id="9080"] > ul { display: table; margin: 0 auto; }
Replace/remove this:
.searchandfilter > ul > li { display: inline-block; vertical-align: top; padding: 0 20px; }
And I think you need to add the 6px border-radius to the text search field. In the code you already have:
.searchandfilter[data-sf-form-id="9080"] .sf-field-search input { color: #000; padding: 10px 10px; font-family: "Raleway"; background: #eee; font-size: 16px; border-radius: 6px; }
Trevor Moderator(Private) February 25, 2020 at 2:34 pm #234837I edited that code a bit a few times, so check the post on the forum! Not in the email.
Carlos Miguel(Private) February 26, 2020 at 2:06 am #234890Hey Trevor, the code was great, though, do not use “padding” use “height” so we managed to match the size of everything.
Carlos Miguel(Private) February 26, 2020 at 2:07 am #234892Now I just have to correct two problems.
On the computer it is not entirely centered and in the mobile neither.I send you photos
Trevor Moderator(Private) February 27, 2020 at 2:00 pm #235073Change this:
.searchandfilter[data-sf-form-id="10033"]>ul { display: table; margin: 0 auto; }
to this:
.searchandfilter[data-sf-form-id="10033"]>ul { display: table; margin: 0 auto; padding-left: 0; }
In order to do different CSS for mobile, what I gave you (and what you changed it to, for now, will need wrapping in a media query, like this:
@media only screen and (min-width: 1025px) { /* code here */ }
THEN I can start to look at the mobile version. Let me know when you have made this one CSS padding addition and the change to add the media query?
-
AuthorPosts
The topic ‘Change values with css?’ is closed to new replies.