Creating an Omega 3.x Subtheme

You are viewing a wiki page. You are welcome to join the group and then edit it. Be bold!

<< Back to documentation Home

This Omega 3.x Doc page is under construction!

The Non-Drush Method

Acquiring and Installing Omega into your Drupal Site

Note: You can also use Omega Tools module which gives you a wizard for creating a subtheme through Drupal's UI.

  1. Download Omega
  2. unzip it (Stuffit or 7-Zip or similar)
  3. Place the Omega folder & its contents into your Drupal site's
    /sites/all/themes or /sites/example.com/themes folder.
  4. Choose your Starterkit and Copy:

    Go to sites/all/themes/omega/starterkits
    Choose Omega as it will cover 99% of use-cases. Only choose Alpha if you know what you are doing. Use either the HTML5 or XHTML starterkit to create your custom theme. Copy the starterkit you choose and place it in your sites/all/themes folder.
    The path to your subtheme should be sites/all/themes/mysubtheme
    If you have a particular requirement for XHTML choose XHTML. Otherwise, HTML5 is a better choice in terms of long-term compatibility with the modern web's changing Browser standards.

Modify your subtheme folder & files

  1. Rename the starterkit folder name to your preferred subtheme name.
    DO NOT use spaces or dashes (-) in your subtheme name, or your subtheme will NOT be recognized.
  2. Rename your .info file:
    Open your subtheme folder and locate the starterkit.info file. Rename this file to the exact name that you used for your subtheme folder. It is imperative that the name of your theme folder and your .info file match, otherwise your theme will not display. See the paths below for example:
  3. sites/all/themes/mysubthemename & sites/all/themes/mysubthemename/mysubthemename.info

  4. Make the necessary changes to the yoursubtheme.info file
    1. Open yoursubtheme.info and locate the following lines:
      • name = Replace with yoursubthemename
      • description = Replace with a your subtheme description
    2. *** VERY IMPORTANT ***
      • hidden = TRUE *** DELETE THIS LINE ***
      • starterkit = TRUE *** DELETE THIS LINE ***
    3. Save yoursubthemename.info


  5. Adapt existing CSS filenames:
    In order for your responsive CSS to load correctly you must change the names of the default CSS files. Rename the files found at /sites/all/themes/mythemename/css to include your subtheme name. See the example filenames below:
    • starterkit-alpha-default.css to mysubthemename-alpha-default.css

Go for it!

You are now ready to begin using your subtheme! Go to admin/appearance and you will find your newly created subtheme. Enable your subtheme only. DO NOT enable the Alpha & Omega Core themes.



The Drush Method

These simplified instructions are valid with omega_tools-7.x-3.x-dev and omega-7.x-3.x-RC1. It is no longer necessary to edit the generated .info file or to rename the generated CSS files. Please update to the latest versions of both prior to proceeding.

Using Drush, the Drupal Shell, makes it very simple to create sub-theme. You will need to download and install the Omega Tools module first (this should be done anyways as Omega Tools has features outside Drush such as theme exporting). Once you have Omega tools and Drush installed and configured perform the following steps:

  1. From a shell console in your site's root directory type drush omega-subtheme mythemename where mythemename is the name of your custom theme. Remember, don’t use any dashes or spaces though!
  2. Once the subtheme is created successfully you will see your new directory under /sites/all/themes/mythemename.

You should find your new theme ready for you to use under the appearances link in your admin menu. It is not necessary to enable the Alpha & Omega Core themes. Enjoy!

<< Back to documentation Home

Comments

I've got more to add to this

bhosmer's picture

I've got more to add to this guide. I just wanted to get what I had in there so far.

Thank you very much. . . .

jpw1116's picture

I will gladly contribute when I can.

I'm just wondering, though, is there a separate "slush" page where we can discuss changes and test them out before enacting them in the Wiki?

The documentation is activly

fubhy's picture

The documentation is activly being discussed on IRC #drupal-omega.

Thanks, I'll check that out.

jpw1116's picture

I guess I meant a static, slightly less mainstream forum, tied to the Omega wiki, where I could post "drafts" of revisions to the docs. Then invite feedback before committing them.

If this is already achieved by Drupal's general Documentation issue queue at http://drupal.org/project/issues/documentation then it's a nonissue. (Though I don't see anything Omega-related in there so far.)

Of course, things like simple typographical errors could still be fixed directly on the Wiki.

one note

arnemaine's picture

It's awesome that you are putting together the documentation. One note: it's not quite clear where the following changes mentioned following the section about the .info file changes for non-Drush.

You have:

VERY IMPORTANT

hidden = TRUE REMOVE THIS! Without removing this line you will not be able to find your theme in the admin menu.
starterkit = TRUE Remove this as well since you are no longer creating a starterkit.

Is this in the .info file? I don't see these in the .info file.

Check here, Arne

. . .

jpw1116's picture

And it should work for the latest release.

Thanks!

arnemaine's picture

I must have already removed these in the .info file I looked at. Sorry for the confusion. Keep up the great work!

I reference a non-existant

bhosmer's picture

I reference a non-existant subtheme.css file here. What would be the chance of inlcuding a subtheme.css within the starterkit /css that illustrates each #wrapper, #conatiner, and #region with easy to see colors so the user can locate these on the page and then reference them to the CSS?

@fuhby, should I open an issue in the 3.x branch que to do this?

I only ask because this is how I started using omega. I created subtheme and then identified each region and just add background-color: blue; etc. to give a visual guide as to where everything was laid out and then added my changes to my subtheme.css.

I created an issue in the

bhosmer's picture

I created an issue in the issue que regarding this. Depending on the answer, I will structure the guide to reflect it or not.

If you add links to this

banghouse's picture

If you add links to other pages in this documentation please confirm that they work before moving onto something else.

"Do or do not, there is no try" -- yoda

I know some of the links that

bhosmer's picture

I know some of the links that I added don't work, I did it on purpose. I am awaiting response to the issue so that the need to download the .css file separately might be eliminated.

I think the last few

Cellar Door's picture

I think the last few paragraphs and the css tree should be moved elsewhere in the documentation. It really does not relate to subtheme creation and more to deal with actually styling the subtheme. Anyone else agree?

Took the styles.css portion

Cellar Door's picture

Took the styles.css portion and moved to the part of the documentation regarding styling and overrides etc. Discussion there on how best to present it will continue

Good call. That does make it

bhosmer's picture

Good call. That does make it more nuclear and clear.

Tried this out, one suggestion

lsommerer's picture

I'm brand new to Omega, and wanted to give a little feedback on this section of the documentation. Everything was very straight forward and worked, but one section could have been clearer.

In 1. Rename your .info file I found it a little confusing to start off with the instructions for renaming the folder. I would have found everything just a bit clearer if the first two sentences:

The first thing you need to do is rename the starterkit folder to your new custom theme name. Don’t use any spaces or dashes (-) in your name, or it won’t be recognized.

would have either been a separate step (giving 4 steps total) or have been included in the preceding paragraph that talked about moving the starterkit folder.

Obviously the instructions work as they are currently written, but it did make me reread things a few times to make sure I wasn't missing something.

Glad it worked for you. I did

banghouse's picture

Glad it worked for you. I did some cleanup in the non-drush section. The instructions should be less confusing now.

"Do or do not, there is no try" -- yoda

Technically . . .

jpw1116's picture

Shouldn't the main title be "Creating an Omega 3.x Subtheme"* . . . not "Starter Theme"?

True, you could go on and subtheme what you're creating here, making this one a starter theme of sorts.

What do you think?

*FWIW, I always based my own notetaking on the docs that ended up here, minus the first two changes in the section "Action: Edit some files":

http://omega.developmentgeeks.com/documentation/subthemes/creating-omega...

Duly noted and change applied

banghouse's picture

Duly noted and change applied to title. Consistent nomenclature matters.

"Do or do not, there is no try" -- yoda

Drush method updated

iainH's picture

I updated the instructions above now that drush omega-subtheme is so much slicker

What is possible?

bremskraft's picture

Hi All,

I have no idea if this is the best place to post question, but I'm not finding the kind of information I need anywhere... Sorry if this isn't the appropriate place. (I am relatively new to Drupal and Drupal theming)

Anyhoo... I've been playing around with Omega3 for a while. I cannot for the life of me figure out how to accomplish putting a shadow on the part of the theme I need to have it. See here: http://faculty.unlv.edu/jbrown/prototype.jpg The page should look cohesive.

I tried putting all the regions in one zone, and putting the a shadow around the zone. That worked with limited success.

Is is possible to put this design(http://faculty.unlv.edu/jbrown/prototype.jpg) in the Omega responsive grid? What would be a best practice?

The best place to get support

Cellar Door's picture

The best place to get support to answers such as this is to visit the IRC chatroom #drupal-omega . For reference, this shadow effect is possible through CSS3 and the wrapping banner etc. is possible as well. I just implemented it on a site actually. Rather than go into detail here though as it'll take some explanation, find me in IRC and I can help out.

CSS3 example

dhalbert's picture

I just put a drop-shadow on a conventional rectangular page with a background, and did this:

.zone-branding,
.zone-menu,
.zone-header,
.zone-preface,
.zone-content,
.zone-postscript {
  -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
  -webkit-box-shadow: 5px 5px 5px 0px gba(0,0,0,0.5);
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
}

Since the zones are adjacent, the lower edge of the shadow is visible only on the lowest zone.

The -moz and -webkit entries cover some older browsers.

IRC is best.

alltooeasy's picture

Above code will work. I avoid theming Zones and stick to regions. Not had a good exp. of Zone Theming.

As CellarDoor says (who has incidentally helped me a bunch with Omega and some JS theming - thnx!) IRC is best. As with all things Drupal there are lots of ways to go about it. Bear in mind Omega is not a catch all for Theming (one day - chop chop Himerus :P)

I'd recommend greater specificity. Probably the best advice for Theming I've ever had generally. Drupal produces a lot of Divs, just add another one as a wrapper and Drop Shadow it with CSS3 or Box method/png, etc for older browsers.

Omega as I understand it and in my EXP. has some parts of it that don't like being tinkered with. Consider some of the CSS as solely layout and others as "visual theme". Think of it like the 960 grid stuff, you should look to edit the contents of a grid layout, not the grid itself unless you're happy with tinkering that way. But there are some dependencies there depending on how your using Omega.

Based on your layout, I would suggest a number of zones: Pre-header, Header (inc logo), Banner, Pre-footer region x 4 blocks. There is no good reason to pile it all into one Zone.
The idea of Zones is to be able to repeat design patterns easily. So that you don't have to remake the bottom pre-footer area of regions. So a region can contain e.g. Pre-footer and copyright.

All those in-between bits can be added in the Theme or tpls if they're needed or simply via a bit of custom CSS. Firebug is invaluable for this trial and error.

A good piece of advice I had is to play hard and fast with your sub theme and tpls. Keep a track of it and then hack out what works into a clean theme version.

Keep lots of back ups and throw stuff at it till you see what sticks. But it sounds like you're trying to bind too much to a single Zone. Why?

Unless you're planning on adding more content under the pre-footer region? But either way, there isn't a good reason to my mind not have multiple zones here. Especially as you're design is typical of Omega responsive sites.

Finally, if you're repeating design patterns, get into Delta & Context whilst a bit a "views style" abstract approach headache to begin with, it will handle a lot of different variations so you can one setup for one page and a midly or widly different from one another without having to create custom tpls for each.

Just my opinion, there are those older and wiser on IRC and elsewhere on d.org, but it sounds like you're on the cusp of Omega awesomeness,
So depending on the net effect, if you want the now ubuiqitous 'rounded shadow' under the image just add a div with a image src to the rotating image gallery's wrapper or even after it depending on your preference and it should do the job.

But IRC is def the place for this. The Drupal community is pretty awesome when it comes to support. Had a number of people give up plenty of their days just to help!

Hope that helps, but I'm not a theming pro by any means!

I agree with alltooeasy

Cellar Door's picture

I agree with alltooeasy dhalbert. Use Dhalberts code to give your zones the shadow effect. The banner is going to have to be placed via some trickery with position: absolute as you're going to have to "break the grid" to make it wrap around the content zone correctly. It's not something Omega likes to do out of the box but with a little finesse you can get it to work. I just built a site this week with it in a responsive environment and it works great.

Alltooeasy has some great other tips for the layout etc. that will go a long way. Once the week starts up (weekends tend to be dead in IRC) jump into the chatroom and find me "cellar-door" or anyone in there and we'd be happy to help you with it.

Also, just to keep documentation etc. easy to search and find the best way to ask these questions is to start a new discussion in the Omega Framework Group. I'm not saying this out of pickiness since this is technically a documentation wiki, but it allows yourself or others to search the discussions for answers to previously asked questions (though this isn't one of those). In situations like "how would you lay this out" it takes a lot of testing, trying, failing, trying again, success to get things how you like it and often IRC is the fastest way to get results.

So for Omega support the order I'd go is:

  1. Documentation (just covers the basics of subtheme and delta creation for now)
  2. IRC #drupal-omega
  3. Omega Framework Discussions

There's a lot of us that are willing to help, welcome to the community!

Thanks

bremskraft's picture

Thanks everyone. This will get me started.

Good Enough!

emeelio's picture

Thank you! It got me going.

To get a box shadow on left and right of page

druzilla's picture

guys, to get the shadow on both sides of your page, try this:-

-moz-box-shadow: 5px 5px 5px 0px #B3B3B3, -5px 5px 5px 0px #B3B3B3;
-webkit-box-shadow: 5px 5px 5px 0px #B3B3B3, -5px 5px 5px 0px #B3B3B3;
box-shadow: 5px 5px 5px 0px #B3B3B3, -5px 5px 5px 0px #B3B3B3;

Have fun !

Shadows on the sides

adraskoy's picture

I struggled with this for a long time, too. The problem was with where the zones met. Either I'd get gaps or overlap. Finally I did this, and it worked perfectly:

.zone {
  box-shadow: 0px 0px 5px 5px  rgba(0,0,0,0.3);
}
.zone-wrapper {
  overflow: hidden;
}

Omega Framework

Group organizers

Group events

Add to calendar

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week