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
Comment #1
rwilson0429 CreditAttribution: rwilson0429 commentedI 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
copymove 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');).
Comment #2
jeffdiecks CreditAttribution: jeffdiecks commentedthanks for the feedback!
we will test this out and report back our results.
Comment #3
himerus CreditAttribution: himerus commentedThis 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)
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"... :)
Comment #4
jeffdiecks CreditAttribution: jeffdiecks commentedgrabbing this for review based on the feedback. thanks so much for the input! we'll report back our results here.
Comment #5
jeffdiecks CreditAttribution: jeffdiecks commentedMoving to fixed. The solution suggested in #3 worked for us. Thanks Jake! We'll follow up with some further notes on our implementation.
Comment #6
himerus CreditAttribution: himerus commentedBooYa!
Comment #7
Kendall Totten CreditAttribution: Kendall Totten commentedAfter 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.
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. :)
Comment #9
g10 CreditAttribution: g10 commentedgreat 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'
Comment #10
Kendall Totten CreditAttribution: Kendall Totten commentedAlso 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.
Comment #11
cardpages CreditAttribution: cardpages commentedI 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?
Comment #12
alison@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--)
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)
Hope this is helpful!
Comment #13
phunktified CreditAttribution: phunktified commented#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.)
Comment #13.0
phunktified CreditAttribution: phunktified commentedfixing name of example sub-theme in description