mirrors/hugo-typo
1
0
Fork 0
mirror of https://github.com/tomfran/typo.git synced 2025-04-25 21:19:55 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions
hugo-typo/wiki/features/advanced-customization.md
Francesco 3072988858 Update wiki
2025-04-03 01:47:43 +02:00

1.8 KiB
Raw Permalink Blame History

title date summary description toc readTime autonumber math showTags hideBackToTop
Advanced Customization 2024-10-07 Advanced customization options Advanced customization options false false true false false true

Custom CSS

The theme supports custom css, you can override anything you want by redefining classes in the assets/css/custom.css file.

For instance, changing the main width can be done as follows:

:root {
    --main-width: 1024px; /* overrides default of 780px */
}

Note that backward incompatible changes in the CSS will likely not happen, but there might be cases in the future where backward compatibility is not possible. If you are overriding a huge amount of CSS I suggest you forking the project instead of defining it here.

Hooks

Hooks allow to customize layouts by injecting custom code at specific points in the layout. Hooks are defined in the layouts/partials/hooks directory. The following hooks are currently available:

  • head_start is inserted at the beginning of the <head> tag.
  • head_end is inserted at the end of the <head> tag.
  • body_end is inserted at the end of the <body> tag.
  • footer_start is inserted at the beginning of the footer.

To create a hook, add a file named <hook_name>.html in the layouts/partials/hooks directory. The file should contain the code you want to inject at that point in the layout. For example, to preload a font, you can create a file named head_start.html in the layouts/partials/hooks directory with the following content:

<link rel="preload" href="/fonts/Literata/Literata-Light.woff2" type="font/woff2" as="font" crossorigin>

The full context is passed to the hook, so any variables available in the page context can be used in the hook.