This repository has been archived on 2024-06-06. You can view files and clone it, but cannot push or open issues or pull requests.
vitrine/themes/reveal-hugo/exampleSite/content/extending-layout-example/_index.md
2022-01-05 23:28:57 +01:00

1.1 KiB

+++ title = "Extend layout with configuration" outputs = ["Reveal"] [reveal_hugo] theme = "night" margin = 0.2 custom_css = "css/custom.css" custom_js = "js/custom.js" +++

Extending an existing layout

If you are using an existing theme and you want to a specific CSS class or add a dynamic function using javascript. It is possible to extend existing layout.


Extending CSS

You can use partials or you can specify custom_css in your configuration :

[reveal_hugo]
custom_css = "css/custom.css"
The `custom.css` can be present in `static/css/custom.css`

Extending with javascript

Same as CSS you can extend your presentation with javascript using partials or with custom_js in your configuration:

[reveal_hugo]
custom_js = "js/custom.js"
The `custom.js` can be present in `static/js/custom.js`

{{< slide class="custom" id="customjs" >}}

Extend layout example

Here the slide has an additional css class custom using slide shortcode. This class is hosted in a custom CSS.

If you click on this text background-color will using a custom javascript file.