Skip to content

Using custom Bootstrap Libraries

katypool edited this page Jul 18, 2014 · 1 revision

Setup

Kalatheme no longer requires an installed Bootstrap library to work. Our subtheme generator does that for you. However, you do have the option of using a custom or third party Bootstrap library if you want. We will go a little further into how to use custom and third party libraries in a second but first let's go over the setup process.

This is basically the same as documented in our Installation Guide. The main difference here is that you will select "Custom" as your Bootstrap library. This will provide a file upload field where you can load in an archive (zip, tar, bz, etc) of your custom or third party theme.

Upload

Using the Bootstrap Customization Tool

If you are unsatisfied with the options provided with Bootswatch you can easily build a custom Bootstrap library using their customization tool. This tool lets you customize almost everything about your Bootstrap library, from the components you use, to the size of your grid, to the hover color of active dropdown menus. Its a great tool to hand to a client or designer to kick start your design and if you'd rather do it without the GUI you can check out our SASS/COMPASS toolkit.

Anyway, fill out the form... below I've decided i want a 96 column grid (for some reason)... and then press "Compile and Download", take the resulting archive and upload it using the subtheme generator as described above. Customize Tool

Bonus: If you are using a custom library older than Bootstrap 3.2, you may want to take a look at this guide to reloading and editing your configuration: http://stackoverflow.com/questions/20384330/reload-bootstrap-customization

Using a Third Party library

How it Works

Using a third party library is generally a little more tricky and often fraught with considerable peril. Its important first to know what you are getting into before you start. Kalatheme and its subtheme generator are really only designed to give you a head start with your theming they are not designed to completely rebuild a custom third party bootstrap theme in Drupal.

What that means from a technical perspective is Kalatheme will only try to grab certain asset classes (css, js, images for now) and make sure they are included within your subtheme and loaded by your info file if applicable. If you have an asset class that is not being loaded by the subtheme we would encourage you to open an issue describing why you think we should include this asset class and how you think it should be loaded by the subtheme.

Kalatheme will not attempt to analyze your page structure and layouts and build those into your subtheme. There is just too much variability out there to be able to do this correctly. Once your subtheme is built you will probably still need to customize page.tpl.php, other template files and build out whatever sort of panels layouts, widgets, panes you need. For more help on doing this please check out our Panels Layout Tutorial.

With that out of the way...

What you see... not always what you get...

Most third party Bootstrap libraries are platform agnostic. They don't know if the person using them will implement them as is, with WordPress, Drupal or some other CMS. This means that most libraries will come with a PLETHORA of files. For this reason you should attempt to prune your library to contain only the CSS, JS and IMAGES you want to use in your Drupal themes. You can do this by extracting the zip or tar and manually pruning with your file browser. We will be ziping up the archive again later.

Generally its a good rule to just delete everything except the asset classes mentioned above and organize them in folders as seen in the "after" picture below. While you are doing that here are some common things to look out for while pruning.

  1. HTML Files (dont need but useful for building your template and/or panels layouts)
  2. Bootstrap 3 vs Bootstrap 2. You will want to keep the files for Bootstrap 3.
  3. Bad JavaScript. You may need to do some CodeFu to get these to work.
  4. Custom Colors. Some themes offer different color schemes generally in files like blue.css. Keep only the one you want
  5. Demo content or images. Most themes will ship with structural images for backgrounds etc but will also include a lot of images for their demos. You don't need these.
  6. Stuff for pages you aren't going to use. There may be a lot of CSS and JS that is intended for one or two pages seen in the Third Party Theme's demo page. I would assess whether you actually plan on using this CSS/JS or not. A good rule is to remove all of this stuff for now. If you need it in the future you can always add it in manually.

Below is an example of a theme from WrapBootstrap that i pruned before uploading with Kalatheme.

Before

Before Kalathem

After

Shnyshisnrh

When you feel like you have the files you want to include you should rezip or archive your folders and then upload them as your custom library.