1 <!-- @file Overview of theme settings for Drupal Bootstrap based themes. -->
6 To override a setting, open `./config/install/THEMENAME.settings.yml` and add the following:
12 SETTING_NAME: SETTING_VALUE
19 <table class="table table-striped table-responsive">
20 <thead><tr><th class="col-xs-3">Setting name</th><th>Description and default value</th></tr></thead>
23 <td class="col-xs-3">include_deprecated</td>
25 <div class="help-block">Enabling this setting will include any <code>deprecated.php</code> file found in your theme or base themes.</div>
26 <pre class=" language-yaml"><code>include_deprecated: 0
31 <td class="col-xs-3">suppress_deprecated_warnings</td>
33 <div class="help-block">Enable this setting if you wish to suppress deprecated warning messages. <strong class='error text-error'>WARNING: Suppressing these messages does not "fix" the problem and you will inevitably encounter issues when they are removed in future updates. Only use this setting in extreme and necessary circumstances.</strong></div>
34 <pre class=" language-yaml"><code>suppress_deprecated_warnings: 0
43 ### Advanced > CDN (Content Delivery Network)
45 <table class="table table-striped table-responsive">
46 <thead><tr><th class="col-xs-3">Setting name</th><th>Description and default value</th></tr></thead>
49 <td class="col-xs-3">cdn_provider</td>
51 <div class="help-block">Choose between jsdelivr or a custom cdn source.</div>
52 <pre class=" language-yaml"><code>cdn_provider: jsdelivr
57 <td class="col-xs-3">cdn_custom_css</td>
59 <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>
60 <pre class=" language-yaml"><code>cdn_custom_css: 'https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.css'
65 <td class="col-xs-3">cdn_custom_css_min</td>
67 <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>
68 <pre class=" language-yaml"><code>cdn_custom_css_min: 'https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css'
73 <td class="col-xs-3">cdn_custom_js</td>
75 <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>
76 <pre class=" language-yaml"><code>cdn_custom_js: 'https://cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.js'
81 <td class="col-xs-3">cdn_custom_js_min</td>
83 <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>
84 <pre class=" language-yaml"><code>cdn_custom_js_min: 'https://cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.min.js'
89 <td class="col-xs-3">cdn_jsdelivr_version</td>
91 <div class="help-block">Choose the Bootstrap version from jsdelivr</div>
92 <pre class=" language-yaml"><code>cdn_jsdelivr_version: 3.3.7
97 <td class="col-xs-3">cdn_jsdelivr_theme</td>
99 <div class="help-block">Choose the example Bootstrap Theme provided by Bootstrap or one of the Bootswatch themes.</div>
100 <pre class=" language-yaml"><code>cdn_jsdelivr_theme: bootstrap
109 ### Components > Breadcrumbs
111 <table class="table table-striped table-responsive">
112 <thead><tr><th class="col-xs-3">Setting name</th><th>Description and default value</th></tr></thead>
115 <td class="col-xs-3">breadcrumb</td>
117 <div class="help-block">Show or hide the Breadcrumbs</div>
118 <pre class=" language-yaml"><code>breadcrumb: '1'
123 <td class="col-xs-3">breadcrumb_home</td>
125 <div class="help-block">If your site has a module dedicated to handling breadcrumbs already, ensure this setting is enabled.</div>
126 <pre class=" language-yaml"><code>breadcrumb_home: 0
131 <td class="col-xs-3">breadcrumb_title</td>
133 <div class="help-block">If your site has a module dedicated to handling breadcrumbs already, ensure this setting is disabled.</div>
134 <pre class=" language-yaml"><code>breadcrumb_title: 1
143 ### Components > Navbar
145 <table class="table table-striped table-responsive">
146 <thead><tr><th class="col-xs-3">Setting name</th><th>Description and default value</th></tr></thead>
149 <td class="col-xs-3">navbar_inverse</td>
151 <div class="help-block">Select if you want the inverse navbar style.</div>
152 <pre class=" language-yaml"><code>navbar_inverse: 0
157 <td class="col-xs-3">navbar_position</td>
159 <div class="help-block">Determines where the navbar is positioned on the page.</div>
160 <pre class=" language-yaml"><code>navbar_position: ''
169 ### Components > Region Wells
171 <table class="table table-striped table-responsive">
172 <thead><tr><th class="col-xs-3">Setting name</th><th>Description and default value</th></tr></thead>
175 <td class="col-xs-3">region_wells</td>
177 <div class="help-block">Enable the <code>.well</code>, <code>.well-sm</code> or <code>.well-lg</code> classes for specified regions.</div>
178 <pre class=" language-yaml"><code>region_wells:
180 navigation_collapsible: ''
196 ### General > Buttons
198 <table class="table table-striped table-responsive">
199 <thead><tr><th class="col-xs-3">Setting name</th><th>Description and default value</th></tr></thead>
202 <td class="col-xs-3">button_colorize</td>
204 <div class="help-block">Adds classes to buttons based on their text value.</div>
205 <pre class=" language-yaml"><code>button_colorize: 1
210 <td class="col-xs-3">button_iconize</td>
212 <div class="help-block">Adds icons to buttons based on the text value</div>
213 <pre class=" language-yaml"><code>button_iconize: 1
218 <td class="col-xs-3">button_size</td>
220 <div class="help-block">Defines the Bootstrap Buttons specific size</div>
221 <pre class=" language-yaml"><code>button_size: ''
230 ### General > Container
232 <table class="table table-striped table-responsive">
233 <thead><tr><th class="col-xs-3">Setting name</th><th>Description and default value</th></tr></thead>
236 <td class="col-xs-3">fluid_container</td>
238 <div class="help-block">Uses the <code>.container-fluid</code> class instead of <code>.container</code>.</div>
239 <pre class=" language-yaml"><code>fluid_container: 0
250 <table class="table table-striped table-responsive">
251 <thead><tr><th class="col-xs-3">Setting name</th><th>Description and default value</th></tr></thead>
254 <td class="col-xs-3">forms_has_error_value_toggle</td>
256 <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>
257 <pre class=" language-yaml"><code>forms_has_error_value_toggle: 1
262 <td class="col-xs-3">forms_required_has_error</td>
264 <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>
265 <pre class=" language-yaml"><code>forms_required_has_error: 0
270 <td class="col-xs-3">forms_smart_descriptions</td>
272 <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>
273 <pre class=" language-yaml"><code>forms_smart_descriptions: 1
278 <td class="col-xs-3">forms_smart_descriptions_allowed_tags</td>
280 <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>
281 <pre class=" language-yaml"><code>forms_smart_descriptions_allowed_tags: 'b, code, em, i, kbd, span, strong'
286 <td class="col-xs-3">forms_smart_descriptions_limit</td>
288 <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>
289 <pre class=" language-yaml"><code>forms_smart_descriptions_limit: '250'
300 <table class="table table-striped table-responsive">
301 <thead><tr><th class="col-xs-3">Setting name</th><th>Description and default value</th></tr></thead>
304 <td class="col-xs-3">image_responsive</td>
306 <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>
307 <pre class=" language-yaml"><code>image_responsive: 1
312 <td class="col-xs-3">image_shape</td>
314 <div class="help-block">Add classes to an <code><img></code> element to easily style images in any project.</div>
315 <pre class=" language-yaml"><code>image_shape: ''
326 <table class="table table-striped table-responsive">
327 <thead><tr><th class="col-xs-3">Setting name</th><th>Description and default value</th></tr></thead>
330 <td class="col-xs-3">table_bordered</td>
332 <div class="help-block">Add borders on all sides of the table and cells.</div>
333 <pre class=" language-yaml"><code>table_bordered: 0
338 <td class="col-xs-3">table_condensed</td>
340 <div class="help-block">Make tables more compact by cutting cell padding in half.</div>
341 <pre class=" language-yaml"><code>table_condensed: 0
346 <td class="col-xs-3">table_hover</td>
348 <div class="help-block">Enable a hover state on table rows.</div>
349 <pre class=" language-yaml"><code>table_hover: 1
354 <td class="col-xs-3">table_responsive</td>
356 <div class="help-block">Makes tables responsive by wrapping them in <code>.table-responsive</code> to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</div>
357 <pre class=" language-yaml"><code>table_responsive: 1
362 <td class="col-xs-3">table_striped</td>
364 <div class="help-block">Add zebra-striping to any table row within the <code><tbody></code>.</div>
365 <pre class=" language-yaml"><code>table_striped: 1
374 ### JavaScript > Modals
376 <table class="table table-striped table-responsive">
377 <thead><tr><th class="col-xs-3">Setting name</th><th>Description and default value</th></tr></thead>
380 <td class="col-xs-3">modal_enabled</td>
382 <div class="help-block">Enabling this will replace core's jQuery UI Dialog implementations with modals from the Bootstrap Framework.</div>
383 <pre class=" language-yaml"><code>modal_enabled: 1
388 <td class="col-xs-3">modal_animation</td>
390 <div class="help-block">Apply a CSS fade transition to modals.</div>
391 <pre class=" language-yaml"><code>modal_animation: 1
396 <td class="col-xs-3">modal_backdrop</td>
398 <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>
399 <pre class=" language-yaml"><code>modal_backdrop: 'true'
404 <td class="col-xs-3">modal_keyboard</td>
406 <div class="help-block">Closes the modal when escape key is pressed.</div>
407 <pre class=" language-yaml"><code>modal_keyboard: 1
412 <td class="col-xs-3">modal_show</td>
414 <div class="help-block">Shows the modal when initialized.</div>
415 <pre class=" language-yaml"><code>modal_show: 1
420 <td class="col-xs-3">modal_size</td>
422 <div class="help-block">Defines the modal size between the default, <code>modal-sm</code> and <code>modal-lg</code>.</div>
423 <pre class=" language-yaml"><code>modal_size: ''
432 ### JavaScript > Popovers
434 <table class="table table-striped table-responsive">
435 <thead><tr><th class="col-xs-3">Setting name</th><th>Description and default value</th></tr></thead>
438 <td class="col-xs-3">popover_enabled</td>
440 <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>
441 <pre class=" language-yaml"><code>popover_enabled: 1
446 <td class="col-xs-3">popover_animation</td>
448 <div class="help-block">Apply a CSS fade transition to the popover.</div>
449 <pre class=" language-yaml"><code>popover_animation: 1
454 <td class="col-xs-3">popover_container</td>
456 <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>
457 <pre class=" language-yaml"><code>popover_container: body
462 <td class="col-xs-3">popover_content</td>
464 <div class="help-block">Default content value if <code>data-content</code> or <code>data-target</code> attributes are not present.</div>
465 <pre class=" language-yaml"><code>popover_content: ''
470 <td class="col-xs-3">popover_delay</td>
472 <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>
473 <pre class=" language-yaml"><code>popover_delay: '0'
478 <td class="col-xs-3">popover_html</td>
480 <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>
481 <pre class=" language-yaml"><code>popover_html: 0
486 <td class="col-xs-3">popover_placement</td>
488 <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>
489 <pre class=" language-yaml"><code>popover_placement: right
494 <td class="col-xs-3">popover_selector</td>
496 <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>
497 <pre class=" language-yaml"><code>popover_selector: ''
502 <td class="col-xs-3">popover_title</td>
504 <div class="help-block">Default title value if <code>title</code> attribute isn't present.</div>
505 <pre class=" language-yaml"><code>popover_title: ''
510 <td class="col-xs-3">popover_trigger</td>
512 <div class="help-block">How a popover is triggered.</div>
513 <pre class=" language-yaml"><code>popover_trigger: click
518 <td class="col-xs-3">popover_trigger_autoclose</td>
520 <div class="help-block">Will automatically close the current popover if a click occurs anywhere else other than the popover element.</div>
521 <pre class=" language-yaml"><code>popover_trigger_autoclose: 1
530 ### JavaScript > Tooltips
532 <table class="table table-striped table-responsive">
533 <thead><tr><th class="col-xs-3">Setting name</th><th>Description and default value</th></tr></thead>
536 <td class="col-xs-3">tooltip_enabled</td>
538 <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>
539 <pre class=" language-yaml"><code>tooltip_enabled: 1
544 <td class="col-xs-3">tooltip_animation</td>
546 <div class="help-block">Apply a CSS fade transition to the tooltip.</div>
547 <pre class=" language-yaml"><code>tooltip_animation: 1
552 <td class="col-xs-3">tooltip_container</td>
554 <div class="help-block">Appends the tooltip to a specific element. Example: <code>body</code>.</div>
555 <pre class=" language-yaml"><code>tooltip_container: body
560 <td class="col-xs-3">tooltip_delay</td>
562 <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>
563 <pre class=" language-yaml"><code>tooltip_delay: '0'
568 <td class="col-xs-3">tooltip_html</td>
570 <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>
571 <pre class=" language-yaml"><code>tooltip_html: 0
576 <td class="col-xs-3">tooltip_placement</td>
578 <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>
579 <pre class=" language-yaml"><code>tooltip_placement: 'auto left'
584 <td class="col-xs-3">tooltip_selector</td>
586 <div class="help-block">If a selector is provided, tooltip objects will be delegated to the specified targets.</div>
587 <pre class=" language-yaml"><code>tooltip_selector: ''
592 <td class="col-xs-3">tooltip_trigger</td>
594 <div class="help-block">How a tooltip is triggered.</div>
595 <pre class=" language-yaml"><code>tooltip_trigger: hover
602 [Drupal Bootstrap]: https://www.drupal.org/project/bootstrap
603 [Bootstrap Framework]: http://getbootstrap.com