Create Your Own Theme On Varbase

If you're using Varbase, you're already benefiting from a powerful and feature-rich Drupal distribution. Varbase is designed to streamline your Drupal projects, making it easier to build websites and web applications with all the essential tools and modules preconfigured. However, one of the most exciting aspects of Varbase is the flexibility it offers when it comes to theming.

We're going to explore the world of Varbase theming and guide you through the process of creating your very own theme. While Varbase provides an array of themes out of the box, customizing your theme allows you to give your website a unique look and feel that aligns perfectly with your brand or project's requirements.

 

The Importance of Custom Themes

You might be wondering why custom theming is such a big deal when Varbase already provides a range of themes. The answer is simple: differentiation and personalization. While the default Varbase themes are fantastic starting points, creating your own theme allows you to stand out from the crowd. Your website or application can have a design that's tailored specifically to your needs, ensuring a cohesive and memorable user experience.

Furthermore, custom themes enable you to have full control over the visual elements, layout, and overall aesthetics of your Varbase-powered site. Whether you want to create a visually stunning portfolio, an e-commerce platform, or a content-rich blog, custom theming empowers you to bring your unique vision to life.

So, let's dive into the fascinating world of Varbase theming and start building a theme that reflects your unique identity and objectives.

Theme Development Process

Let’s start with Installing the Needed Tools Command

1. Open a terminal window.
2. Change directory in the terminal to docroot/themes/contrib/vartheme_bs4/scripts in the project.
3. Run the bash ./install-needed-tools.sh
4. Follow with the list of instructions.

cd PROJECT_DIR_NAME/docroot/themes/contrib/vartheme_bs4/scripts
bash ./install-needed-tools.sh

Install The Needed Tools To Create Your Own Theme Manually

We recommend you do the installation of needed tools using the bash script command. But if that is not the case. By deciding to install custom versions manually. Start by doing this:

1. Install sed and gawk

This will help you with string replacement and re-naming files.

sudo apt install -y sed gawk;

2. Now you need to Install npm and nodejs

Doing this helps to get more development tools and the Bootstrap and popper packages. 

curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash - 
sudo apt update
sudo apt install nodejs
sudo apt install build-essential

curl -L https://npmjs.com/install.sh | sudo -E bash -
sudo apt update
sudo apt install npm

3. Let's go ahead and Install Yarn now

sudo apt install yarn

4. Final step is installing Gulp

The reason why we are installing Gulp here is to help manage tasks when compiling SASS/SCSS to CSS.

sudo npm install gulp-cli -g
sudo npm install gulp -D

Now Let's Create a New Vartheme

In the following steps we will explore two methods for creating a new sub-theme within the Vartheme Bootstrap 4 theme. The first method involves using a Bash script, where the user opens a terminal, navigates to the appropriate directory, and runs a script with the desired theme name. The second method utilizes Yarn, a JavaScript package manager, where the user changes the directory to the theme's location and executes a command to create a new sub-theme with a specified name using Yarn. Both approaches provide flexibility for users to choose their preferred method for creating a sub-theme within the Vartheme Bootstrap 4 theme.

How to Create a New Vartheme with Bash Script:

1. Open a terminal to run commands
2. Change directory in the terminal to docroot/themes/contrib/vartheme_bs4/scripts
3. Run the create-new-vartheme-bs4.sh "THEME_NAME". Change the THEME_NAME to the project name or any selected theme name.

cd PROJECT_DIR_NAME/docroot/themes/contrib/vartheme_bs4/scripts
bash ./create-new-vartheme-bs4.sh "THEME_NAME"

How to Create a New Vartheme with Yarn:

cd PROJECT_DIR_NAME/docroot/themes/contrib/vartheme_bs4
yarn theme:create-sub-theme "THEME_NAME"

 

Full Example to Create a Varbase theme

To give you a full hands-on experience, our experts prepared a full example for you to create a Varbase theme. Let’s go:

If a Varbase site named "mysite"  was built using the following command:

cd /var/www/html
composer create-project Vardot/varbase-project:~9 mysite --no-dev --no-interaction

The folder mysite for the project is located at "/var/www/html/mysite"

Change directory to docroot/themes/contrib/vartheme_bs4/scripts

cd /var/www/html/mysite/docroot/themes/contrib/vartheme_bs4/scripts

Run the following bash command to create a custom theme named "mytheme"

bash ./create-new-vartheme-bs4.sh "mytheme"

The new theme will be located at "/var/www/html/mysite/docroot/themes/custom/mytheme"

When it finishes the run process, the following message will show up in the terminal

---------------------------------------------------------------------------
   The new Vartheme BS4 Sub-Theme were created at "/var/www/html/mysite/docroot/themes/custom/mytheme :)" 
---------------------------------------------------------------------------

Congrats, you just created your first Varbase theme!