Forums Forums Search Search Results for 'data-sf-form-id .searchandfilter'

Viewing 10 results - 111 through 120 (of 142 total)
  • Author
    Search Results
  • #235752

    Trevor
    Participant

    I 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;
     }
    #235600

    Trevor
    Participant

    This 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 fields

    #235320

    Trevor
    Participant

    Change 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.

    #235245

    Anonymous
    Inactive

    Ei 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.

    #235099

    Trevor
    Participant

    Does 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.

    #235079

    Anonymous
    Inactive

    ohhh!!! 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;
    }
    #235073

    Trevor
    Participant

    Change 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?

    #234833

    Trevor
    Participant

    Does 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;
    }
    #234786

    Anonymous
    Inactive

    We 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

    #234682

    In reply to: CSS RULES


    Anonymous
    Inactive

    Solved 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

Viewing 10 results - 111 through 120 (of 142 total)