Hello!

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
css/html/styling?

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.

Thanks,
Calvin
--
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 spree-user+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Search Discussions

  • Nate Lowrie at Feb 25, 2013 at 7:08 pm
    Jameson,

    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
    Javascript/CoffeeScript. Note that the CSS/SCSS conversion definitely has
    way more upside than Javascript/CoffeeScript because of the new features
    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
    the HTML:
    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
    html.
    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
    group.

    Regards,

    Nate
    On Sunday, February 24, 2013 11:39:58 AM UTC-5, Jameson Trinker wrote:

    Hello!

    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
    css/html/styling?

    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.

    Thanks,
    Calvin
    --
    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 spree-user+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.
  • Jameson Trinker at Feb 25, 2013 at 7:36 pm
    Nate and Steve,

    Thank you so much for your detailed responses. I will definitely be taking
    your advice. I'm sure I'll have some questions so you'll hear from me
    again. But thank you. Your responses cleared a lot up for me.
    On Monday, February 25, 2013 1:08:21 PM UTC-6, Nate Lowrie wrote:

    Jameson,

    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
    Javascript/CoffeeScript. Note that the CSS/SCSS conversion definitely has
    way more upside than Javascript/CoffeeScript because of the new features
    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
    the HTML:
    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
    html.
    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
    group.

    Regards,

    Nate
    On Sunday, February 24, 2013 11:39:58 AM UTC-5, Jameson Trinker wrote:

    Hello!

    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
    css/html/styling?

    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.

    Thanks,
    Calvin
    --
    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 spree-user+unsubscribe@googlegroups.com.
    For more options, visit https://groups.google.com/groups/opt_out.

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupspree-user @
categoriesrubyonrails
postedFeb 25, '13 at 9:55a
activeFeb 25, '13 at 7:36p
posts3
users2
websitespreecommerce.com
irc#RubyOnRails

2 users in discussion

Jameson Trinker: 2 posts Nate Lowrie: 1 post

People

Translate

site design / logo © 2022 Grokbase