# 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 by setting the environment variable `OVERLEAF_HEADER_IMAGE_URL`. This value should point to an externally hosted image file.

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

## 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:

{% code overflow="wrap" %}

```javascript
[
  {
    "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 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"}]}]
```

{% endcode %}

## Footers

It is possible to customize both the left and smaller right footer which is found on pages like `/project` using the environmental variables `OVERLEAF_LEFT_FOOTER` and the smaller `OVERLEAF_RIGHT_FOOTER`

Both expect an array of JSON which will be inserted.

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

{% hint style="info" %}
When using `text` only, it must **not** contain HTML as the value will be rendered as raw text.
{% endhint %}

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

{% code overflow="wrap" %}

```
# 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"]
```

{% endcode %}

{% hint style="info" %}
In addition to `text` and `url`, the JSON object also accepts the properties `class` and `label` for additional customization.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.overleaf.com/on-premises/configuration/overleaf-toolkit/branding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.