Forums › Forums › Search & Filter Pro › Issues displaying search form horizontally in Avada

Tagged: , ,

Viewing 10 posts - 1 through 10 (of 15 total)
1 2
  • Anonymous
    (Private)  March 30, 2016 at 2:22 am #40923

    Hello,

    I have followed the instructions here to make the search form display horizontally but the thing is, it doesn’t look well, all the fields are right next to each other with no space in between and when I click on “Programa”, the dropdown displays two categories in the same line (High Schools and Internados). I’d like to know how I could fix this. This is the URL to my development site: http://edulynks.com/2/

    Thank you!

    Trevor
    (Private)  March 30, 2016 at 8:44 am #40939

    All that is required is a little more finesse with the custom css. Maybe you could take a screenshot crop it to the search form and play with it in Photoshop or similar so it looks as you wish, upload it to a file sharing site, and share with me (it can be a private reply if you wish) so I can see what you want and I can give you the css?

    Anonymous
    (Private)  March 31, 2016 at 12:27 am #41065
    This reply has been marked as private.
    Trevor
    (Private)  March 31, 2016 at 10:17 am #41096

    OK

    I need to see an actual page with what you want it to look like (an example), as this will make my task easier.

    But, to whet your appetite, this is the custom CSS to make the button look as you want:

    .sf-field-submit input {
  font-family: 'Karla', Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
  font-size: 13px;
  background: #427ed1;
  border-width: 0;
  border-radius: 25px !important;
  padding: 11px 23px;
  line-height: 16px;
  cursor: pointer;
  transition: all .2s;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -ms-transition: all .2s;
  -o-transition: all .2s;
}
.sf-field-submit input:hover {
  background: #4c8be0;
}
    Anonymous
    (Private)  March 31, 2016 at 5:14 pm #41137
    This reply has been marked as private.
    Trevor
    (Private)  March 31, 2016 at 5:19 pm #41138

    Hi

    It is on a new line because the container it is in is too narrow for the the fields. That we can fix later. I need a live page with the example so that I can examine the html and css using firebug. And then I can play with both forms. Is it possible to put the other form directly below the S&F one on the demo page?

    Anonymous
    (Private)  March 31, 2016 at 11:29 pm #41185
    This reply has been marked as private.
    Trevor
    (Private)  April 1, 2016 at 7:52 am #41203

    No, as the example form is still an image, I need to see a working form. I will go looking on the Internet, there will be one I can find somewhere.

    Anonymous
    (Private)  April 1, 2016 at 5:11 pm #41281

    Sorry Trevor, I now understand what you mean. I have added a working form with Contact 7 to the page I sent you so you can see what they look like. I hope this will help 🙂

    Let me know if you need anything else!

    Trevor
    (Private)  April 1, 2016 at 5:30 pm #41284

    Ah!!! Perfect. I will look at this in the morning. I am tired after a long day.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 15 total)
1 2