Installation Profile for Omega Theme

Posted: August 5, 2012 under Drupal

This post is out of date. For something more recent, see this post.

I know there are quite a few people who visit this site who are looking to try Omega theme. With that in mind, I've put together an Omega theme installation profile and I'm making it available to anyone interested in quickly getting started with what I consider to be the best Drupal base theme available.

For anyone reading this who isn't familiar with what a installation profile is, you can think of it as a customized version of Drupal. You install it the same way you do the standard version of Drupal, but once you've got it up and running it has already been customized, usually to fit a specific situation.

In the case of this profile, you end up with a site that has an Omega sub-theme installed as well as a WYSIWYG editor and a whole bunch of other modules I commonly use on projects. It's a big time saver.

If you need help on installing Drupal, this guide will do the trick. When installing this profile be sure you select "Friendly Machine Omega Starter" when you are prompted to choose an installation profile.

Features

The features of this installation profile include:

  • Omega sub-theme installed with basic configuration
  • Delta + Context installed and enabled for creating page templates
  • Basic CSS styles applied in global.css with zone elements stubbed out
  • TinyMCE + WYSIWYG installed and configured
  • SEO modules included
  • Media module
  • Webform module with validation included 
  • Sample content

I'll step through a few of these as we go through this post so you'll have an idea of where I put everything and what you need to do to make changes.

Modules Included

Below are the "contrib" modules that are included:

MODULE ENABLED?
Adaptive Image No
Backup and Migrate No
Context Yes
Ctools Yes
Date Yes
Delta Yes
Display Suite Yes
Flex Slider No
Global Redirect Yes
Google Analytics No
Image Resize Filter Yes
IMCE Yes
IMCE Mkdr Yes
IMCE Wysiwyg bridge Yes
jQuery plugins No
jQuery Update Yes
Libraries Yes
Lightbox2 Yes
Media Yes
Module Filter Yes
Options Element Yes
Page Title Yes
Pathauto Yes
Revisioning Yes
Rules No
Save Draft Yes
Select (or other) Yes
Semantic Views Yes
Token Yes
Views Yes
Views Slideshow No
Webform Yes
Webform Validation Yes
Wysiwyg Yes
Wysiwyg Filter Yes
Wysiwyg Spellcheck Yes
XML Sitemap No

I'm sure this list is either too long or too short for many of you, but these are the contributed modules I tend to use on most projects. Later in this post I'll tell you how to hack this installation profile to your liking.

WYSIWYG CONFIGURATION

As I mentioned above, this installation profile comes with a WYSIWYG editor. Here are some tips for making changes to the default configuration.

I'll start with the configuration of the Full HTML WYSIWYG profile because that's one place you'll likely want to make changes. If you go to admin/config/content/wysiwyg/profile/full_html/edit you'll find the settings you see below (click image to enlarge):

Tiny MCE profile omega theme distribution

You'll note that the "CSS path" is set to the location of the default stylesheet of the theme. This allows you to see how your content will look when published while using the editor - for the most part, anyway. There is a bit of a catch. The editor will pick up the value you have set for the background on the body tag and if your content area has a different background, this will cause problems in how the page looks inside the editor. 

With this in mind I've included a way to fix this issue should you encounter it. On line 16 of global.css in the starter theme, there is a CSS rule stubbed out that will help you get the background of the editor set properly if you run into any problems. Just add the same background to this rule as you set for your content area and you should be set.

You'll also see in the image above that I have defined two classes under "CSS classes". These are classes that will be available in the editor for anyone adding content. These two classes set the alignment for images and add some nice margins around them.

This is an important point because the configuration of the editor will not allow you to align images using the TinyMCE image button that you may be familiar with. That button isn't even configured because I use Media module for managing images instead. 

Below is a screenshot of the editor in action:

WYSIWYG editor omega theme distribution

In this image you can see the dropdown that will allow you to apply the image alignment styles we just discussed. Toward the far right on the editor toolbar you'll also notice the Media button - the one that looks like a stack of photos. This will allow you to add images using the Media module. Just add the image and then apply the left or right align style. Super easy.

The next important piece to this configuration is the configuration of the Full Text text format. The naming of these things is confusing as hell, right? Anyway, you'll find what I'm talking about here: admin/config/content/formats/full_html. Below is the screenshot (click to enlarge):

full text settings omega distribution

What you see here is the configuration of the WYSIWYG filter. You'll find this setting toward the bottom of the page on the "WYSIWYG Filter" tab. This is where you define what HTML will be allowed inside your nodes. This is very useful if you have content contributors copying and pasting content or who fancy themselves designers. It maintains the integrity of the theme's design.

Now remember the alignment classes we were just discussing? Toward the bottom of this page is a setting called, "Rules for Class Names". Any classes you don't want filtered out have to be set there as well. So to be clear, to add a class you first define it in your global.css file, then you add it to the WYSIWYG profile and finally you come to the page above and add it to the filter. A lot of moving parts here!

Despite the hassle, I recommend you keep this filter enabled and configure it to your liking. The project page is a good place to start if this is what you're interested in doing. If the filter is driving you crazy, just disable the module. Easy as pie.

Also on this page are other filters for things like the Lightbox2 module, image resizing, etc. Tons of options, but I hope that the ones I've included by default will work for most people as well as they do for me.

Omega Page Templates

I've already covered the details of how to create page templates for Omega theme in this post, so suffice it to say that everything necessary is installed, enabled and ready to go. The ease of creating page layouts is something I really love about Omega.

How to Hack This Profile

Before I give you the hack, let me say that learning to build your own profile is worth the investment in time. It does require a bit of knowledge of how Drupal works under the hood, PHP, etc., but most of you reading this will be able to tackle it. I used about a dozen different resources on Drupal.org to finally piece everything together, but I started here. It's a good overview and will get you set on the right track.

If you're looking for a quick and dirty way to save your own modifications to this installation profile, you simply need to make all of your desired changes and then export your database to profiles/fm/db.sql in the root of your Drupal installation. Then you zip everything up and the next time you need another site set up, you'll have your customized version of this profile ready to go. Perhaps this is an ugly hack, but it will do just fine if you don't feel like writing your own profile.

Download

If you're interested in trying this installation profile...

FM Omega Starter Download

If you run into any problems or notice any issues, please let me know and I'll look into them.

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.