🏡 index : quine-global-labs/mirror-cockpit-project-cockpit.git

# Branding

Typically Cockpit is branded in such a way that it looks like the admin
user interface for an operating system. The "Cockpit" brand is only used
during development.

Due to trademark law, as a general rule Cockpit does not ship logos for
operating systems in its packaging. These are expected to be present on the
system itself, and are incorporated into the branding.

## How Cockpit Selects Branding

In `$prefix/share/cockpit/branding` are multiple directories, each of which
contain branding information. Branding files are served from the directories
based in the order below, if a file is not present in the first directory on
the list, the second will be consulted, and so on.

    $prefix/share/cockpit/branding/$ID-$VARIANT_ID
    $prefix/share/cockpit/branding/$ID
    $prefix/share/cockpit/branding/default
    $prefix/share/cockpit/static

The `$ID` and `$VARIANT_ID` variables are those listed in `/etc/os-release`,
and `$prefix` is usually `/usr`.

Administrators can provide a custom local branding in `/etc/cockpit/branding/`
(more generally, `$XDG_CONFIG_DIRS/cockpit/branding/`). If that directory
exists, it is considered before the above directories.

All of the files served from these directories are available over HTTP
without authentication. This is required since these resources will be used
on the login screen.

## Branding files

The following files are interesting in the above directories for branding
purposes:

    apple-touch-icon.png
    favicon.ico
    branding.css

In addition there are image files referred to by branding.css (see below).
Since Cockpit does not package trademarked logos, typically there will be
symlinks from a branding directory to the relevant image files elsewhere
on the system.

## Branding Styles

The Cockpit login screen and navigation area loads a `branding.css` file
from the above directories.

The branding.css file should override the following areas of the login screen:

```css
/* Background of the login prompt */
html body.login-pf {
    background: url("my-background-image.jpg");
    background-size: cover;
}

/* Upper right logo of login screen */
#badge {
    width: 225px;
    height: 80px;
    background-image: url("logo.png");
    background-size: contain;
    background-repeat: no-repeat;
}

/* The brand text above the login fields */
#brand::before {
    font-size: 18pt;
    text-transform: uppercase;
    content: "${NAME} <b>${VARIANT}</b>";
}
```

Notice how we can use variables from `/etc/os-release` in the branding.
The value for these variables come from the machine that cockpit is logged into.

`branding.css` may also set the `--ct-color-host-accent` CSS variable to change
the Cockpit Shell panel's accent color. You can also customize
[PatternFly's brand colors](https://www.patternfly.org/design-foundations/colors/#brand-colors)
and other PatternFly variables. For example:

```css
:root {
    --ct-color-host-accent: #c00 !important;
    --pf-t--global--color--brand--default: red;
}
```