3 Customize Vaultwarden CSS

Mathijs van Veluw edited this page 2024-11-18 21:07:26 +01:00

Table of Contents

• Customize Vaultwarden CSS

Customize Vaultwarden CSS

[!IMPORTANT] This functionality is not yet merged or released! It will probably land as stable in v1.33.0

Since version v1.33.0 you can modify the CSS which Vaultwarden previously embedded in the web-vault.
This way it makes it more easier for users to tweak the style and layout or even hide items.

To modify the CSS you need to add a templates directory in your data directory, or provide the correct path via the TEMPLATES_FOLDER environment variable.
Within this directory you need to create another directory called scss which will hold the file(s) for modifying the stylesheet Vaultwarden will serve.

There are two files you can place here:

• user.vaultwarden.scss.hbs
  This file is the file you want to edit and add your custom styles to.

• vaultwarden.scss.hbs
  This file should not exist, since it will overwrite the built-in defaults.
  Only override this if you really know what you are doing!

.
├── templates
│   └── scss
│       ├── user.vaultwarden.scss.hbs
│       └── vaultwarden.scss.hbs

Some examples which you can place inside user.vaultwarden.scss.hbs:

/* Hide `Authenticator app` 2FA (First item of the list) */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(1) {
  @extend %vw-hide;
}

/* Hide `YubiKey OTP security key` 2FA (Second item of the list) */
/* Note: This will also be hidden automatically if the Yubikey config is net set */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(2) {
  @extend %vw-hide;
}

/* Hide `Duo` 2FA (Third item of the list) */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(3) {
  @extend %vw-hide;
}

/* Hide `FIDO2 WebAuthn` 2FA (Fourth item of the list) */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(4) {
  @extend %vw-hide;
}

/* Hide `Email` 2FA (Fifth item of the list) */
/* Note: This will also be hidden automatically if email is not enabled */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(5) {
  @extend %vw-hide;
}

/* Use a custom login logo */
app-login img.logo {
	content: url(../images/my-custom-login.logo.png) !important;
}

/* Use a custom top left logo global */
bit-icon > svg {
  display: none !important;
}
bit-icon::before {
  display: block;
  content: "" !important;
  width: 175px !important;
  height: 30px !important;
  background-image: url(../images/my-custom-global-logo.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain;
}

/* Use a custom top left logo different per vault/admin */
bit-icon > svg {
  display: none !important;
}
bit-icon::before {
  display: block;
  content: "" !important;
  width: 175px !important;
  height: 30px !important;
  background-repeat: no-repeat !important;
  background-size: contain;
}
app-user-layout bit-icon::before {
  background-image: url(../images/my-custom-password-manager-logo.png) !important;
}
app-organization-layout bit-icon::before {
  background-image: url(../images/my-custom-admin-console-logo.png) !important;
}

FAQs

1. FAQs
2. Audits

Container Image Usage

1. Which container image to use
2. Starting a container
3. Updating the vaultwarden image
4. Using Docker Compose
5. Using Podman

Deployment

1. Building your own docker image
2. Building binary
3. Pre-built binaries
4. Third-party packages
5. Deployment examples
6. Proxy examples
7. Logrotate example

HTTPS

1. Enabling HTTPS
2. Running a private vaultwarden instance with Let's Encrypt certs

Configuration

1. Overview
2. Disable registration of new users
3. Disable invitations
4. Enabling admin page
5. Disable the admin token
6. Enabling WebSocket notifications
7. Enabling Mobile Client push notification
8. Enabling U2F and FIDO2 WebAuthn authentication
9. Enabling YubiKey OTP authentication
10. Changing persistent data location
11. Changing the API request size limit
12. Changing the number of workers
13. SMTP configuration
14. Translating the email templates
15. Password hint display
16. Disabling or overriding the Vault interface hosting
17. Logging
18. Creating a systemd service
19. Syncing users from LDAP
20. Using an alternate base dir (subdir/subpath)
21. Other configuration

Database

1. Using the MariaDB (MySQL) Backend
2. Using the PostgreSQL Backend
3. Running without WAL enabled
4. Migrating from MariaDB (MySQL) to SQLite

Security

1. Hardening Guide
2. Fail2Ban Setup
3. Fail2Ban + ModSecurity + Traefik + Docker

Backup

1. General (not docker)

Other Information

1. Importing data from Keepass or KeepassX
2. Backing up your vault
3. Differences from the upstream API implementation
4. Supporting upstream development
5. Caddy 2.x with Cloudflare DNS