Newer
Older
<!-- @file Overview of theme settings for Drupal Bootstrap based themes. -->
<!-- @defgroup -->
<!-- @ingroup -->
# Theme Settings
Mark Halliwell
committed
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
Drupal 8 introduced the [config system](https://www.drupal.org/documentation/administer/config).
Theme settings have now become quite more complex due to how and where they are
stored and at what point in the process they are accessed.
There are essentially four places where theme settings do or could reside:
1. **Install Config** - `./THEMENAME/config/install/THEMENAME.settings.yml`
This is the install config only. They will only be set upon the initial
installation of a theme. This is **not** like previous Drupal implementations
where changes made here are reflected after a cache rebuild. The only way
to make changes made to this file be used after a theme has been installed
is to completely uninstall and reinstall the theme. To supply default values
when a theme is installed, create the file named above and add the following:
```yaml
# Install settings (these are only set once).
SETTING_NAME: SETTING_VALUE
```
2. **Exported Config** - `./CONFIG_DIR/THEMENAME.settings.yml`
This is where theme settings are exported. The `CONFIG_DIR` is usually a
directory located either just inside or outside the `DOCROOT` of the site.
You can read more about this in the link above. This file is automatically
generated; **DO NOT EDIT MANUALLY**.
3. **Active Config** - `(Database)`
Located in both the `config` and `cache_config` tables there will be an entry
named `THEMENAME.settings`. This is where the "active" config is stored.
These database entries are automatically generated; **DO NOT EDIT MANUALLY**.
4. **Overridden Config** - `./DOCROOT/sites/default/settings[.local].php`
This is your site's `settings[.local].php` file. Despite its path/filename,
anything stored in the `$config` variable does not supply default values.
These values actually override any exported or active config. While it is
technically possible to specify your config based theme settings here, it is
important to remember that this file's main purpose is to supply
environmental specific `$database` and `$settings` values (e.g. local,
stage, prod, etc.); not config. Its use to store config based theme settings
of any kind here is highly discouraged and not supported by this project.
While not an exception, it is important to note that this base-theme does
support various theme specific `$settings` values, which are not the same as
or to be confused with the config based theme settings (read more below).
If you are migrating from older versions of Drupal and need help wrapping your
head around the config paradigm shift, think of "Active Config" as the new
".info" file, but specifically for your theme's settings. Because this is config
though, you don't edit it manually. Instead, you should navigate to your theme's
settings UI in the browser, make and save the desired changes, and then export
your config. Your new theme settings will appear in the exported config
directory.
If you need to programmatically access or modify a theme's settings, it's best
to use this base-theme's APIs. To retrieve a theme setting, use:
\Drupal\bootstrap\Theme::getSetting(). To set a theme setting, use:
\Drupal\bootstrap\Theme::setSetting():
```php
<?php
use Drupal\bootstrap\Bootstrap;
$theme = Bootstrap::getTheme('THEMENAME');
// Retrieve a theme setting.
$theme->getSetting('my_setting', 'a default value');
// Set a theme setting (saved to config automatically).
$theme->setSetting('my_setting', 'a new value');
Mark Halliwell
committed
```
Mark Halliwell
committed
<!-- THEME SETTINGS GENERATION START -->
Mark Halliwell
committed
---
### General > Buttons
Mark Halliwell
committed
<table class="table table-striped table-responsive">
Mark Halliwell
committed
<thead>
<tr>
<th class="col-xs-3">Setting name</th>
<th>Description and default value</th>
</tr>
</thead>
Mark Halliwell
committed
<tbody>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
button_colorize
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Adds classes to buttons based on their text value.</div>
<pre class="language-yaml"><code>button_colorize: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Adds icons to buttons based on the text value</div>
<pre class="language-yaml"><code>button_iconize: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Defines the Bootstrap Buttons specific size</div>
<pre class="language-yaml"><code>button_size: ''</code></pre>
Mark Halliwell
committed
</td>
</tr>
</tbody>
</table>
---
### General > Container
Mark Halliwell
committed
<table class="table table-striped table-responsive">
Mark Halliwell
committed
<thead>
<tr>
<th class="col-xs-3">Setting name</th>
<th>Description and default value</th>
</tr>
</thead>
Mark Halliwell
committed
<tbody>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
fluid_container
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Uses the <code>.container-fluid</code> class instead of <code>.container</code>.</div>
<pre class="language-yaml"><code>fluid_container: 0</code></pre>
Mark Halliwell
committed
</td>
</tr>
</tbody>
</table>
---
### General > Forms
Mark Halliwell
committed
<table class="table table-striped table-responsive">
Mark Halliwell
committed
<thead>
<tr>
<th class="col-xs-3">Setting name</th>
<th>Description and default value</th>
</tr>
</thead>
Mark Halliwell
committed
<tbody>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
forms_has_error_value_toggle
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">If an element has a <code>.has-error</code> class attached to it, enabling this will automatically remove that class when a value is entered.</div>
<pre class="language-yaml"><code>forms_has_error_value_toggle: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
forms_required_has_error
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">If an element in a form is required, enabling this will always display the element with a <code>.has-error</code> class. This turns the element red and helps in usability for determining which form elements are required to submit the form.</div>
<pre class="language-yaml"><code>forms_required_has_error: 0</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
forms_smart_descriptions
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Convert descriptions into tooltips (must be enabled) automatically based on certain criteria. This helps reduce the, sometimes unnecessary, amount of noise on a page full of form elements.</div>
<pre class="language-yaml"><code>forms_smart_descriptions: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
forms_smart_descriptions_allowed_tags
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Prevents descriptions from becoming tooltips by checking for HTML not in the list above (i.e. links). Separate by commas. To disable this filtering criteria, leave an empty value.</div>
<pre class="language-yaml"><code>forms_smart_descriptions_allowed_tags: 'b, code, em, i, kbd, span, strong'</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
forms_smart_descriptions_limit
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Prevents descriptions from becoming tooltips by checking the character length of the description (HTML is not counted towards this limit). To disable this filtering criteria, leave an empty value.</div>
<pre class="language-yaml"><code>forms_smart_descriptions_limit: '250'</code></pre>
Mark Halliwell
committed
</td>
</tr>
</tbody>
</table>
---
### General > Images
Mark Halliwell
committed
<table class="table table-striped table-responsive">
Mark Halliwell
committed
<thead>
<tr>
<th class="col-xs-3">Setting name</th>
<th>Description and default value</th>
</tr>
</thead>
Mark Halliwell
committed
<tbody>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
image_responsive
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</div>
<pre class="language-yaml"><code>image_responsive: 1</code></pre>
</td>
</tr>
<tr>
<td class="col-xs-3">
image_shape
</td>
<td>
<div class="help-block">Add classes to an <code><img></code> element to easily style images in any project.</div>
<pre class="language-yaml"><code>image_shape: ''</code></pre>
Mark Halliwell
committed
</td>
</tr>
</tbody>
</table>
---
### General > Tables
Mark Halliwell
committed
<table class="table table-striped table-responsive">
Mark Halliwell
committed
<thead>
<tr>
<th class="col-xs-3">Setting name</th>
<th>Description and default value</th>
</tr>
</thead>
Mark Halliwell
committed
<tbody>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
table_bordered
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Add borders on all sides of the table and cells.</div>
<pre class="language-yaml"><code>table_bordered: 0</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
table_condensed
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Make tables more compact by cutting cell padding in half.</div>
<pre class="language-yaml"><code>table_condensed: 0</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Enable a hover state on table rows.</div>
<pre class="language-yaml"><code>table_hover: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Add zebra-striping to any table row within the <code><tbody></code>.</div>
<pre class="language-yaml"><code>table_striped: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
table_responsive
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Wraps tables with <code>.table-responsive</code> to make them horizontally scroll when viewing them on devices under 768px. When viewing on devices larger than 768px, you will not see a difference in the presentational aspect of these tables. The <code>Automatic</code> option will only apply this setting for front-end facing tables, not the tables in administrative areas.</div>
<pre class="language-yaml"><code>table_responsive: -1</code></pre>
Mark Halliwell
committed
</td>
</tr>
</tbody>
</table>
---
### Components > Breadcrumbs
Mark Halliwell
committed
<table class="table table-striped table-responsive">
Mark Halliwell
committed
<thead>
<tr>
<th class="col-xs-3">Setting name</th>
<th>Description and default value</th>
</tr>
</thead>
Mark Halliwell
committed
<tbody>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Show or hide the Breadcrumbs</div>
<pre class="language-yaml"><code>breadcrumb: '1'</code></pre>
</td>
</tr>
<tr>
<td class="col-xs-3">
breadcrumb_home
</td>
<td>
<div class="help-block">If your site has a module dedicated to handling breadcrumbs already, ensure this setting is enabled.</div>
<pre class="language-yaml"><code>breadcrumb_home: 0</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
breadcrumb_title
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">If your site has a module dedicated to handling breadcrumbs already, ensure this setting is disabled.</div>
<pre class="language-yaml"><code>breadcrumb_title: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
</tbody>
</table>
---
### Components > Navbar
Mark Halliwell
committed
<table class="table table-striped table-responsive">
Mark Halliwell
committed
<thead>
<tr>
<th class="col-xs-3">Setting name</th>
<th>Description and default value</th>
</tr>
</thead>
Mark Halliwell
committed
<tbody>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
navbar_inverse
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Select if you want the inverse navbar style.</div>
<pre class="language-yaml"><code>navbar_inverse: 0</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
navbar_position
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Determines where the navbar is positioned on the page.</div>
<pre class="language-yaml"><code>navbar_position: ''</code></pre>
Mark Halliwell
committed
</td>
</tr>
</tbody>
</table>
Mark Halliwell
committed
Mark Halliwell
committed
### Components > Region Wells
<table class="table table-striped table-responsive">
<thead>
<tr>
<th class="col-xs-3">Setting name</th>
<th>Description and default value</th>
</tr>
</thead>
<tbody>
Mark Halliwell
committed
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
Mark Halliwell
committed
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Enable the <code>.well</code>, <code>.well-sm</code> or <code>.well-lg</code> classes for specified regions.</div>
<pre class="language-yaml"><code>region_wells:
navigation: ''
navigation_collapsible: ''
header: ''
highlighted: ''
help: ''
content: ''
sidebar_first: ''
sidebar_second: well
Mark Halliwell
committed
</td>
</tr>
</tbody>
</table>
---
### JavaScript > Modals
<table class="table table-striped table-responsive">
Mark Halliwell
committed
<thead>
<tr>
<th class="col-xs-3">Setting name</th>
<th>Description and default value</th>
</tr>
</thead>
Mark Halliwell
committed
<tbody>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
modal_enabled
</td>
Mark Halliwell
committed
<td>
<pre class="language-yaml"><code>modal_enabled: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
<td class="col-xs-3">
modal_jquery_ui_bridge
</td>
<td>
<div class="help-block">Enabling this replaces the core/jquery.ui.dialog dependency in the core/drupal.dialog library with a jQuery UI Dialog widget bridge. This bridge adds support to Bootstrap Modals so that it may interpret jQuery UI Dialog functionality.</div>
<pre class="language-yaml"><code>modal_jquery_ui_bridge: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
modal_animation
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Apply a CSS fade transition to modals.</div>
<pre class="language-yaml"><code>modal_animation: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
modal_backdrop
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</div>
<pre class="language-yaml"><code>modal_backdrop: 'true'</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
<td class="col-xs-3">
modal_focus_input
</td>
<td>
<div class="help-block">Enabling this focuses on the first available and visible input found in the modal after it's opened. If no element is found, the close button (if visible) is focused instead.</div>
<pre class="language-yaml"><code>modal_focus_input: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
modal_keyboard
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Closes the modal when escape key is pressed.</div>
<pre class="language-yaml"><code>modal_keyboard: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
<td class="col-xs-3">
modal_select_text
</td>
<td>
<div class="help-block">Enabling this selects the text of the first available and visible input found after it has been focused.</div>
<pre class="language-yaml"><code>modal_select_text: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
modal_show
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Shows the modal when initialized.</div>
<pre class="language-yaml"><code>modal_show: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
modal_size
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Defines the modal size between the default, <code>modal-sm</code> and <code>modal-lg</code>.</div>
<pre class="language-yaml"><code>modal_size: ''</code></pre>
Mark Halliwell
committed
</td>
</tr>
</tbody>
</table>
---
### JavaScript > Popovers
<table class="table table-striped table-responsive">
Mark Halliwell
committed
<thead>
<tr>
<th class="col-xs-3">Setting name</th>
<th>Description and default value</th>
</tr>
</thead>
Mark Halliwell
committed
<tbody>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
popover_enabled
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Elements that have the <code>data-toggle="popover"</code> attribute set will automatically initialize the popover upon page load. <strong class='error text-error'>WARNING: This feature can sometimes impact performance. Disable if pages appear to hang after initial load.</strong></div>
<pre class="language-yaml"><code>popover_enabled: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
popover_animation
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Apply a CSS fade transition to the popover.</div>
<pre class="language-yaml"><code>popover_animation: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
<td class="col-xs-3">
popover_auto_close
</td>
<td>
<div class="help-block">If enabled, the active popover will automatically close when it loses focus, when a click occurs anywhere in the DOM (outside the popover), the escape key (ESC) is pressed or when another popover is opened.</div>
<pre class="language-yaml"><code>popover_auto_close: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
popover_container
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Appends the popover to a specific element. Example: <code>body</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</div>
<pre class="language-yaml"><code>popover_container: body</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
popover_content
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Default content value if <code>data-content</code> or <code>data-target</code> attributes are not present.</div>
<pre class="language-yaml"><code>popover_content: ''</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
popover_delay
</td>
Mark Halliwell
committed
<td>
<div class="help-block">The amount of time to delay showing and hiding the popover (in milliseconds). Does not apply to manual trigger type.</div>
<pre class="language-yaml"><code>popover_delay: '0'</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
popover_html
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</div>
<pre class="language-yaml"><code>popover_html: 0</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
popover_placement
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Where to position the popover. When <code>auto</code> is specified, it will dynamically reorient the popover. For example, if placement is <code>auto left</code>, the popover will display to the left when possible, otherwise it will display right.</div>
<pre class="language-yaml"><code>popover_placement: right</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
popover_selector
</td>
Mark Halliwell
committed
<td>
<div class="help-block">If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added.</div>
<pre class="language-yaml"><code>popover_selector: ''</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
popover_title
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Default title value if <code>title</code> attribute isn't present.</div>
<pre class="language-yaml"><code>popover_title: ''</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
popover_trigger
</td>
Mark Halliwell
committed
<td>
<div class="help-block">How a popover is triggered.</div>
<pre class="language-yaml"><code>popover_trigger: click</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
popover_trigger_autoclose
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Will automatically close the current popover if a click occurs anywhere else other than the popover element.</div>
<pre class="language-yaml"><code>popover_trigger_autoclose: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
</tbody>
</table>
---
### JavaScript > Tooltips
<table class="table table-striped table-responsive">
Mark Halliwell
committed
<thead>
<tr>
<th class="col-xs-3">Setting name</th>
<th>Description and default value</th>
</tr>
</thead>
Mark Halliwell
committed
<tbody>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
tooltip_enabled
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Elements that have the <code>data-toggle="tooltip"</code> attribute set will automatically initialize the tooltip upon page load. <strong class='error text-error'>WARNING: This feature can sometimes impact performance. Disable if pages appear to "hang" after initial load.</strong></div>
<pre class="language-yaml"><code>tooltip_enabled: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
tooltip_animation
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Apply a CSS fade transition to the tooltip.</div>
<pre class="language-yaml"><code>tooltip_animation: 1</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
tooltip_container
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Appends the tooltip to a specific element. Example: <code>body</code>.</div>
<pre class="language-yaml"><code>tooltip_container: body</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
tooltip_delay
</td>
Mark Halliwell
committed
<td>
<div class="help-block">The amount of time to delay showing and hiding the tooltip (in milliseconds). Does not apply to manual trigger type.</div>
<pre class="language-yaml"><code>tooltip_delay: '0'</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
tooltip_html
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</div>
<pre class="language-yaml"><code>tooltip_html: 0</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
tooltip_placement
</td>
Mark Halliwell
committed
<td>
<div class="help-block">Where to position the tooltip. When <code>auto</code> is specified, it will dynamically reorient the tooltip. For example, if placement is <code>auto left</code>, the tooltip will display to the left when possible, otherwise it will display right.</div>
<pre class="language-yaml"><code>tooltip_placement: 'auto left'</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
tooltip_selector
</td>
Mark Halliwell
committed
<td>
<div class="help-block">If a selector is provided, tooltip objects will be delegated to the specified targets.</div>
<pre class="language-yaml"><code>tooltip_selector: ''</code></pre>
Mark Halliwell
committed
</td>
</tr>
<tr>
Mark Halliwell
committed
<td class="col-xs-3">
tooltip_trigger
</td>
Mark Halliwell
committed
<td>
<div class="help-block">How a tooltip is triggered.</div>
<pre class="language-yaml"><code>tooltip_trigger: hover</code></pre>
Mark Halliwell
committed
</td>
</tr>
</tbody>
</table>
---
### CDN (Content Delivery Network)
<table class="table table-striped table-responsive">
<thead>
<tr>
<th class="col-xs-3">Setting name</th>
<th>Description and default value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-3">
cdn_provider
</td>
<td>
<div class="help-block">Choose the CDN Provider used to load Bootstrap resources.</div>
<pre class="language-yaml"><code>cdn_provider: jsdelivr</code></pre>
</td>
</tr>
<tr>
<td class="col-xs-3">
cdn_custom_css
</td>
<td>
<div class="help-block">It is best to use <code>https</code> protocols here as it will allow more flexibility if the need ever arises.</div>
<pre class="language-yaml"><code>cdn_custom_css: 'https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.css'</code></pre>
</td>
</tr>
<tr>
<td class="col-xs-3">
cdn_custom_css_min
</td>
<td>
<div class="help-block">Additionally, you can provide the minimized version of the file. It will be used instead if site aggregation is enabled.</div>
<pre class="language-yaml"><code>cdn_custom_css_min: 'https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css'</code></pre>
</td>
</tr>
<tr>
<td class="col-xs-3">
cdn_custom_js
</td>
<td>
<div class="help-block">It is best to use <code>https</code> protocols here as it will allow more flexibility if the need ever arises.</div>
<pre class="language-yaml"><code>cdn_custom_js: 'https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.js'</code></pre>
</td>
</tr>
<tr>
<td class="col-xs-3">
cdn_custom_js_min
</td>
<td>
<div class="help-block">Additionally, you can provide the minimized version of the file. It will be used instead if site aggregation is enabled.</div>
<pre class="language-yaml"><code>cdn_custom_js_min: 'https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js'</code></pre>
</td>
</tr>
<tr>
<td class="col-xs-3">
cdn_jsdelivr_version
</td>
<td>
<div class="help-block">Choose the Bootstrap version from jsdelivr</div>
<pre class="language-yaml"><code>cdn_jsdelivr_version: 3.4.1</code></pre>
</td>
</tr>
<tr>
<td class="col-xs-3">
cdn_jsdelivr_theme
</td>
<td>
<div class="help-block">Choose the Example Theme provided by Bootstrap or one of the Bootswatch themes.</div>
<pre class="language-yaml"><code>cdn_jsdelivr_theme: bootstrap</code></pre>
</td>
</tr>
</tbody>
</table>
---
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
### CDN (Content Delivery Network) > Advanced Cache
<table class="table table-striped table-responsive">
<thead>
<tr>
<th class="col-xs-3">Setting name</th>
<th>Description and default value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-3">
cdn_cache_ttl_versions
</td>
<td>
<div class="help-block">The length of time to cache the CDN verions before requesting them from the API again.</div>
<pre class="language-yaml"><code>cdn_cache_ttl_versions: 604800</code></pre>
</td>
</tr>
<tr>
<td class="col-xs-3">
cdn_cache_ttl_themes
</td>
<td>
<div class="help-block">The length of time to cache the CDN themes (if applicable) before requesting them from the API again.</div>
<pre class="language-yaml"><code>cdn_cache_ttl_themes: 2630000</code></pre>
</td>
</tr>
<tr>
<td class="col-xs-3">
cdn_cache_ttl_assets
</td>
<td>
<div class="help-block">The length of time to cache the parsing and processing of CDN assets before rebuilding them again. Note: any change to CDN values automatically triggers a new build.</div>
<pre class="language-yaml"><code>cdn_cache_ttl_assets: -1</code></pre>
</td>
</tr>
<tr>
<td class="col-xs-3">
cdn_cache_ttl_library
</td>
<td>
<div class="help-block">The length of time to cache the theme's library alterations before rebuilding them again. Note: any change to CDN values automatically triggers a new build.</div>
<pre class="language-yaml"><code>cdn_cache_ttl_library: -1</code></pre>
</td>
</tr>
</tbody>
</table>
---
### Advanced
<table class="table table-striped table-responsive">
<thead>
<tr>
<th class="col-xs-3">Setting name</th>
<th>Description and default value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-3">
include_deprecated
</td>
<td>
<div class="help-block">Enabling this setting will include any <code>deprecated.php</code> file found in your theme or base themes.</div>
<pre class="language-yaml"><code>include_deprecated: 0</code></pre>
</td>
</tr>
<tr>
<td class="col-xs-3">
suppress_deprecated_warnings
</td>
<td>
<div class="help-block">Enable this setting if you wish to suppress deprecated warning messages.</div>
<pre class="language-yaml"><code>suppress_deprecated_warnings: 0</code></pre>
</td>
</tr>
</tbody>
</table>
Mark Halliwell
committed
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
<!-- THEME SETTINGS GENERATION END -->
### Environmental Theme Settings
These settings are not config based and cannot be set via the UI. They can
only be set in your site's `settings[.local].php` file. They are intended to be
used only for local development purposes:
#### Development Mode
This indicates that theme is in "development" mode:
```php
<?php
$settings['theme.dev'] = TRUE;
```
While this setting doesn't really do much on its own, its primary function is
intended to help with sub-theming. This adds variables that can be accessed
elsewhere in your code:
**PHP**
```php
<?php
use Drupal\bootstrap\Bootstrap;
/**
* Implements hook_preprocess_HOOK().
*/
function THEMENAME_preprocess_page(&$variables) {
// Preprocess hooks already have this in the "theme" array.
// This is also passed to the Twig template (see below).
if ($variables['theme']['dev']) {
// Do something here.
}
}
/**
* Implements hook_js_settings_alter().
*/
function THEMENAME_js_settings_alter(array &$settings, AttachedAssetsInterface $assets) {
// In other procedural functions, use the Bootstrap helper method to retrieve
// the theme and then access the method there.
$theme = Bootstrap::getTheme();
if ($theme->isDev()) {
// Do something here.
}
}
```
In Drupal Bootstrap based plugins, there is a `theme` property already in the
plugin instance that can be accessed (e.g. `$this->theme->isDev()`).
**Twig**
```twig
{% if theme.dev %}
{# Do something here. #}
{% endif %}
```
**JavaScript**
```js
var theme = drupalSettings['THEMENAME'] || {};
if (theme.dev) {
// Do something here.
}
```
#### Livereload
This automatically adds livereload to the page. Supply one of the following:
```php
<?php
// Enable default value: //127.0.0.1:35729/livereload.js.
$settings['theme.livereload'] = TRUE;
// Or, set just the port number: //127.0.0.1:12345/livereload.js.
$settings['theme.livereload'] = 12345;
// Or, Set an explicit URL.
$settings['theme.livereload'] = '//127.0.0.1:35729/livereload.js';
```
Mark Halliwell
committed
[Drupal Bootstrap]: https://www.drupal.org/project/bootstrap
[Bootstrap Framework]: https://getbootstrap.com/docs/3.4/