Spree Deluxe - Customizing color scheme variables

We're struggling to modify the color variables in Spree Fancy. The documentation suggests creating a variables_override.css.scss file. But where exactly should this file be placed? We've tried adding it under the stylesheets folder in assets and also under assets/stylesheets/spree/fancy/, but neither option worked.

For instance, let's say we want to change the default variable $c_orange: #ff9600 !default; to blue, but the change isn't taking effect.

We're currently working with the Spree 2.2 stable branch on Rails 4. Any assistance would be greatly appreciated.

Visit the official Spree Fancy GitHub repository for more information.

cssruby-on-railssassspree

Answer №1

Utilizing spree master and spree-fancy master.

This specific document:

>> cat app/assets/stylesheets/spree/fancy/variables_override.css.scss
$c_orange:      #000;

Successfully alters the orange color to black.

Therefore, your file ought to be positioned at 

app/assets/stylesheets/spree/fancy/variables_override.css.scss

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The placeholder text is not displaying with bullets in Internet Explorer. However, it is functioning correctly in Chrome

I need assistance displaying the placeholder text in IE8 as shown below: "Any relevant reference numbers, such as Direct Debits: - Name of the Branch (if applicable) - What was the original problem - Date the problem occurred " While it appears correct ...

javascriptcsshtml

Why does the styling of the inner Span adhere to the style of the outer Span?

How can I adjust the opacity of the color "blue" to 1 in the code snippet below? <!DOCTYPE html> <html> <body> <p>My mom's eyes are <span style="color:blue;font-weight:bold;opacity:0"> <span style="color:blue;fo ...

javascripthtmlcss

What is causing the collapsed-animation to malfunction in Vue3?

Why won't the transition animation function in vue3js? The animation does not appear to be working for me. I've implemented this library https://github.com/ivanvermeyen/vue-collapse-transition <template> <nav class="navbar color-d ...

cssvuejs3

Tips for achieving seamless scrolling with the combination of javascript and css

Looking for a solution to achieve smooth scrolling on an HTML page without using the #id_name to scroll to a specific div. Instead, I want to scroll to a particular point, such as having a button that scrolls down the webpage smoothly by 250px when press ...

javascripthtmlcss

The rows-per-page menu option in Vuetify suddenly vanishes

I'm currently working on incorporating a v-data-table inside a v-card, you can view the code in this CodePen snippet: https://codepen.io/benwasin97/pen/eYveZGL <v-data-table :headers="headers" :items="items" ...

htmlcssvue.jsvuetify.js

"Encountering an issue when linking the file with phpMyAdmin

I've been struggling with this issue for hours now. I'm currently working on a registration form for my website and while coding in PHP, I connected it to MySQL and the Database using this line of code (which happens to be the 6th line): $mysq ...

phphtmlcss

Using Rails to render a partial containing a form object

I need help with rendering a partial called 'colordata' after selecting a color from a dropdown list using Ajax. Unfortunately, I'm not seeing any changes on the main page and the form is undefined in the colordata partial. This is the sche ...

javascriptruby-on-railsrubyajax

Struggling to position an image and text side by side within a div using CSS

Is there a way to display a message inside a div with an icon positioned to the left? The desired outcome is for the icon to always be next to the text and aligned at the bottom-center of the div. I attempted using the :after pseudo element. However, set ...

htmlcss

Active bootstrap navigation tabs

I am struggling to maintain the active tab in my left navigation tab. The issue arises when I load the page with the first tab active, and then click on another tab - the new tab becomes active, but the first tab remains active as well. I would like only t ...

htmlcsstwitter-bootstrap

Guide to adjusting the screen resolution on your iPad 3

Hello everyone, I'm fairly new to designing for the iPad 3. Could someone please provide some guidance on how to set media queries specifically for the iPad 3? Thank you in advance. ...

css

Switching from vertical pills to horizontal tabs for smaller screens

I have a vertical pills menu that looks great on large screens, but takes up too much space on small screens. Is there a way to switch it to a horizontal tab layout for smaller screens? I tried searching online for examples but couldn't find any. < ...

csstwitter-bootstrapbootstrap-4

Create a duplicate <li> element and animate it using jQuery

Here are the list items: <ul> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</l ...

javascriptjqueryhtmlcsshtml-lists

What are some effective ways to align an image to the left and text to the right within a table

I need to display a member with a higher rank, showing the user image along with their username. However, I am struggling to align the image and text properly due to varying username lengths causing them to appear in a zig-zag position. Here is what I hav ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Align the <div> vertically within the <td> tag

My current set up looks something like this: <tr> <td> <div class="blue">...</div> <div class="yellow">...</div> </td> <td> <div class="blue">...</div> <div class="yellow ...

htmlcss

Getting the hang of revealing a div through flashing

Is it possible to make a div flash using CSS alone? My goal is to have this div alternate between two colors. .chat-window .msg-container-base .notification-message-unread{ float: right; font-size: 10px; color: #666; background: white; padding ...

htmlcss

Changing styles with the use of bootstrap.css themes on the fly

I'm experimenting with toggling between a custom dark and light theme in my MVC application. On the _Layout.cshtml page, the default theme is loaded by the following code: <link id="theme" rel="stylesheet" href="~/lib/bootstrap/dist/css/Original. ...

javascripthtmlcssasp.net-mvc

Sliding off the canvas - concealed navigation

I have implemented CSS to hide a menu on mobile: #filter-column { position:absolute; left:-400px; } However, I want the menu to slide in from the left when the user clicks a link, and everything else should be hidden. When the layer is closed, th ...

javascriptjqueryhtmlcss

Ensure all vertically stacked boxes maintain the same height using Flexbox technology

My design includes a series of links styled as larger boxes, with varying content and height. Using flexbox to ensure equal heights on each row is straightforward. I'm utilizing the Bootstrap grid layout, but when the boxes stack vertically (one per r ...

htmlcssresponsive-designflexbox

Encountering a RuntimeError during the integration of Angular Js in Rails with ExecJS

Currently, I'm working on integrating Angular Js into a Rails Project and I've been following the tutorial provided at . However, after completing all the steps, I encountered the following error: https://i.sstatic.net/ehYCb.png I've searc ...

javascriptruby-on-railsangularjsnode.jstwitter-bootstrap

Make sure the top edge of your Bootstrap 4 dropdown menu is perfectly aligned with the bottom edge of your

Trying to make a Bootstrap 4 navbar dropdown display right below the navigation bar, but it consistently shows slightly above the bottom edge of the navbar. Is there a way to make this happen without fixing the height of the navbar and using margin-top fo ...

htmlcsstwitter-bootstrap