Kalatheme to the Rescue!

The Mountain Resource Group approached Kalamuna with a broken and hacked Drupal 5 website in desperate need of repair. After assessing the site, we decided to rebuild it in Drupal 7. Within two weeks and without a design budget, we used Kalatheme + Wrapbootstrap to make a great looking, responsive website.

In two short weeks, we went from this:

To this:

The Mountainous Challenges

• Hinky old site. Some links randomly redirected to spam ads. Why? We just didn't know.
• No design budget and a two week deadline meant scant resources to plan and execute. We had to design, migrate, and implement on the fly, make decisions quickly and tackle issues as they came up.
• By-hand data migration. This was not the hardest aspect of the project, but it was the most tedious. There was too much weirdness in the old content to migrate programatically (and there wasn’t much content, so it would not have saved us much time) so we decided to migrate everything from the old database by hand and strip out the broken html.

Enter: WrapBootstrap

The WrapBoostrap theme Flat UI Startup was just the simple, clean, and flexible theme we were looking for. I liked this theme because it's modern and fresh without looking anonymous. The misty-looking background image really sold me on its compatibility with the Mountain Resource site:

Nothing says “petition against irresponsible logging practices” like a beautiful image of chopped down trees. Aside from the unfortunate choice of stock image, I could see how easily this WrapBootstrap theme would make a fitting homepage for the Mountain Resource Group site.

Enter: Kalatheme

The Kalatheme subtheme generator made the process of installing this theme super easy and quick. We just had to upload our custom bootstrap library, install the WrapBootstrap theme, et viola. (Documentation on compiling a custom bootstrap library here).

We were able to easily apply the WrapBootstrap theme’s CSS classes to panel panes on our site using the kalacustomize style plugin. Once we entered all the appropriate classes (all the ones prefixed with “fus” are from the theme) we could then quickly style each section of the homepage just how we wanted. (check out the kalatheme documentation for that here).

(We ended up dumping all the classes into our kalacustomize style plugin, but we probably only needed like four or five of them).

Spice up old content with pizzazz

The old site hadn't been modified in over seven years, which is like a century in internet years. So while all the old static content still had to show up on the site, we tried to figure out a few ways to make it appear a little more modern and graphic than the old site had. Luckily bootstrap and fontawesome had our back, and without any time for a real design plan, we were able to add some nice graphic elements to our homepage.

The Wrap Bootstrap buttons made the community pages portal look clean and inviting:

And fontawesome icons helped break up walls of text into digestible chunks:

Mountain Resource Group had an archive of forum posts going back into 2005 about their campaign to end a logging project in the Sierra Nevadas. We were tasked with migrating over this forum content in the form of blog posts. We ended up manually migrating all the posts from the old site, pasting directly from the database. The WrapBoostrap theme we chose didn’t really have any templates or theming for individual posts like this, but nevertheless we were able to quickly cobble together something functional and simple for the archived posts.

We did a similar thing for the Community Group sub-pages which had the blog post lists as well as some other static content. With views_bootstrap we built a nifty nav-tab view and styled it to look consistent with the rest of the theme:

(Super hack-y yet effective stylez. The devolution of standards when coding on a deadline!)

As easy as this two-week adventure was, it was not without its obstacles. The Flat UI theme works as a single home page with anchor links in the man navbar menu. But it turns out that anchor links and Drupal menus don’t get along very well. Getting the anchor links to work (and to work on blog pages and community group pages) took a little bit of javascript wizardry. Then to get the nice smooth scroll action, we just had to apply the appropriate class to each menu item.

Finally, the WrapBootstrap theme we installed came almost completely mobile-ready (responsive themes FTW). We just had to make a couple little tweaks to make everything look as clean as possible.

And boom. Two weeks from request to launch. It should always be this easy! And with Kalatheme and WrapBootstrap, we were able to sitebuild our way to victory.