Sign In Here

Login Problems?

Create a new account

Customising Output

The appearance of the property search box and listings in your website is controlled by the BDP software server. We provide default templates for all output which you can modify or scrap completely and use your own. Follow the guidelines below to get started.

Note that we use a CSS Reset style sheet on al BDP elements so that any style commands in your website's own CSS will not affect the BDP output. You must set styles for the search box, detail output and other BDP elements in the BDP system.

To get started, click the Branding and Appearance menu item in the BDP back-end.

BDP outputs the following items:

  • An advanced search box
  • A basic or minimal search box
  • A list of featureed properties in either an expandable list or a carousel
  • A summary list of search results
  • A property detail page

These items are described more fully below.

The appearance of all of these elements is controlled by the combination of a template and a style sheet (CSS). The default templates included in the BDP software provide a simple layout containing all the essential features. The Style Sheets use placeholders for the main colours so that if you choose to use the default templates, so long as you select your website's main colours in the Logo & Colours widget, the BDP output will be customised with your colours.

So the first panel to go to in the Branding and Appearance section is Logo & Colours.

Logo & Colours

In this panel you are asked for:

Your logo, which will be used in branding emails sent to anybody enquiring about a property or using the Send to Friend feature.

Icon set. These are the icons that represent bedrooms, bathrooms, etc. in the summary panel. Currently we have a simple grey icon set but this will be expanded in the near future.

Default text colour. This is the colour for all standard text and links.

H1, H2 and H3 colours. These are for the three levels of heading.

Box colour sales and box colour lettings. These are the background colours for the sales and lettings search box. This is the advanced, or main search box. You can have different colours for your sales tab and your lettings tab.

Button bg colour. This is the colour of the buttons in the main or advanced search form.

Highlight back colour is the button rollover-state background colour.

Light box back is the background colour of the box displayed above the search results listing that contains the pagination, listing sort controls, etc.

Light box border is the colour of the border of the box described above.

Homepage Template

We offer two default layouts for including feature properties in your home page. These are either

  • A row of thumbnails with a control to extend downwards to a second and third line
  • A carousel with left and right arrows

Which one of these is displayed is decided by the selection you make in the drop-down box in the Homepage widget, Outer Template.

Regardless of which display format you select, you can control the size and quality of the thumbnails output via the Thumbnail Size input box. The format is:

w=225&h=185&q=75

  • The 'w' parameter is the width of the thumbnail in pixels.
  • The 'h' parameter is the height of the thumbnail in pixels.
  • The 'q' parameter is the quality of the thumbnail. We recommend a quality of more than 70 but less than 90 in order to reach the best compromise between file size and sharpness.

Note that there must not be any spaces in this line and you need to follow the convention precisely or it will not work.

The next select field is Inner Template. This controls the layout of the individual thumbnail within either the expanding list or carousel. The only difference between Layout 1 and Layout 2 is that in the opaque bar along the bottom of the thumbnail Layout 1 displays the Town field then the price, whereas Layout 2 displays the Display Address field then the price.

The next selet box is for the Style Sheet (CSS). Select either Expanding list or Carousel depending on which format you have chosen above. This will ensure that the appropriate styles are loaded.

You are free to upload your own templates and style sheets for all items output by BDP. For more in-depth descriptions and technical information please visit the wiki and http://wiki.bdphq.com

Main Search Box

This widget controls the output of the main or advanced search box. This search box is usually inserted on the home page and/or above the search results listing and it allows for a basic text search, an advanced search using sliders to change key parameters, and a map search.

Currently there are three available layouts for this search box:

  • A default, slimline and basic layout,
  • A mid-sized search box
  • An over-size box

The appropriate style sheet can then be selected.

Sidebar Search Box

The sidebar search box is a "mini" search usually put on the property detail page. It contains a free-text input box, sliders for price and number of bedrooms and property type.

There is only one template and CSS provided for this search box. The CSS picks up the colours specified in the Logo and Colours panel.

Search Results List

This is the listing of property thumbnails and basic details returned with any search.

The output of this list is controlled by two separate files:

  • default_sres_outer.html and
  • default_sres_inner.html

The outer file controls the pagination boxes on the top and bottom of the list and the inner file controls the output of each individual summary block.

The overall style of this section is controlled by a single style sheet: default_sres_output.css

There is the option to choose an alternative inner template and style sheet which provides for a slightly different layout of each property summary block in the results list, including a drop shadow around each thumbnail image.

Property Details Page

This page is used to display the full details of a property. It comprises the address and price in the headline, the summary, key facts, key features, full description and photos. There is currently one default template and three alternative style sheets.

Also in this section:

EPC thumbnails. The Energy Performance Certificate is under the full description in the default template and is displayed as a thumbnail which can be clicked to show the full-size EPC in a lightbox. You can control the width and height of the thumbnail by altering the parameters.

Large image. The pixel dimensions and quality of the large image can be controlled by changing the parameters. See Homepage Template above for a description of the parameters and how to change them.

Carolusel thumbnails. This parameter controls the pixel dimensions and quality of the thumbnails in the carousel below the main image.

Show Send Friend. When this is ticked a Send to Friend link is shown in the side menu. Clicking this brings up a lightbox with a form to fill in with basic details. This will email a link to the property to a friend. There is one default template for this feature.

Show Enquire About Property. Like Send Friend this is a basic property enquiry form which displays in a lightbox. This link will be available in the side menu below the Send to Friend link.

Show Home Report. Agencies in Scotland are required to make a Home Report available. Tick the box to activate this feature if required.

Letting Disclaimer. If you have a standard disclamer enter the text here and it will display at the bottom of every property detail page.

Sale Disclaimer. If yoiu have a standard sale disclaimer enter it here and it will display at the bottom of every detail page.

Customising output

Whilst BDP provides standard templates for all output you are by no means obliged to use these. If you wish to use a custom template and/or custom CSS for any output you can tick the "Use custom template" box below the relevant item and click your cursor in the input box. This brings up an editor window where you can input the code for your custom template or CSS. Clicking the "Load template code" link at the top of this editor window loads the default code into the editor to assist in customising.

We recommend loading up all the template code and copying into the editor of your choice in order to edit. You can then make any changes and paste it back into the editor wiindow when ready.

More in-depth detail can be found in the wiki and http://wiki.bdphq.com

Map Search

The map Search control box allows you to set a default zoom and centre point for the map search dialogue on the front of your website. When the Map Search button is clicked and the search box expands to reveal the map, the centre point and zoom level yoiu set here is used.

The Jigsaw icon may be used to automatically zoom and centre the map to fit all your current property markers.

Once you have set the centre and zoom, click the save icon.