drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-08-23 02:36:57 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

docs(customization): add docs for layout css vars

Browse Source
This commit is contained in:
Xin
2025-08-13 16:01:09 +08:00
committed by GitHub
parent b4d7d982f9
commit 953042a0c0
1 changed files with 17 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
exampleSite/content/docs/advanced/customization.md
View File

@@ -44,6 +44,23 @@ The primary color of the theme can be customized by setting the `--primary-hue`,
}
```
### Component Layout Variables
Hextra provides CSS variables to customize the width of pages, navbar, and footer:
```css {filename="assets/css/custom.css"}
:root {
/* Page width - also configurable via hugo.yaml params.page.width */
--hextra-max-page-width: 80rem; /* default: 80rem (normal), 90rem (wide), 100% (full) */
/* Navbar width - also configurable via hugo.yaml params.navbar.width */
--hextra-max-navbar-width: 90rem; /* independent navbar width */
/* Footer width - also configurable via hugo.yaml params.footer.width */
--hextra-max-footer-width: 80rem; /* independent footer width */
}
```
### Further Theme Customization
The theme can be further customized by overriding the default styles via the exposed css classes. An example for customizing the footer element: