DevHub Docs
  • Welcome
  • Analytics
    • What events are tracked automatically?
    • Custom events
    • Google Analytics
  • API documentation
  • Domains
    • Registering a new domain
    • Renewing a domain
    • Pointing an existing domain
    • Pointing a subdomain of an existing domain
    • Transfer a domain
      • Transfer a domain to another registrar
    • Validating your domain
      • Validate with Google Webmaster Tools
    • Domain expiration process
  • Email accounts
    • Hosted email (rackspace)
      • Configure email clients to use POP or IMAP
  • Forms
    • Form and field options
    • Using fieldsets
    • Spam filtering
    • Configure SMTP For outbound emails
    • Using Marketo forms
  • Google Sheets
  • Hosting options
    • Embed pages
    • Wordpress plugin for path override
    • Server path override
      • Apache configuration
      • IIS configuration
      • NGINX configuration
    • CDN (content delivery network) support
  • Maps
    • Location finder
    • Map options explained
    • Google Maps API keys
  • Privacy
    • OneTrust integration
    • Cookies
  • Reverse proxy
    • Privacy and security
    • Proxy Configuration
    • Proxy Gating
    • Form lead tracking
    • Blocking and Whitelisting
      • Whitelisting Options
      • Google Ads rejections or disapprovals
      • 3rd Party Services/Widgets
      • Common Security System Restrictions or Domain Errors
  • SEO
    • Schema.org support
    • Sitemap XML
    • Enable No Index
  • Site builder
    • Getting Started
    • Images and video
    • Pages and content
      • Using page drafts
      • Adding Text
      • Adding and Managing Pages
      • Adding Images
      • Page templates and Templated pages
      • Maps
    • Redirects
    • Site Settings
    • Style Options
    • Adding a Business and location
    • Adding a site
    • Adding a user
    • Adding Custom Forms
    • Adding HTML to Sites or Pages
    • Blogs
  • SSL and security
    • SSL Troubleshooting
    • SSL certificate install options
      • Use your own purchased SSL certificate
    • Enable HTTPS for Sites and Proxies
  • Support
    • Creating a Zendesk account
    • Ticketing submission workflow
    • Builder URL and Site ID
  • Themes and custom templates
    • Getting started
    • Using macros
    • Using custom fields
    • Using URL parameters
    • Hours of operation
    • Using date and time in templates
    • Template variables
    • Site Builder Markup
      • Avoiding Site Builder CSS and HTML duplication
    • Example themes
      • Location focused page with bootstrap
      • Store locator theme example
    • Advanced Examples
      • Theme module templates
      • Static Google maps
      • Content translations
      • Page navigation
      • Override page title and meta tags
      • Adding line breaks to content
      • Get objects
      • Handling boolean values
      • Right to left languages
      • Access current URL
      • Social sharing links
      • Standard filters
      • Serializing data to JSON
      • Form events
      • Schema.org FAQ utility
  • Trace technology
    • What is Trace?
    • Configuration options
  • Data Sources
    • External Contexts
Powered by GitBook
On this page
  • HTML templating
  • Example accessing a Site's URL:
  • Theme vs Page
  • Creating a theme
  • Editing your theme
  • Theme editor
  • Macros
  • Example accessing a Site's URL

Was this helpful?

  1. Themes and custom templates

Getting started

Intro to creating custom templates and themes in the DevHub platform

PreviousBuilder URL and Site IDNextUsing macros

Last updated 3 years ago

Was this helpful?

HTML templating

Our themes, modules and templates are powered by a templating language called Jinja. This templating language supports variables, loops, if/else conditionals and much more that can be used to build dynamic experiences within the platform.

You can explore the official documentation and examples of Jinja here:

We have various variables that are automatically available within the rendering context of Jinja so you can access attributes easily for the current Site, Business, Location or the other objects with our system.

Example accessing a Site's URL:

<p>{{ site.formatted_url }}</p>

Would render as:

<p>https://www.example.com/</p>

Theme vs Page

Theme - This is the site-wide layout that encompasses and surrounds each of the individual page's content. This normally includes the header and footer that is displayed on each page of the site.

Page - This is the individual content added to a page within the Site - It contains Rows, Columns, and the various Modules/Widgets you have added to the page.

Creating a theme

Within the Site Builder, you can create a new theme under "Themes > New theme".

You will then be presented with two options:

  • Create blank theme - This option will start you off fresh with an empty theme with the latest features enabled. This gives you full access to the HTML and CSS and does not have any CSS grid library included.

  • Create child theme - This option allows you to create a Child theme, which extends the current theme. Your new theme will share parts of the Parent theme. Note: this option replaces the older "Save current theme" option when creating a simple custom header/footer custom template with Bootstrap styling.

Editing your theme

After you have created your Theme, you have two ways to access the Theme editor while you are working.

  • Quick access to edit the theme from the top editor bar by clicking the "code" icon next to the Device views

  • Under "Themes > Edit this theme"

Theme editor

  • CSS - All the CSS for the template

  • Header code - Code that is placed within and at the bottom of the HTML <head> tag. Contains fonts, custom meta tags, etc

  • Footer code - Code that is placed within and at the bottom of the HTML <body> tag. Contains non-visual code like javascript

  • Header template - The HTML template for the Header of the template

  • Footer template - The HTML template for the Footer of the template

  • Modules - Custom HTML templates for various module templates. Includes things like the blog subpages or the location directory pages.

  • Edit options - Edit the Theme name, configuration options and advanced functionality

After you make updates to the Theme, click "Save theme". After you save, you can close the Theme editor using the close icon. This will refresh the Site Builder and display your changes.

Tip: If you have the Theme editor open in one tab, and a Preview URL open in another, you can "Save theme" and then immediately refresh the Preview URL in the other tab to see the latest updates.

Macros

In addition to accessing values using Jinja syntax, we also expose a list of variables as macros (or shortcodes) that can be used.

These values can use used in your templates, but also can be used in all the other places within the platform including page titles, page names, content blocks and other areas where you can't normally add full Jinja templating logic.

You can find a full list of these macros below:

Example accessing a Site's URL

<p>${formatted_url}</p>

Would render as:

<p>https://www.example.com/</p>

Using macros
https://jinja.palletsprojects.com/en/3.0.x/templates/