Change image favicon, login and dashboard

Support
1

Hi,
I’m new to cockpit, is it possible to edit the images of the platform?

Annotazione 2020-04-09 213908
Annotazione 2020-04-09 2139081096×1030 24.8 KB

thanks

2

Change logo:

It is a background image, so you can add your own css to overwrite it.

/* change logo url */
.login-image, .app-logo {
    background-image: url("path/to/my/logo.png");
}
/* change size/position if it is no circle/square */
.app-logo {
    background-position: left center;
    width:8em;
    height:3em;
}
/* hide app name if the logo contains the app name */
.app-name {
    display: none;
}

If you create a file /config/cockpit/style.css, it will be loaded automatically.

If you want a shortcut, I wrote a small addon, that adds the css dynamically to avoid messing up paths between production and remote host:

Change favicon:

This feature is relatively new. You can change the favicon in your /config/bootstrap.php

if (COCKPIT_ADMIN && !COCKPIT_API_REQUEST) {
    // url to your favicon or a path shortcut, e. g.: `#uploads:...`
    $app->helper('admin')->favicon = '#uploads:2020/02/08/5e3e7c80a4923favicon.png';
}

Change dashboard:

Maybe this addon is helpful:

1 Like
3

ok, this will make me look like an idiot but where do i find those folders and files? i can’t find them on google, or do i just make a new directory /config/?

4

Exactly.
The /config folder has to be located in your root folder.
By default there isnt any (I guess) and you can simply create it along with the other mentioned files.