Creating Your Own Theme

Varbase on Drupal.org Visit Vardot.com Join on Slack

Search…

After building and installing the project with the Varbase Project template, use the create new Vartheme sub theme command. 
Before that have a look at:
Understanding The Vartheme Base Theme
Learn more about Bootstrap standard build tools documentation, compile source code, run tests, and more.
​https://getbootstrap.com/docs/4.0/getting-started/build-tools/​
Install 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.
1
cd PROJECT_DIR_NAME/docroot/themes/contrib/vartheme_bs4/scripts
2
bash ./install-needed-tools.sh
Copied!
Install Needed Tools Manually
Recommended doing the installation of needed tools using the bash script command. But if that is not the case. By deciding to manually install custom versions. Please follow with the following steps.
1. Install sed and gawk​
Helps with string replace and re-naming files.
1
sudo apt install -y sed gawk;
Copied!
2. Install npm and nodejs​
 Helps getting more development tools and the Bootstrap and popper packages. 
1
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash - 
2
sudo apt update
3
sudo apt install nodejs
4
sudo apt install build-essential
5
​
6
curl -L https://npmjs.com/install.sh | sudo -E bash -
7
sudo apt update
8
sudo apt install npm
Copied!
3. Install Yarn​
1
sudo apt install yarn
Copied!
Install Yarn as a global by npm
1
sudo npm install -g yarn
Copied!
4. Install Gulp​
Helps in managing tasks when compiling SASS/SCSS to CSS
1
sudo npm install gulp-cli -g
2
sudo npm install gulp -D
Copied!
Create new Vartheme BS4 Sub Theme
Create 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.
1
cd PROJECT_DIR_NAME/docroot/themes/contrib/vartheme_bs4/scripts
2
bash ./create-new-vartheme-bs4.sh "THEME_NAME"
Copied!
Create with Yarn
1
cd PROJECT_DIR_NAME/docroot/themes/contrib/vartheme_bs4
2
yarn theme:create-sub-theme "THEME_NAME"
Copied!
​
Example mythem for mysite
If a Varbase site named "mysite"  was built using the following command:
1
cd /var/www/html
2
composer create-project Vardot/varbase-project:~9 mysite --no-dev --no-interaction
Copied!
The folder mysite  for the project is located at "/var/www/html/mysite"
Change directory to docroot/themes/contrib/vartheme_bs4/scripts
1
cd /var/www/html/mysite/docroot/themes/contrib/vartheme_bs4/scripts
Copied!
Run the following bashcommand to create a custom theme named "mytheme" 
1
bash ./create-new-vartheme-bs4.sh "mytheme"
Copied!
The new theme will be located at "/var/www/html/mysite/docroot/themes/custom/mytheme"
When the finishes the following message will show up in the terminal
1
---------------------------------------------------------------------------
2
   The new Vartheme BS4 Sub-Theme were created at "/var/www/html/mysite/docroot/themes/custom/mytheme :)" 
3
---------------------------------------------------------------------------
Copied!
Activate the New Theme
Go to Appearance in the administration of the Varbase site.
Search for the name of the newly generated theme
Click on Install and set as default.
Navigate to the home page to check if the new theme is the default theme.
Initiation Commands
First step to do after creating a new theme.
Change directory to the new theme in the terminal then run only gulp without arguments.
Run this command ones after creating a new sub theme
Run it again ones after updating the Bootstrap 4 library with yarn install
1
cd PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME
2
gulp
3
[10:55:40] Using gulpfile PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME/gulpfile.js
4
[10:55:40] Starting 'default'...
5
[10:55:40] Starting 'compile'...
6
[10:55:42] Finished 'compile' after 2.44 s
7
[10:55:42] Starting 'move_bootstrap_js_files'...
8
[10:55:43] Finished 'move_bootstrap_js_files' after 18 ms
9
[10:55:43] Starting 'move_popper_js_files'...
10
[10:55:43] Finished 'move_popper_js_files' after 3.89 ms
11
[10:55:43] Starting 'watch'...
Copied!
or with Yarn
1
yarn theme:init
Copied!
Compiling SCSS to CSS
For example change the color value for the primary color in scss/bootstrap-variables.scss   file to test compiling SASS files to CSS
Then run gulp compile ones to compile every time the SCSS source changes.
1
cd PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME
2
gulp compile
3
[11:22:30] Using gulpfile PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME/gulpfile.js
4
[11:22:30] Starting 'compile'...
5
[11:22:33] Finished 'compile' after 2.54 s
Copied!
or with Yarn
1
yarn theme:build
Copied!
Watching SCSS Changes
Increase maximum watched SASS files by
1
echo fs.inotify.max_user_watches=524288
2
 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Copied!
Run gulp watch to keep watching for changes. This command will auto compile on each save of changes for SCSS files.
1
cd PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME
2
gulp watch
3
[11:25:53] Using gulpfile PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME/gulpfile.js
4
[11:25:53] Starting 'watch'...
Copied!
or with Yarn
1
yarn theme:watch
Copied!
Cloning a Project
On the state of working in a team in a project, the created theme could be don by other member of the team.
When the theme get committed by git for example, the node_modules folder will not be committed. As it is listed in the .gitignore file.
After cloning a project with a Vartheme Sub theme.
Run the following commands to get all development tools
1
cd PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME
2
yarn install
3
gulp
Copied!
 