Customize Branding

Simple Docs ships with the Project Manual header, a CSS-generated // mark, and an SVG favicon. You can replace all three without changing generated files. Edit source configuration or assets and rebuild so hosted and offline output stay consistent.

Change the Manual Name#

Set each language's messages in the source languages.json. Use project_manual for the visible header and browser-title suffix, description for the meta description, and manual for the contents heading and tab title. For example, the English language definition can contain:

{
  "name": "English",
  "messages": {
    "project_manual": "Acme Handbook",
    "description": "Acme project documentation",
    "manual": "Handbook"
  }
}

Provide equivalent names for other languages. Omitted messages use English defaults. A flat source needs a manifest and a language directory before using these overrides. See language configuration for the complete structure.

Keep the header link as plain text and preserve its existing link destination. The link is the accessible name for the site brand and returns readers to the contents page.

Replace the Header Mark#

The default mark is created by .site-title::before in assets/manual.css:

.site-title::before {
  content: "//";
}

Change content to use another short text mark, or add an SVG such as assets/brand-mark.svg and replace the rule with:

.site-title::before {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-inline-end: 0.65rem;
  background: url("./brand-mark.svg") center / contain no-repeat;
  content: "";
  vertical-align: -0.3rem;
}

The header text remains visible and supplies the accessible brand name. Treat the image as decorative rather than putting essential text only in the SVG. The paper theme supplies its own § mark in themes/paper/theme.css. Update or remove that .site-title::before override if the shared mark should also appear with Paper.

To use a mark only with one theme, place the SVG beside that theme's theme.css and add the override there instead. Relative URLs such as url("./mark.svg") work with root hosting, path prefixes, and offline ZIPs.

Replace the Favicon#

Replace assets/favicon.svg with your own SVG. Keep the same filename because the generated layout links to that path with the image/svg+xml media type. The file must be a regular file rather than a symbolic link.

Use a square viewBox, keep important details legible at small sizes, and avoid external fonts or images. Browsers often cache favicons, so use a private window or clear the site cache when checking a replacement.

Rebuild and Check the Site#

Rebuild hosted and offline output after changing branding:

make bundle THEME=ef-maris-dark
make offline-bundle THEME=ef-maris-dark

Confirm that the generated header and browser title use the new name, the mark loads without a network dependency, and .build-simple-docs/site/assets/favicon.svg contains the replacement. Extract and open the offline ZIP to confirm that its relative asset paths also work.

To rebuild the bundled nginx image with the same theme, run:

make runtime-image THEME=ef-maris-dark

See create and select themes for theme-local assets and serve generated sites for preview and deployment commands.