At this point we can start to think about the elements that will be consistent to every page and those that will just reside on the home page. Those that are consistent to every page need to reside in the application.liquid file and would probably include:

  • Page titles and descriptions
  • The header
  • The navigation menu
  • The footer

Page titles and descriptions

The Homeflow API allows you to fully customise your page titles and descriptions; not only for the home page but for other categories of page as well.

To configure your home page and main titles, you will need to take a first foray into the Agency/Portal admin. To do this you use a link similar to the two links outlined before:


We’ll assume you have been provided with your login.

Now head to /configure/website/appearance/titling. It should be fairly self-explanatory from here.

To publish the titles and keywords to your theme, all you need do is add the following Liquid tags between the normal HTML tags in your application.liquid source:

<meta name="title" content="{{page.page_title}}" />
<meta name="description" content="{{page.page_description}}" />

Homeflow has a general fallback for each category of page should you not opt to customise the wording. Should you want to customise your titles and descriptions, head to: /configure/website/content/content/list. If you scroll down you will see the various chunks available for the different categories of page. A typical property details page title could be:

{% unless property.bedrooms == 0 %}
  {{property.bedrooms}} bedroom
{% endunless %}
property {{current_channel.dictionary.preposition}} in {{property.display_address}}

This might output something like: 3 bedroom property for sale in Temple Street, Brighton. A couple of other tags are:


This tag outputs either ‘for sale’ or ‘to let’.


This tag outputs the display address - normally a filtered version of the actual address.

Custom theme colours

By navigating to your admin area, then following this link: /configure/website/appearance/colours, you can specify custom theme colours that you can then query in your CSS.

color: {{theme_preferences.primary_colour}};

  • {{theme_preferences.primary_colour}};
  • {{theme_preferences.primary_text_colour}};
  • {{theme_preferences.accent_colour}};
  • {{theme_preferences.accent_text_colour}};
  • {{theme_preferences.accent_tint_colour}};
  • {{theme_preferences.header_background_colour}};
  • {{theme_preferences.navigation_primary_background_colour}};
  • {{theme_preferences.on_navigation_primary_text_colour}};
  • {{theme_preferences.footer_colour}}
  • {{theme_preferences.on_footer_text_colour}};
  • {{theme_preferences.site_background_colour }};
  • {{theme_preferences.button_primary_colour}};
  • {{theme_preferences.button_text_colour }};
  • {{theme_preferences.on_white_heading_text_colour}};
  • {{theme_preferences.custom_colour_x}};

CSS pre-processors

At the time of writing, the Ctesius app supports the LESS CSS pre-processor. To get up and running with LESS, simply add your CSS file with the lless extension to your theme’s CSS folder.You can then bring it into the theme and have it processed using the following line:

{{ "stylesheet_name" | theme_less_stylesheet_link_tag }}

If you would like to use SASS or another compiler, there is nothing to stop you running your compiler of choice locally, whilst configuring it to generate an LCSS file which is then pushed to the repo and referenced in your theme.

Flash messages

Flash messages are used to provide feedback to the user after some event. Flash messages include lead send success or failures, user registrations, valuation leads sent and so on.

In its basic form, you have an empty div ready to be populated with a message:

<div id='alert_location'></div>

An event and callback function is then registered to populate the container:

Ctesius.registerEvent('redirection_flash_ready', function(message, type){
 var mess = '<div class="alert alert-'+type+'">
            <a class="close" data-dismiss="alert">×</a>'+message+'</div>'

Note that you have access to the message contents and type, as well as full control over the position of the div, its styling and behaviour.