Forums Forums Search & Filter Pro Form Styling

Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Anonymous
    #264842

    Hi,

    Maybe you could help me with these problems:
    1. How do I change the submit button color?
    2. How to add an icon to a field?

    thanks!

    Trevor
    #264862

    Can you show me one or more annotated screenshot(s) of the design change(s) you want? If you can do that, you would need to upload the screenshot image(s) to a file sharing site (like the WordPress Cloudup site) and share the link with me?

    Are you able to send me a live link/URL to your search page so I can take a look?

    If you have a page on your site with an example button and also of usage of the icon, please share that with me also.

    Anonymous
    #264936

    Hey Trevor,

    This is a link to a picture of the current designs and the wanted design:
    https://pasteboard.co/Jyvp8Oj.png

    this is a link to the form page: https://techmonster.co.il/tech-jobs/

    I need help with these following changes:
    1. Submit Button – making the corners round (like the other form fields)
    2. Submit Button text – should be white & font should be ASSISTANT (400)
    3. first field from the right (Hebrew site, all content text is RTL)- should have a search icon on the right side
    4. Second field from the right – should have a location icon on the right side

    *search icon source – https://www.freepik.com/free-icon/magnifying-glass-simple_706282.htm#page=1&query=SEARCH&position=16
    ** location icon source – https://www.freepik.com/free-icon/map-pin_881156.htm#page=1&query=LOCATION&position=8
    *** the icons in 3 & 4 should look a little like the form on this page: https://authenticjobs.com/

    Thanks

    Trevor
    #265106
    This reply has been marked as private.
    Anonymous
    #265112

    Thank you very much, I appreciate the update

    Trevor
    #265238

    Your custom CSS:

    .searchandfilter[data-sf-form-id="2167"] .sf-field-submit input {
        border-radius: 3px;
        color: #fff;
        font-family: Assistant;
        font-weight: 400;
    }

    You need to have the icons in the size you need as transparent png images of the correct size on your site. The CSS would be something like this I think:

    .searchandfilter[data-sf-form-id="2167"] .sf-field-search input {
        padding-right: 30px;
        background: url(your path to the image);
    }

    and

    .searchandfilter[data-sf-form-id="2167"] .sf-field-taxonomy-job_locations select {
        padding-right: 30px;
        background: url();
    }

    I think.

    Anonymous
    #265332

    Thanks! works great

    Trevor
    #265334

    Thanks for getting back to me. I will close this thread for now.

Viewing 8 posts - 1 through 8 (of 8 total)