Customizing Templates

This chapter is for designers and developers. A template is a folder of HTML and CSS files in templates/; no PHP is needed to change the design.

Files of a template

File	Purpose
template.html	The page frame used by every page: the <head>, header, menu, footer and the <site content/> tag where each page's content goes.
home_page_template.html	The home page sections: featured and latest listings, categories, locations.
search_form.html	The home page search (classic and AI tabs), shown through the <site search_form/> tag.
search_results.html	Search results, category and location pages.
listing_details.html	The business listing page.
css/	The stylesheets. Business uses one file, main.css. The other templates use base.css for the shared components and theme.css for their own design, with the colors and fonts as CSS variables at the top of theme.css.
theme.json	Name, author, version, description and options of the template.
preview.jpg	The picture on the template's card in the Template Manager (about 800 × 560 pixels).

Other pages (contact, login, add listing, map…) are produced by extension files and styled by the template's CSS, so they automatically follow the template's colors.

Site tags

Site tags are replaced by generated content. The most important ones are:

Tag	Output
<site title/>, <site description/>	The page title and meta description.
<site content/>	The content of the current page.
<site menu/>, <site mobile_menu/>, <site bottom_menu/>	The main menu, the phone menu and the footer menu.
<site logo/>, <site favicon/>	The logo (image or text) and the favicon.
<site languages_menu/>, <site lang_code/>	The language links, and the current language code.
<site template_url/>	The address of the template folder, for CSS and image links.
<site search_form/>	The home page search form (a custom tag).
<site login_links/>, <site latest_news/>	Register and sign-in links (or user panel links when logged in), and the latest news (custom tags).
<site social_media/>	Icons for the social profiles entered in the settings.
<site search_hidden_fields/>, <site search_keyword/>, <site search_location/>	For a search form in the header: the hidden fields it needs and the current search values.
<site company_name/> and similar	Company information from the settings.
<site theme_styles/>	CSS variables from the Appearance settings, for templates of your own. (When "Apply these colors and fonts to the template" is on, the overrides are added automatically.)
<site top_banners/>, <site sidebar_banners/>	The banner areas with the Home page and Sidebar positions. Footer areas are placed above the footer automatically.
[BANNER_AREA_1]	One banner area by its number, in a template or in a page's content.
{ad_header_ad}, {ad_sidebar_top}, {ad_sidebar_bottom}, {ad_article_top}, {ad_article_bottom}, {ad_footer_ad}	The ad zones. Without a header or footer tag in the template, those two zones are placed after the header and before the footer.

The full list, including your own custom tags, is shown at the bottom of Extensions › Custom Tags.

Texts and links

• {{ m_key }} is replaced by the interface text with that key in the visitor's language, for example {{ m_list_your_business }}. Use this instead of writing English text in the template, so the template works in every language.
• {{ link_new }} and similar tags produce the address of a page in the current language, with or without SEO URLs.

Placeholders and repeating blocks

The home, results and listing files use placeholders in curly braces, filled in by the software, and comment markers around parts that repeat or can be removed:

<!--listing_item-->
<article class="card {listing_featured_class} {listing_rating_class}">
  <a href="{listing_url}"><img src="{listing_image_url}" alt="{listing_title}"></a>
  <h3><a href="{listing_url}">{listing_title}</a></h3>
  <p>{listing_excerpt}</p>
  <span>{listing_rating_stars} {listing_rating_value}</span>
  <a href="tel:{listing_phone}">{listing_phone}</a>
</article>
<!--end_listing_item-->

• The block between <!--listing_item--> and <!--end_listing_item--> is repeated for each listing.
• {listing_featured_class} becomes is-featured for featured listings, and {listing_rating_class} becomes has-rating or no-rating, so you can style them differently.
• Other listing placeholders include {listing_category}, {listing_address}, {listing_location}, {listing_latitude}, {listing_longitude}, {listing_reviews_count} and {featured_text}.
• Sections wrapped in <!--categories_block--> or <!--locations_block--> are removed when the matching home page section is switched off in the settings.
• The search form can use {home_background_url} (the home page photo) and {map_markers_json} (the businesses for a map).
• The listing page offers {listing_cover_image}, {listing_cover_class} and {listing_phone_text} for designs with a large cover photo.

theme.json

{
  "name": "City Guide",
  "author": "NetArt Media",
  "version": "6.1",
  "description": "Editorial city magazine: masthead header, …",
  "home_listings": 4
}

home_listings sets how many listings each home page section shows, so that a layout with rows of four (or rails of eight) is always filled.

Editing templates from the admin panel

In Website › Templates, Edit HTML opens the template's files in a code editor with syntax highlighting. The template folder must be writable on the server. For bigger changes, edit the files on your computer and upload them with FTP.

Creating your own template

1. Copy the folder of the template closest to your idea, for example templates/business to templates/mybrand. Use lowercase letters, digits, hyphens or underscores for the folder name.
2. Change the name and description in theme.json and replace preview.jpg.
3. Change the HTML and CSS.
4. Open Website › Templates; the new template has its own card. Use Preview to check every page type (home, search, category, listing, add listing, login, contact, map) on a computer and a phone, then Activate it.