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!

Posted by WebGear on June 15, 2011 at 9:59pm
Last updated by pixelsweatshop on Tue, 2011-09-13 21:44

<< 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.

Download Omega
unzip it (Stuffit or 7-Zip or similar)
Place the Omega folder & its contents into your Drupal site's
/sites/all/themes or /sites/example.com/themes folder.
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

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.

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:

sites/all/themes/mysubthemename & sites/all/themes/mysubthemename/mysubthemename.info

Make the necessary changes to the yoursubtheme.info file

Open yoursubtheme.info and locate the following lines:

name = Replace with yoursubthemename
description = Replace with a your subtheme description

*** VERY IMPORTANT ***

hidden = TRUE *** DELETE THIS LINE ***
starterkit = TRUE *** DELETE THIS LINE ***

Save yoursubthemename.info

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:

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!
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

Posted by bhosmer on June 16, 2011 at 11:36pm

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. . . .

Posted by jpw1116 on June 17, 2011 at 3:14am

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

Posted by fubhy on June 17, 2011 at 1:52pm

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

Thanks, I'll check that out.

Posted by jpw1116 on June 17, 2011 at 3:24pm

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

Posted by arnemaine on June 17, 2011 at 6:56pm

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

Posted by jpw1116 on June 17, 2011 at 7:03pm

http://groups.drupal.org/node/149869

. . .

Posted by jpw1116 on June 17, 2011 at 7:05pm

And it should work for the latest release.

Thanks!

Posted by arnemaine on June 17, 2011 at 7:15pm

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

Posted by bhosmer on June 17, 2011 at 8:02pm

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

Posted by bhosmer on June 20, 2011 at 12:34am

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

Posted by banghouse (not verified) on June 20, 2011 at 8:24am

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

I know some of the links that

Posted by bhosmer on June 20, 2011 at 8:29am

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

Posted by Cellar Door on June 21, 2011 at 1:21am

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?

Drupaler and Mobile Ninja
Cellar Door Media - Beautiful Mobile Solutions

Took the styles.css portion

Posted by Cellar Door on June 21, 2011 at 2:28am

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

Drupaler and Mobile Ninja
Cellar Door Media - Beautiful Mobile Solutions

Good call. That does make it

Posted by bhosmer on June 21, 2011 at 8:25am

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

Tried this out, one suggestion

Posted by lsommerer on June 23, 2011 at 5:45pm

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

Posted by banghouse (not verified) on June 23, 2011 at 7:15pm

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

Technically . . .

Posted by jpw1116 on June 30, 2011 at 6:03pm

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

Posted by banghouse (not verified) on July 1, 2011 at 2:12pm

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

Drush method updated

Posted by iainH on July 22, 2011 at 11:17pm

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

What is possible?

Posted by bremskraft on November 19, 2011 at 1:23am

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

Posted by Cellar Door on November 19, 2011 at 1:42am

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.

Drupaler and Mobile Ninja
Cellar Door Media - Beautiful Mobile Solutions

CSS3 example

Posted by dhalbert on November 19, 2011 at 2:28am

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.

Posted by alltooeasy on November 19, 2011 at 2:45am

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!

http://www.alltooeasy.co.uk

I agree with alltooeasy

Posted by Cellar Door on November 19, 2011 at 3:14am

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:

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

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

Drupaler and Mobile Ninja
Cellar Door Media - Beautiful Mobile Solutions

Thanks

Posted by bremskraft on November 22, 2011 at 6:35pm

Thanks everyone. This will get me started.

Good Enough!

Posted by emeelio on July 14, 2012 at 2:13am

Thank you! It got me going.

To get a box shadow on left and right of page

Posted by cardiffsteve on March 18, 2013 at 6:39pm

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

Posted by adraskoy on October 10, 2013 at 4:05pm

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;
}

superfish

Posted by mbahlol on February 17, 2015 at 2:50pm

it works very well, but my superfish menu hidden behind images (views slideshow).

Creating an Omega 3.x Subtheme

The Non-Drush Method

Acquiring and Installing Omega into your Drupal Site

Modify your subtheme folder & files

Go for it!

The Drush Method

Comments

Group organizers

New groups

Group notifications

Hot content this week