1 |
caf16a48
|
Assos Assos
|
<!-- @file Instructions on how to sub-theme the Drupal Bootstrap base theme. -->
|
2 |
|
|
<!-- @defgroup -->
|
3 |
|
|
# Sub-Theming
|
4 |
|
|
|
5 |
|
|
- [Prerequisite](#prerequisite)
|
6 |
|
|
- [Setup](#setup)
|
7 |
|
|
- [Choose an Existing Starterkit](#starterkit)
|
8 |
|
|
- [Create a New Sub-theme](#create)
|
9 |
|
|
- [Enable Your New Sub-theme](#enable)
|
10 |
|
|
|
11 |
|
|
## Prerequisite
|
12 |
|
|
Read the @link getting_started Getting Started @endlink topic.
|
13 |
|
|
|
14 |
|
|
---
|
15 |
|
|
|
16 |
|
|
## Setup
|
17 |
|
|
Below are instructions on how to create a [Drupal Bootstrap] based sub-theme.
|
18 |
|
|
There are several different variations on how to accomplish this task, but this
|
19 |
|
|
topic will focus on the two primarily and most common ways.
|
20 |
|
|
|
21 |
|
|
#### Choose an Existing Starterkit {#starterkit}
|
22 |
|
|
|
23 |
|
|
- @link subtheme_cdn CDN Starterkit @endlink - uses the "out-of-the-box"
|
24 |
|
|
CSS and JavaScript files served by the [jsDelivr CDN].
|
25 |
1f623f01
|
Assos Assos
|
- @link subtheme_less Less Starterkit @endlink - uses the [Bootstrap Framework]
|
26 |
|
|
source files and a local [Less] preprocessor.
|
27 |
|
|
- @link subtheme_sass Sass Starterkit @endlink - uses the [Bootstrap Framework]
|
28 |
|
|
source files and a local [Sass] preprocessor.
|
29 |
caf16a48
|
Assos Assos
|
|
30 |
|
|
#### Create a New Sub-theme {#create}
|
31 |
|
|
|
32 |
|
|
1. Copy over one of the starterkits you have chosen from the
|
33 |
|
|
`./bootstrap/starterkits` folder into `sites/all/themes` or a respective
|
34 |
|
|
`sites/*/themes` folder.
|
35 |
|
|
2. Rename the folder to a unique machine readable name. This will be your
|
36 |
eefc2ac0
|
Assos Assos
|
sub-theme's "name". For this example and future examples we'll use
|
37 |
|
|
`subtheme`.
|
38 |
|
|
3. Rename `./subtheme/cdn.starterkit` or, if using the LESS Starterkit,
|
39 |
|
|
`./subtheme/less.starterkit` to match the folder name and append `.info`
|
40 |
|
|
(e.g. `./subtheme/subtheme.info`).
|
41 |
caf16a48
|
Assos Assos
|
4. Open `./subtheme/subtheme.info` and change the name, description and any
|
42 |
|
|
other properties to suite your needs.
|
43 |
|
|
|
44 |
|
|
{.alert.alert-warning} **WARNING:** Ensure that the `.starterkit` suffix is
|
45 |
|
|
not present on your sub-theme's `.info` filename. This suffix is simply a stop
|
46 |
|
|
gap measure to ensure that the bundled starter kit sub-theme cannot be enabled
|
47 |
|
|
or used directly. This helps people unfamiliar with Drupal avoid modifying the
|
48 |
|
|
starter kit sub-theme directly and instead forces them to create a new sub-theme
|
49 |
|
|
to modify.
|
50 |
|
|
|
51 |
|
|
#### Enable Your New Sub-theme {#enable}
|
52 |
|
|
In your Drupal site, navigate to `admin/appearance` and click the `Enable and
|
53 |
|
|
set default` link next to your newly created sub-theme.
|
54 |
|
|
|
55 |
|
|
---
|
56 |
|
|
|
57 |
|
|
{.alert.alert-info} Please refer to [Choose an Existing Starterkit](#starterkit)
|
58 |
|
|
for additional documentation pertaining to the chosen Starterkit.
|
59 |
|
|
|
60 |
|
|
[Drupal Bootstrap]: https://www.drupal.org/project/bootstrap
|
61 |
9525582e
|
Assos Assos
|
[Bootstrap Framework]: https://getbootstrap.com/docs/3.3/
|
62 |
|
|
[jsDelivr CDN]: https://www.jsdelivr.com
|
63 |
1f623f01
|
Assos Assos
|
[Less]: http://lesscss.org
|
64 |
|
|
[Sass]: http://sass-lang.com |