I'm using spree 2.1.5, rails 4.0.2, sass-rails 4.0.0.
The spree documentation at http://guides.spreecommerce.com/developer/asset.html indicates using the vendor/assets/stylesheets folder. However, examples I see of spree stylesheet overrides on Github and from other google search show many people using the app/assets/stylesheets folder.
Is it best to override spree styles in the folder my_store/app/assets/stylesheets? Or my_store/vendor/assets/stylesheets?
I put my css in the "normal" place - in app/assets/stylesheets, and nothing changed. I put my css in the vendor/assets/stylesheets folder, and they were applied.
Working with Spree very un-like working with "Rails" - though spree is running on a rails server. The process starts with, "Where are the files?" and gets more bizarre from there. This is why I am abandoning it for a custom solution. In many cases, it would take longer to learn how to modify/customize Spree, than to write a new solution (for the parts of it we actually need) from scratch.
Update:
Unlike stated in my original answer, Spree will not even evaluate stuff in app/assets/stylesheets and style customizations need to be made in vendor/assets/stylesheets, e.g. in
vendor/assets/stylesheets/spree/frontend/all.css
TlmaK0 is perfectly right pointing this out.
Quoting from http://guides.rubyonrails.org/asset_pipeline.html:
Pipeline assets can be placed inside an application in one of three
locations: app/assets, lib/assets or vendor/assets.
app/assets is for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.
lib/assets is for your own libraries' code that doesn't really fit into the scope of the application or those libraries which are shared
across applications.
vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks.
Short: You probably want to put your override stuff into app/assets/stylesheets.
Normally all the code for font-end and back-end for spree loads into to your rvm as other gems, you can override them by creating decorators folder into app(same as like models, controllers). Or you can put the file at the same location(but this is not right solution) and can make the change like mainapp/app/views/spree/admin/shared/_header.html.erb
For decorators example say I want to override spree's products_controller I will put it at decorators/products_controller_decorator.rb
Spree::ProductsController.class_eval do
#mychanges
end
Export all views to app/views with:
rails generate spree:frontend:copy_views
This will generate all frontend views in app/views to override it.
Edit app/views/spree/shared/_head.html.erb and add:
<%= stylesheet_link_tag 'application', media: 'screen' %>
to include app/assets/stylesheets folder.
Related
So unless I can not Google properly I can't find a definitive 'best practice' way to use Vendor styling in Rails 7.
It's the same with everything but say I am including Froala Editor and I include the JS through ImportMap and everything is great.
The way that I have found to include the styling for it though is to download the CSS and put it in a /vendor folder in my stylesheets directory and then include it.
Surely I am missing something simple...
Here is how I am adding css files
Create a vendor/stylesheets folder
Modify config/initializers/assets.rb and add
Rails.application.config.assets.paths << Rails.root.join("vendor", "stylesheets")
Then
Download css files into vendor/stylesheets folder (you may need to create the stylesheets folder)
Add to app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", "cssfile.min", "data-turbo-track": "reload" %>
I tried to take a look around here and on the Liferay forums but I couldn't find a documented solution to my issue.
I am currently using Liferay 6.2 and am very new to the environment. My issue arises from CSS #import functions. Our architecture is one main stylesheet with all supporting stylesheets imported into this document. Those CSS documents in the same directory present no issue - for example #import url(document.css);. We do have a master stylesheet located in another portlet and all other portlets reference this stylesheet with an import call similar to #import url(../../../../folder/folder/document.css);. When using this command, the CSS in this file isn't imported into the portlet. If I place the master stylesheet in the same directory as the CSS for that portlet and adjust the import path accordingly, the stylesheet is imported without any issues. I can also place it one directory up such as #import url(../folder/document.css); and the CSS is imported correctly.
Several team members do not have this issue, while several members do experience this issue - all running the same version of Liferay and on identical machines.
I'm sure my question is fairly vague due to me being new with the environment so if I can clarify or provide any additional details, please let me know!
If all of the portlets reference the same CSS file they shouldn't: Just assume that the necessary CSS is deployed through the theme and add it to the theme once. This is way more elegant than delivering it multiple times, relying on relative paths to not have changed, and potentially not being available (at runtime, nobody guarantees that an appserver even unzipps your warfiles).
Through enforcing the assumption that you're running in an environment that has proper styling, life will be so much easier.
So,
I have used bower to install bootstrap SASS files into my application.
I am using AngularJS and want to use my own directory structure instead of the default Content path defined by MVC.
So I have installed https://github.com/twbs/bootstrap-sass and in my core SASS file I have imported the bootstrap SASS like this:
#import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
everything loads in my application and the site is definitely using bootstrap, but whenever I try to use a glyphicon I just get a square instead of the icon. Looking in the console I can see that the path to the glyphicons is wrong. It is showing:
http://localhost:58859/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf
but it should be
http://localhost:58859/assets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf
Now I "could" edit the variables file and change this line:
// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
to something like this:
// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: "/assets/bootstrap-sass/assets/fonts";
but whenever someone loads my project from github and bower resolves bootstrap my changes to that file will be lost. I have noted in their documentation they talk about sprockets and mincer, but I have never used these so I have no idea what they are for.
My question is, can I change the font path without editing the SASS file directly?
Checked out some links, but it seems that people who answer assume a little bit more than I know.
I'm using Rails 3.2.13 and I need to add some styling to my Views.
I have the assets/stylesheets/trade_page.css. What steps do I have to take, where do I have to reference it, what line do I put inside the View pages to use this styling?
Take a look at the asset pipeline documentation. You will need to require the file within your application.css file (if you are not already requiring the whole tree) and then the most common place is to include the application.css file using a stylesheet__link_tag in the application.html.erb file
I am building a Rails 3.2 app which has some functionality where a user can apply different themes (i.e. CSS files) to their websites. I have a Theme model with a theme name and a file name - pretty straightforward.
My question is, where should these css files sit? Should they be in the /assets folder, or in the /public folder? They can't be added to the pipeline as far as I know as I don't know which css file the user will choose so can't precompile.
If I use something like:
stylesheet_link_tag "plain.css"
It of course generates a path to /assets/plain.css which is not a valid path.
I can put it in /public and generate the path using something like
"public/themes/" + theme.file
But something about that feels wrong. Any architecture suggestions?
If all themes are simple pre–existing stylesheets of which the user picks one, I’d go with
/app/assets/stylesheets/themes/plain.css
Then use this in the view:
stylesheet_link_tag "themes/plain"
# or e.g. using the model
stylesheet_link_tag "themes/#{current_user.theme.file_name}“
You could also consider creating a theme_stylesheet_tag helper which does this for you in a more cleanly way.