Search box

Search box is where you prompt your users to search. It looks similar to the image below. ExpertRec provides basic customization features in UI Customization->Look and Feel. If you wish to make finer changes, navigate to UI Customization->Advanced->Search Box.

Here are all the fields that you can control-

1. Height– mention a value in em,px, %, vh (example – 30px, 30em, 30%, 30vh)
2. Padding– Inner margin of the search box. (example – 30px, 30em, 30%, 30vh)
3. Font size– Search text font size.
4. Color– Color of the outline (if border not specified) – can take hex values and values like red, blue, etc.
5. Border radius– will make the search box look more round.
6. Margin– Outer margin from the nearby elements.
7. Outline color– Color of the outline if specified.
8. Font weight for search text and placeholder.
9. Border.– Specify in the format solid 1px red Type of border – width of the border – color of the border
10. Width- Width of the search box.
11. Custom CSS- If you are a developer you can add CSS code to this section.  (For example- background:red).

Search button styling- These changes apply to the search button which looks like this

You can control the following features-

1. Font size ( Size of the icon/text you use)
2. Background color/image (You can specify a background color or image URL in this place).
3. Border Radius
4. Width
5. Height
6. Color
7. Border
8. Padding
9. Margin
10. Custom CSS.

Input box container- These changes are applied to the container of the search box.

You can control the following properties-

1. Width
2. Padding
3. margin
4. Custom CSS

Other properties-

1. Placeholder text– Text displayed inside the search box (example- Search here)
2. Search button icon/text– you can use font awesome icons here.