+12
fcd7c979df
fcd7c979df
Co-authored-by: Artur <145776561+arturict@users.noreply.github.com> Co-authored-by: arturict <arturict@users.noreply.github.com> Co-authored-by: Thomas <thomas@ajnart.fr> Co-authored-by: Afonso Jorge Ramos <afonsojorgeramos@gmail.com> Co-authored-by: Danura30082 <danura30082+github@gmail.com> Co-authored-by: Kushie <122986913+kushiemoon-dev@users.noreply.github.com> Co-authored-by: ajnart <thomas@ajnart.fr> Co-authored-by: ajnart <thomas@ajnart.dev> Co-authored-by: chenjun <chenjun@foxmail.com> Co-authored-by: Wikibear <wikibear@users.noreply.github.com> Co-authored-by: Bergasha <bergasha@gmail.com> Co-authored-by: leafyelin <43306196+leafyelin@users.noreply.github.com> Co-authored-by: Lucas Araujo <lucas.lra@gmail.com> Co-authored-by: GreenMonito <86085570+GreenMonito@users.noreply.github.com> Co-authored-by: Nerdy-Technician <roffo@nerdy-technician.social> Co-authored-by: Jun <34545896+jcstrong@users.noreply.github.com> Co-authored-by: Edmond Abraham <54119952+gitedmond@users.noreply.github.com> Co-authored-by: thrawnx <tight.bulb9384@fastmail.com> Co-authored-by: Chris <58918656+nordada@users.noreply.github.com> Co-authored-by: yi111 <153097222+Yi-111-a@users.noreply.github.com> Co-authored-by: Yanis <naamaneyanis@gmail.com> Co-authored-by: Wikibear <me@sej.de> Co-authored-by: alessiottavo <93441886+alessiottavo@users.noreply.github.com>
38 lines
1.2 KiB
Plaintext
38 lines
1.2 KiB
Plaintext
# Styling
|
|
|
|
Homarr uses Mantine and supports custom CSS at two scopes:
|
|
|
|
- **Global:** **Management → Settings → Instance branding → Custom CSS**.
|
|
- **Board:** **Board settings → Custom CSS**. Board CSS loads after the global stylesheet and can override it.
|
|
|
|
Both editors accept direct CSS and Workshop imports.
|
|
|
|
<Alert type="warning">
|
|
|
|
Custom CSS can break after updates and is not an authorization boundary. Hidden controls remain accessible to users who
|
|
have permission to use them.
|
|
|
|
</Alert>
|
|
|
|
## Target elements
|
|
|
|
Use browser developer tools to inspect the element and test a selector. Prefer stable semantic or Mantine class names;
|
|
avoid generated classes such as `mantine-Card-x2fske`, which change between builds.
|
|
|
|
To target one widget, add a custom class under **Edit item → Advanced options** and use that class in the board CSS.
|
|
|
|
Use `!important` only when the existing cascade requires it.
|
|
|
|
## Theme variables
|
|
|
|
Mantine exposes [CSS variables](https://mantine.dev/styles/css-variables-list/) that can be overridden globally or per
|
|
board:
|
|
|
|
```css
|
|
:root {
|
|
--mantine-primary-color-filled: #ffbb00;
|
|
}
|
|
```
|
|
|
|
CSS changes presentation only; use widgets, integrations, permissions, or application code for behavior.
|