• ♡ Sponsor

    theme.json

    #Theme

    Every theme needs a theme.json to work. As mentioned before, all subdirectories of the packages directory containing a theme.json side by side with at least one template are to be considered as valid themes. Please see the list below for all required fields.

    Fields

    name
    The name of the theme
    description
    A short description of the theme
    author
    The author's name
    version
    The version of the theme follwing the semantic versioning convention
    license
    The theme's license
    masks
    Masks can be defined to hide variables from either the page or shared settings sections. Take a look at the Light theme or the example below for more details.
    tooltips
    An object of tooltips for every variable used in the theme. Tooltips show up when hovering a variable's field in the dashboard when editing page data.

    Example

    The included Light theme provides a good example for a theme.json file and can be used as template for your own project:

    {
        "name": "Light",
        "description": "A light and elegant multi-purpose theme",
        "author": "Marc Anton Dahmen",
        "version": "1.5.4",
        "license": "MIT",
        "masks": {
            "page": [
                "formatDatePost",
                "formatDateProject",
                "imageAppleTouchIcon",
                "imageFavicon",
                ...
            ],
            "shared": [
                "+main",
                "text",
                "textTeaser"
            ]
        },
        "tooltips": {
            "+main": "The main content block area",
            "brand": "The brand HTML, SVG or text to be used as logo",
            "checkboxHideFilters": "Hide the filter button",
            "checkboxHideFiltersAndSort": "Hide filter and sorting buttons",
            "checkboxHideInMenu": "Hide this page in the main menu",
            "checkboxHidePrevNextNav": "Hide the prev/next navigation at the bottom",
            ...
        }
    }
    
    

    Related

    Developer Guide  ⁄
    Building Themes — Developer Guide

    Themes are an essential part of a content management system. They define the way your content is presented to the visitors of your website. Automad's flexible and intuitive template language enables also inexperienced developers or beginners to create themes and templates on ...

    Building Themes  ⁄
    Template Language — Building Themes

    Automad's template language provides a flexible and safe way to render content dynamically. In contrast to other generic template engines, the Automad core functions are integrated into the engine. That includes such things as image processing as well as a the access to an even ...

    Building Themes  ⁄
    Block Layouts — Building Themes

    Aside from just stacking blocks on top of each other, Automad's block editor provides some handy features to create flexible layout directly in the block editor. It is possible to stretch a block to the full with of the parent container to make it stand out as well as to arrange ...

    Building Themes  ⁄
    Customizing Blocks — Building Themes

    Most of the blocks only consist of pure HTML tags without classes and just inherit theme styles when being displayed. However the default styling of more complex blocks like the mail form or the gallery block might not be matching a theme out of the box. You can use CSS custom ...

    Building Themes  ⁄
    Plain PHP — Building Themes

    Automad supports plain PHP in template files. However, variables used in plain PHP blocks will not show up automatically in the dashboard and mixing PHP with Automad's template engine should be done carefully. Therefore it is not recommended to use plain PHP in normal templates. ...

    Developer Guide  ⁄
    Cheat Sheets — Developer Guide

    In case you prefer to start developing a theme or extension without reading the full documention, the cheat sheets below are a good point to start. In addition to this page there is also the theme skeleton package available to help you getting started.

    Cheat Sheets  ⁄
    Useful Template Snippets — Cheat Sheets

    Find below a collection of useful snippets for common tasks using Automad's template language.

    Cheat Sheets  ⁄
    Plain PHP Snippets — Cheat Sheets

    In case you want to develop a new extension or use PHP in your templates, the collection of common code snippets below might help you getting started quickly.

    Cheat Sheets  ⁄
    Creating Theme Packages — Cheat Sheets

    This guide describes step by step the workflow of setting up and publish a new theme. It assumes you're familiar with Visual Code Studio and working on a system with a Bash shell or similar — like macOS or Linux.

    • Automad
    • Developer Guide
    • Building Themes
    • theme.json
    Discuss
    Packages
    Release Notes
    Support
    Terms of Use
      Become a Sponsor
      GitHub
      Twitter
      Facebook
      Instagram
      2013-2022 by Marc Anton Dahmen
    Released under the MIT license

    A faceless machine, creating one's portrait in the internet.
  • Automad
  • Getting Started
  • System
  • User Guide
  • Developer Guide
  • Headless Mode
  • Discuss
  • Packages
  • Developer Guide ←
  • Building Themes
  • theme.json
  • Template Language →
  • Block Layouts
  • Customizing Blocks
  • Plain PHP