How to Use Bootswatch Themes in Drupal 7

/ By / 5 minutes of reading / 21 Comments

Fig 1.1

The standard look and feel of Bootstrap is unmistakable and often you can spot a website using it a mile away. The dead giveaways are the buttons and navigation, but it doesn’t have to be this way.

If you want to change the look and feel of your Bootstrap site then take a look at Bootswatch. It offers 12 great looking themes, and best of all they are free and open source.

In this tutorial, we’ll learn how to use a Bootswatch theme in two ways. The first method will show you how to use the BootstrapCDN and in the second we compile the LESS files ourselves.

Getting Start

Before we begin, head over to drupal.org and download the Bootstrap theme and jQuery Update.

If you use Drush, run the following command:

drush dl bootstrap jquery_update

Once everything has been downloaded, go and enable jQuery Update and then go to Configuration, “jQuery update”. Change the version of jQuery to 1.7 and click on “Save configuration”. We need jQuery 1.7+ for the theme to work.

Fig 1.0

Method 1: Use BootstrapCDN

The quickest way to use a Bootswatch theme is to use the BootstrapCDN. The CDN hosts Bootstrap as well as Bootswatch. Instead of having to download and store a copy of Bootstrap locally, you can use the CDN to host the CSS.

The theme for Drupal offers a configuration option where you can select which Bootswatch style you want to use. This is great for testing out different styles, but it’s not flexible if you want to modify the theme.

To use the CDN, create a sub-theme, and then go to Appearance and click on the Settings link for your theme.

In the “Bootstrap Settings” area, click on Advanced and then “BootstrapCDN”.

Fig 1.1

Select a version of Bootstrap and a Bootswatch theme. Then click on “Save configuration”.

Fig 1.2

If you go to your homepage, you should see a new look and feel.

Method 2: Compile Custom Bootstrap CSS

The second method I want to demonstrate is compiling the LESS files yourself, and creating a customised version of bootstrap.css.

If you want to customise Bootstrap properly, then this is the way to go. From within variables.less you can modify a lot of stuff like colours, borders and even the grid.

Of course, this method requires more work but it’s worth it.

1. Install LESS

The first important step is to install lessc to compile LESS locally. It can be compiled in a few ways, but I’ve found that using the npm version to be the most stable. I’ve heard of users having trouble compiling LESS using lessphp for example.

Go ahead and run npm install -g less to install it.

2. Create a Drupal Bootstrap Sub-Theme

Go into the Bootstrap theme that you downloaded earlier and make a copy of the bootstrap_subtheme folder and place it in sites/all/themes.

Fig 1.3

Rename the folder and call the theme whatever you like and make sure you rename the info file the same.

Once complete you should have a new bootstrap sub-theme.

Fig 1.4

Check out the Bootstrap sub-theming documentation page on drupal.org for more details about sub-theming.

3. Download Bootstrap

Download a copy of Bootstrap 3.1.0 and place the extracted folder in your sub-theme. Make sure that the folder name is bootstrap, rename it if you have to.

Fig 1.5

4. Select a Bootswatch theme

Head over to bootswatch.com and download the variables.less and bootswatch.less file for a specific theme. Just click on the down arrow on a download button and download both files.

Fig 1.6

Replace the variables.less that is already in the less directory in your sub-theme with the one you’ve downloaded. Then, place the bootswatch.less into the same directory.

Fig 1.7

5. Edit style.less

Open up style.less and add the bootswatch.less file using an import statement; @import 'bootswatch.less';. Place it below bootstrap.less.

From this:

// Bootstrap library.
@import 'bootstrap.less';
// ...

To this:

// Bootstrap library.
@import 'bootstrap.less';
@import 'bootswatch.less';

6. Edit variables.less

We need to make a single change to the variables.less for it to work with our sub-theme. Open it up and search for the @icon-font-path variable. Change the value from ../fonts/ to ../bootstrap/fonts/.

7. Compile LESS

The job of the style.less is to import all other files. The compiled version of less/style.less should be saved into css/style.css.

Open up your command line or terminal and cd into your sub-theme.

Once there, run the following command:

lessc less/style.less css/style.css

This command simply tells LESS to compile less/style.less and save the compiled version into css/style.css. Once compiled, open style.css, and you should see thousands of lines of CSS code.

8. Configure subtheme.info

Open the info file in your sub-theme and make sure stylesheets[all][] = css/style.css is there and NOT commented out. Also, disable the BootstrapCDN by uncommenting settings[bootstrap_cdn] = ''.

Once you’ve made your changes, save the file and don’t forget to flush the site cache.

9. Test theme

Now click on Appearance in the administration toolbar and enable your sub-theme. Then head over to the homepage and you should see your new bootswatch theme.

Fig 1.8

Summary

As mentioned earlier, if you’re going to make drastic changes to the theme then compile your own version of Bootstrap. I understand that you can override CSS properties, but you have much more flexibility when you modify the LESS files directly.

FAQs

Q: I can’t select Bootstrap 3.1.0 from the CDN drop-down.

If you want to use the latest version of Bootstrap. Download and store it in your sub-theme.

Q: I made changes to my sub-theme info file and nothing has changed.

Flush the site cache whenever you change something in the info file.

Q: None of the jQuery plugins are working when I use method 2.

You have to manually select which plugins you want to use by uncommenting them from the Scripts section in the info file.

About The Author

Ivan is the founder of WebWash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 12 years and has successfully completed several large Drupal projects in Australia.

Related Posts

21 thoughts on “How to Use Bootswatch Themes in Drupal 7”

  2. Kaleem

    I have grown to love Radix because it uses SASS. It would be great to see this tutorial using the sass bootstrap gem as I have ever understood how it works 🙂

    Reply
  3. martin oru

    Installing bootstrap 3 and bootswatch theme caused tb_mega menus not to show up and the site name is not clickable anymore.

    Reply
  4. loopduplicate

    Great article! I’ve used Radix (which Open Atrium uses as a base theme), Kalatheme, and the Bootstrap theme. They all have their strengths. Much of the information here applies no matter what base theme you are using. I especially appreciate the primer on .less since I’ve only ever used SASS/Compass for CSS.

    Cheers,
    Jeff

    Reply
  5. Alec

    Kalatheme comes with a setup wizard within the theme settings that allows you to generate a subtheme from the interface with any Bootstrap library; there’s a dropdown with all the Bootswatch themes available out-of-the-box for quick plug-and-play. Checkout instructions here: https://drupal.org/node/2167149

    Reply
  6. JD

    Not really sure where I went off the rails. Installed node and lessc (I think), but when I run:

    lessc less/style.less css/style.css

    in the sub theme directory, the outputted css/style.css file just contains the following text:

    /**
    * This file should get overwritten if Method 1 is used. If Method 2 is chosen,
    * remove this comment and start adding your styles to this file.
    */

    It is otherwise empty.

    Reply
  7. res

    The process, in terminal language 🙂

    cd /var/www/example.dev/sites/all/themes/
    cp bootstrap/bootstrap_subtheme/ new_subtheme -R
    cd new_subtheme/
    mv bootstrap_subtheme.info.starterkit new_subtheme.info
    wget https://github.com/twbs/bootstrap/archive/v3.3.4.zip
    unzip v3.3.4.zip
    rm v3.3.4.zip
    mv bootstrap-3.3.4/ bootstrap
    cd less/
    rm variables.less
    wget http://bootswatch.com/journal/variables.less # or “cosmo” or “cyborg”…
    wget http://bootswatch.com/journal/bootswatch.less
    vi style.less
    # add
    @import ‘bootswatch.less’;
    cd ..
    vi new_subtheme.info
    # add this, before default css/style.css:
    stylesheets[all][] = css/less-style.css
    # mark out:
    settings[bootstrap_cdn] = ”

    lessc less/style.less css/less-style.css

    sudo -i
    chown siteowner:www-data /var/www/example.dev/sites/all/themes/ -R

    Reply
  8. res

    Also had to do this, to get rid of a lot of “page not found”: /sites/all/themes/THEME_NAME/fonts/glyphicons-halflings-regular.woff2
    cp /sites/all/themes/THEME_NAME/bootstrap/fonts/ /sites/all/themes/THEME_NAME/fonts/ -R

    Reply
  9. res 
    cd /path_to_web_site/sites/all/themes/;
drush dl bootstrap -y;
cp bootstrap/bootstrap_subtheme/ new_subtheme -R;
cd new_subtheme/;
mv bootstrap_subtheme.info.starterkit new_subtheme.info;
sed -i 's/Bootstrap Sub-theme/New subtheme Name/g' new_subtheme.info;
wget http://github.com/twbs/bootstrap/archive/v3.3.5.zip;
unzip v3.3.5.zip && rm v3.3.5.zip && mv bootstrap-3.3.5/ bootstrap;
# insert less stylesheet in new_subtheme.info
sed -i "/css/style.css/a 
stylesheets[all][] = css/less-style.css" new_subtheme.info;
# deactivate Bootstrap CDN by removing the ";" in front of settings[bootstrap_cdn] =
sed -i 's/; settings[bootstrap_cdn]/settings[bootstrap_cdn]/g' new_subtheme.info;

    cd less/;
rm variables.less;
wget http://bootswatch.com/journal/variables.less; # or fx "cosmo" or "cyborg", see http://bootswatch.com/
wget http://bootswatch.com/journal/bootswatch.less;

# add @import 'bootswatch.less'; in style.less
sed -i "/'bootstrap.less';/a 
@import 'bootswatch.less';" style.less;

# compile less stylesheet
lessc style.less ../css/less-style.css;
    Reply
  10. Niels

    Thanks for this tutorial! I was able to get ‘Method 2’ to work for Sass instead of Less, but I had to make a few adjustments before it worked:

    – Step 1: Obviously, you should install SASS instead of LESS.
    – Step 2: Follow as described, but use the SASS starterkit from the Bootstrap Theme to create a Sub-Theme
    – Step 3: Follow as described, but use the official SASS port of Bootstrap: https://github.com/twbs/bootstrap-sass
    – Step 4: Follow as described, but download the SASS files instead of the LESS files, and (re)place them here: /bootstrap/assets/stylesheets/bootstrap/
    – Step 5: Edit /scss/style.scss to this:

    // Bootstrap Framework.
    @import ‘../bootstrap/assets/stylesheets/bootstrap’;
    @import ‘../bootstrap/assets/stylesheets/bootstrap/bootswatch’;

    – Step 6: Skip this step
    – Step 7: Compile SASS.
    – Step 8 and 9 are the same.

    Cheers!

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top