Here's the approach that I used. In my case, I was applying an HTML/CSS
template rather than building from scratch.
1. Delete the references in the /app/assets/stylesheets/store/all.css to
the spree base styles. This will get rid of all of the spree styling. You
want to do this to avoid ordering conflicts and unnecessary CSS later on
down the road. For me it was the following 2 lines:
*= require store/spree_core *= require store/spree_promo
2. I added my css files for the theme to the all.css file. If you are
using a template or have CSS, at a minimum you will want to go through the
css and change every image url to use an asset path function call. I would
also take the time to convert CSS into SCSS here or write SCSS from
scratch. It will save you time down the road. Note that it's not necessary
if you just want to get it working, but definitely consider converting
later on down the road.
3. Same advice above for CSS/SCSS can be applied to
SCSS introduces. CoffeeScript is worth it to learn if you don't have a
whole lot of JS experience under your belt.
4. Start with the main layout and the header and footer.
1. If you are applying an HTML template and need to make changes to
1. If you have a big structural change, I would suggest directly
overwriting the partial.
2. If it's minor changes, a deface override will do.
3. It's generally easier to change the spree views to match the
template html than it is to change the template CSS to match the base spree
2. If you are designing from scratch:
1. Think long and hard about just using the base spree views and
writing CSS to skin them.
2. I would only change the HTML if you need deeper structural
changes (like adding a 3rd column or changing from a table to a list)
3. If you need to add anything, you can do a deface override and
put your addition in a partial that the deface override calls.
5. Go through your different application pages one by one and start
to convert them over. The same design recommendations apply here as above.
The nice thing about removing the base spree styles in step 1 is that when
you are going through your application pages it's easy to see which ones
are not yet styled.
When I went through and made my theme from my own template, it was a fairly
intense process and I didn't get everything styled on the first go around.
There were also several plugins I had to style and several features that
existed in the template (like shipping quotes from the cart without
checking out) that I ended up adding functionality for. It may seem like a
big task, but just chunk it into smaller steps and you'll be done in no
time. If you get stuck or have more questions, you can always email the
On Sunday, February 24, 2013 11:39:58 AM UTC-5, Jameson Trinker wrote:
I'm a first time spree user and am building a site from scratch with a
completely customized design. I was just curious as to what I should do
from install to get rid of all spree styling and implement my own
Thanks for your help.
On Saturday, March 3, 2012 10:38:23 AM UTC-6, Calvin wrote:
We're in the process of upgrading our Spree install to 1.1.beta and Rails
3.2, and am having issues with porting our custom look and feel. Some of
it I feel is due to asset pipeline (I can't seem to override css files
provide by Spree), but another issue is that the pages are already gridded
out. If I wanted to change how things are gridded, any suggestions as to
the best way to do that? I can override the templates or perhaps deface
everything, but I was curious if there was another solution.
You received this message because you are subscribed to the Google Groups "Spree" group.
To unsubscribe from this group and stop receiving emails from it, send an email to email@example.com.
For more options, visit https://groups.google.com/groups/opt_out.