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. Always edit the generator source and rebuild so hosted and offline output stay consistent.

Change the Manual Name#

The manual name is currently part of the layout in build.py. Search that file for Project Manual and update both the visible header and the browser-title suffix. Also update the Project manual meta description.

The contents page uses the shorter Manual title in two places. Search for <h1>Manual</h1> to change its visible heading, and update title="Manual" to change its browser-tab title.

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.