Using Spree and Spree Fancy how can I customize the color scheme?

Question

I am new to programming and this is my first Spree app. I am unable to change the color scheme of my app using Spree and Spree Fancy. I've tried following a few tutorials and docs that I've listed below but I am having difficulty implementing Deface and override. I was able to update a page using Deface app/overrides/update_footer.rb file with the following:

Deface::Override.new(:virtual_path => 'spree/shared/_footer',
  :name => 'change address to boston',
  :replace  => "div.address",
  :text => "
      <div class='address'>
        New Location USA
      </div>
")

And my Gem file is

gem 'rails', '4.0.3'
gem 'spree', github: 'spree/spree', branch: '2-2-stable'
gem 'spree_auth_devise', github: 'spree/spree_auth_devise', branch: '2-2-stable'
gem 'spree_fancy', github: 'spree/spree_fancy'

Links I've tried

http://railscasts.com/episodes/298-getting-started-with-spree?view=asciicast http://guides.spreecommerce.com/developer/deface_overrides_tutorial.html as well as the guides on assets and views.

What is the correct way to customize the colors? I hope to be able to make other changes of course once I understand the process.

Answer 1

Your deface override is not working because you're trying to replace content which doesn't exist in the template you're overriding.

Take a look at the source for the template here: https://github.com/spree/spree/blob/v2.2.0/frontend/app/views/spree/shared/_footer.html.erb

I'll paste it below, as it's small.

<footer id="footer" class="sixteen columns" data-hook>
  <div id="footer-left" class="columns alpha eight" data-hook>
    <p><%= Spree.t :powered_by  %> <%= link_to 'Spree', 'http://spreecommerce.com/' %></p>
  </div>
  <div id="footer-right" class="columns omega eight" data-hook></div>
</footer>

In your deface override, you should see it apply if you change it to override something that is in that template. For example,

:replace  => "#footer-left"

If you're just looking to change some of the colours around you should override this file:

https://github.com/spree/spree_fancy/blob/master/app/assets/stylesheets/spree/fancy/variables_override.css.scss

You can then redefine some of the variables listed here:

https://github.com/spree/spree_fancy/blob/a78d4b9017985405b497af9d8d4bc26949d19283/app/assets/stylesheets/spree/fancy/variables.css.scss#L4-L17

You can also style elements by applying new CSS to them, or override the existing styles with higher priority CSS selectors.