Themes and appearance

The look of the public site comes from two places: the theme decides the layout, the shapes and which blocks a page has; the settings hold your colours, font, logo and the sections of the home page. The admin panel looks the same whichever theme you choose.

The three themes

A new installation starts with Nova. A site updated from an older version keeps the theme it had.

Admin → Themes

Each theme has a card with its picture, name, version and description; the one in use carries Active.

• Activate switches the whole site at once. Choosing Theme on Settings → Appearance does the same.
• Delete removes the files of a theme. Default cannot be deleted; when you delete the active theme, the site goes back to Default.
• Upload a theme → Install takes a ZIP with one folder that holds theme.json (and, as needed, templates/, assets/, functions.php). A theme with the same folder name is replaced.
• Options of "..." shows the options of the active theme; Save options stores them. Every theme keeps its own options (the setting theme_options_<folder>), so they are still there when you switch back.

The options of Default are Floating platform icons in the hero, Three figures under the hero, Platforms shown before "Show all" (12, 18, 24 or all, 18 by default), Call-to-action band above the footer and Text under the title (empty = the translated default).

Settings → Appearance

Colours.

• Primary colour: six ready colours (red, orange, green, teal, blue, violet) or your own. The lighter and darker shades for hover, borders, backgrounds and the dark mode are made from it, and you see them under the field.
• Download button colour (accent_color): empty uses the primary colour.
• Background (light), Background (dark), Text (light), Text (dark).

Colours are written as #rrggbb. Nova uses its own colour sets unless its options say otherwise.

Type and mode. Font offers Instrument Sans (the default), Inter, Roboto, Open Sans, Poppins, Montserrat, Lato, Nunito, DM Sans and System UI; Bengali, Arabic and Hindi pages get a matching font for their letters by themselves. Base font size (px) goes from 12 to 22 (16 by default). Default colour mode is Follow the visitor's system, Light or Dark; visitors switch with the moon and sun button.

Home page sections. Each one is a switch:

Show supported platforms on landing pages does the same for the page of each platform.

Footer. Facebook username, X (Twitter) username, Instagram username and YouTube channel put icons in the footer; write the name or a full address. Footer credit shows the line your licence puts at the foot of every page. When your licence allows your own, Your own footer credit (HTML) appears below it: {site_name}, {site_url} and {year} are filled in, scripts and forms are removed, and an empty box keeps the licence's line (see The licence key). The text in the footer is Footer information text on Settings → General; empty, it shows the translated disclaimer.

Custom code. Custom CSS is printed in the head after the styles of the theme, so it wins. Custom JavaScript is inserted before </body>; include the <script> tags.

Settings → Logo & icons

A preview at the top shows the header in light and dark mode, the admin panel and the footer, and follows the sliders before you save.

• Logo for the header · light mode: the main logo (dark letters for a light page), also used on the sign-in pages and in the admin panel. Without it the site name is shown.
• Logo for the header · dark mode: light letters for a dark page. Empty: the light one serves both.
• Logo for the footer · light mode and Logo for the footer · dark mode: only when the footer needs its own. Without them the footer shows the header's logo (on a theme with a dark footer, the dark-mode one).
• Height in the header, Height in the footer (16 to 160 px) and Height in the admin panel (16 to 72 px). On a phone the header logo is never taller than 46 px.
• Show the name of the site beside the logo: for a logo that is only a symbol.
• Icon (favicon): a square PNG of 512 × 512 pixels works everywhere.
• Default social share image: for pages without a picture of their own, 1200 × 630.

Tick Remove beside a picture to take it away.

How a theme is built

A theme is a folder in themes/:

themes/<folder>/
  theme.json      name, version, description, author, author_uri, options,
                  stylesheets, scripts, supports, footer_tone
  screenshot.png  the picture on the Themes page (or screenshot.svg)
  templates/      your own copy of a page of app/views/front (home.php, results.php ...)
  templates/partials/   your own copy of a piece of app/views/partials
  assets/         CSS and JavaScript, listed in "stylesheets" and "scripts"
  functions.php   PHP hooks, loaded only while the theme is active
  languages/      en.php, bn.php ...: texts of the theme

A page is looked for in the theme's templates/ first, then in the script's own folder, so a theme holds only what it changes. An option is read in a template with theme_option('name'). "supports": ["page_after"] offers plugins a full-width place under the text of a page, and "footer_tone": "dark" says the footer is dark in both modes (the footer logo follows). The quickest start is a copy of themes/default with a new folder name.