habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

website/docs: update outdated custom CSS docs (#14441)

Browse Source 
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L.
2025-05-10 18:15:47 +02:00
committed by GitHub
parent 0611eea0e7
commit f1351a7577
4 changed files with 10 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/docs/add-secure-apps/flows-stages/flow/index.md
View File

@ -88,4 +88,4 @@ import Defaultflowlist from "../flow/flow_list/\_defaultflowlist.mdx";
- **Layout**: select how the UI displays the flow when it is executed; with stacked elements, content left or right, and sidebar left or right.
- **Background**: optionally, select a background image for the UI presentation of the flow.
- **Background**: optionally, select a background image for the UI presentation of the flow. This overrides any default background image configured in the [Branding settings](../../../sys-mgmt/brands.md#branding-settings).

57
website/docs/customize/interfaces/_global/customcss.mdx
View File

@ -1,57 +0,0 @@
### Custom CSS
To further modify the look of authentik, a custom CSS file can be created. Creating such a file is outside the scope of this document.
import TabItem from "@theme/TabItem";
import Tabs from "@theme/Tabs";
<Tabs
defaultValue="docker-compose"
values={[
{label: 'docker-compose', value: 'docker-compose'},
{label: 'Kubernetes', value: 'kubernetes'},
]}>
<TabItem value="docker-compose">
Create a `docker-compose.override.yml` file and add this block to mount the custom CSS file:
```yaml
services:
server:
volumes:
- ./my-css-file.css:/web/dist/custom.css
```
Afterwards, run the upgrade commands from the latest release notes.
</TabItem>
<TabItem value="kubernetes">
Create a ConfigMap with your css file:
```yaml
apiVersion: v1
kind: ConfigMap
metadata:
name: authentik-custom-css
namespace: authentik
data:
custom.css: |
...
```
Then, in the helm chart add this to your `values.yaml` file:
```yaml
volumes:
- name: custom-css
configMap:
name: authentik-custom-css
volumeMounts:
- name: custom-css
mountPath: /web/dist/custom.css
subPath: custom.css
```
Afterwards, run the upgrade commands from the latest release notes.
</TabItem>
</Tabs>

6
website/docs/customize/interfaces/_global/global.mdx
View File

@ -1,5 +1,3 @@
## Global customization
### Global customization
import CustomCSS from "./customcss.mdx";
<CustomCSS />
See [Brand Settings](../../../sys-mgmt/brands.md#branding-settings)

11
website/docs/sys-mgmt/brands.md
View File

@ -23,11 +23,14 @@ The brand settings define the visual identity of the brand, including:
- **Branding title**: Displayed in the browser tab (document title) and throughout the UI;
- **Logo**: Appears in the sidebar/header;
- **Favicon**: Shown on the browser tab.
:::info
Starting with authentik 2024.6.2, the placeholder `%(theme)s` can be used in the logo configuration option, which will be replaced with the active theme.
:::
:::info
Starting with authentik 2024.6.2, the placeholder `%(theme)s` can be used in the logo configuration option, which will be replaced with the active theme.
:::
- **Favicon**: Shown on the browser tab.
- **Default flow background** :ak-version[2025.4]: Default background image for the flow executor, can be overridden per flow, see [Flow configuration options](../add-secure-apps/flows-stages/flow/index.md#flow-configuration-options).
- **Custom CSS** :ak-version[2025.4]: Add custom CSS to further customize the look of authentik. Creating such a file is outside the scope of this document.
### External user settings