Forums › Forums › Search & Filter Pro › Form Styling
Tagged: styling
- This topic has 7 replies, 2 voices, and was last updated 4 years ago by Trevor.
-
Trevor(Private) November 2, 2020 at 9:16 am #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(Private) November 2, 2020 at 2:23 pm #264936Hey Trevor,
This is a link to a picture of the current designs and the wanted design:
https://pasteboard.co/Jyvp8Oj.pngthis 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(Private) November 4, 2020 at 10:52 am #265238Your 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.
-
AuthorPosts