How to create sub theme of Drupal 7 commerce kick start theme

Submitted by admin on Sat, 05/03/2014 - 10:16

Drupal 7 commerce kickstart theme is a well-done ecommerce theme, it is part of the project: commrece kickstart. Commerce Kickstart is the quickest way to get up and running with Drupal Commerce. It includes the latest versions of Drupal core, Drupal Commerce, and the other modules it depends on. It also gives you a set of options to create a fully-featured demo store out of the box complete with an attractive theme, catalog and search configuration, and a custom back office interface.

Sometimes you want to use it but add your custom csss style or js library on top of it. Create a sub theme of it is the best way to do so.

Most of you know that , omega module has a module called: omega tools, you could use it to create sub theme of omega. Since I used it many times in the past, i didn't have any problem with it. Hence, i tried to create sub theme of commerce kickstart by using omega tools. It did create the sub theme for me, but the css and js were missing from the new sub theme. 

After few hours research, i found the solution for this. You could successfully create sub theme of commerce kickstart theme by doing the following two ways:

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

2. manual copy and modify:

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.

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.

  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.

Refer to :https://drupal.org/node/2057387