2

Hi I'd like to alter some of the CSS on the Commerce Kickstart theme, but when I try to create a sub theme by following these instructions https://drupal.org/node/819170 I end up with an unformatted theme. This isn't what I want, I want to alter the current Kickstart theme but from the sites/all/themes subfolder.

I've created a subtheme based on omega, omega_kickstart, but these leave me with no css formatting at all.

I've copied the profiles\commerce_kickstart\themes\omega_kickstart folder to my sites/all/themes, renamed the info file etc.. this left me with partial formatting.

one thing I noticed from the dom entries is css come from various folders, i.e. alpha, omega.

anyone know how to create a successful subtheme here?

Improve this question

2 Answers 2

Reset to default
2

I followed all 10 steps at this article in detail to get a fully functional boilerplate subtheme for the Commerce Kickstart Theme in just a couple of minutes.

In case the article goes offline, you can find a mirror here.

Info :

How to subtheme the Omega Kickstart Theme

Posted by sja1 on August 4, 2013 at 12:31pm

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

[ For the detailed 10 steps, go to one of the two provided links ]

Improve this answer
7
  • Welcome to Drupal Answers. Note that an answer with only a link is not regarded as a good answer. Links to external resources are encouraged, but always quote the most relevant part of an external link, in case the target site is unreachable or goes permanently offline. Please see How to write a good answer.
    – Free Radical
    Commented May 20, 2014 at 16:37
  • @Free Radical : It's a 10 step process with several substeps that should be followed in detail to do things right. I'm willing to consider making an effort copy-pasting all the info here, but I'm not sure how to do this in a readable way. The markup breaks when you add code to sub-steps, making the answer quite unreadable.
    – John Slegers
    Commented May 20, 2014 at 16:49
  • I understand that. Copy-pasting it would also violate the copyright. However, if you're only going to provide only a link with out taking the time to summarize its main points, the custom here is to post it as a comment - not as a full answer.
    – Free Radical
    Commented May 20, 2014 at 17:02
  • @Free Radical : The problem here is that there's no way to summarize a 10 step process without leaving essential details. As you pointed out, copy-pasting the whole text coule lead to copyrights issues. Adding it as a comment seems like a bad idea to me as well, though, as I suspect many people would overlook an answer that gives them a detailed procedure to do exactly what they want (it did in my case). Sounds like a Catch 22 situation, really. Anyway, as a noob at Stack Exchange all these strange rigid rules and procedures sometimes make management here seem like a bunch of fascists. geez
    – John Slegers
    Commented May 20, 2014 at 17:18
  • @4life : I added the author's introduction to get an idea of what to expect. I added a mirror link with the detailed steps in case the main link is down. I followed these steps myself and it allowed me to create a working boilerplate subtheme for "Commerce Kickstart theme" in a matter of minutes. This is precisely what the OP was looking for. If you still don't consider this a suitable answer, I give up...
    – John Slegers
    Commented May 20, 2014 at 17:45
1

This is the only solution I've found so far, feel free to add a new answer to improve on this answer.

create your new css file in 

drupalinstall\profiles\commerce_kickstart\themes\omega_kickstart\css\customcss.css

edit this file:

drupalinstall\profiles\commerce_kickstart\themes\omega_kickstart\omega_kickstart.info

Add this detail (below the similar global.css entry):

css[customcss.css][name] = 'custom Css file'
css[customcss.css][description] = 'All my stuff'
css[customcss.css][options][weight] = '12'

now add this to the same file(again below the similar global.css entry):

settings[alpha_css][customcss.css] = 'customcss.css'

now within your drupal site, clear your cache (Site settings>configuration>performance) now engage your new css file in the appearance>settings>toggle styles, from here you should see your new css file entry. tick this. and you're good to go.

This answer was discovered with the help of this question/answer How to add custom css file to subtheme of omega kickstart theme?

Improve this answer
2
  • 1
    Yep that's how sub-theming works, if you want to add a new css file you need to declare it in the .info file
    – Clive ♦
    Commented May 2, 2014 at 11:37
  • @Purplemonkey : Follow all 10 steps in my answer below to create your own subtheme boilerplate. If you want more advanced behavior, create your own hooks. Check out drupal.stackexchange.com/questions/96063/… for an introduction on how to create hooks for your subtheme and where to put them.
    – John Slegers
    Commented May 20, 2014 at 15:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.