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.
- Copy /profiles/commerce_kickstart/themes/omega/starterkits/omega-html5 to /sites/all/themes/YOURTHEMENAME
- Delete /sites/all/themes/YOURTHEMENAME/ starterkit_omega_html5.info
- Copy /profiles/commerce_kickstart/themes/commerce_kickstart_theme/commerce_kickstart_theme.info to /sites/all/themes/YOURTHEMENAME/YOURTHEMENAME.info
- 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'
- Replace
- 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"
- Navigate to /admin/appearance, find your subtheme and click "set default" to enable it and set it as the default theme
- Still on /admin/appearance, click the "settings" link for your subtheme
- In the vertical menu on the left, click "Toggle libraries". Check the box for "Commerce kickstart theme JS" and leave everything else unchanged.
- In the vertical menu on the left, click "Toggle styles". Check the box for "Commerce kickstart theme global style" and leave everything else unchanged.
- Scroll to the bottom of the page and click the "Save configuration" button.
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.
Comment | File | Size | Author |
---|---|---|---|
#9 | cssdirectory.jpg | 88.33 KB | jacqueschoquette |
#9 | root-directory.jpg | 83.67 KB | jacqueschoquette |
Comments
Comment #1
jsacksick CreditAttribution: jsacksick commentedComment #2
serg2 CreditAttribution: serg2 commentedI have just followed the guide step by step and all seems to working perfectly. Thank you.
Comment #3
rumblewand CreditAttribution: rumblewand commentedYou sir, saved me an assload of time. Thanks!
Comment #4
cllamas CreditAttribution: cllamas commentedwonderful
Comment #5
GDrupal CreditAttribution: GDrupal commentedGuys! 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.
Comment #6
tnfno CreditAttribution: tnfno commentedDrush 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?
Comment #7
GDrupal CreditAttribution: GDrupal commentedI'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.
Comment #8
sergiu.popa CreditAttribution: sergiu.popa commentedHere 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).
drush omega-subtheme "example" --base=omega_kickstart --enable
Comment #9
jacqueschoquette CreditAttribution: jacqueschoquette commentedWow 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'
Comment #10
jacqueschoquette CreditAttribution: jacqueschoquette commentedok figured it out I was reading the word unchanged as unchecked in steps #8 and #9. All working thanks sja1 for the wonderfull guide!
Comment #11
tremix CreditAttribution: tremix commentedGrandioso...!!! a probarlo entonces...!!!
Comment #12
jsacksick CreditAttribution: jsacksick commentedYou could also read this https://drupal.org/node/225125
Comment #14
mark@redhorseinteractive.com CreditAttribution: mark@redhorseinteractive.com commentedWorks great. Much thanks.
Comment #14.0
mark@redhorseinteractive.com CreditAttribution: mark@redhorseinteractive.com commentedAdded link to omega documentation
Comment #15
holeepassion CreditAttribution: holeepassion commentedGuys! 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 ....
Comment #16
hosais CreditAttribution: hosais commentedgreat thanks.
Comment #17
zeta1600 CreditAttribution: zeta1600 commented+1
Comment #18
krisp1 CreditAttribution: krisp1 commentedI 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.
Comment #19
JC0nde CreditAttribution: JC0nde commentedFollowing the steps exactly as its writen...
\0/ You guy just saved my life, Thank you!
PS: the omega 3 documentation link is broken ;)
Comment #20
caco13 CreditAttribution: caco13 commentedI 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:
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
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.
Comment #21
Drupal Bros CreditAttribution: Drupal Bros commentedWorks as advertised - thanks!
Comment #22
gfury CreditAttribution: gfury commentedWorks great. I mis-read a few steps, but after another try, worked great.
Thanks,
Comment #23
ressa CreditAttribution: ressa commented...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.
Comment #24
randomyao22 CreditAttribution: randomyao22 commented#5 works perfectly for me.
Comment #25
Lars Bo Jensen CreditAttribution: Lars Bo Jensen commentedIt worked perfectly. Thanks!
Drush is cooler, but there is still need for tutorials like this.
Comment #26
arthur.hylton CreditAttribution: arthur.hylton commentedThis tutorial is awesome. Thank you for taking the time and effort to create it.
Comment #27
tnfno CreditAttribution: tnfno commentedThere 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.
Comment #28
manish_tapadar CreditAttribution: manish_tapadar commentedI 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?
Comment #29
scott859 CreditAttribution: scott859 commentedHas 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.
Comment #30
armyofda12mnkeys CreditAttribution: armyofda12mnkeys commentedTrying 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:
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):
Comment #31
armyofda12mnkeys CreditAttribution: armyofda12mnkeys commentedFigured 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.
Comment #32
selinav CreditAttribution: selinav commentedTo add css for print only see https://www.drupal.org/node/1528596#comment-6842260
Comment #33
Jennyu CreditAttribution: Jennyu as a volunteer commentedDoes 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).