Branding

Header

In this section, we’ll cover how to personalize key elements of your on-premises instance. You can customize the site title, navigation links, header, footer, and logo according to your preferences.

Site title

The navigation bar title can be customized with the OVERLEAF_NAV_TITLE environment variable, this text is used in the top left corner of navigation if no logo is set.

# add to config/variables.env
OVERLEAF_NAV_TITLE=Our Overleaf Instance

Logo

You can add a custom logo rather than using text by setting the environment variable OVERLEAF_HEADER_IMAGE_URL. This value should point to an externally hosted image file.

config/variables.env

# add to config/variables.env
OVERLEAF_HEADER_IMAGE_URL=https://mysite.somewhere.com/img/logo.png

Light and dark theme logos

From version 6.3.0, you can set separate logos for the light and dark themes with the OVERLEAF_HEADER_IMAGE_URL_LIGHT and OVERLEAF_HEADER_IMAGE_URL_DARK environment variables. Both values should point to an externally hosted image file.

# add to config/variables.env
OVERLEAF_HEADER_IMAGE_URL_LIGHT=https://mysite.somewhere.com/img/logo-light.png
OVERLEAF_HEADER_IMAGE_URL_DARK=https://mysite.somewhere.com/img/logo-dark.png

If either variable is not set, that theme falls back to the logo set in OVERLEAF_HEADER_IMAGE_URL.

Header navigation links

Extra navigation items can be added to the navigation header by setting the OVERLEAF_HEADER_EXTRAS environment variable to a JSON array of objects. For example:

[\
  {\
    "text": "Some link",\
    "url": "http://example.com/somelink",\
    "class": "subdued",\
    "only_when_logged_out": true\
  },\
  {\
    "text": "Help",\
    "class": "subdued",\
    "dropdown": [\
      {\
        "text": "Documentation",\
        "url": "/learn"\
      },\
      {\
        "text": "Contact Admin",\
        "url": "http://example.com/contact"\
      }\
    ]\
  }\
]

Add the escaped JSON form to toolkit/variables.env:

toolkit/variables.env

# add to toolkit/variables.env
OVERLEAF_HEADER_EXTRAS=[{"text":"Some link","url":"http://example.com/somelink","class":"subdued","only_when_logged_out":true},{"text":"Help","class":"subdued","dropdown":[{"text":"Documentation","url":"/learn"},{"text":"Contact Admin","url":"http://example.com/contact"}]}]

Footers

It is possible to customize both the left and smaller right footer (found on pages like /project) using the environment variables OVERLEAF_LEFT_FOOTER and OVERLEAF_RIGHT_FOOTER. Both expect an array of JSON objects which will be inserted.

Both expect an array of JSON which will be inserted.

[\
  {\
    "text": "This is an example text footer entry!"\
  },\
  {\
    "text": "This is an example URL footer link!", "url" : "/my-first-link.htm"\
  }\
]

When using text only, it must not contain HTML as the value will be rendered as raw text.

This data needs to be valid JSON to work, with quotes escaped when passed through as an environmental variable.

config/variables.env

# add to config/variables.env
OVERLEAF_LEFT_FOOTER=[{"text": "This is an example text footer entry!"}]
OVERLEAF_RIGHT_FOOTER=["text": "This is an example URL footer link!", "url" : "/my-first-link.htm"]

In addition to text and url, the JSON object also accepts the properties class and label for additional customization.

Maintenance page

You can customize the message shown on the Maintenance page with the OVERLEAF_MAINTENANCE_MESSAGE environment variable, this text replaces the default message below the page title.

# add to config/variables.env
OVERLEAF_MAINTENANCE_MESSAGE=Our Overleaf Instance is down for maintenance and will be back shortly.

To include links or other formatting, use OVERLEAF_MAINTENANCE_MESSAGE_HTML instead. If both are set, OVERLEAF_MAINTENANCE_MESSAGE_HTML takes priority.

# add to config/variables.env
OVERLEAF_MAINTENANCE_MESSAGE_HTML=Our Overleaf Instance is down for maintenance. For urgent requests, contact <a href="mailto:[e-mail]">[e-mail]</a>.

OVERLEAF_MAINTENANCE_MESSAGE is rendered as plain text, so it must not contain HTML. OVERLEAF_MAINTENANCE_MESSAGE_HTML is rendered as HTML without escaping.

If neither is set, the default message links to your status page when OVERLEAF_STATUS_PAGE_URL is set, and shows the admin email address when it isn’t.