Top header
Styles for the header displayed at the top of each page. This area usually contains logotype and important links, e.g. start page and user profile.
Features
- CSS only.
- The colors may be customized without touching the theme CSS files.
Custom colors using CSS variables
- Background:
var(--color-top-header-background) - Foreground (text, links etc):
var(--color-top-header-foreground) - Hover background (links):
var(--color-top-header-link-background-hover) - Hover foreground (links):
var(--color-top-header-link-foreground-hover)
Custom colors examples
If you don't want to change the theme CSS file for easy future updates; apply the CSS code in a <style> Html tag or in a separate style sheet.
Dark
:root {
var(--color-top-header-background): #333;
var(--color-top-header-foreground): white;
var(--color-top-header-link-background-hover): rgba(255,255,255,0.1);
var(--color-top-header-link-foreground-hover): white;
}
Light indigo
:root {
var(--color-top-header-background): #e0e7ff;
}
Colorful gradient
:root {
var(--color-top-header-background): linear-gradient(30deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
var(--color-top-header-foreground): white;
var(--color-top-header-link-background-hover): rgba(255,255,255,0.1);
var(--color-top-header-link-foreground-hover): white;
}