Search widget

We've created a search widget that you can 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. You can see an example of it embedded in a website here.

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=230&frameHeight=350" width="230" height="350" scrolling="auto" frameborder="no" title="Find local sustainability groups"></iframe>

If your page is using a strict doctype, use the following HTML instead of the above:

<object type="text/html" standby="Loading widget" data="http://www.localpower.org.uk/widget/search/?frameWidth=230&frameHeight=350" width="230" height="350" style="border: 0;" title="Find local sustainability groups"> <p>Your browser does not support this widget.</p> <p>This is an object and it represents data that is also available at <a href="http://www.localpower.org.uk/widget/search/" title="Find your local sustainability groups">http://www.localpower.org.uk/widget/search/</a></p> </object>

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&frameHeight=350&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&frameHeight=350&titleFontSize=0.8&defaultFontSize=0.8

Colours

To change the text colour in the header (white by default), add the headerTextColour parameter to the URL.
To change the main text colour (dark grey by default), add the mainTextColour parameter to the URL.
To change the colour of the links (green by default), add the linkColour parameter to the URL.
To change the background colour of the entire widget (white by default), add the frameBackgroundColour parameter to the URL.