Foundaro

Foundaro Front Docs

Themes

Themes control how your site looks to visitors. Each theme has customization settings, template overrides, and global styles. Assign a theme to a site to apply it.

Last updated:

Themes

Themes define the visual appearance of your public-facing sites. A theme controls colors, typography, layout, and the HTML/CSS templates used to render content. You can create multiple themes, apply different themes to different sites, and customize each theme independently.

Theme List

The main Themes view shows all themes in your workspace. Each theme shows:

  • Name: The theme display name.
  • Slug: The internal identifier.
  • Sites using this theme: Which sites have this theme applied.
  • Last modified: When the theme was last updated.
  • Status: Active or Draft.

Creating Themes

Click New Theme to create a new theme.

Required fields:

  • Name: The theme display name.
  • Slug: The URL-safe identifier (auto-generated from name).

A new theme starts with default settings. Customize it from the theme editor.

Details Tab

The Details tab contains the basic information and global settings for a theme.

Key fields:

  • Name: Display name for the theme.
  • Slug: Internal identifier. Used in preview URLs.
  • Description: Internal notes about the theme.
  • Status: Active themes can be assigned to sites. Draft themes are only available for preview.
  • Author: Who created or owns this theme.
  • Version: A version label for tracking changes (free-form text).

Customization Tab

The Customization tab controls the visual design tokens for the theme.

Key fields:

  • Primary color: The main brand color used for buttons, links, and highlights.
  • Secondary color: A supporting accent color.
  • Background color: The default page background.
  • Text color: The default body text color.
  • Heading font: The typeface used for headings (H1–H6).
  • Body font: The typeface used for paragraphs and UI text.
  • Font size base: The root font size in pixels.
  • Border radius: Controls how rounded corners appear on cards, buttons, and inputs.
  • Container width: Maximum content width (e.g. 1200px).
  • Custom CSS: Raw CSS injected after all theme styles. Use for fine-grained overrides.

Tips:

  • Make major color changes in a draft theme before applying to a live site.
  • Custom CSS is powerful but hard to maintain. Use it sparingly.
  • Use Preview to test customization changes before saving.

Templates Tab

The Templates tab shows the Twig template files that control the HTML structure of public pages.

Templates available for override:

  • layout.twig: The outer HTML shell used by all pages (head, body, header, footer).
  • page.twig: Template for standalone Pages.
  • post.twig: Template for Blog Posts.
  • post-list.twig: Template for blog index and archive pages.
  • news.twig: Template for News items.
  • news-list.twig: Template for news listing pages.
  • event.twig: Template for Event detail pages.
  • event-list.twig: Template for event listing pages.
  • 404.twig: Custom 404 error page.

Editing templates:

Click a template name to open the inline editor. Changes are saved immediately and applied on next page load. Use Preview to verify changes before a live site sees them.

Why it matters:

Template overrides give you full control over the HTML structure of your site — beyond what CSS alone can achieve.

Tips:

  • Start by overriding only the templates you need to change. Inheriting base templates reduces maintenance.
  • Twig template syntax is similar to Jinja2 and Django templates. Variables, filters, and blocks are all supported.
  • Invalid Twig will cause a render error on the public site. Always preview after editing.

Settings Tab

The Settings tab contains additional configuration for the theme.

Key fields:

  • Header layout: Choose between centered, left-aligned, or minimal header styles (if the base theme supports variants).
  • Footer layout: Choose the footer column layout.
  • Show breadcrumbs: Toggle breadcrumb navigation on content pages.
  • Show reading time: Toggle estimated reading time on blog posts.
  • Show author bio: Toggle the author bio block on blog posts.
  • Show related content: Toggle the related content block at the bottom of pages and posts.
  • Social links: Enter your social media URLs for display in the footer.
  • Cookie notice: Toggle a basic cookie consent notice.

Tips:

  • Not all settings apply to all themes. Settings that are not supported by the current base theme are shown greyed out.
  • Theme settings are separate from site settings. The same theme can behave differently on two sites if site-level overrides are applied.