Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

docs: add advanced theme customization instruction (#519)

Browse Source 
* Add docs on how to customize theme

* fix heading level

* extend description

* Add missing classes

* Update exampleSite/content/docs/advanced/customization.md

---------

Co-authored-by: Xin <fuxin1997@gmail.com>
This commit is contained in:
Attila Greguss 2024-12-18 22:48:42 +00:00 committed by GitHub
parent b6d14afca3
commit 655148f329
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 122 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,6 +44,128 @@ The primary color of the theme can be customized by setting the `--primary-hue`,
}
```
### 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:
```css {filename="assets/css/custom.css"}
.hextra-footer {
/* Styles will be applied to the footer element */
}
.hextra-footer:is(html[class~="dark"] *) {
/* Styles will be applied to the footer element in dark mode */
}
```
The following classes can be used to customize various parts of the theme.
#### General
- `hextra-scrollbar` - The scrollbar element
- `content` - Page content container
#### Shortcodes
##### Badge
- `hextra-badge` - The badge element
##### Card
- `hextra-card` - The card element
- `hextra-card-image` - The card image element
- `hextra-card-icon` - The card icon element
- `hextra-card-subtitle` - The card subtitle element
##### Cards
- `hextra-cards` - The cards grid container
##### Jupyter Notebook
- `hextra-jupyter-code-cell` - The Jupyter code cell container
- `hextra-jupyter-code-cell-outputs-container` - The Jupyter code cell outputs container
- `hextra-jupyter-code-cell-outputs` - The Jupyter code cell output div element
##### PDF
- `hextra-pdf` - The PDF container element
##### Steps
- `steps` - The steps container
##### Tabs
- `hextra-tabs-panel` - The tabs panel container
- `hextra-tabs-toggle` - The tabs toggle button
##### Filetree
- `hextra-filetree` - The filetree container
##### Folder
- `hextra-filetree-folder` - The filetree folder container
#### Navbar
- `nav-container` - The navbar container
- `nav-container-blur` - The navbar container in blur element
- `hamburger-menu` - The hamburger menu button
#### Footer
- `hextra-footer` - The footer element
#### Search
- `search-wrapper` - The search wrapper container
- `search-input` - The search input element
- `search-results` - The search results list container
#### Table of Contents
- `hextra-toc` - The table of contents container
#### Sidebar
- `mobile-menu-overlay` - The overlay element for the mobile menu
- `sidebar-container` - The sidebar container
- `sidebar-active-item` - The active item in the sidebar
#### Language Switcher
- `language-switcher` - The language switcher button
- `language-options` - The language options container
#### Theme Toggle
- `theme-toggle` - The theme toggle button
#### Cody Copy Button
- `hextra-code-copy-btn-container` - The code copy button container
- `hextra-code-copy-btn` - The code copy button
#### Code Block
- `hextra-code-block` - The code block container
#### Feature Card
- `hextra-feature-card` - The feature card link element
#### Feature Grid
- `hextra-feature-grid` - The feature grid container
#### Breadcrumbs
No specific class is available for breadcrumbs.
### Syntax Highlighting
List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command: