mirror of
https://github.com/dani-garcia/vaultwarden.git
synced 2026-03-22 09:49:20 -07:00
change paths for web-v2025.1.1 (only change top left image, not bit-icon above login)
@@ -1,8 +1,7 @@
|
|||||||
# Customize Vaultwarden CSS
|
# Customize Vaultwarden CSS
|
||||||
|
|
||||||
> [!IMPORTANT]
|
> [!IMPORTANT]
|
||||||
> **This functionality is not yet merged or released!**
|
> **This functionality is only available in v1.33.0 and later releases.
|
||||||
> 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.<br>
|
Since version v1.33.0 you can modify the CSS which Vaultwarden previously embedded in the web-vault.<br>
|
||||||
This way it makes it more easier for users to tweak the style and layout or even hide items.
|
This way it makes it more easier for users to tweak the style and layout or even hide items.
|
||||||
@@ -59,33 +58,35 @@ app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(5
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Use a custom login logo */
|
/* Use a custom login logo */
|
||||||
app-login img.logo {
|
app-root img.new-logo-themed {
|
||||||
content: url(../images/my-custom-login.logo.png) !important;
|
content: url(../images/my-custom-login.logo.png) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Use a custom top left logo global */
|
/* Use a custom top left logo global */
|
||||||
bit-icon > svg {
|
auth-anon-layout > main > a > bit-icon > svg {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
bit-icon::before {
|
auth-anon-layout > main > a > bit-icon bit-icon::before {
|
||||||
display: block;
|
display: block;
|
||||||
content: "" !important;
|
content: "" !important;
|
||||||
width: 175px !important;
|
width: 175px !important;
|
||||||
height: 30px !important;
|
height: 36px !important;
|
||||||
background-image: url(../images/my-custom-global-logo.png) !important;
|
background-image: url(../images/my-custom-global-logo.png) !important;
|
||||||
background-repeat: no-repeat !important;
|
background-repeat: no-repeat !important;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Use a custom top left logo different per vault/admin */
|
/* Use a custom top left logo different per vault/admin */
|
||||||
bit-icon > svg {
|
app-user-layout bit-icon > svg,
|
||||||
|
app-organization-layout bit-icon > svg {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
bit-icon::before {
|
app-user-layout bit-icon,
|
||||||
|
app-organization-layout bit-icon {
|
||||||
display: block;
|
display: block;
|
||||||
content: "" !important;
|
content: "" !important;
|
||||||
width: 175px !important;
|
width: 200px !important;
|
||||||
height: 30px !important;
|
height: 50px !important;
|
||||||
background-repeat: no-repeat !important;
|
background-repeat: no-repeat !important;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
@@ -95,4 +96,4 @@ app-user-layout bit-icon::before {
|
|||||||
app-organization-layout bit-icon::before {
|
app-organization-layout bit-icon::before {
|
||||||
background-image: url(../images/my-custom-admin-console-logo.png) !important;
|
background-image: url(../images/my-custom-admin-console-logo.png) !important;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
Reference in New Issue
Block a user