Bootstrap sub-theming in Drupal 7 | ASSIST Software Romania
get in touch
>

LIKE

SHARE

Facebook Share Tweet LinkedIn Share

FOLLOW

LinkedIn Follow Xing Follow

Web Developer at ASSIST

“Hard work beats talent when talent fails to work hard.” - Kevin Durant

Read time: 4 minutes

Apply bootstrap for drupal projects

We all know that nowadays responsive design is a must for every website that we build. If you want to use Drupal for a website you wish to implement, there is an easy and simple way to do that. I’ll assume that you already have a basic installation of Drupal 7 on your local machine and also have some basic knowledge about this CMS.

What you need

Firstly, we need some prerequisites before we start. Here’s what you need:

We now have to move the downloaded theme and module in our corresponding directories.

  • Bootstrap 3 Theme goes into var/www/html/*site_name*/sites/all/themes
  • jQuery Update goes into var/www/html/*site_name*/sites/all/modules

Theme activation

Activate your theme by navigating to “Appearance” from your admin menu and click “Enable and set as default”. Refresh your page, resize it and see the Bootstrap theme doing its job.

So far, so good! But, what if we need to customize this theme? Altering the core code is not really a good idea; for example, if a new update for the theme is released, and we’ve modified some template pages, styles or scripts, all this work will be lost. Don't worry, because there is something called sub-theming.

Sub-theming the downloaded theme

A sub-theme inherits its base theme. In a few words, our custom theme inherits the installed Bootstrap theme. This allows us to modify all the things we need, and not lose the changes on the next update.

In your Bootstrap theme there is a folder called “bootstrap_subtheme”. Copy it in your theme directory and rename it. I've called mine “custom_bootstrap”. Navigate to your new sub-theme and rename the file “bootstrap_subtheme.info.starterkit” to “subtheme_name.info” (in my case it’s custom_bootstrap.info). Open the file and modify the name and description to whatever you may want.

Download and extract the Bootstrap source code in your sub_theme directory (current version is 3.3.2). Also, rename your extracted folder to simply “bootstrap”, not “bootstrap 3.3.2”. This is mandatory because in the next step we’ll compile the less style file and this searches for a bootstrap folder in your sub-theme. Now, in your sub-theme folder, go to less/ and there you’ll find a style.less file. To compile it, I run the following command:

 $ lessc style.less > var/www/html/*site_name*/sites/all/themes/*subtheme*/css/style.css

This will override the existing *subtheme*/css/style.css file.

If you don’t have the less compiler installed here is the command:

 $ sudo apt-get install node-less

Notice! If you encounter an error saying “NameError: variable @link-hover-decoration is undefined in /*subtheme_name*/bootstrap/less/scaffolding.less” don’t panic. It is an error thrown by the *subtheme_name*/less/variables.less because it does not contain the variables within the latest version of Bootstrap.

Just go to https://github.com/twbs/bootstrap/blob/master/less/variables.less, copy the source code and replace it in your *subtheme_name*/less/variables.less file. Recompile.

Enable Bootstrap for our sub-theme

Almost there! Now we just have to make our sub-theme use the Bootstrap source code that we’ve downloaded. Open your “subtheme_name.info” file and uncomment the script lines under Method 1.

; ;----------------------------------
; ; METHOD 1: Bootstrap Source Files
; ;----------------------------------
;
; ;;;;;;;;;;;;;;;;;;;;;
; ;; Scripts
; ;;;;;;;;;;;;;;;;;;;;;
;
 scripts[] = 'bootstrap/js/affix.js'
 scripts[] = 'bootstrap/js/alert.js'
 scripts[] = 'bootstrap/js/button.js'
 scripts[] = 'bootstrap/js/carousel.js'
 scripts[] = 'bootstrap/js/collapse.js'
 scripts[] = 'bootstrap/js/dropdown.js'
 scripts[] = 'bootstrap/js/modal.js'
 scripts[] = 'bootstrap/js/tooltip.js'
 scripts[] = 'bootstrap/js/popover.js'
 scripts[] = 'bootstrap/js/scrollspy.js'
 scripts[] = 'bootstrap/js/tab.js'
 scripts[] = 'bootstrap/js/transition.js'

Activate our new sub-theme

Once again, go to “Appearance” in your admin menu, and click “Enable and set as default” on your custom sub-theme. To be sure that everything has worked, open the style.css file and add at the end “body {background: lightblue; }”. Refresh the page and if you don’t see any change clear the cache.

There you go! You now have a fully customizable and responsive sub-theme that uses the latest version of Bootstrap.

Do you want to get in touch with us? 

If you are interested in our software development services, you would like to join our team, or you simply want to find out more about us, we’d love to hear from you! Drop us a line and a member of the ASSIST team will get back to you as soon as possible. We are sure we can ASSIST you.

GET IN TOUCH