blob: 108d840e5b8212a31ed1879f64543befd5c9b60d (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
+++
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 :
```toml
[reveal_hugo]
custom_css = "css/custom.css"
```
<small>
The `custom.css` can be present in `static/css/custom.css`
</small>
---
### Extending with javascript
Same as CSS you can extend your presentation with javascript using `partials` or with `custom_js` in your configuration:
```toml
[reveal_hugo]
custom_js = "js/custom.js"
```
<small>
The `custom.js` can be present in `static/js/custom.js`
</small>
---
{{< 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.
|
