Hestia URLs

Hestia serves up information to the Ctesius app in JSON format. There are a number of well defined URLs you can use to access this data via the browser:

Properties

http://index1.homeflow.co.uk/properties/4631183?api_key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX http://index1.homeflow.co.uk/properties?api_key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&search[place][id]=51e7c4a873dadaf60feee624&[search][channel]=sales

Agencies

http://index1.homeflow.co.uk/agencies/9700/?api_key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Branches

http://index1.homeflow.co.uk/branches/18380?api_key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CMS Pages

http://index1.homeflow.co.uk/sites/401/pages/about-us?api_key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Places/locations

http://index1.homeflow.co.uk/places?api_key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&search[name]=elstead

Nodes

http://index1.homeflow.co.uk/sites/{:site_id}/nodes/?api_key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX http://index1.homeflow.co.uk/sites/{:site_id}/nodes/{:node_id}?api_key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

For staff, see the agencies Hestia URL.

If you are building a standalone app you can use the Homeflow API Gem. Click here for info.

Application Assets

Asset packs can be included in your theme by defining them in the config.yml file, see assets and minify for more details.

JavaScript Packs

ctesius:

Ctesius.js
jQuery.js - v1.9
jquery.colorbox.js
jquery.cookie.js
placeholder.js
underscore.js
leaflet.js
photoStack.js

classic_extra:

html5.js
bootstrap.js - v2.3.2
jquery.cycle.js - v3.0.3
jquery.validate.js
nivo.js

Misc:

Font Awesome

Stylesheet Packs

ctesius:

Ctesius.css
leaflet.css
lightview.css
photoStack.css

classic_extra:

bootstrap.css
nivo.css

Last modified: 09-Apr-15

Social media functions

A function exists that can query the twitter api in order to pull back a number of tweets for an agency. Twitter keys are added in agency admin under website/appearance/preferences section, whilst the agency’s screen name can be set by a member of the Homeflow team. Here’s the code required:

{% if
 agency.twitter_consumer_key != "" or
 agency.twitter_secret != "" or
 agency.twitter_token != "" or
 agency.twitter_screen_name != ""
%}

{% twitter_user_timeline screen_name : agency.twitter_screen_name %}
 {% for tweet in tweets limit: 3 %}
  <p class="tweet">
   <a href="https://twitter.com/{{ agency.twitter_screen_name }}">
    <strong>{{ twitter_user.name }}</strong>
    <span>@{{ agency.twitter_screen_name }}</span>
   </a>
   <span class="tweet_date">
    {{ tweet.created_at | date: "%d %B" }}
   </span>
   {{ tweet.text | auto_link }}
  </p>
 {% endfor %}
{% endtwitter_user_timeline %}

Social media sharing

You can easily add share links to any of your pages for social media with the following snippet:

<aside class="social-share">
    <h2>Share this:</h2>
    <ul>
        <li class="twitter"><a href="https://twitter.com/intent/tweet?url={{ site.url }}{{ page.url }}{% if page.description %}&text={{ page.description | url_escape }}{% else %}{{ page.title | url_escape }}{% endif %}{% if site.twitter %}&via={{ site.twitter }}{% endif %}" title="Share on Twitter">Twitter</a></li>

        <li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}{% if page.description %}&t={{ page.description | url_escape }}{% else %}{{ page.title | url_escape }}{% endif %}" title="Share on Facebook">Facebook</a></li>

        <li class="googleplus"><a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" title="Share on Google Plus">Google+</a></li>
    </ul>
</aside>

Draw a Map base styles

These styles can live in the custom CSS in the agency admin, or indeed in a LCSS file within the theme itself.

/* draw a map */

div.leaflet-left {
    display: block;
}
.mappydelete {
	position: relative;
	top: -15px;
	left: 0%;
	width: 100%;
	height: 50px;
	display: none;
	background: rgba(84, 84, 84, 0.9);
	text-align: left;
	padding-left: 30px;
	padding-top: 15px;
	line-height: 50px;
	border-radius: 4px;
	box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
	color: white;
	font-family:Arial, Helvetica, sans-serif;
}
.mappyedit {
	position: relative;
	top: -15px;
	left: 0%;
	width: 100%;
	height: 50px;
	display: none;
	background: rgba(84, 84, 84, 0.9);
	text-align: left;
	padding-left: 30px;
	padding-top: 15px;
	line-height: 50px;
	border-radius: 4px;
	box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
	color: white;
	font-family:Arial, Helvetica, sans-serif;
}
.mappy {
	position: relative;
	top: -15px;
	left: 0%;
	width: 100%;
	height: 50px;
	display: none;
	background: rgba(84, 84, 84, 0.9);
	text-align: left;
	padding-left: 30px;
	padding-top: 15px;
	line-height: 50px;
	border-radius: 4px;
	box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
	color: white;
	font-family:Arial, Helvetica, sans-serif;
}
.leaflet-top {
	top: 48px;
}
.leaflet-control-title {
    position: relative;
}
.leaflet-touch .leaflet-control-title-interior {
    background-color: #ffffff;
    background-position: -182px 0;
    background-repeat: no-repeat;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    cursor: auto;
    display: block;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    margin-top: 30px;
    padding: 3px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 99px;
}
.leaflet-control-title-interior {
    background-color: #ffffff;
    background-position: -182px 0;
    background-repeat: no-repeat;
    border-radius: 4px 4px 0 0;
    cursor: auto;
    display: block;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    padding: 3px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 99px;
}
.leaflet-help-banner {
    background: none repeat scroll 0 0 rgba(84, 84, 84, 0.9);
    border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    color: white;
    display: none;
    font-family: Arial,Helvetica,sans-serif;
    height: 50px;
    left: 0;
    line-height: 50px;
    padding-left: 150px;
    position: fixed;
    text-align: left;
    top: 0;
    vertical-align: middle;
    width: 100%;
}
.leaflet-draw-draw-freehand-banner {
    background: none repeat scroll 0 0 rgba(84, 84, 84, 0.9);
    border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    color: white;
    display: none;
    font-family: Arial,Helvetica,sans-serif;
    height: 50px;
    left: 0;
    line-height: 50px;
    padding-left: 150px;
    position: fixed;
    text-align: left;
    top: 0;
    vertical-align: middle;
    width: 100%;
}
.leaflet-draw-edit-edit-banner {
    background: none repeat scroll 0 0 rgba(84, 84, 84, 0.9);
    border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    color: white;
    display: none;
    font-family: Arial,Helvetica,sans-serif;
    height: 50px;
    left: 0;
    line-height: 50px;
    padding-left: 150px;
    position: fixed;
    text-align: left;
    top: 0;
    vertical-align: middle;
    width: 100%;
}
.leaflet-control-remove-all-interior a {
    background-color: #ffffff;
    background-image: url("/assets/binsprite.png");
    background-position: -182px 0;
    background-repeat: no-repeat;
    border-radius: 0 0 4px 4px;
    cursor: auto;
    display: block;
    height: 20px;
    padding: 3px 3px 3px 30px;
    position: relative;
    text-align: left;
    top: -20px;
    width: 72px;
}
.leaflet-retina .leaflet-control-remove-all-interior a {
    background-image: url("binsprite-2x.png") !important;
    background-position: -182px 0;
    height: 20px;
    width: 72px;
}
.leaflet-control-remove-all-interior {
    background-color: #ffffff;
    background-image: url("/assets/binsprite.png");
    background-position: -182px 0;
    background-repeat: no-repeat;
    border-radius: 0 0 4px 4px;
    cursor: pointer;
    display: block;
    height: 20px;
    padding: 3px 3px 3px 30px;
    position: relative;
    text-align: left;
    top: -20px;
    width: 72px;
}
.leaflet-retina .leaflet-control-remove-all-interior {
    background-image: url("/assets/binsprite-2x.png") !important;
    background-size: 300px 30px !important;
    height: 20px;
    width: 72px;
}
.leaflet-disabled {
    color: #bbb;
}
.leaflet-disabled:hover {
    background-color: #ffffff !important;
    color: #f4f4f4;
    cursor: pointer;
}
.leaflet-control-remove-all-interior:hover {
    background-color: #f4f4f4;
}
.leaflet-draw-section {
    position: relative;
}
.leaflet-draw-toolbar {
    margin-top: 0;
}
.leaflet-draw-toolbar-top {
    margin-top: 0;
    position: relative;
}
.leaflet-draw-toolbar-notop a:first-child {
    border-top-right-radius: 0;
}
.leaflet-draw-toolbar-nobottom a:last-child {
    border-bottom-right-radius: 4px;
}
.leaflet-draw-toolbar a {
    background-image: url("/assets/spritesheet.png");
    background-repeat: no-repeat;
}
.leaflet-retina .leaflet-draw-draw-freehand {
    background-image: url("/assetsfreehand-2x.png");
    background-position: 8px center !important;
    background-repeat: no-repeat;
    background-size: 15px 15px !important;
}
.leaflet-retina .leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled {
    background-image: url("/assetsedit-2x.png");
    background-size: 300px 30px !important;
    width: 105px;
}
.leaflet-retina .leaflet-draw-toolbar .leaflet-draw-edit-edit {
    background-image: url("/assets/edit-2x.png");
    background-size: 300px 30px !important;
    width: 105px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-freehand.leaflet-disabled {
    background-image: url("/assets/spritesheet-2x.png");
}
.leaflet-draw a {
    display: block;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: -10px;
}
.leaflet-draw-actions {
    display: none;
    left: 26px;
    list-style: none outside none;
    margin-left: 75px;
    padding: 0;
    position: absolute;
    top: 0;
    white-space: nowrap;
}
.leaflet-right .leaflet-draw-actions {
    left: auto;
    right: 26px;
}
.leaflet-draw-actions li {
    display: inline-block;
}
.leaflet-draw-actions li:first-child a {
    border-left: medium none;
    color: #ffffff;
    top: 0;
}
.leaflet-draw-edit-edit .leaflet-draw-actions li:first-child a {
    display: inline-block;
}
.leaflet-draw-actions li:last-child a {
    border-radius: 0 4px 4px 0;
    color: #ffffff;
    display: inline-block;
    top: 0;
}
.leaflet-right .leaflet-draw-actions li:last-child a {
    border-radius: 0;
    color: #ffffff;
}
.leaflet-right .leaflet-draw-actions li:first-child a {
    border-radius: 4px 0 0 4px;
}
.leaflet-draw-actions a {
    background-color: #919187;
    border-left: 1px solid #aaa;
    color: #fff;
    font: 11px/28px "Helvetica Neue",Arial,Helvetica,sans-serif;
    height: 28px;
    left: 4px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    text-decoration: none;
    z-index: 50;
}
.leaflet-draw-actions-bottom {
    margin-top: 0;
}
.leaflet-draw-actions-top {
    margin-top: 1px;
}
.leaflet-draw-actions-top a, .leaflet-draw-actions-bottom a {
    height: 27px;
    line-height: 27px;
}
.leaflet-draw-actions a:hover {
    background-color: #a0a098;
}
.leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
    height: 26px;
    line-height: 26px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-polyline {
    background-position: -2px -2px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-polygon {
    background-position: -31px -2px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
    background-position: -62px -2px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-circle {
    background-position: -92px -2px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-marker {
    background-position: -122px -2px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-freehand {
    background-position: -267px -2px;
    border-radius: 0 !important;
    padding-left: 30px;
    position: relative;
    text-align: left;
    width: 75px !important;
}
.leaflet-draw-toolbar .leaflet-draw-draw-freehand:hover {
    background-position: -267px -2px;
}
.leaflet-draw-toolbar .leaflet-draw-edit-edit {
    background-image: url("/assets/edit.png");
    background-position: -152px -2px;
    margin-top: 5px;
    padding-left: 30px;
    position: relative;
    text-align: left;
    width: 75px !important;
}
.leaflet-draw-edit-edit {
    border-radius: 0 !important;
    position: absolute;
    top: -10px !important;
}
.leaflet-draw-toolbar .leaflet-draw-edit-remove {
    background-image: url("/assets/binsprite.png");
    background-position: -184px 0;
    padding-left: 30px;
    position: relative;
    text-align: left;
}
.leaflet-retina .leaflet-draw-edit-remove {
    background-image: url("/assets/binsprite-2x.png") !important;
    background-position: -182px 0;
    background-size: 300px 30px !important;
    border: medium none;
    box-shadow: none;
    margin-top: -5px;
}
.leaflet-touch .leaflet-draw-edit-remove {
    margin-top: -5px;
}
.leaflet-delete-disabled:hover {
    background-color: #fff;
}
.leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled {
    background-image: url("/assets/edit.png");
    background-position: -152px -2px;
    color: #bbb;
    position: relative;
}
.leaflet-retina .leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled .leaflet-retina {
    background-image: url("/assets/edit- f f2x.png");
    background-position: -152px -2px;
    color: #f4f4f4;
    position: relative;
}
.leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled:hover {
    background-color: #fff;
}
.leaflet-draw-toolbar .leaflet-draw-edit-edit:hover {
    background-color: #f4f4f4;
}
.leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled {
    background-image: url("/assets/binsprite.png");
    background-position: -184px 0;
}
.leaflet-mouse-marker {
    background-color: #fff;
    cursor: crosshair;
}
.leaflet-draw-tooltip {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    display: none;
    font: 12px/18px "Helvetica Neue",Arial,Helvetica,sans-serif;
    margin-left: 20px;
    margin-top: -21px;
    padding: 4px 8px;
    position: relative;
    visibility: hidden;
    white-space: nowrap;
    z-index: 5000;
}
.leaflet-draw-tooltip:before {
    border-bottom: 6px solid transparent;
    border-right: 6px solid rgba(0, 0, 0, 0.5);
    border-top: 6px solid transparent;
    content: "";
    left: -7px;
    position: absolute;
}
.leaflet-error-draw-tooltip {
    background-color: #f2dede;
    border: 1px solid #e6b6bd;
    color: #b94a48;
}
.leaflet-error-draw-tooltip:before {
    border-right-color: #e6b6bd;
}
.leaflet-draw-tooltip-single {
    margin-top: -12px;
}
.leaflet-draw-tooltip-subtext {
    color: #f8d5e4;
}
.leaflet-draw-guide-dash {
    font-size: 1%;
    height: 5px;
    opacity: 0.6;
    position: absolute;
    width: 5px;
}
.leaflet-edit-marker-selected {
    background: none repeat scroll 0 0 rgba(254, 87, 161, 0.1);
    border: 4px dashed rgba(254, 87, 161, 0.6);
    border-radius: 4px;
}
.leaflet-edit-move {
    cursor: move;
}
.leaflet-edit-resize {
    cursor: pointer;
}
.leaflet-oldie .leaflet-draw-toolbar {
    border: 3px solid #999;
}
.leaflet-oldie .leaflet-draw-toolbar a {
    background-color: #eee;
}
.leaflet-oldie .leaflet-draw-toolbar a:hover {
    background-color: #fff;
}
.leaflet-oldie .leaflet-draw-actions {
    left: 32px;
    margin-top: 3px;
}
.leaflet-oldie .leaflet-draw-actions li {
    display: inline;
}
.leaflet-oldie .leaflet-edit-marker-selected {
    border: 4px dashed #fe93c2;
}
.leaflet-oldie .leaflet-draw-actions a {
    background-color: #999;
}
.leaflet-oldie .leaflet-draw-actions a:hover {
    background-color: #a5a5a5;
}
.leaflet-oldie .leaflet-draw-actions-top a {
    margin-top: 1px;
}
.leaflet-oldie .leaflet-draw-actions-bottom a {
    height: 28px;
    line-height: 28px;
}
.leaflet-oldie .leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
    height: 27px;
    line-height: 27px;
}

/* End draw a map */

Theme Colours

Here is a list of the configurable colours which are available, these can all be used in your themes css to allow colours to be customizable.

Find out how to configure your theme to use these colours here.

####Main Colours Primary colour: The main colour used by your agency. It is generally a bold colour, and probably the most dominant in your logo. It will most often be used for large areas of colour and text headings.

Primary tint colour: A light tint of your primary colour, used for accenting and background areas.

Accent colour: This complements your primary colour, and may be used sparingly within themes for borders and highlighting.

Accent tint colour: A light tint of your accent colour, used for backgrounds and shading.

Primary text colour: This is the colour that most text uses on the site.

Accent text colour: Standard links and accented text takes this colour.

####Headers Header text colour: Enter a colour to set as the text colour for the main headers on the site. i.e H1 tags.

Sub header text colour: Enter a colour to set as the text for the smaller headers on the site. i.e H2, H3 or item headers (these can vary from theme to theme).

Site header background colour: Enter a colour to set the background colour for the header of the site.

####Navigation Navigation primary background colour: This is the main background colour for the navigation items of the site.

Navigation primary tint background colour: This is a tint of the primary navigation colour which could be used for rollovers.

On navigation primary text colour: If there is a colour that looks good on your navigation primary colour use it here.

On navigation primary tint text colour: If there is a colour that looks good on your navigation primary tint colour use it here.

Secondary navigation text colour: If the theme supports it - you can set a colour for the secondary navigation text here.

####Body/background Site Background colour: You can set the background colour for the whole site here.

Content background colour: This will set the background colour of the main content body of the site.

Carousel and summary background colour: Pick a colour to set the main carousel and property summary backgrounds of the site.

On carousel and summary text colour: Pick a colour to set for the main carousel and property summary background text.

Sidebar pod background colour: Set this colour to override the default background colour for the sidebar pods on the site.

On sidebar pod text colour: Set to override the colour of the text for the sidebar pods.

####Buttons Button primary text colour: You can set the main button colour here.

Button text colour: Choose a colour that looks good on your buttons for the text.

Button tint colour: If the theme you have chosen supports this field then you can set the tint colour for your buttons here.

Button tint text colour: Choose a colour that looks good on the hover overs for your buttons for the text.

####Footer Footer colour

On footer text colour

####Alternatives: On primary text colour: If there is a colour that looks good on your primary colour choose it here.

On primary tint text colour: If there is a colour that looks good on your primary tint colour choose it here.

On white heading text colour: This defaults to your primary colour, but to use an alternative colour select it here.

Grey alternative colour: Some themes use shades of grey for background shading and minor detail. Select an alternative colour here.

On accent text colour: If there is a colour that looks good on your accent colour then choose it here.

On accent tint text colour: If there is a colour that looks good on your accent tint then choose it here.

You can also set up to 10 custom colours if your require an options which we dont provide.