Drupal 10’s custom theme builder gives you complete control over the look and feel of your website, resulting in a distinctive user experience that complements your brand. This article will walk you through the whole process of creating a custom theme from scratch, including how to customize templates and styles as well as set up the directory structure of your theme.
Regardless of your level of experience as a developer, this tutorial will assist you in comprehending the fundamental ideas and procedures of Drupal theming. You’ll have a completely working custom theme at the conclusion of this lesson that you may grow and change to suit your own requirements.
Prerequisites:-
- A setting for local development Install a development environment like Lando or DDEV, or use a local server like XAMPP, WAMP, or MAMP.
- Installing Drupal 10: Drupal 10 is available for download from the official website.
- Basic proficiency with PHP, CSS, and HTML: Although not necessarily required, having some experience with these technologies can make it easier for you to comprehend and modify your theme.
Step-by-Step Guide
Step 1: Set Up Your Drupal 10 Environment:- Install a Drupal 10 project please click on the given link download the latest version file and unzip. Click Here for windows click on Download Drupal | zip and for the Linux Copy the url od Download Drupal | tar.gz.
Step 2: Create the Custom Theme Directory:- When you will unzip that downloaded file open that in your editor and move to the directory name Theme.
Step 3: Define Theme Region and Metadata in the file VillaAgency.info.yml: – Create a directory of your custom theme and create a yml file name VillaAgency.info.yml. and add the following code according to your requirements.
name: VillaAgency
type: theme
base theme: stark
description: A flexible theme with a responsive, mobile-first layout.
package: yes
core_version_requirement: ^10
libraries:
- villaagency/global
regions:
subheader: 'Sub Header'
header: 'Header'
main_banner: 'Main Banner'
featured_section: 'Featured Section'
video_section: 'video section'
video_content: 'video content'
fun_facts: 'Fun Facts'
best_deal: 'Best Deal'
ashwani_test: 'Ashwani Test'
properties_section: 'Properties Section'
content: 'Content'
footer: 'Footer'Step 4: Define Libraries with my_custom_theme.libraries.yml:- Create a my_custom_theme.libraries.yml file to define your theme’s CSS and JavaScript libraries. and create a file of Style.css in Theme/css/style.css.
# Main theme library.
global:
js:
jquery/jquery.min.js: {}
js/bootstrap.min.js: {}
js/isotope.min.js: {}
js/owl-carousel.js: {}
js/counter.js: {}
js/custon.js: {}
js/villaagency.js: {}
css:
base:
css/base/elements.css: {}
css/fontawesome.css: {}
css/templatemo-villa-agency.css: {}
css/owl.css: {}
css/animate.css: {}
component:
"fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap": { type: external}
css/component/block.css: {}
css/component/breadcrumb.css: {}
css/component/field.css: {}
css/component/form.css: {}
css/component/header.css: {}
css/component/menu.css: {}
css/component/messages.css: {}
css/component/node.css: {}
css/component/sidebar.css: {}
css/component/table.css: {}
css/component/tabs.css: {}
css/component/buttons.css: {}
layout:
css/layout/layout.css: {}
css/bootstrap.min.css: {}
theme:
css/theme/print.css: { media: print }
Step 5: Create a Theme File (Optional):- Create a villaagency.theme file for custom PHP functions if needed.
function villaagency_preprocess_html(array &$variables): void {
}
/**
* Implements hook_preprocess_HOOK() for page.html.twig.
*/
function villaagency_preprocess_page(array &$variables): void {
}
/**
* Implements hook_preprocess_HOOK() for node.html.twig.
*/
function villaagency_preprocess_node(array &$variables): void {
}Step 6: Create Templates Directory and Files:- Create a templates directory and add template files, starting with page.html.twig. Add basic HTML structure to page.html.twig
<div class="layout-container">
<div class="sub-header">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8">
<ul class="info">
<li><i class="fa fa-envelope"></i> testing.com</li>
<li><i class="fa fa-map"></i> test map</li>
</ul>
</div>
<div class="col-lg-4 col-md-4">
{{ page.subheader }}
</div>
</div>
</div>
</div>
<header class="header-area header-sticky">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="main-nav">
<!-- ***** Logo Start ***** -->
<a href="index.html" class="logo">
<h1>Villa</h1>
</a>
<!-- ***** Logo End ***** -->
<!-- ***** Menu Start ***** -->
{{ page.header }}
<a class="menu-trigger">
<span>Menu</span>
</a>
<!-- ***** Menu End ***** -->
</nav>
</div>
</div>
</div>
</header>
<div class="featured section">
{{ page.featured_section }}
</div>
<div class="video-content">
<div class="container">
<div class="row">
<div class="col-lg-10 offset-lg-1">
{{ page.video_content}}
</div>
</div>
</div>
</div>
<div class="fun-facts">
<div class="container">
<div class="row">
{{ page.fun_facts }}
</div>
</div>
</div>
<div class="ashwani test">
{{ page.ashwani_test }}
</div>
{# <div class="properties section">
<div class="container">
<div class="row">
<div class="col-lg-4 offset-lg-4">
</div>
</div>
{{ page.properties_section }}
</div>
</div> #}
<div>
{{ page.content }}
</div>
<div class="section best-deal">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="section-heading">
<h6>| Best Deal</h6>
<h2>Find Your Best Deal Right Now!</h2>
</div>
</div>
<div class="col-lg-12">
{{ page.best_deal }}
</div>
</div>
</div>
</div>
{# <div class="section best-deal">
<div class="container">
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-12">
{{ page.best_deal }}<div class="tabs-content">
<div class="row">
<div class="nav-wrapper ">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" id="appartment-tab" data-bs-toggle="tab" data-bs-target="#appartment" type="button" role="tab" aria-controls="appartment" aria-selected="false" tabindex="-1">Appartment</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="villa-tab" data-bs-toggle="tab" data-bs-target="#villa" type="button" role="tab" aria-controls="villa" aria-selected="false" tabindex="-1">Villa House</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" id="penthouse-tab" data-bs-toggle="tab" data-bs-target="#penthouse" type="button" role="tab" aria-controls="penthouse" aria-selected="true">Penthouse</button>
</li>
</ul>
</div>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="appartment" role="tabpanel" aria-labelledby="appartment-tab">
<div class="row">
<div class="col-lg-3">
<div class="info-table">
<ul>
<li>Total Flat Space <span>185 m2</span></li>
<li>Floor number <span>26th</span></li>
<li>Number of rooms <span>4</span></li>
<li>Parking Available <span>Yes</span></li>
<li>Payment Process <span>Bank</span></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<img src="https://localhost/drupal-new/sites/default/files/2024-06/depositphotos_383827936-stock-photo-airport-runway-apron-passenger-aircraft_0.jpg" alt="">
</div>
<div class="col-lg-3">
<h4>Extra Info About Property</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, do eiusmod tempor pack incididunt ut labore et dolore magna aliqua quised ipsum suspendisse.
<br><br>When you need free CSS templates, you can simply type TemplateMo in any search engine website. In addition, you can type TemplateMo Portfolio, TemplateMo One Page Layouts, etc.</p>
<div class="icon-button">
<a href="property-details.html"><i class="fa fa-calendar"></i> Schedule a visit</a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="villa" role="tabpanel" aria-labelledby="villa-tab">
<div class="row">
<div class="col-lg-3">
<div class="info-table">
<ul>
<li>Total Flat Space <span>250 m2</span></li>
<li>Floor number <span>26th</span></li>
<li>Number of rooms <span>5</span></li>
<li>Parking Available <span>Yes</span></li>
<li>Payment Process <span>Bank</span></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<img src="https://localhost/drupal-new/sites/default/files/2024-06/image4-7-770x462_0.png" alt="">
</div>
<div class="col-lg-3">
<h4>Detail Info About Villa</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, do eiusmod tempor pack incididunt ut labore et dolore magna aliqua quised ipsum suspendisse. <br><br>Swag fanny pack lyft blog twee. JOMO ethical copper mug, succulents typewriter shaman DIY kitsch twee taiyaki fixie hella venmo after messenger poutine next level humblebrag swag franzen.</p>
<div class="icon-button">
<a href="property-details.html"><i class="fa fa-calendar"></i> Schedule a visit</a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade active show" id="penthouse" role="tabpanel" aria-labelledby="penthouse-tab">
<div class="row">
<div class="col-lg-3">
<div class="info-table">
<ul>
<li>Total Flat Space <span>320 m2</span></li>
<li>Floor number <span>34th</span></li>
<li>Number of rooms <span>6</span></li>
<li>Parking Available <span>Yes</span></li>
<li>Payment Process <span>Bank</span></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<img src="assets/images/deal-03.jpghttps://localhost/drupal-new/sites/default/files/2024-06/7a2ee4491e1c030b9063b6dc3fb08584_1.png" alt="">
</div>
<div class="col-lg-3">
<h4>Extra Info About Penthouse</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, do eiusmod tempor pack incididunt ut labore et dolore magna aliqua quised ipsum suspendisse. <br><br>Swag fanny pack lyft blog twee. JOMO ethical copper mug, succulents typewriter shaman DIY kitsch twee taiyaki fixie hella venmo after messenger poutine next level humblebrag swag franzen.</p>
<div class="icon-button">
<a href="property-details.html"><i class="fa fa-calendar"></i> Schedule a visit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> #}
<div class="properties section">
<div class="container">
<div class="row">
<div class="col-lg-4 offset-lg-4">
<div class="section-heading text-center">
<h6>| Properties</h6>
<h2>We Provide The Best Flight Services</h2>
</div>
</div>
</div>
<div class="row">
{{ page.properties_section }}
</div>
</div>
</div>
<footer>
<div class="container">
<div class="col-lg-8">
{{ page.footer }}
</div>
</div>
</footer>
Step 7: Let’s clear the cache:- Go this this url of your project admin/config/development/performance and clear the cache.
Step 8: Now lets set all the block :- Go to structure>Block Layout and check all the region is present here or not. admin/structure/block
Step 9: Upload the Required image:- What ever the image you want in your project please upload all of them at here . admin/content/media click on add media button and upload the file.
Step 10: lets design the templete:- Go to the Structure> Block Layout> Place Block. Click on Place Block button to add the content
Step 11: Add Content Block:- Add content block here by clikcing on the button and add your html content here.
Step 12: Add all content: Add All of your required Html content there and fill all the Blocks.
Step 13: I m giving you some of the code through which you can add your data.
Feature Section
========================================
<div class="featured section">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="left-image">
<img src="assets/images/featured.jpg" alt="">
<a href="property-details.html"><img src="assets/images/featured-icon.png" alt="" style="max-width: 60px; padding: 0px;"></a>
</div>
</div>
<div class="col-lg-5">
<div class="section-heading">
<h6>| Featured</h6>
<h2>Best Appartment & Sea view</h2>
</div>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Best useful links ?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Get <strong>the best villa</strong> website template in HTML CSS and Bootstrap for your business. TemplateMo provides you the <a href="https://www.google.com/search?q=best+free+css+templates" target="_blank">best free CSS templates</a> in the world. Please tell your friends about it.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
How does this work ?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Dolor <strong>almesit amet</strong>, consectetur adipiscing elit, sed doesn't eiusmod tempor incididunt ut labore consectetur <code>adipiscing</code> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Why is Villa Agency the best ?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
Dolor <strong>almesit amet</strong>, consectetur adipiscing elit, sed doesn't eiusmod tempor incididunt ut labore consectetur <code>adipiscing</code> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="info-table">
<ul>
<li>
<img src="assets/images/info-icon-01.png" alt="" style="max-width: 52px;">
<h4>250 m2<br><span>Total Flat Space</span></h4>
</li>
<li>
<img src="assets/images/info-icon-02.png" alt="" style="max-width: 52px;">
<h4>Contract<br><span>Contract Ready</span></h4>
</li>
<li>
<img src="assets/images/info-icon-03.png" alt="" style="max-width: 52px;">
<h4>Payment<br><span>Payment Process</span></h4>
</li>
<li>
<img src="assets/images/info-icon-04.png" alt="" style="max-width: 52px;">
<h4>Safety<br><span>24/7 Under Control</span></h4>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>For Fun Facts
======================================
<div class="fun-facts">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="wrapper">
<div class="row">
<div class="col-lg-4">
<div class="counter">
<h2 class="timer count-title count-number" data-to="34" data-speed="1000">34</h2>
<p class="count-text ">Buildings<br>Finished Now</p>
</div>
</div>
<div class="col-lg-4">
<div class="counter">
<h2 class="timer count-title count-number" data-to="12" data-speed="1000">12</h2>
<p class="count-text ">Years<br>Experience</p>
</div>
</div>
<div class="col-lg-4">
<div class="counter">
<h2 class="timer count-title count-number" data-to="24" data-speed="1000">24</h2>
<p class="count-text ">Awwards<br>Won 2023</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div class="section best-deal">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="section-heading">
<h6>| Best Deal</h6>
<h2>Find Your Best Deal Right Now!</h2>
</div>
</div>
<div class="col-lg-12">
<div class="tabs-content">
<div class="row">
<div class="nav-wrapper ">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="appartment-tab" data-bs-toggle="tab" data-bs-target="#appartment" type="button" role="tab" aria-controls="appartment" aria-selected="true">Appartment</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="villa-tab" data-bs-toggle="tab" data-bs-target="#villa" type="button" role="tab" aria-controls="villa" aria-selected="false" tabindex="-1">Villa House</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="penthouse-tab" data-bs-toggle="tab" data-bs-target="#penthouse" type="button" role="tab" aria-controls="penthouse" aria-selected="false" tabindex="-1">Penthouse</button>
</li>
</ul>
</div>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="appartment" role="tabpanel" aria-labelledby="appartment-tab">
<div class="row">
<div class="col-lg-3">
<div class="info-table">
<ul>
<li>Total Flat Space <span>185 m2</span></li>
<li>Floor number <span>26th</span></li>
<li>Number of rooms <span>4</span></li>
<li>Parking Available <span>Yes</span></li>
<li>Payment Process <span>Bank</span></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<img src="assets/images/deal-01.jpg" alt="">
</div>
<div class="col-lg-3">
<h4>Extra Info About Property</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, do eiusmod tempor pack incididunt ut labore et dolore magna aliqua quised ipsum suspendisse.
<br><br>When you need free CSS templates, you can simply type TemplateMo in any search engine website. In addition, you can type TemplateMo Portfolio, TemplateMo One Page Layouts, etc.</p>
<div class="icon-button">
<a href="property-details.html"><i class="fa fa-calendar"></i> Schedule a visit</a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="villa" role="tabpanel" aria-labelledby="villa-tab">
<div class="row">
<div class="col-lg-3">
<div class="info-table">
<ul>
<li>Total Flat Space <span>250 m2</span></li>
<li>Floor number <span>26th</span></li>
<li>Number of rooms <span>5</span></li>
<li>Parking Available <span>Yes</span></li>
<li>Payment Process <span>Bank</span></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<img src="assets/images/deal-02.jpg" alt="">
</div>
<div class="col-lg-3">
<h4>Detail Info About Villa</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, do eiusmod tempor pack incididunt ut labore et dolore magna aliqua quised ipsum suspendisse. <br><br>Swag fanny pack lyft blog twee. JOMO ethical copper mug, succulents typewriter shaman DIY kitsch twee taiyaki fixie hella venmo after messenger poutine next level humblebrag swag franzen.</p>
<div class="icon-button">
<a href="property-details.html"><i class="fa fa-calendar"></i> Schedule a visit</a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="penthouse" role="tabpanel" aria-labelledby="penthouse-tab">
<div class="row">
<div class="col-lg-3">
<div class="info-table">
<ul>
<li>Total Flat Space <span>320 m2</span></li>
<li>Floor number <span>34th</span></li>
<li>Number of rooms <span>6</span></li>
<li>Parking Available <span>Yes</span></li>
<li>Payment Process <span>Bank</span></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<img src="assets/images/deal-03.jpg" alt="">
</div>
<div class="col-lg-3">
<h4>Extra Info About Penthouse</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, do eiusmod tempor pack incididunt ut labore et dolore magna aliqua quised ipsum suspendisse. <br><br>Swag fanny pack lyft blog twee. JOMO ethical copper mug, succulents typewriter shaman DIY kitsch twee taiyaki fixie hella venmo after messenger poutine next level humblebrag swag franzen.</p>
<div class="icon-button">
<a href="property-details.html"><i class="fa fa-calendar"></i> Schedule a visit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Step 13: Adding Menus:– structure/menu/manage/main go to this url and add the menu you required. Just Click on Add Link and add all your Navigation menu
