I am passing along this writeup from a member of our team that has run into a setup issue in a multi-site environment:

We are in the process of trying to create a sub-sub-theme for a series of microsites, but we aren't sure what the right way to go about doing that.

We've created an Omega sub-theme, for example purposes let's say it is named "ABC123", and configured the theme settings, and some general CSS. Now we want to create sub-themes that point to "ABC123" and reference all of its settings and CSS, plus add an additional CSS file where we can make smaller site-specific changes such as changing colors, and swapping a logo.

We tried using Omega Tools to create a subtheme of ABC123, but it doesn't copy the theme settings, or the CSS files. It appears to be simply cloning the HTML5 Starterkit instead of the ABC123 subtheme.

Do you have any suggestions or tips as to how we can create sub-sub-themes? Thanks!

Comments

rwilson0429’s picture

I have a similar configuration.

My guess is that Omega Tools placed the sub-theme in your sites/all/themes folder. If so, create a theme folder under sites/[your-sub-domain.com] and copy move your sub-theme there.

If you used Omega tools to create your sub-theme then, the sub-theme's .info file should already have a reference to the parent theme. Therefore, the parent templates and styles will be automatically used as a default. You can over-ride the parent theme defaults by doing the following:

In the .info file of your sub-theme, under the Optional Style sheets section, add something like:

; OPTIONAL STYLESHEETS (note the global.css statements may already be in there)

css[global.css][name] = 'Your custom global styles'
css[global.css][description] = 'This file holds all the globally active custom CSS of your theme.'
css[global.css][options][weight] = '10'
;
;my custom main style used for ALL versions of the site
css[styles.css][name] = Main Styles
css[styles.css][description] = Your main custom CSS file.
css[styles.css][options][weight] = '11'
;

Copy the global.css from the parent theme folder to your sites/[your-sub-domain.com]/themes/css folder. If you defined another custom style sheet, such as shown above ('styles.css'), you can create a styles.css and add your custom styles there as well. In the admin/appearance/settings/[your-omega-sub-theme], toggle styles section, check the box to toggle your style.css on.

As an alternative to adding a new style sheet to your sub-theme's .info file, for minor style changes you may want to consider adding a css @import directive to the very top of your sub-theme's global.css (i.e. @import url('custom.css');).

jeffdiecks’s picture

thanks for the feedback!

we will test this out and report back our results.

himerus’s picture

Status: Active » Fixed

This is a common issue I deal with in current (large) projects that need a more solid structure than simply having Omega as the base theme, and a series of subthemes for various projects. Most bigger implementations, and definitely anything that can be in an install profile/platform really needs the structure in place that a subtheme of Omega is the base theme for the project, and can quickly then be subthemed.

The following is the structure that I use for this type of need: (and Jeff, you can see this in action in the install profile mentioned during our chat earlier)

  • Create a subtheme of Omega...
  • Configure it to your hearts desire, getting all regions, zones, etc. sized and placed appropriately. This includes turning off/on any CSS from Omega or Drupal core that is needed to better suit the project/platform
  • Once configurations are done, export your theme settings using Omega tools back to your sub/base theme's .info file
  • Create and test any template overrides, preprocess code, etc. in your sub/base theme
  • Create a folder in your appropriate theme folder (in sites/all/themes or profiles/yourprofile/themes, etc) called something like "platform"
    • Inside your "platform" folder, place your newly created/configured "base theme"
    • Create a folder called "starterkit" or "starterkits" (assuming you may have multiple)
    • Copy the base theme (once it is fully complete) and rename it appropriately something that denotes it's a starterkit inside the "platform" folder.
    • In your renamed starterkit, remove any of the custom templates, custom preprocess code/files in template.php, and empty out any CSS customizations. This should in the end, look much like the Omega HTML5 Starterkit, which uses all the defaults of Omega preprocess, templates, etc. to render.
    • If you look in the Omega starterkit(s) you will see the lines hidden = true and starterkit = true in the .info which prevent it from being directly listed at admin/appearance, and make it ready to be used to generate a subtheme based on that starterkit with Omega Tools
    • Also make sure to set the base theme in your starterkit to your base theme (that is a subtheme of Omega)

From the top of my head, this is how I do it when I'm setting up something that will be reused/extended. There are some nuances currently with sub-subthemes of Omega based on the responsive stuff, and how the CSS files for responsive are loaded. Essentially the lesson to follow is that your base theme (subtheme of Omega) shouldn't implement any responsive enhancements, but rely on global.css to put in some defaults for the platform. Multiple global.css's (from multiple themes) can be loaded at the same time, and inherited properly, but the responsive stylesheets (narrow, normal, wide.css) will only load the most specific one (in this case the one of the sub-subtheme of Omega) so responsive adjustments from the sub/base theme won't be loaded to the child theme. This is a known "issue" that we are looking into a better method to handle in the future, but is a fine line to walk since any responsive projects SHOULD likely be a one off, and not inherit the CSS of the parent in that regard.

Hope this helps, or at least points in a way that I "personally" consider best practice. And after that long winded answer, the short version is: "create a starterkit"... :)

jeffdiecks’s picture

Assigned: Unassigned » jeffdiecks
Status: Fixed » Needs review

grabbing this for review based on the feedback. thanks so much for the input! we'll report back our results here.

jeffdiecks’s picture

Status: Needs review » Fixed

Moving to fixed. The solution suggested in #3 worked for us. Thanks Jake! We'll follow up with some further notes on our implementation.

himerus’s picture

BooYa!

Kendall Totten’s picture

After creating the directory structure Jake described above (THANK YOU!), it was a bit challenging to figure out which CSS needed to be in the sub/base theme vs. the sub-sub-theme. Here are a few notes from my learning experience of writing CSS within this sub-sub-theming environment. Hopefully to help anyone else in this same spot.

  1. I wrote as much CSS possible within core.css (actually core.less, because LESS is awesome). Note that this file is core.css, not global.css. Your sub-sub-theme is going to use global.css, so this file has to have a different name. If your theme is already done when you are starting this process, that's ok, continue to step 2.
  2. I pulled out any references to color and background images that are specific to the sub-sub-theme, and put those into the sub-sub-theme global.css
  3. I pulled out any bits of CSS that really didn't belong in the mobile theme (extraneous rounded corners, too much padding, background images) and moved that CSS into the sub-base-alpha-default.css file.
  4. Then there were rare bits of CSS that had to move to only the wide or narrow CSS files.

I also left some default images within the sub/base theme so that there weren't void or blank areas. These images can just be overridden in the sub-sub-theme files.

P.S. I haven't tried to create a new sub-sub-theme from the starterkit theme... to be continued. :)

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

g10’s picture

great stuff! only one issue:
if you rename your base theme global.css to core.css, it must be included in your starterkit .info file to be loaded it seems
settings[alpha_css][core.css.less] = 'core.css.less'

Kendall Totten’s picture

Also FYI, if you create a subtheme of a pre-existing Omega subtheme (using Omega Tools), the new child theme doesnt inheirit the global.css from the parent subtheme.
So I just renamed the global.css in my new child subtheme to subthemename-global.css , and it started inheiriting the global.css from the parent theme again. BTW, don't forget to go to your theme settings page > styles to enable the new subtheme-global.css stylesheet.

cardpages’s picture

I tried following this, but I BROKE MY SITE!!!!

Stupidly, I didn't quite backup in a little while.

I'm getting this error "Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 36 bytes) in C:\xampp\htdocs\rosiesposiesdesign\includes\theme.inc on line 98"

Any idea what's going wrong?

alison’s picture

@cardpages -- first glance that looks like a resource-usage error -- like, you maxed out on your memory usage or execution time. can you check your memory limits, etc., in your php.ini?

(If you haven't done this before--)

  • Go to your phpinfo() -- /admin/reports/status/php OR there should be a link on your XAMPP startpage.
  • Find the path of the php.ini file being used, and open this php.ini file in a text editor.
  • Look for settings such as:

    post_max_size (if present, make sure this is at least 20M)

    max_execution_time (make sure this is at least 90)

    memory_limit (make sure this is at least 96M)
  • After saving php.ini, restart your server, and try whatever you were doing (saving your theme?) again.
  • (Note: You can check most/all of the aforementioned settings' values from /admin/reports/status and phpinfo() before bothering opening php.ini.)

Hope this is helpful!

phunktified’s picture

#10 works - just remember to change the .info file reference to global.css to your subthemename-global.css name too.
(We are sub-subtheming an existing Omega subtheme for potentially hundreds of individual sites.)

phunktified’s picture

Issue summary: View changes

fixing name of example sub-theme in description