Sử dụng Bootswatch Themes ở Drupal 7 như thế nào?

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.

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".

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

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.lessyou 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 lesscto 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 lessto 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_subthemefolder and place it in sites/all/themes.

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.

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.

4. Select a Bootswatch theme

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

Replace the variables.lessthat is already in the lessdirectory in your sub-theme with the one you've downloaded. Then, place the bootswatch.lessinto the same directory.

5. Edit style.less

Open up style.lessand add the bootswatch.lessfile 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.lessfor it to work with our sub-theme. Open it up and search for the @icon-font-pathvariable. Change the value from ../fonts/to ../bootstrap/fonts/.

7. Compile LESS

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

Open up your command line or terminal and cdinto 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.lessand 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.cssis 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.

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.