JavaScript add-ons/widgets

Event search

To add an event search box to your website simply add the following to any website page.

Live demo

For an example of this search box in action see our demo site.

1. The search box code

            <form action="http://www.yourwebsite.com/search" method="get" class="ls-search-form-mini">
                <input name="q" type="text" class="ls-text-input" />
                <span><input type="submit" value="" class="website-button ls-search-button" /></span>
            </form>
        

2. The Css code

This is just a sample of the Css code you may need. The result is what you can see on our demo site. The search image referred to in this Css code is attached below.

.ls-search-form-mini .ls-text-input {
	border: 1px solid #CCCCCC;
	border-right:none;
	padding: 4px;
	width: 195px;
	font-family:Helvetica,Arial,Sans-Serif;
	font-size:9pt;
	height:14px;
	vertical-align:top;
	-webkit-appearance: none;
	-webkit-border-radius:0px;
	*margin-top:-1px;
	*display:inline;
	*zoom:1;
}

.ls-search-form-mini span {
	border: 1px solid #CCCCCC;
	border-left:none;
	display:inline-block;
	vertical-align:top;
	*display:inline;
	*zoom:1;
}
						
input.ls-search-button {
	background-image: url("../images/search.png");
	background-position:center center;
	background-repeat:no-repeat;
	height: 22px; 
	width: 22px;
	background-color:#ffffff; 
	border:none;
	vertical-align:top;
	-webkit-appearance: none;
	-webkit-border-radius:0px;
	*display:inline;
}
        

You can use the search.png