Drupal 10/11 Custom theme tutorial - Step by step guide with code

Drupal 10 introduces powerful theming capabilities with Twig, making it easier to create beautiful, functional themes. One of the standout base themes in Drupal 10 is Olivero, the default theme designed with accessibility and responsiveness in mind. But what if you want to create your own unique theme while leveraging the features of Olivero? Enter Acesoftech—a custom theme that extends Olivero’s foundation to provide flexibility and customization.

This tutorial walks you through creating a new Drupal theme, named Acesoftech, that uses Olivero as the base theme. Extending Olivero allows you to inherit its layout, templates, and accessibility features, giving you a robust starting point. You’ll learn how to configure your theme, override templates, and add custom CSS/JavaScript for a personalized design.

By the end of this tutorial, you’ll have a fully functional custom theme ready to take your Drupal site to the next level. Whether you’re a beginner or an experienced Drupal developer, this step-by-step guide will help you harness the power of Drupal’s theming system efficiently.

Let’s get started!

1. Set Up the Acesoftech Theme

Create a new directory in the themes folder of your Drupal installation:

themes/
custom/
acesoftech/
acesoftech.info.yml
acesoftech.libraries.yml
css/
style.css
js/
script.js

templates/

2. Define the Theme Configuration

Create the acesoftech.info.yml file:

yaml

name: 'Acesoftech'

type: theme

description: 'A custom theme that extends the Olivero theme.'

core_version_requirement: ^10

base theme: olivero

libraries:

- acesoftech/global-styling

regions:

header: 'Header'

content: 'Content'

footer: 'Footer'

sidebar_first: 'Sidebar First'

sidebar_second: 'Sidebar Second'

3. Add CSS and JS

Create a acesoftech.libraries.yml file to include custom styles and scripts:

yaml

global-styling:

css:

theme:

css/style.css: {}

js:

js/script.js: {}

Then, create the css and js directories:

cmd

mkdir css js

Add styles in css/style.css:

css

body {

font-family: Arial, sans-serif;

}

h1 {

color: #007acc;

}

Add functionality in js/script.js:

javascript

(function ($, Drupal) {

Drupal.behaviors.acesoftechBehavior = {

attach: function (context, settings) {

console.log('Acesoftech theme is active!');

}

};

})(jQuery, Drupal);

4. Customize Templates

To override the main page structure, copy the page.html.twig file from the Olivero theme:

bash

cp core/themes/olivero/templates/layout/page.html.twig templates/page.html.twig

Modify the structure as desired. Example templates/page.html.twig:

twig

<header>

<h1 class="site-title">{{ site_name }}</h1>

</header>

<main>

{{ page.content }}

</main>

<footer>

<p>© {{ "now"|date("Y") }} Acesoftech</p>

</footer>

5. Enable and Use the Theme

Clear the cache to detect your new theme:

bash

drush cache:rebuild
Enable and set Acesoftech as the default theme:

bash

drush theme:enable acesoftech drush config:set system.theme default acesoftech -y

Conclusion

Your custom theme, Acesoftech, is now live! By extending the Olivero theme, you’ve built on a strong foundation, enabling accessibility, responsiveness, and a clean design. This approach saves development time and ensures consistency. Experiment with CSS, JavaScript, and Twig templates to fully customize your Drupal site’s appearance and functionality.

About Us

Our Location

Drupal 10/11 Custom theme tutorial – Step by step guide with code

1. Set Up the Acesoftech Theme

2. Define the Theme Configuration

3. Add CSS and JS

4. Customize Templates

5. Enable and Use the Theme

Conclusion

Leave a Reply Cancel reply

Our Courses

About Us

Our Location

Social

Drupal 10/11 Custom theme tutorial – Step by step guide with code

1. Set Up the Acesoftech Theme

2. Define the Theme Configuration

3. Add CSS and JS

4. Customize Templates

5. Enable and Use the Theme

Conclusion

Leave a Reply Cancel reply

Related Post