You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1.4 KiB
41 lines
1.4 KiB
4 years ago
|
////
|
||
|
|
Custom Themes
|
||
|
|
Creating a theme
|
||
|
|
|
||
|
|
This document is included in:
|
||
|
|
|
||
|
|
- user-manual
|
||
|
|
////
|
||
|
|
|
||
|
|
You can create your own themes to apply to your documents.
|
||
|
|
|
||
|
|
Themes go in the [.path]_sass/_ folder.
|
||
|
|
To create a new theme, let's call it `hipster`, start by creating two new files:
|
||
|
|
|
||
|
|
[.path]_sass/hipster.scss_::
|
||
|
|
* Imports the theme settings, which includes default variables and resets
|
||
|
|
* Imports the AsciiDoc components
|
||
|
|
* Defines any explicit customization
|
||
|
|
|
||
|
|
[.path]_sass/settings/_hipster.scss_::
|
||
|
|
* Sets variables that customize Foundation 4 and the AsciiDoc CSS components
|
||
|
|
|
||
|
|
Here's a minimal version of [.path]_sass/hipster.scss_:
|
||
|
|
|
||
|
|
[source,scss]
|
||
|
|
----
|
||
|
|
@import "settings/hipster";
|
||
|
|
@import "components/asciidoc";
|
||
|
|
@import "components/awesome-icons";
|
||
|
|
----
|
||
|
|
|
||
|
|
NOTE: You don't have to include the underscore prefix when importing files.
|
||
|
|
|
||
|
|
NOTE: The `awesome-icons` component is only applicable to HTML generated by Asciidoctor > 0.1.2 with the `icons` attribute set to `font`.
|
||
|
|
|
||
|
|
You can add any explicit customization below the import lines.
|
||
|
|
|
||
|
|
The variables you can set in [.path]_sass/settings/_hipster.scss_ are a combination of the {factory-ref}/blob/master/sass/settings/_settings.scss.dist[Foundation 4 built-in global settings] and {factory-ref}/blob/master/sass/settings/_defaults.scss[global settings and imports for the AsciiDoc components].
|
||
|
|
|
||
|
|
Once you've created your custom theme, it's time to apply it to your document.
|