I'm building a new store using commerce kickstart 2.

I'm using the default theme currently (which might I add is quite impressive) but I need to make many changes to it. Should I be doing this via CSS through a child theme?

Can someone walk me through creating a child theme for this? I don't seem to be able to get it. I modified the .info file but the child theme does not show up in the control panel under disabled themes.

Thanks!

Comments

VM’s picture

docs for creating a subtheme - http://drupal.org/node/225125

to understand how you altered a .info file and glean an idea as to what may be causing the problem please post the file to drupalbin.com then link to it here.

vertigoat’s picture

Sorry I've left this unattended a couple days. I got side tracked on something else!

Anyhow, my apology for not posting what I had done. Basically, I started over last night using the link to the sub-theme directions you provided. Honestly, I feel like there are parts missing from those instructions, or, I'm just not visualizing what needs to be done.

Is there a link to explicit, step by step instructions to creating a child theme?

My understanding is that I take the .info file from the commerce kick start theme, copy it into my new subtheme folder in sites/all/themes/newsubtheme then rename this .info file and point it to the original .info file from the kickstart theme.

After that, if I activate my new sub theme, it will essentially be the original, almost like a url redirection. right? If I'm understanding that so far, then what? I just create 'style.css' and for every declaration I make to that file which has a matching declaration in the original kickstart theme, the newly declared specification will be followed?

Thanks a ton by the way.

VM’s picture

your explanation of how you are trying to create a subtheme, or how you think a subtheme is created is raising some alarms but that could be due to terminology issues.

My understanding is that I take the .info file from the commerce kick start theme,

correct

copy it into my new subtheme folder in sites/all/themes/newsubtheme

correct

then rename this .info file

correct

and point it to the original .info file from the kickstart theme.

you don't point one .info file at another. You set the basetheme in the subtheme.info file.

After that, if I activate my new sub theme, it will essentially be the original, almost like a url redirection. right?

no. nothing like a url redirection.

I just create 'style.css' and for every declaration I make to that file which has a matching declaration in the original kickstart theme, the newly declared specification will be followed?

you create a custom.css file, define it in your subtheme info file and add your customized css to it.

multiple videos and tutorials.

you can also look at some of the already existing subthemes to gain an idea at how they work. If you are unable or unwilling to show files when speaking on this issue, it's difficult to aid.

vertigoat’s picture

Ok, a couple questions and, a piece of the file I'm referring to.

By the way, I have googled and looked at many sources regarding this. I finally found one video that mostly cleared up some stuff but not all. Let me go down my assumed procedure and please, stop me if I'm wrong.

1) copy base theme (commerce kickstart) entire folder to my custom theme folder i.e. /sites/all/themes/custom_theme

2) delete everything in my custom folder with the exception of .info, screenshot.png, logo.png and the /css folder.

3) delete everything in the /css folder and create a blank .css file (which can be named anything)

4) open the .info file and specify the base theme and rename this file to .info

Here's where confusion sets in. in my sub_theme .info file, do I remove all of the existing style sheet declarations and declare ONLY my new .css file I've created(the blank one)?

; 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'

Also, at the top of my new .info file, should it look like this?

name = my new custom theme
description = 'my new custom theme description'
package = Commerce Kickstart
core = 7.x
screenshot = screenshot.png
base theme = commerce_kickstart_theme

Before I get ahead of myself, if the above is suitable, I'll play with that a while and see if it doesn't all fall in place. Once I can get this sub_theme operational, modifying it should be little to no problem.

Thanks!

VM’s picture

let's back up. commerce kickstart theme is already a subtheme of omega. Which is you are going to alter more than 50% of commerce kickstart then you may as well make a subtheme of omega. rather than a sub theme of a subtheme.

vertigoat’s picture

Ok, with that in mind, I'm not sure what I'm going to do. Being unfamiliar with Drupal, my instinct is to just modify the kickstart theme. I wouldn't say I'm going to modify it more than 50%. Likely more around 20%.

However, if I chose to go straight Omega, this is where it is confusing for me. The omega folder is not in the normal themes folder, its in a profile folder.

I think part of my issue is that most of my reading is based on a clean Drupal 7 install which, to my knowledge, is not what I have. I have a totally customized distro, kickstart.

This is a large learning curve for me and I'm excited to jump it. I appreciate your patience and I'm aware that I come off like I haven't a clue but its simply not such. Once I See how this fits together, it will be golden.

VM’s picture

correct. install profiles store their wares in the profiles folder. I forget what the reasoning is for this. I suppose to make updating of the install profile make sense if/when contribs are added to an install profile.

vertigoat’s picture

I would like to start with the omega_kickstart theme.

Its located in:

.../profiles/commerce_kickstart/themes/omega_kickstart

I feel like I can tweak this to make it suitable. It seems like more work than it needs to be to start with a fresh Omega theme and sub_theme it from there.

So, I would like to create a sub_theme of the omega_kickstart theme.

I have:
1) copied the entire original omega_kickstart folder to .../sites/all/themes
2) renamed the omega_kickstart folder to 'LunaOmega'
3) renamed 'omega_kickstart.info' to 'LunaOmega.info'
4) in 'LunaOmega.info' changed to look like:

name = 'LunaOmega'
description 'CUSTOM LUNA'
core = '7.x'
engine = 'phptemplate'
screenshot = 'screenshot.png'
base theme = 'omega_kickstart'
version = '7.x-3.x'

What would be my next step?

Thanks.

VM’s picture

would be to open template.php and change any functions that carried the ecommerce theme name to yours. I'd avoid capitals and especially CamelCasing.

Another note, you only want to copy over the files you know you will alter. Otherwise you are essentially cloning the subtheme at which point when the omega_kickstart theme is updated you'll need to compare all files to make sure your subtheme gets those changes.

if you are going to clone the subtheme, you are likely better off making omega the basetheme in .info then you are only reliant on updating that base theme. You are then free to hack the cloned theme til you see fit.

juampynr’s picture

It is much easier if you copy the whole commerce_kickstart_theme directory into sites/all/themes/. Then you can make your changes there.

davidjsn’s picture

Could this continue on from creating a child subtheme rather than cloning? I'm trying create a Kickstart subtheme and got a little lost on dealing with which css, js and php need to be copied into sites/all/themes/mynewtheme.
1. If I am modifying menu colors and shapes, line spacing on some pages, adding Buy Now buttons, is this best done with a single new css or would I be better off copying all the original css files to /mynewtheme?
These are:
the deafult, narrow, normal and wide files
the ie 7 & 8 files
the style files
and the global-rtl.css

2. Should template.php be copied to /mynewtheme.

3. Same for the single js file (commerce_kickstart_theme_custom.js) ?

elia.weiss’s picture

By the way, I have googled and looked at many sources regarding this. I finally found one video that mostly cleared up some stuff but not all. Let me go down my assumed procedure and please, stop me if I'm wrong.

RudolfStreif’s picture

I tried the following two methods to create a modified version of the commerce kickstart theme:

1. Copying commerce_kickstart_theme to sites/all/themes
2. Creating a subtheme using Omega Tools

Either way I end up with a site where all the buttons/links inside of a product view will not work anymore e.g. the "add to cart" button is inoperable (hovering over it does not even change the mouse pointer), same with the quantity spinner, color chooser, Facebook, Google+ etc. controls.

I am essentially stuck and would appreciate some help on how to fix the problem. It entirely puzzles me that simply copying a theme and changing the name of the .info file and some css files seems to disable that functionality.

Thanks.

millzee’s picture

I would join lynda.com free for a week and watch these drupal courses:

http://www.lynda.com/Drupal-training-tutorials/186-0.html
Drupal 7: Creating and Editing Custom Themes & Drupal 7 Custom Module Development

It took a day but was well worth it.

drupalreggie’s picture

Quick theming questions...

1) I've cloned the commerce_kickstart theme folder in profiles/commerce_kickstart/themes/ and renamed it.
2) I've adjusted the .info file and renamed all the css files in my custom theme folder to reflect the new theme name
3) I can now select my new theme in site appearance however certain css rules are not being applied ie. change colour when hovering over ad push etc.

Two questions:
1) How can I carry over the original commerce_kickstart theme css effects to my new theme (such as change colour on hover over etc.) - also why do they not carry over seeing as I have cloned the folder and css files?
2) Is this a sensible way to go about creating a subtheme?

Cheers,

VM’s picture

renamed all the css files in my custom theme folder to reflect the new theme name

There is no need to rename all of the CSS files and is likely the root of your CSS issues.

drupalreggie’s picture

Classic case of answering my own question;

When renaming CSS files in cloned theme folder DO NOT rename commerce_kickstart_style.css to reflect new theme folder name

drupalreggie’s picture

Thank you for your reply, I renamed css files as advised in README.txt in the folder;

##########################################################################################
##### CSS Files
##########################################################################################

Any custom CSS files should be placed in this folder.

Five CSS files are provided by default. These files will be loaded according to the
media queries established in your theme's settings. The default values are provided below.

To use these stylesheets, rename the files and YOURTHEME with the name of your theme.
For example, if your theme is named beta, the files would be named:
global.css (this file does not get renamed)
beta-alpha-default.css
beta-alpha-default-narrow.css
beta-alpha-default-normal.css
beta-alpha-default-wide.css

VM’s picture

specific files if dictated by instruction is a bit different than renaming all css files.

Glad you got it sorted out!

drupalreggie’s picture

hehe true. Yes, now looking forward to customising my new theme!

drupalreggie’s picture

Hmm, I been having some success with this but keep getting landed with the same problem;

I've created my sub theme using the above method and then added various custom css rules into the commerce_kickstart_style.css. However when I disabled and re-enabled the theme all these changes were lost and the theme doesn't display correctly.

Any ideas?

mcfilms’s picture

I am just pitching in here with the caveat that I do not use Commerce, nor have I tried the installation profile. So this may not be relevant to your issue.

At a usergroup meeting earlier this week I heard from a user that they were having issues with the display of a subtheme of kickstart. Ultimately it was determined that for some reason the global.css file was not getting accessed by the subtheme. So you could start there by either viewing the rendered page's source and make sure the path to global.css is working or just copying the global.css rules into your subtheme as a test.

Wish I was more help.

A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com

drupalreggie’s picture

Hey thanks for the info. I'm pretty happy with my theme now, I've got the hang of which CSS files to use when. The original error was being caused by a missing '}' (classic).

I'm now struggling with getting new product variations to display properly!

Cheers

spacerex’s picture

I have:
1) copied the entire original omega_kickstart folder to .../sites/all/themes
2) renamed the omega_kickstart folder to 'LunaOmega'
3) renamed 'omega_kickstart.info' to 'LunaOmega.info'
4) in 'LunaOmega.info' changed to look like:

name = 'LunaOmega'
description 'CUSTOM LUNA'
core = '7.x'
engine = 'phptemplate'
screenshot = 'screenshot.png'
base theme = 'omega_kickstart'
version = '7.x-3.x'
What would be my next step?

Posted by VM on October 26, 2012 at 2:48am

would be to open template.php and change any functions that carried the ecommerce theme name to yours. I'd avoid capitals and especially CamelCasing.

Another note, you only want to copy over the files you know you will alter.

This is the only place that I've seen any mention of altering the template.php file in this way. If this is the correct procedure, it ought to be included at https://drupal.org/node/225125#comment-7605505. There is some reference to Template.php. but it's pretty darned vague.

VM’s picture

Perhaps a reread of the entirety of this thread would aid. It's important to place some focus on the OP's comments as s/he shifted from generating a subtheme and chose to clone an already existing theme midway through discussion.

note my comment made earlier in the discussion. Notice that there isn't any mention of altering template.php as the user was originally asking how to generate a subtheme.

the comment that you are referring to which comes later in the discussion and with reference to altering template.php was due to the OP is no longer generating a subtheme but cloning an entire subtheme for reuse. There's a difference. a subtheme inherits its assets from a base theme. A clone copies a sub/theme in it's entirety.

if you are working with a subtheme there is no need to alter anything in template.php. In fact, a subtheme template.php can be empty (if used at all).

if you are cloning an already existing subtheme, you would have to alter the theme functions within template.php from say garland_some_function to (where garland is the name of theme) to YOURTHEMENAME_some_function. This is documented in the theme developer's guide and multiple tutorials on how to clone themes.

sja1’s picture

I posted them in the Commerce Kickstart issue queue for community review.

These instructions are working for me so far. Because we're actually subtheming a subtheme (Commerce Kickstart is a subtheme of Omega Kickstart, which is itself a subtheme of Omega), it's a bit trickier than if you are subtheming Omega directly.

Hope this helps someone!

catchlight’s picture

We have "Child" themes. Let's call this a "Grand Child" theme.