mirror of
https://github.com/imfing/hextra.git
synced 2025-05-13 14:46:26 -04:00
96 lines
2.8 KiB
Markdown
96 lines
2.8 KiB
Markdown
---
|
|
title: Customizing Hextra
|
|
linkTitle: Customization
|
|
---
|
|
|
|
Hextra offers some default customization options in the `hugo.yaml` config file to configure the theme.
|
|
This page describes the available options and how to customize the theme further.
|
|
|
|
<!--more-->
|
|
|
|
## Custom CSS
|
|
|
|
To add custom CSS, we need to create a file `assets/css/custom.css` in our site. Hextra will automatically load this file.
|
|
|
|
### Font Family
|
|
|
|
The font family of the content can be customized using:
|
|
|
|
```css {filename="assets/css/custom.css"}
|
|
.content {
|
|
font-family: "Times New Roman", Times, serif;
|
|
}
|
|
```
|
|
|
|
### Inline Code Element
|
|
|
|
The color of text mixed with `other text` can customized with:
|
|
|
|
```css {filename="assets/css/custom.css"}
|
|
.content code:not(.code-block code) {
|
|
color: #c97c2e;
|
|
}
|
|
```
|
|
|
|
### Primary Color
|
|
|
|
The primary color of the theme can be customized by setting the `--primary-hue`, `--primary-saturation` and `--primary-lightness` variables:
|
|
|
|
```css {filename="assets/css/custom.css"}
|
|
:root {
|
|
--primary-hue: 100deg;
|
|
--primary-saturation: 90%;
|
|
--primary-lightness: 50%;
|
|
}
|
|
```
|
|
|
|
### 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:
|
|
|
|
```shell
|
|
hugo gen chromastyles --style=github
|
|
```
|
|
|
|
To override the default syntax highlighting theme, we can add the generated styles to the custom CSS file.
|
|
|
|
## Custom Scripts
|
|
|
|
You may add custom scripts to the end of the head for every page by adding the following file:
|
|
|
|
```
|
|
layouts/partials/custom/head-end.html
|
|
```
|
|
|
|
## Custom Footer
|
|
|
|
You can replace the footer completely - excluding the language and theme buttons - by creating a file `layouts/partials/custom/footer.html` in your site __and__ setting `custom: true` in the `footer` section of your `hugo.yaml`:
|
|
|
|
```yaml {filename="hugo.yaml"}
|
|
footer:
|
|
enable: true
|
|
custom: true
|
|
# These settings are ignored by the custom footer
|
|
displayCopyright: false
|
|
displayPoweredBy: true
|
|
# This setting is respected by the custom footer
|
|
with: "wide"
|
|
```
|
|
|
|
Variables available in the footer are:
|
|
|
|
- `{{ .footerButtonColor }}` - The color/background color of a footer button
|
|
|
|
_Note: The custom footer inherits the default footer background color and text color._
|
|
|
|
## Custom Layouts
|
|
|
|
The layouts of the theme can be overridden by creating a file with the same name in the `layouts` directory of your site.
|
|
For example, to override the `single.html` layout for docs, create a file `layouts/docs/single.html` in your site.
|
|
|
|
For further information, refer to the [Hugo Templates](https://gohugo.io/templates/).
|
|
|
|
## Further Customization
|
|
|
|
Didn't find what you were looking for? Feel free to [open a discussion](https://github.com/imfing/hextra/discussions) or make a contribution to the theme!
|