Hot questions for Using Spree in css

Question:

I am working on a rails spree app.

I want to give my link work as a button. Here's how the link looks.

<li>
  <%= link_to Spree.t(:forgot_password), spree.recover_password_path %>
</li>

How do I make this as Button and add some classes to that button?


Answer:

If you want to generate an HTML button, instead of a hyperlink then change your link_to to button_to:

<%= button_to Spree.t(:forgot_password), spree.recover_password_path %>

This will generate a form with a single button in it that would take user to a given URL.

However, if you want to simply style your link as a button, then use CSS. The CSS rules will depend on your style. So, just Google and pick a style that fits your needs.

If your template is using Twitter Bootstrap, you can simply add btn and btn-* classes to style it as a button.

<%= link_to Spree.t(:forgot_password), spree.recover_password_path, class: 'btn btn-default' %>

Question:

In Spree 3.1 Standard Themes (out of the box)

I tried to change background image.But not work. Perhaps the path is wrong. Help need. Here what I did.

  1. Upload image to be /app/assets/images/NewBackGroundImage.png
  2. Add css in vendors/assets/stylesheets/spree/frontend/custom.css

CSS:

.spree-header{
    background-image: url("/assets/images/NewBackGroundImage.png");
    background-size: cover;
    margin-bottom: 10px;
}
  1. Here my inspect of the current page

This part is my attached screen shots for my comment of the answer below.

At the inspect screen it clearly display error 404 (Not Found)

Tried change to use asset-url then

SCSS:

Then Change my custom.css to custom.scss

And this is the inspect shot NOW IT WORK


Answer:

As I can see, your page doesn't use your styles at all. Are you sure the div tag has the class "spree-header". Because in your browser it only has id "spree-header" and nothing about the respective class. Try to replace it from .spree-header to #spree-header. If there might be confrontation between styles, then you can always try the usage of !important tag: url(...) !important;

If the folder "vendors" is in the "app" folder, then you can use the relative path url("../../../../../assets/images/NewBackGroundImage.png") as well

Question:

I have a Spree application and some pages that are not part of the spree application. My problem is that styles are shared between those pages. (they look similar, but they have their own asset locations)

How do I do it so I don't have to maintain two sets of stylesheets/JS files?


Answer:

Just extract common stylesheets to separate CSS files then include them in your applications:

  • use build process (such as Asset Pipeline)
  • symlinks (not a best way but I think it will works too)
  • submodules (if you are using Git)
  • put common stylesheets to separate gem and use it as part of Asset Pipeline (like any Rails gems with assets inside)

Question:

I need to override my spree store's header colour. I create a custom.css under the ../mystore/vendor/assets/stylesheets/spree/frontend directory. But it does not work. please help

The default css style for spree header is shown as below

#spree-header #header {
    background: rgba(34,34,34,0.4);
    padding: 20px 0;
}

Below is my custom.css file

#spree-header #header {
    background: white !important;
    padding: 20px 0;
}

I expected my spree header to change the colour to white.


Answer:

You cannot override an rgba() color with an rgb() color.

In this instance, white is a reserved word, representing rgb(255, 255, 255).

Instead of:

background-color: white;

use:

background-color: rgba(255, 255, 255, 1);

N.B. background is a multi-value shorthand property.

If you only intend to declare the background color, use background-color.


For further info on all the values the background shorthand property can take, see:

https://developer.mozilla.org/en-US/docs/Web/CSS/background

For further info on the background-color property, see:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color