Forums Forums Search & Filter Pro Change values with css?

Tagged: ,

Viewing 10 posts - 1 through 10 (of 16 total)
  • Anonymous
    #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
    #234694

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

    Anonymous
    #234784
    This reply has been marked as private.
    Anonymous
    #234786

    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

    Trevor
    #234833

    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;
    }
    Trevor
    #234837

    I edited that code a bit a few times, so check the post on the forum! Not in the email.

    Anonymous
    #234890

    Hey Trevor, the code was great, though, do not use “padding” use “height” so we managed to match the size of everything.

    Anonymous
    #234892

    Now I just have to correct two problems.
    On the computer it is not entirely centered and in the mobile neither.

    I send you photos

    Anonymous
    #234894
    This reply has been marked as private.
    Trevor
    #235073

    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?

Viewing 10 posts - 1 through 10 (of 16 total)