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:
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:
Agencies: http://agency_homeflow_domain.homeflow.co.uk/admin
Portals: http://portal_homeflow_domain.portal.homeflow.co.uk/admin
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:
<title>{{page.page_title}}</title>
<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:
{{current_channel.dictionary.preposition}}This tag outputs either ‘for sale’ or ‘to let’.
{{property.display_address}}This tag outputs the display address - normally a filtered version of the actual address.
A header would probably consist of the agency or portal logo.
In the agency admin, go to Website/Appearance/Logos and upload your logo
In the portal admin, go to Configure/Appearance/Logos and upload your portal logo.
Now in your source, within your header tags or header div tags, add:
Agency:
<img src="{{ agency.logo | url_for_agency_logo }}" alt="{{agency.name}} logo" />Portal:
<img src="{{ portal.website_logo | url_for_portal_logo }}" alt="{{portal.name}}" />To start head over to your agency admin. Reminder: http://agency_homeflow_domain.homeflow.co.uk/admin
Then go to Website/Navigation. From here you can drag in menu items for existing pages or create custom links, e.g. to the /branches page for example. Once you’ve got your primary menu items, you can then edit each one and add sub-menu items.
Here’s a code construct that would retrieve the primary menu items:
{% assign primary_menu = 'primary' | site_menu %}
<ul class="top-level">
{% for menu_item in primary_menu.items %}
<li class="top-level-li">
<a href="{{ menu_item.url }}">{{ menu_item.name }}</a>
</li>
{% endfor %}
</ul>Here’s a code construct that will satisfy a menu dropdown requirement:
<ul class="top-level">
{% assign primary_menu = 'primary' | site_menu %}
{% for menu_item in primary_menu.items %}
<li class="top-level-li">
<a class="navigation" href="{{ menu_item.url }}">{{ menu_item.name }}</a>
{% if menu_item.items != empty %}
<ul class="subnav">
{% for sub_menu_item in menu_item.items %}
<li>
<a href="{{sub_menu_item.url}}">{{sub_menu_item.name }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>###Highlighting the active link
The typical way to achieve this is to assign a category to your menu items and pages via the agency admin. Within your navigation loop, if the page category matches the menu item’s category, then you can add the active:
<a href="{{menu_item.url}}" {% if menu_item.category == page.category %}class="active"{% endif %}>Your first port of call is to head to the carousel section within the agency or portal admin. You can find that under Website/carousel.
Now return to you theme and the home/home.liquid file. This is one place, and a logical one, where we can add our carousel code:
<ul>
{% for item in agency.carousel_items %}
<li style="background-image:url({{item.image | url_for_generic_image}})">
<div class="slide-content">
<h2>
{% if item.link_url != empty %}
<a href="{{ item.link_url }}" class="link_url" title="{{item.title}}">
{% endif %}
{{item.title}}
{% if item.link_url != empty %}
</a>
{% endif %}
</h2>
<p>
{{item.standfirst | truncate: 200}}
</p>
</div>
</li>
{% endfor %}
</ul>Sometimes it doesn’t make sense for everything that is featured on the home page to be in home.liquid. On occasions where we want to include content on the home page but you’d rather add it to application.liquid, you can use the following statement:
{% if page.controller_name == 'home' %}
*content*
{% endif %}And for a handy reference as to what controller is being used, you can add the controller and action as a class to the body tag then inspect the source:
<body class="{{page.controller_name}} {{page.action_name}}">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}};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.
Again, the footer is an area where you can hardcode in your design and content, or you can manage the content using the Agent/Portal admin and the content chunks we have made available. Content chunks are well-known content areas that get used on all sites - e.g. a header, footer, sidebar and so on. If we add some content to the footer chunk we can then render it out.
Agencies: Website/Content
Portals: Configure/Content/Pages
Both content chunk sections are then on the left. Checkout the Site footer chunk, add some filler content for now then save it.
Now, where you want to render the chunk in your source (if it’s the footer then most likely the application.liquid page), use the following code:
{% content_block 'site_footer' %}
{% if content_block %}
{{content_block}}
{% endif %}
{% endcontent_block %}This will render your chunk. Note that you can add HTML syntax into the chunk using the MCE editor.
The Ctesius app can render sidebars automatically once set up. To get up and running with this, you simply add the following line to your application.liquid:
{{page.sidebar}}
The next step is to create the sidebar. To do this, create yourself a sidebars folder under your theme’s directory. Sidebars should follow a consistent naming pattern. Here’s some examples:
_branch_show_sidebar.liquid_branches_index_sidebar.liquid_home_sidebar.liquid_locations_show_sidebar.liquid_pages_show_sidebar.liquid_property_show_sidebar.liquid_property_results_sidebar.liquid_articles_show_sidebar.liquid_valuation_sidebar.liquid_staff_show_sidebar.liquid_users_new_sidebar.liquidNext you need to open your theme’s config.yml and add a sidebars section. You then quote the controller and action for the page in question. For example, the controller for a CMS page that lived under your pages directory would be pages, the action would be show. The controller for a properties index page would be properties, the action index, and so on:
sidebars:
'pages#show' : 'pages_show_sidebar'Once you’ve added these prerequisites, your HTML and content into the sidebar, it should render it on the targeted page. As always when using the YAML file, use consistent spaces for indenting to make sure it doesn’t error out.
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>'
$('#alert_location').html(mess)
});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.