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

modifierspace
grid-22 columns
grid-33 columns
grid-44 columns

Spacing

modifierspace
mt-11.5rem top margin
mt-23rem top margin
mt-34.5rem top margin
mt-46rem top margin

use pt-1 ~ pt-4 for top padding

modifierspace
mb-11.5rem bottom margin
mb-23rem bottom margin
mb-34.5rem bottom margin
mb-46rem 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):

1metaThemeColor = "#123456"