How to Create a Drupal 8 sub-theme ?

Drupal 8 has launched for some time and I am building one website https://www.brokerdo.com by Drupal 8. In order to saving time, I bought one Drupal 8 theme omni_magazine directly from themeforest.net. We know that the base theme often updates, so it’s best to create Drupal 8 sub theme and make changes base on the sub theme.

Sub-themes are just like any other theme, with one difference: they inherit the parent theme’s resources. There are no limits on the chaining capabilities connecting sub-themes to their parents. A sub-theme can be a child of another sub-theme, and it can be branched and organized however you see fit. This is what gives sub-themes great potential.

Create Drupal 8 Sub Theme

We will create Drupal 8 sub theme brokerdo, which mainly includes brokerdo.info.yml and brokerdo.libraries.yml at least.

The followed is brokerdo.info.yml sample

name: BrokerDo
type: theme
description: 'A Drupal 8 Sub theme of Omni Magazine'
package: Custom
version: 8.x-1.0
core: 8.x
# Defines the base theme
base theme: omni_magazine
# Defines libraries group in which we can add css/js.
libraries:
 - brokerdo/global-styling
# Regions

regions:
 site_info: 'Site Info'
 header_left: 'Header left'
 header_right: 'Header right'

primary_menu: 'Primary menu'
 secondary_menu: 'Secondary menu'
 page_top: 'Page top'
 page_bottom: 'Page bottom'

highlighted: Highlighted
 breadcrumb: Breadcrumb
 search: 'Search'
 quick_link: 'Quick link'
 newsflash: 'Newsflash'
 social_media: 'Social media'

showcase_main: 'Showcase main'
 showcase_spotlight: 'Showcase spotlight'
 showcase_content: 'Showcase content'

spotlight_one: 'Spotlight one'
 spotlight_two: 'Spotlight two'
 spotlight_three: 'Spotlight three'

content_top_left: 'Content top left'
 content_top_right: 'Content top right'
 content: Content
 content_bottom_left: 'Content bottom left'
 content_bottom_right: 'Content bottom right'

sidebar_secondary: 'Sidebar secondary'
 sidebar_tertiary: 'Sidebar tertiary'

main_top_one: 'Main top one'
 main_top_two: 'Main top two'
 main_top_three: 'Main top three'
 main_top_four: 'Main top four'

main_bottom_one: 'Main bottom one'
 main_bottom_two: 'Main bottom two'
 main_bottom_three: 'Main bottom three'
 main_bottom_four: 'Main bottom four'

footer_one: 'Footer one'
 footer_two: 'Footer two'
 footer_three: 'Footer three'
 footer_four: 'Footer four'
 closure: 'Closure'
 usable: 'Usable'

Include brokerdo.libraries.yml file to add css/js in `global-style` group (defined above in `libraries:` key).

global-styling:
 version: VERSION
 css:
 theme:
 css/style.css: {}

so we still need to create css folder and style.css, which we can add our custom style on this style sheet.

Differences with Drupal 7 Sub theme

The most notable difference with Drupal 7 is that .info files have become .info.yml files that use the YAML syntax.

0 Likes
855 Views

You may also like

Leave A Comment

Please enter your name. Please enter an valid email address. Please enter message.