Hi guys, first off thanks for the all the work you've put into make Commerce Kickstart such an oustanding platform. I wanted to create this issue in order to help those who are having trouble creating a subtheme of the commerce kickstart theme. There is good documentation for subtheming omega, but I had a harder time finding information on subtheming a subtheme of omega (Commerce Kickstart is a subtheme of Omega Kickstart, which is a subtheme of Omega). With some trial and error I have come up with the following procedure which is working for me, and thought I'd present it to the community for others to benefit from and hopefully improve upon. All comments welcome.

Steps to subtheme Commerce Kickstart theme

Notes:

  • all paths are relative to your site's root directory, and assume you have the Commerce Kickstart installation profile already installed)
  • Wherever you see YOURTHEMENAME, you must replace it with a name you create for your subtheme. To be safe, use only letters and numbers, no spaces or dashes.
  1. Copy /profiles/commerce_kickstart/themes/omega/starterkits/omega-html5 to /sites/all/themes/YOURTHEMENAME
  2. Delete /sites/all/themes/YOURTHEMENAME/ starterkit_omega_html5.info
  3. Copy /profiles/commerce_kickstart/themes/commerce_kickstart_theme/commerce_kickstart_theme.info to /sites/all/themes/YOURTHEMENAME/YOURTHEMENAME.info
  4. Edit YOURTHEMENAME.info and make the following changes:
    • Replace
      name = Commerce Kickstart Theme
      description = ''
      package = Commerce Kickstart
      core = 7.x
      screenshot = screenshot.png
      base theme = omega_kickstart

      with

      name =  YOURTHEMENAME
      description =  overrides of commerce kickstart theme, a subtheme of <a href="http://drupal.org/project/omega">Omega</a>.  Information on subtheming Omega can be found in the <a href="http://himer.us/omega-docs">Omega Documentation</a>
      core = 7.x
      engine = phptemplate
      screenshot = screenshot.png
      base theme = commerce_kickstart_theme
    • Replace
      ; OPTIONAL STYLESHEETS
      
      css[commerce_kickstart_style.css][name] = Commerce Kickstart theme global style.
      css[commerce_kickstart_style.css][description] = This file holds all the globally active custom CSS of Commerce Kickstart theme.
      css[commerce_kickstart_style.css][options][weight] = 11
      settings[alpha_css][commerce_kickstart_style.css] = 'commerce_kickstart_style.css'

      with

      ; OPTIONAL STYLESHEETS
      
      css[YOURTHEMENAME_style.css][name] = My sub-themes global style.
      css[YOURTHEMENAME_style.css][description] = This file holds all the globally active custom CSS of my sub-theme.
      css[YOURTHEMENAME_style.css][options][weight] = 12
      settings[alpha_css][YOURTHEMENAME_style.css] = 'YOURTHEMENAME_style.css'
    • Delete the following lines (these settings are inherited from the commerce kickstart theme, so do not need to be repeated):
      ; OPTIONAL LIBRARIES
      
      libraries[commerce_kickstart_theme_custom][name] = Commerce kickstart theme JS
      libraries[commerce_kickstart_theme_custom][description] = This file holds all the custom JS.
      libraries[commerce_kickstart_theme_custom][js][0][file] = commerce_kickstart_theme_custom.js
      libraries[commerce_kickstart_theme_custom][js][0][options][weight] = 15
      settings[alpha_libraries][commerce_kickstart_theme_custom] = 'commerce_kickstart_theme_custom'
  5. Go to /sites/all/themes/YOURTHEMENAME/css and rename ALL the css files as follows:
    • Rename "global.css" to "YOURTHEMENAME_style.css"
    • Rename "YOURTHEME-alpha-default-narrow.css" to "YOURTHEMENAME-alpha-default-narrow.css"
    • Rename "YOURTHEME-alpha-default-normal.css" to "YOURTHEMENAME-alpha-default-normal.css"
    • Rename "YOURTHEME-alpha-default-wide.css" to "YOURTHEMENAME-alpha-default-wide.css"
    • Rename "YOURTHEME-alpha-default.css" to "YOURTHEMENAME-alpha-default.css"
  6. Navigate to /admin/appearance, find your subtheme and click "set default" to enable it and set it as the default theme
  7. Still on /admin/appearance, click the "settings" link for your subtheme
  8. In the vertical menu on the left, click "Toggle libraries". Check the box for "Commerce kickstart theme JS" and leave everything else unchanged.
  9. In the vertical menu on the left, click "Toggle styles". Check the box for "Commerce kickstart theme global style" and leave everything else unchanged.
  10. Scroll to the bottom of the page and click the "Save configuration" button.
  11. At this point, your site should be running on your new subtheme, which should look identical to the commerce kickstart theme. You can now make your customizations, as with any omega subtheme. Check the Omega 3.x documentation for more information on how to do that.

    If you see that there are styles missing from your subtheme that are present when the original commerce kickstart theme is enabled, make sure you did steps 8 and 9. Also, in step 4, second bullet, note that the [weight] option increments from 11 to 12.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jsacksick’s picture

Project: Commerce Kickstart » Omega Kickstart
Version: 7.x-2.9 » 7.x-3.x-dev
serg2’s picture

I have just followed the guide step by step and all seems to working perfectly. Thank you.

rumblewand’s picture

You sir, saved me an assload of time. Thanks!

cllamas’s picture

wonderful

GDrupal’s picture

Guys! There is another more direct way of doing this just using omega_tools and a few drush commands:

  1. drush dl omega_tools
  2. drush en omega_tools
  3. drush omega-subtheme "The New Theme Name Here" --base=commerce_kickstart_theme --enable

It takes you like 1 min and it works just perfect.

tnfno’s picture

Drush is great, I do not understand why I did not start using it earlier since it saves a lot of time.

Anyway, the above way to create the subtheme works and saves a lot of time, but no CSS files are copied from the base theme. If I want to create a custom.css do I then need to copy the css files from the base theme or can I only make a custom.css and add it to the info file?

GDrupal’s picture

I'm just using a few tpl files and a custom css file right now and it works great. But be sure you follow the "OPTIONAL STYLESHEETS" step with the weight =12 trick when you add your new css file.

sergiu.popa’s picture

Here are the steps for a sub-theme called Example. Notice it uses omega_kickstart as base (and not commerce_kickstart_theme which was the previous theme).

  1. drush omega-subtheme "example" --base=omega_kickstart --enable
  2. Create the CSS files inside the sites/all/themes/example/css:
    • example_style.css
    • example-alpha-default.css
    • example-alpha-default-narrow.css
    • example-alpha-default-normal.css
    • example-alpha-default-wide.css
  3. Modify example.info and add the following lines for the global CSS file:
    css[example_style.css][name] = Example sub-theme global style
    css[example_style.css][description] = This file holds all the globally active custom CSS of my sub-theme.
    css[example_style.css][options][weight] = 12
    settings[alpha_css][example_style.css] = 'example_style.css'
jacqueschoquette’s picture

FileSize
83.67 KB
88.33 KB

Wow so happy to find this thread. I am so close I can taste it. However despite following these instructions to the T. I am having some display issues with the theme

http://fba.ezcmshosting.com/

And yes I made sure to change the weight option from 11 to 12 and toggled the appropriate items in the theme settings

Can anyone see what I am doing wrong? Any help would be really appreciated.

here are my info file changes

name = furbearerdefenders
description = overrides of commerce kickstart theme, a subtheme of Omega. Information on subtheming Omega can be found in the Omega Documentation
core = 7.x
engine = phptemplate
screenshot = screenshot.png
base theme = commerce_kickstart_theme

; OPTIONAL STYLESHEETS

css[furbearerdefenders_style.css][name] = My sub-themes global style.
css[furbearerdefenders_style.css][description] = This file holds all the globally active custom CSS of my sub-theme.
css[furbearerdefenders_style.css][options][weight] = 12
settings[alpha_css][furbearerdefenders_style.css] = 'furbearerdefenders_style.css'

jacqueschoquette’s picture

ok figured it out I was reading the word unchanged as unchecked in steps #8 and #9. All working thanks sja1 for the wonderfull guide!

tremix’s picture

Grandioso...!!! a probarlo entonces...!!!

jsacksick’s picture

Status: Active » Fixed

You could also read this https://drupal.org/node/225125

Status: Fixed » Closed (fixed)

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

mark@redhorseinteractive.com’s picture

Works great. Much thanks.

mark@redhorseinteractive.com’s picture

Issue summary: View changes

Added link to omega documentation

holeepassion’s picture

Guys! There is another more direct way of doing this just using omega_tools and a few drush commands:

drush dl omega_tools
drush en omega_tools
drush omega-subtheme "The New Theme Name Here" --base=commerce_kickstart_theme --enable

It takes you like 1 min and it works just perfect.

I am a newbie to this, so please provide step by step if you do not mind, thanks cos I was using the sample theme omega, but blocks are not working, as they are not moveable. I suspect because I cannot use it per se. Even, i cannot allocate user login to a region.

how do i use the omega tools and where I locate the resources to get it working ?

thanks heaps

HAPPY NEW YEAR everybody ....

hosais’s picture

great thanks.

zeta1600’s picture

+1

krisp1’s picture

I had no libraries toggle selection displayed for steps #7 & #8. I figured this was due to removing the Optional Libraries in one of the earlier steps. I changed the library settings in the base theme and it seems to have done the job. Thanks.

JC0nde’s picture

Following the steps exactly as its writen...

\0/ You guy just saved my life, Thank you!

PS: the omega 3 documentation link is broken ;)

caco13’s picture

I followed the instructions too, but one thing I didn't get. I have changed the background logo bg.png to my own. Create directory my_theme/images, and put the new bg.png there. There is a line in MyTheme_style.css,
in section 1. Global:

body {
  background: #ececec url("../images/bg.png") left top; }

I've supposed then that the bg.png charged woul'd be my own, but it doesn't happen.

Am I missing something?

By the way, I first subthemed Commerce Kickstart theme with drush, and followed the other steps to make changes in MyTheme.info file.

Solved!

In

In the vertical menu on the left, click "Toggle styles". Check the box for "Commerce kickstart theme global style" and leave everything else unchanged.

To me worked when I Uncheck the box for "Commerce kickstart theme global style". After do that, I saved the configurations and now, in "Toggle styles", there is a new option: MY THEME NAME theme global style. (all) - MYTHEMENAME_style.css, where MY THEME NAME = Livraria Acervo (my theme name) and MYTHEMENAME = livraria_acervo. So I Check this option and again saved the configurations. Now my background image and other changes in attributes in MYTHEMENAME_style.css does work.

Drupal Bros’s picture

Works as advertised - thanks!

gfury’s picture

Works great. I mis-read a few steps, but after another try, worked great.

Thanks,

ressa’s picture

Version: 7.x-3.x-dev » 7.x-3.4
drush en omega_tools -y
drush omega-subtheme "Name of theme" --base=commerce_kickstart_theme --enable

...was all it took. I also had to send the "Social connection" block to "Footer First" and "Footer navigation" to "Footer Second", but then I had a Commerce kickstart sub theme.

randomyao22’s picture

#5 works perfectly for me.

Lars Bo Jensen’s picture

It worked perfectly. Thanks!

Drush is cooler, but there is still need for tutorials like this.

arthur.hylton’s picture

This tutorial is awesome. Thank you for taking the time and effort to create it.

tnfno’s picture

There is actually 2 omega kickstart themes on the latest Kickstart:

Commerce Kickstart Theme 7.x-2.20 and Omega Kickstart 7.x-3.4

If you want to subtheme the latest version you should replace the last line

drush omega-subtheme "The New Theme Name Here" --base=commerce_kickstart_theme --enable
with
drush omega-subtheme "The New Theme Name Here" --base=omega_kickstart --enable

I am not sure what the differences are, but for example the main menu is black in 2.20 theme and grey on 3.4. 3.4 is used as default in the latest Kickstart distribution so that is probably the version you want to use.

manish_tapadar’s picture

I tried this as per description but the content region and sidebar first and second bar first is not coming.What should I do for it?

scott859’s picture

Has anyone used SASS with this method? If so, any insight into that would be appreciated.

I'd like to use SASS In the omega-html5, I don't see any SASS files. I see a SCSS folder in omega_kickstart directory as well as the commerce_kickstart_theme but not certain how that would apply to the sub-theme created from the omega-html5 directory.

Thanks in advance.

armyofda12mnkeys’s picture

Trying to combine the instructions of the manual method posted here, and the drush commands in the comments.
After I run drush to create the subtheme, there are no css files under my new theme's css/ directory.

Should I just put a empty file in there called mytheme_style.css (and add my 1 CSS rule I need) and then just add the CSS file to the .info file?
Im confused since the instructions say to rename a file created in that css/ directory ... but drush doesn't put any files into that directory, and just adding that:

css[mytheme_style.css][name] = My Theme's Custom CSS
css[mytheme_style.css][description] = Custom CSS for my website
css[mytheme_style.css][options][weight] = 12
settings[alpha_css][mytheme_style.css] = 'mytheme_style.css'

and a sites/all/mytheme/css/mytheme_style.css doesn't seem to work. I don't see any mytheme_style.css show up in that toggle section.
commenting out the 2 things mentioned above doesn't seem to help (note: there were no name,description,weight values for these in the .info file generated from drush, so i only commented out the below lines):

;settings[alpha_libraries][commerce_kickstart_theme_custom] = 'commerce_kickstart_theme_custom'
;settings[alpha_css][commerce_kickstart_style.css] = 'commerce_kickstart_style.css'
armyofda12mnkeys’s picture

Figured it out...
Whether i used omega or commerce-kickstart's omega (i wasn't sure which one is better to use, i think i preferred commerce_kickstart which looked better out-of-box vs omega which was a bit more basic, maybe too basic):
drush omega-subtheme "My Theme" --base=commerce_kickstart_theme --enable
drush omega-subtheme "My Theme" --base=omega_kickstart --enable

These instructions worked:
I had to put a mytheme_style.css in the css/ dir then of that subtheme.

I also followed above instructions...
css[mytheme_style.css][name] = mytheme custom CSS
css[mytheme_style.css][description] = Custom CSS for mytheme website
css[mytheme_style.css][options][weight] = 12
settings[alpha_css][mytheme_style.css] = 'mytheme_style.css'

I see these lines are disabled so I guess I disabled them from above instructions:
;settings[alpha_css][commerce_kickstart_style.css] = 'commerce_kickstart_style.css'
;settings[alpha_libraries][commerce_kickstart_theme_custom] = 'commerce_kickstart_theme_custom'

I may have skipped originally on added these below files. YES, you need them, even if empty useless files!
I just created the empty files with Cygwin on Windows in that same /css directory of my subtheme:
touch treesofjoy-alpha-default.css;
touch treesofjoy-alpha-default-narrow.css;
touch treesofjoy-alpha-default-normal.css;
touch treesofjoy-alpha-default-wide.css;

Then I went back to Appearance->Toggle Styles and now I see the mystyles.css just above the 'Disable module and theme stylesheets' section. I checked it, then Cleared Cache and now I see my css changes come through.

selinav’s picture

Jennyu’s picture

Does anyone try to create a sub-theme from commerce_kickstart-7.x-2.48-core by this way?
I created one and it didn’t work.
I got this error:
Notice: Undefined property: stdClass::$prefix in system_theme_settings() (line 547 of mamp\htdocs\drupal\modules\system\system.admin.inc).
Notice: Undefined index: fusion_core in system_theme_settings() (line 575 of mamp\htdocs\drupal\modules\system\system.admin.inc).
Notice: Trying to get property of non-object in system_theme_settings() (line 575 of mamp\htdocs\drupal\modules\system\system.admin.inc).