Step 2: Search Box Design - XSitePro Website Design

Home Previous  Next

icon_xsp

Brought to you by XSitePro Website Design Software

professional website design made easy      

 

 

 

Having completed the PHP checks we can now set about designing the search box itself. This is the text box into which a visitor will type their search term, along with a button to trigger the search.

 

 

Tip: Your search box should ideally be designed to compliment your overall site/page design while at the same time standing out slightly – to draw the eye. A search box (particularly on content sites) is often one of the things visitors look for first, so it is helpful if the search box is easy to find.

 

 

Instructions:

 

When you arrive at the Step 2 tab, you will see the following settings:

 

window_site_search_tab2

 

 

On the left of the screen there are a number of settings, controlling the appearance of our search box. On the right of the screen there is a preview area – this shows us the affect of any changes we make to our design, using the settings on the left-hand-side.

 

We can customize the search box appearance using a comprehensive list of settings:

 

 

Search Box Settings:

 

Width (Search Box Width) – This value determines the overall width of your search box, in pixels. This is a very important setting since you may be working within a defined space (such as a left/right panel, for which the widths have been specified, in your page layout settings).

 

Use this control to ensure that the search box fits your page design perfectly. To adjust the width value, simply over-type the existing value in the box, or use the up/down arrows to increase/decrease the width one pixel at a time.

 

 

BG Color (Search Box Background Color) – This color determines the overall background color of the search box. To choose your preferred background color, either type the color right into the color text-box or click the button_application_image_browse button, to the right of the color text-box. This button will launch the Color Picker tool, which you can use to make your color selection. For more information on using the color picker tool, see the Color Picker Selection section in this manual.

 

As you change the color using this control, you will see the preview automatically update, to the right side of your screen, so you can quickly see how your Search Box will look to visitors.

 

Tip: If you are wanting to blend your search box right into a section of your page (perhaps the left/right panel in the Page Layout design, for instance) you could set the background color of your form to exactly that used for your left/right panel as appropriate. This will effectively merge the background of your Search Box into the existing background color, and can give a very neat effect.

 

 

Border (Search Box Border Color) – The Search Box itself has a border line around it, the color of which may be set using this color setting. As with the background color you can set this color by typing directly into the color text-box, or by clicking the button_application_image_browse button, to the right of the color text-box, to launch the Color Picker tool.

 

 

Line Thickness – As well as setting the color of the border for your Search Box you can also set the thickness of this border using this simple control. Click the button_site_search_border_thickness drop-down selector, to the right of the border color text-box. This will bring up a list of values from which you can select the desired border line thickness (from 0 to 5 pixels in thickness).

 

Tip: If you want to remove the border (i.e. not display one at all) simply select a border of zero line thickness (‘0’ in the drop-down).

 

 

Heading Settings:

 

Text (Heading Text) – Your Search Box can feature a small piece of text above it to help visitors to your site identify what this box is for. Remember, many sites also feature text-boxes for capturing names and e-mail addresses so it is generally advised to give the Search Box an appropriate heading to clarify its purpose.

 

Some suitable headings might include:

 

Search

Search this site

Find!

Text Search

Where is?

Jump to...

Quick Search

And so on...

 

 

Font (Heading Text Font) – This drop-down selector enables you to select a specific font in which you would like your heading text displayed. Click the button_site_search_font drop-down selector to make your selection.

 

 

Size – As well as choosing the font, you can specify a size for that font using this font-size drop-down. Click the button_site_search_font_size drop-down selector to make your choice from the available font sizes (6pt to 72pt).

 

 

Style – If you would like to make your heading text bold, italic or underlined simply click the appropriate button – just as you would in a word-processor.

 

button_site_search_font_styles

 

 

Color (Heading Text Color) – Set the color of your heading text using this color control. Enter the name of the color in the text box, or click the button_application_image_browse button, to the right of the color text-box, to launch the Color Picker tool.

 

 

Search Button Settings:

 

Text (Search Button Text) – The search button is of course what actually starts the search for the visitor. You can customize the text label on this button by entering it in this text-box. It’s generally a good idea to keep this label very short. Here are a few ideas:

 

Search

Go!

Submit

Find

 

 

Font (Search Button Text Font) – Just as with our heading text, using this control you can choose a specific font in which you would like your button label text displayed. Click the button_site_search_font drop-down selector to make your selection.

 

 

Size – Specify a size for your button label text using this font-size drop-down. Click the button_site_search_font_sizedrop-down selector to make your choice from the available font sizes (6pt to 72pt).

 

 

Style – If you would like to make your button text bold, italic or underlined simply click the appropriate button.

 

 

button_site_search_font_styles

 

 

Text Color (Search Button Text Color) – Set the color of your button text using this color control. Enter the name of the color in the text box, or click the button_application_image_browse button, to the right of the color text-box, to launch the Color Picker tool.

 

 

BG Color (Search Button Background Color) – The actual search button itself has its own background color, independent of the overall search box background. To change this, type the name of a color directly into the color text-box, or by clicking the button_application_image_browse button, to the right of the color text-box, to launch the Color Picker tool.

 

Note: When specifying the color of your submit button background make sure that the color contrasts sufficiently with the text label on top of it. This will make sure your label is clearly readable to your site’s visitors.

 

 

Border (Search Button Border Color) – The Search Button border color can be set using this control. Specify your preferred color by typing its name directly into the color text-box, or by clicking the button_application_image_browse button, to the right of the color text-box, to launch the Color Picker tool.

 

 

Line Thickness – Using this setting you can control thickness of the border around the search button. Click the button_site_search_border_thickness drop-down selector, to the right of the border color text-box. This will bring up a list of values from which you can select the desired border line thickness (from 0 to 5 pixels in thickness). Remember, to effectively remove the border you can set the thickness to zero pixels, using the drop-down.

 

 

Alignment (Search button Positioning) – This setting gives you five positioning options for your search button:

 

Same Line – Left

example_site_search_box2

 

Same Line - Right

example_site_search_box1

 

Underneath - Left

example_site_search_box3

 

Underneath - Center

example_site_search_box4

 

Underneath - Right

example_site_search_box5

 

Make your choice from the five options by clicking the drop-down selector and selecting your preferred positioning.

 

 

Having customized your search box to your satisfaction, click the button_application_next button to advance to the next step.

Home  Previous  Next