Support us

You are here: Home » Widget

Search widget

Widget exampleWe've created a search widget that you can easily add to your own website with as little as one line of code. No programming knowledge is required. You can customise the widget to suit the style of your own site if you wish, or just use the default style, as shown opposite.

If the page in which you want to add the widget uses a transitional XHTML doctype (check the first line of the HTML), insert the following line of HTML where you want to place the widget:

<iframe src="http://www.localpower.org.uk/widget/search/?frameWidth=240&amp;frameHeight=410" width="240" height="410" scrolling="auto" frameborder="no" title="Search widget for finding your local sustainability groups"></iframe>

The above is the recommended way to embed the widget. If your page is using a strict doctype, either change the doctype to transitional (better), or use the following HTML instead:

<!--[if IE]>
<iframe src="http://www.localpower.org.uk/widget/search/?frameWidth=230&amp;frameHeight=350" width="230" height="350" scrolling="auto" frameborder="no" title="Search widget for finding your local sustainability groups">
<p>Your browser doesn't seem to support this widget</p></iframe>
<![endif]-->
<!--[if !IE]> <-->
<object type="text/html" standby="Loading widget" data="http://www.localpower.org.uk/widget/search/?frameWidth=230&amp;frameHeight=350" style="width: 230px; height: 350px; border: 0;" title="Search widget for finding your local sustainability groups">
<p>Your browser doesn't seem to support this widget</p></object>
<!--> <![endif]-->

Styling the widget

You can change various styles of the widget, including its dimensions, font, text size and colours. If you're using the longer of the two code fragments above, you'll need to make any style changes to both the <iframe> and <object> tags. You can use any of the style parameters in combination with each other.

Dimensions

To change the dimensions of the widget, change the corresponding frameWidth/width and frameHeight/height parameters in the above HTML. Note that frameWidth must have the same value as width, and frameHeight must have the same value as height.

Font

You can change the widget's base font by adding a fontFamily parameter to the end of the LocalPower URL. For example, to change the font to Rockwell, you would use the following URL in the above code fragments:

http://www.localpower.org.uk/widget/search/?frameWidth=230&amp;frameHeight=350&amp;fontFamily=Rockwell

Text sizes

By default, the text size of the title is 0.75em and the rest of the text is 0.7em. To change these values, add the titleFontSize and defaultFontSize parameters to the end of the LocalPower URL (omitting the 'em' units, which are automatically added). For example:

http://www.localpower.org.uk/widget/search/?frameWidth=230&amp;frameHeight=350&amp;titleFontSize=0.8&amp;defaultFontSize=0.8

Colours