Theming

Developer's note: this is being updated frequently and will likely keep changing for a bit. If you'd like help building a theme please reach out :)

With theming you'll be able to further customise your sites at both a domain and site level. This essentially replaces the default theme with your own, entirely custom theme. We'll provide all the data in the form of HTML Snippets. You can apply a theme to a root domain and all it's sites OR just the root OR just specific sites.

Menterprise will provide you with page-types for customisation and inject templated HTML and variables (see next section) to let you customise the styling as much as needed.

Each page will have a set list of HTML Snippets associated with it. See the sections below on both the Page Types and the HTML Snippets for their structures.

Note: for best results we recommend understanding some CSS and HTML. If using AI we recommend pasting in the HTML Snippets from the sections below to help. You'll need to roll your own navbar, footer, etc.

Navigate to the Themes section in your Publishing dashboard's sidebar.

Next, click on Create Theme.

The Theme editor

1. Your theme's name
2. The types of Page you want to customise
3. The HTML editor
4. The Page previewer

You must set up the HTML for each Page type you wish to theme. If you do not wish to theme every Page type, simply leave some as default by leaving "Customise [page]?" untoggled.

Once you've set up your theme with the HTML Snippets and variables (read below), you can assign your theme to your sites and domains.

Assignment and un-assignment is instant, and any updates you make to your theme will automatically apply to wherever it is assigned.

By default themes are unassigned.

To assign your theme:

After clicking on "Assign"[1] for the theme (either while creating or afterwards from the Themes table), you must select what domains or sites to assign.

Any you check will assign, and any you uncheck will unassign. If you want to unassign your theme from all domains or sites, unselect everything.

If you select sites only, you can click assign[2]. If you select domains as well, you'll be lead onto the Inheritance screen by clicking next[2].

Inheritance

Sites can inherit their root domain's theme if you choose so. After selecting some domains you can choose which domains' sites you want to inherit[1]. Like above, you can then click assign[2] and your theme will be live.

The types of variables utilised within theming are:

• MPSS (on Posts only)
• Site Variables (on Sites & Posts only)
• Campaign Variables (on Posts only)
• Internal Variables (on Posts only)
  This one is particularly important as it contains all information about a single post.
  You'll definitely be using this if you theme the Post pages.
• HTML Snippets (on Roots, Sites, Posts)

There are currently 5 types of pages that appear on either the Root (example.com) or Site (site.example.com) or both.

• Home (Root & Site)
• Categories (Site only)
• Category (Site only)
• Post (Site only)
• Custom (Root & Site)

You can theme individual page types or all of them.

You can find detailed explanations for each type below.

To help with automation while leaving you to theme, Menterprise provides a few HTML Snippets that you can inject into your theme. Menterprise will precompute all of these and let you simply style them.

A good example of this is to imagine a Home Page where you'd like a few of the latest posts at the top. You could use the HTML Snippet [[theme_latest_pages]] and style them.

The HTML Snippets follow a consistent output (or "type") but may sometimes be filtered. This is useful, for example, on the Category Page you'd want a list of pages in that category, so you have access to both the "Latest Posts" and "Posts in this category" snippets which have the same structure but different filters.

You can hide certain elements you don't want in your theme by styling them away. You can also use Javascript to add interactivity or more filtering.

Alongside the HTML Snippets there are also some variables available on different page types, for example on the Category page there is a variable [[theme_category_color]] that gives you the category's colour.

To see what page types have access to each HTML Snippet, see the accordion above.

Below are the HTML Snippets and variables available:

Here at Menterprise we usually use Claude to generate simple themes with this system. Below is an example prompt:

Create a simple theme for a specific page (HOME PAGE) with no external resources for the following template.
Include a nav to home and /categories.
Include a simple footer.
I will provide the list of HTML snippets and available variables.
Do not use any snippet or variable than those included below.

Before returning, ask me questions on style, color, branding, industry, etc.

Do not return any boilerplate.

Here are the following available snippets:
- Site Title [[theme_site_title]]
- Latest Pages (_Page List_) [[theme_latest_pages]]
- All Categories (when on a Site) (_Category List_) [[theme_categories]]
  
Page List:
### Usage

Includes the page thumbnail, title, snippet, read time and published/updated date.
There may be up to 12 pages, each with one element (.page-wrapper).
You can embed this by using:
[[theme_latest_pages]]

Which evaluates to:
### HTML
```html
<a class="page-wrapper" href="/[post-url]"> <div class="page-image-wrapper"> <img alt="[post title]" src="[post image]" class="page-image"> </div> <div class="page-content-wrapper"> <div class="page-content-title">[post title]</div> <div class="page-content-snippet">[post snippet]</div> <div class="page-content-readtime">[post read time]</div> <div class="page-content-published">[post published date]</div> </div> </a>
```

### CSS Classes
```css
.page-wrapper {}
.page-image-wrapper {}
.page-image {}
.page-content-wrapper {}
.page-content-title {}
.page-content-snippet {}
.page-content-readtime {}
.page-content-published {}
```

Category List:
### Usage

Includes the category name, color and URL.
There may be up to infinite categories, each with one element (.category-wrapper).
You can embed this by using either:
[[theme_categories]]

### HTML
```html
<a class="category-wrapper" href="/[category url]"> <div class="category-color" style="color: [category color];"> </div> <div class="category-title">[category title]</div> </a>
```
### CSS Classes
```css
.category-wrapper {}
.category-color {}
.category-title {}
```

To reiterate, no boilerplate.
Use only the available data/variables.

Footprint

To minimise footprint we recommend a few different strategies:

• Create as many themes as tenable for uniqueness
• Do not embed or reference external assets (like images, scripts)
• Do not leave verbose or overly-specific HTML comments, class names, IDs, etc
• Vary colors, fonts, CSS names, orders if possible

Lighthouse

To keep your sites fast and optimised, please consider:

• Keeping scripts async
• Not overdoing base64 images
• Keeping your HTML, CSS & JavaScript optimised and preferably minified