blob: be7496ca97fb37514b47dc60406376d456b1f7ff (
plain)
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
+++
description = "basic configuration"
title = "Customize layouts & components"
+++
### Shortcodes modifiers
These modifiers are classes you can use with shortcodes to customize the look and feel of your layouts and components.
#### Grid
| modifier | space |
| --- | --- |
| grid-2 | 2 columns |
| grid-3 | 3 columns |
| grid-4 | 4 columns |
#### Spacing
| modifier | space |
| --- | --- |
| mt-1 | 1.5rem top margin |
| mt-2 | 3rem top margin |
| mt-3 | 4.5rem top margin |
| mt-4 | 6rem top margin |
> use pt-1 \~ pt-4 for top padding
| modifier | space |
| --- | --- |
| mb-1 | 1.5rem bottom margin |
| mb-2 | 3rem bottom margin |
| mb-3 | 4.5rem bottom margin |
| mb-4 | 6rem bottom margin |
> use pb-1 \~ pb-4 for bottom padding
### How do I disable dark mode?
Under `params` add `enableDarkMode = false` to your `config.toml` file. If your site is based on the exampleSite, the value is already included; you only need to uncomment it.
> The user will still have the option to activate dark mode, if they so wish through the UI
### How do I change the theme color?
If the theme is a git submodule, you can copy the file `assets/sass/_variables.sass` from the theme into your own site.
The location must be exactly the same as in the theme, so put it in `YourFancySite/assets/sass/`.
You can then edit the file to customize the theme color in your site without having to modify the theme itself.
### How can I change the address bar color on mobile devices?
Just put the following line in the `[params]` section in your `config.toml` file (and of course change the color):
```toml
metaThemeColor = "#123456"
```
### How do I add custom styles, scripts, meta tags e.t.c
Use hooks. Ideally, you should not override the them directly.
Instead, you should duplicate [these files](https://github.com/onweru/compose/tree/master/layouts/partials/hooks) at the root of you site directory.
1. layouts/partials/hooks/head.html
2. layouts/partials/hooks/scripts.html
The contents of the first file will be attached just before the `</head>` tag.
The contents of the second file will be attached just before the `</body>` tag.
Alternatively, if you want to use the `config.toml` to track your custom styles or scripts, declare them as slices under `[params]` like so:
```toml
...
[params]
customCSS = [styleURL1, styleURL2 ...]
customJS = [scriptURL1, scriptURL2 ... ]
...
```
### I want to add custom sass
|
