Drupal 8 Theming
Week 6
.theme file
Theme settings
Summary
- Recap
- .theme functions
- Theme settings
Recap
Libraries
Libraries
Dependencies
adding jQuery
global-styling:
version: 1.x
css:
base:
css/d8imd.css: {}
js:
js/d8imd.js: {}
dependencies:
- core/jqueryLoading order
js-header:
header: true
js:
header.js: {}
js-footer:
js:
footer.js: {}Attaching a library
libraries:
- core/normalize
- d8imd/global-styling
d8imd.info.yml
Attaching a library
{{ attach_library('d8imd/global-styling') }}
foo.html.twig
{{ attach_library(active-theme()~'/global-styling') }}
Another example
{{ attach_library('dazzle_slideshow/dazzle-slideshow-carousel') }}
<section{{ attributes.addClass(classes) }}>
{% endif %}
{{ title_prefix }}
{% if label %}
<h2 {{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% if content_attributes|length %}
<div class="block-content" {{ content_attributes }}>
{% endif %}
{% block content %}
<div class="row partner-view">
<div class="cycle-slideshow"
data-cycle-slides=".views-row"
data-cycle-fx=carousel
data-cycle-timeout=4000
>
{{ content }}
</div>
</div>
{% endblock %}
{% if content_attributes|length %}
</div>
{% endif %}
{% if block.delta != 'main' %}
</section>
{% endif %}
Stylesheets remove
Yes, we have documentation for this to!
Overriding and extending libraries
Drupal coding standards
Drupal 8 follows a SMACSS-style categorization of its CSS rules:
- Base — CSS reset/normalize plus HTML element styling.
- Layout — macro arrangement of a web page, including any grid systems.
- Component — discrete, reusable UI elements.
- State — styles that deal with client-side changes to components.
- Theme — purely visual styling (“look-and-feel”) for a component.
css:
base: base.css
layout: layout.css
component: components.css
css:
base: css/base/normalize.css css/base/elements.css
layout: css/layout/layout.css css/layout/layout--medium.css css/layout/layout--wide.css
component: css/components/button.css css/components/dropdown.css css/components/pagination.css css/components/tabs.css …
theme: css/theme/theme--light.css css/theme/theme--dark.css 
.theme file
.theme
For what?
You can affect the output of certain HTML via preprocess functions.
For example, if you wanted to add a class to a menu and preferred to do this at the PHP level you can.
How?
-
Create a file in your theme directory called mytheme.theme
- Create a function such as mytheme_preprocess_HOOK where HOOK refers to the item you wish to affect.
- Write your changes and save
- Rebuild the cache so your changes are available
Example
Add class my-menu to all menus
/**
* Implements hook_preprocess_HOOK() for menu.html.twig.
*/
function mytheme_preprocess_menu(&$variables) {
// If there is not an existing class array, create an empty array.
if (!isset($variables['attributes']['class'])) {
$variables['attributes']['class'] = [];
}
// Merge with any classes that may have been set
// by other hook_preprocess_menu invocations
$variables['attributes']['class'] =
array_merge($variables['attributes']['class'], ['my-menu']);
}Debugging
Use var_dump, dsm() or XDebug
/**
* Implements hook_preprocess_HOOK() for menu.html.twig.
*/
function mytheme_preprocess_menu(&$variables) {
var_dump($variables);
var_dump($variables['main_menu']);
dsm($variables);
}Hooks?
Use twig debug; see theme suggestions
Read the docs
Example
Add class my-main-menu to the main menu
/**
* Implements hook_preprocess_HOOK() for menu.html.twig.
*/
function mytheme_preprocess_menu(&$variables) {
if ($variables['menu_name'] == 'main') {
if (!isset($variables['attributes']['class'])) {
$variables['attributes']['class'] = [];
}
$variables['attributes']['class'] =
array_merge($variables['attributes']['class'], ['my-main-menu']); }
}Another example
Add page link as a var: url
/**
* Implements hook_preprocess_node().
* When using display suite this is called from calibr8_ds.module
*/
function calibr8_subtheme_preprocess_node(&$variables) {
if(isset($variables['content']['#node'])) {
$node = $variables['content']['#node'];
// Add node url
$variables['url'] = $node->toUrl();
}
}in node.html.twig template:
<a href="{{ url }}" class="inner">Theme settings
Where?
In Drupal 8, themes can modify the entire theme settings form by adding a PHP function to either the themename.theme file or to a themename-settings.php file.
Example
function foo_form_system_theme_settings_alter(
&$form,
\Drupal\Core\Form\FormStateInterface &$form_state,
$form_id = NULL
) {
// Work-around for a core bug affecting admin themes. See issue #943212.
if (isset($form_id)) {
return;
}
$form['foo_example'] = array(
'#type' => 'textfield',
'#title' => t('Widget'),
'#default_value' => theme_get_setting('foo_example'),
'#description' => t("Place this text in the widget spot on your site."),
);
}Add textfield with title Widget
Example
foo_example: blue bikeshed
Add config/install/THEME.settings.yml file
Set default value
$foo_example = theme_get_setting('foo_example');
Retrieve value in php
Example
<?php
function foo_preprocess_node(&$variables) {
$variables['foo_example'] = theme_get_setting('foo_example');
}Make value available for twig files:
In themename.theme file:
{{ foo_example }}
In twig file:
Docs!
Lets get to it!
Drupal 8 Theming IMD W6
By Pieter Mathys
Drupal 8 Theming IMD W6
Les week 6 D8IMD Theming
