Getting started
Intro to creating custom templates and themes in the DevHub platform
Last updated
Intro to creating custom templates and themes in the DevHub platform
Last updated
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: https://jinja.palletsprojects.com/en/3.0.x/templates/
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.
Would render as:
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.
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.
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"
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.
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:
Would render as:
