Sunday, 27 March 2011

The search box

For the search bar I altered some ajax code that I put into a chunk labeled {{search}}. &addjscript='0' means that no I don't want javascript to be applied to this section and showResults=`0` means that no I don't want the results to be shown. 0=yes 1=no within the code.
The only problem is that the search bar appeared as below so I had to apply some CSS to style how I wanted it to look.
This is the CSS that I used to style the search box.

The most important elements out of this section is the image that provides the background for the search bar. Also I made the font height 100%, which applies to the line height being used to its maximum.
Overflow set to hidden to prevent overlapping of text typed into the box overlapping the search bar. overflow:hidden;
This part is used to style the label 'search' so that everyone knows what it is.
This is to style the text that goes into the search bar.

No comments: