-
AuthorSearch Results
-
March 6, 2020 at 2:20 pm #235752
In reply to: Need to add icon right to search box
TrevorParticipantI am not sure if this works for you, as Custom CSS:
.searchandfilter[data-sf-form-id="2062"] li.sf-field-search label::after { font-family: FontAwesome; font-size: 24px; font-weight: normal; font-style: normal; content: "\f002"; display: inline-block; width: 45px; height: 45px; line-height: 45px; text-align: center; color: #fff; background: #000; position: relative; top: 3px; cursor: pointer; }
March 5, 2020 at 10:42 am #235600In reply to: Designing the search form and product archive
TrevorParticipantThis Custom CSS is my first hit at it:
.searchandfilter[data-sf-form-id="2703"] select.sf-input-range-select { border: 1px solid #aaa; padding: 2px 0; border-radius: 4px; } .searchandfilter[data-sf-form-id="2703"] > ul > li:first-child { margin-left: 0; padding-top: 0; } .searchandfilter[data-sf-form-id="2703"] li.sf-field-search h4 { font-size: 26px; font-weight: 400; letter-spacing: 3px; padding-top: 0; } .searchandfilter[data-sf-form-id="2703"] h4 { font-size: 18px; font-weight:600; } .searchandfilter[data-sf-form-id="2703"] select, .searchandfilter[data-sf-form-id="2703"] .select2-container .select2-results__option, .searchandfilter[data-sf-form-id="2703"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: black; font-size: 14px; } .searchandfilter[data-sf-form-id="2703"] li.sf-field-search input, .searchandfilter[data-sf-form-id="2703"] li.sf-field-search label, .searchandfilter[data-sf-form-id="2703"] .select2-container { min-width: 100%; } .searchandfilter[data-sf-form-id="2703"] > ul { margin: 20px; border: 1px solid #002f60; padding: 15px; } .searchandfilter[data-sf-form-id="2703"] .meta-slider { max-width: calc(100% - 12px); } .searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider label { width: calc(50% - 9px); } .searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider input { width: 100%; max-width: 100%; }
However. The following need specifying:
font colors for each field
font sizes for each field
border colors for the form and fieldsMarch 2, 2020 at 1:51 pm #235320In reply to: Change values with css?
TrevorParticipantChange it to this:
/*------formularios busqueda adsforchange en linea y centrado------*/ .searchandfilter[data-sf-form-id="10033"] select, .searchandfilter[data-sf-form-id="10033"] .sf-field-search input { min-width: 240px; } .searchandfilter[data-sf-form-id="10033"] > ul { padding-left: 0; } @media only screen and (min-width: 1025px) {.searchandfilter[data-sf-form-id="10033"] > ul > li:first-child { margin-left: 0px; } .searchandfilter[data-sf-form-id="10033"] > ul > li { margin-left: 10px; float: left; } .searchandfilter[data-sf-form-id="10033"] { float: left; width: 100%; } .searchandfilter[data-sf-form-id="10033"] select, .searchandfilter[data-sf-form-id="10033"] .sf-field-search input { min-width: 240px; } .searchandfilter[data-sf-form-id="10033"] > ul { display: table; margin: 0 auto; } } @media only screen and (max-width: 1024px) { .searchandfilter[data-sf-form-id="10033"] .sf-field-submit input { display: table; margin: 0 auto; padding-left: 2; } .searchandfilter[data-sf-form-id="10033"] .sf-field-submit input { -webkit-appearance: none; -webkit-border-radius: 0; color: #fff; height: 40px; font-family: "Raleway", Sans-serif; background: #1890ff; font-size: 16px; box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3) } }
This moves the
padding-left: 0;
that was inside the media query to outside it, so it also applies to mobile.February 29, 2020 at 9:40 am #235245In reply to: Change values with css?
AnonymousInactiveEi Trevor!!
It worked to focus on the mobile and match the size of the fields.
To cancel the “ios” button I used this:-webkit-appearance: none; -webkit-border-radius: 0;
So my code has been like this:
/*------formularios busqueda adsforchange en linea y centrado------*/ .searchandfilter[data-sf-form-id="10033"] select, .searchandfilter[data-sf-form-id="10033"] .sf-field-search input { min-width: 240px; } @media only screen and (min-width: 1025px) {.searchandfilter[data-sf-form-id="10033"] > ul > li:first-child { margin-left: 0px; } .searchandfilter[data-sf-form-id="10033"] > ul > li { margin-left: 10px; float: left; } .searchandfilter[data-sf-form-id="10033"] { float: left; width: 100%; } .searchandfilter[data-sf-form-id="10033"] select, .searchandfilter[data-sf-form-id="10033"] .sf-field-search input { min-width: 240px; } .searchandfilter[data-sf-form-id="10033"] > ul { display: table; margin: 0 auto; padding-left: 0; } } @media only screen and (max-width: 1024px) { .searchandfilter[data-sf-form-id="10033"] .sf-field-submit input { display: table; margin: 0 auto; padding-left: 2; } .searchandfilter[data-sf-form-id="10033"] .sf-field-submit input { -webkit-appearance: none; -webkit-border-radius: 0; color: #fff; height: 40px; font-family: "Raleway", Sans-serif; background: #1890ff; font-size: 16px; box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3) } }
I only have one thing left …
As you can see on mobile devices, it is not completely centered, but has a margin to the left.
I’ve tried everything, but I can’t keep it completely focused. Do you recommend something to me? I have to turn to you.Thanks a million for your time.
February 27, 2020 at 3:57 pm #235099In reply to: Change values with css?
TrevorParticipantDoes this work?
.searchandfilter[data-sf-form-id="10033"] select, .searchandfilter[data-sf-form-id="10033"] .sf-field-search input { min-width: 240px; } @media only screen and (min-width: 1025px) { .searchandfilter[data-sf-form-id="10033"] > ul > li: first-child { margin-left: 0px; } .searchandfilter[data-sf-form-id="10033"] > ul > li { margin-left: 10px; float: left; } .searchandfilter[data-sf-form-id="10033"] { float: left; width: 100%; } .searchandfilter[data-sf-form-id="10033"] > ul { display: table; margin: 0 auto; padding-left: 0; } } @media only screen and (max-width: 1024px) { .searchandfilter[data-sf-form-id="10033"] .sf-field-submit input { margin: 0 auto; display: table; } }
Note, the iPhone takes over control of the button, so I am unsure how to change that.
February 27, 2020 at 2:26 pm #235079In reply to: Change values with css?
AnonymousInactiveohhh!!! just do it Trevor, only Just need to justify the mobile versions, and “color submit”in ios.
I have divided it.
1. justification/ * ------ online and focused adsforchange search forms ------ * / @media only screen and (min-width: 1025px) { .searchandfilter[data-sf-form-id="10033"] > ul > li: first-child { margin-left: 0px; } .searchandfilter[data-sf-form-id="10033"] > ul > li { margin-left: 10px; float: left; } .searchandfilter[data-sf-form-id="10033"] { float: left; width: 100%; } .searchandfilter[data-sf-form-id="10033"] select, .searchandfilter[data-sf-form-id="10033"] .sf-field-search input { min-width: 240px; } .searchandfilter[data-sf-form-id="10033"] > ul { display: table; margin: 0 auto; padding-left: 0; } }
So I managed not to lose the color design of the fields.
2. Design:
/ * ------ forms search adsforchange color ------ * / .searchandfilter[data-sf-form-id = "10033"] .sf-field-search input { color: # 000; height: 40px; font-family: "Raleway", Sans-serif; background: #eee; font-size: 16px; border-radius: 4px; } .searchandfilter[data-sf-form-id = "10033"] select { color: black; font-family: "Raleway", Sans-serif; font-size: 16px; background: #eee; border-radius: 4px; height: 40px; } .searchandfilter[data-sf-form-id = "10033"] .sf-field-submit input { color: #fff; height: 40px; font-family: "Raleway", Sans-serif; background: #1890ff; font-size: 16px; box-shadow: 0 12px 18px -6px rgba (0, 0, 0, 0.3)! important; }
February 27, 2020 at 2:00 pm #235073In reply to: Change values with css?
TrevorParticipantChange 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?
February 25, 2020 at 2:30 pm #234833In reply to: Change values with css?
TrevorParticipantDoes 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; }
February 25, 2020 at 2:08 am #234786In reply to: Change values with css?
AnonymousInactiveWe 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
AnonymousInactiveSolved adding
so :
.searchandfilter[data-sf-form-id=”1146″] h4 {
color: black;
font-family: “Montserrat”, Sans-serif;
font-size: 18px;
font-weight:600
}Ticket can be closed
-
AuthorSearch Results