This page is designed for technically experienced designers.

Variables can be placed in templates using the syntax {{ variable name }}.
Basic true or fasle boolean can be used in the form {{ mbDBool (variable name) ? some content to appear when variable is true [[ some variable name ]] }} or {{ mbDBool !(variable name) ? some content to appear when variable is false [[ some variable name ]] }}

Contents


Branding Placeholders

The following placeholders are available for styling the appearance of a template and will be used in the associated CSS.

The Branding placeholders are prefixed with the word “branding.”, e.g.

Example: To style all h1 tags your CSS will contain the line

Colour settings are controlled in the Branding and Appearance menu in the Logo and Colours panel. In edit mode, clicking the input box next to any colour brings up a colour picker. You can use this or enter the 6-digit hex code directly into the input box.

Placeholder Name Use Notes
bodyColour Default text colour Default: #000
defTitleColour Default Title Colour Inherits bodyColour when left blank
sBoxTextColour Search Box Text Colour Default: #f3f3f3
h1Colour H1 font colour Inherits defTitleColour when left blank
h2Colour H2 font colour Inherits defTitleColour when left blank
h3Colour H3 font colour Inherits defTitleColour when left blank
boxBackColour Searchbox Background Colour Default: #4d4e53
boxBackColourLetting Searchbox Background Colour for Lettings Default: #8c8d8e
listingBColour Background colour of the results listing
buttonBackColour Background colour for the carousel buttons and info headers. Inherits boxBackColour when left blank
buttonTextColour Text colour of buttons
hlBackColour Background colour of button on rollover (highlight). Inherits butonBackColour when left blank
lBoxBack Background colour for the pagination and search results control panel. Default: #F7F7F7
lBoxBorder Border colour for the pagination and search results control panel. Default: #AAAAAA

Property Object

Properties of the property object are available as placeholders in all templates concerned with a particular property (search results etc).

Placeholder Name Use
property_id Unique id for the property
firm_id Unique id for the selling agent
primaryImage_id Unique id for the primary image
imagePath Full path to the main property image
houseNo House name or number
streetName Street Name
town Town or City
postcode Postcode
lat Latitude
lng Longitude
mapData Stored set of map data for the google map
askingPrice Asking price (unformatted)
bedRooms Number of bedrooms
livingRooms Number of living rooms
bathRooms Number of bathrooms
lastUpdated unix timestamp for when the property was last updated
letting 1 when the property is to let, 0 when the property is for sale
datecreated unix timestamp for when the property was created
dispAddress Display Address
statusId Seling Status
statusClass class based on the status id, becomes status_status name in lower case (spaces become underscores, eg. status_under_offer)
descText Description text, this contains simple html markup
summaryText Summary Text (Plain text)
outputAskingPrice Formated Asking Price, this contains the currency symbol
formatAddress Full Address
priceTypeLabel Price Type
sqmHouse Internal area in m²
sqmLand External area in m²
featureList Lists as many special features as are present

Homepage Templates

Detail Templates

Placeholders in the detail template are prefixed with “properties.details.placeholderName“, for example:

The following placeholders are used in the default_detail.html template:

Placeholder name Description
priceTypeLabel The price type, e.g. Offers over, Price on Application, etc.
outputAskingPrice The price in figures. Not displayed if price qualifier is POA.
letFrequency If a letting property, the let frequency.
statusId Selling status of the property, e.g. Available, Sold STC, etc.
returnToHome Boolean. Provides a link back to the home page.

Search Results Templates

Search Box Templates

Adding a “Loading…” graphic

Because the BDP content can sometimes take a few seconds to load, it may be desirable to have a loading graphic. This is simple to achieve using the following technique:

Insert an image tag into any of the BDP ID’s and set a minimum-height on the ID in your CSS.

This works because all content inside a BDP div id is replaced by the BDP system. You will see the graphic until such time as the replacement content is ready to be displayed.

Because many sites display the advanced search and home page output or search results one above the other, a useful technique is the wrap the BDP divs in a container which as a min-height set and add the loading graphic to just one div. And example would be:

You can see in the above example that the graphic is coming from the BDP server where we have a number of such loading graphics. You are free to pull the graphic from wherever you like.

Leave a Reply

Your email address will not be published. Required fields are marked *