Aventura Now Free on GitHub

Update: Aventura is now available for free on GitHub. Read below for the original write up on what is included with the installation profile and theme. If you don't use Git, you can download the zip file directly.

I'm happy to announce the latest addition to my packaged theme collection, Aventura. Featuring a full screen hero image, Aventura is the perfect Drupal theme for sites that need to make a powerful first impression.  What follows is a quick overview of how Aventura was put together so you can more easily get started customizing it to your heart's content. If you want to check out Aventura while reading through this guide, the demo site is up and running, so give it a look!

Is this Theme Right for You?

Before I get into the technical details, I thought I'd briefly discuss who the target audience is for Aventura. You'll have the best experience with Aventura if you already know HTML and CSS. If you're an experienced web professional looking for a quick and affordable jump start on your next project, then Aventura was made specifically with you in mind.

The Background Image

The first thing you notice about Aventura is the full screen background image. I used the Background Images module to add this feature and it works great. Of course, I could have just placed the code for this image in the CSS, but this module makes it easy for those not familiar with the technique to easily add a visually striking element to any page on their site.


Aventura is the first theme I've produced that supports Sass. I used Sass and Compass when writing it, but it's not necessary for you to use Sass in order to edit Aventura. You can simply go straight for the global.css file and edit it directly, completely ignoring all the Sass files. It's your choice, but if you already work with Sass, I'm sure this will be a nice added bonus. 

A quick note for those who don't use Sass...if you want to get some of the default styles (colors, for example), check out the global.scss file. There are variables declared near the top that will make your life easier once you start making your own changes.

Font Awesome + Menu Views

In the main menu you'll notice a little user icon. The icon is part of a icon font called Font Awesome that was originally developed for BootStrap. It's very easy to use - basically just add an <i> tag with the appropriate class and an icon from the set will be rendered. However, I want to talk a bit about how I got this icon into the menu.

I could have added the it through code, but instead I added it using the Menu Views module. I did this for a couple of reasons, but the main one was to provide an introduction to the possibilities afforded by this module. Anything that can be in a view, can be added to your menu using this module. There are some really cool possibilities here and I love to see what some of you come up with.

If you want to edit the icon, you can edit the view that contains the markup or simply delete it if you'd prefer. The social follow icons also use Font Awesome and have simply been placed in a block - easy peasy.

Superfish + Built in Select on Mobile

I've updated to the latest version of Superfish which now comes with a plug-in that automatically converts your menu to a select list at smaller screens. This is completely configurable on the Superfish menu block.

About the Author

John Hannah

I’m John Hannah, a front end developer at Lullabot . When I'm not building websites, I travel as much as possible and enjoy hanging out with my wonderful family. My favorite place to spend my coffee breaks is Twitter, so please feel free to connect with me there.