I'm trying to use these icons for my site. I already downloaded bootstrap, and have a bootstrap.css file. If I download all of bootstrap, it messes my site up, so I downloaded a customized version. I forgot to download the icons, so what I did was download a customized bootstrap with only the icons, and then copy and pasted that into my old bootstrap.css file. However, the icon I was trying to use didn't work.
So then what I did was I tried moving my old bootstrap.css file out of vendor/assets/stylesheets and into vendor/assets, and I put the new bootstrap.css file (with only the icons styling) into vendor/assets/stylesheets. When I did that, the icon still didn't show. So I removed the new bootstrap.css file, and I put the old one back into vender/assets/stylesheets. However... now none of the bootstrap styling works!!! I have no clue why that is!
I tried restarting my web server, clearing my cache, I checked to see if there is an assets folder in my public folder (because when there is I can't see css changes using localhost. something to do with compiling). None of it worked, and I still can't see any of the bootstrap styling in my localhost. When I use inspect element, I don't see the bootstrap styles being applied. I'm afraid to update the actual site, because I might loose the bootstrap styling. If you want me to update it so you can see it and help me and are confident that I won't lose the bootstrap styling, I'll trust you and do it. Let me know.
Error:
Sass::SyntaxError in Static_pages#home
Showing /Users/adamzerner/collegeanswerz/app/views/static_pages/home.html.erb where line #1 raised:
Invalid CSS after "...ground-position": expected ";", was ": center;"
(in /Users/adamzerner/collegeanswerz/app/assets/stylesheets/home.css.scss)
Extracted source (around line #1):
1: <%= stylesheet_link_tag "home", :media => "all" %>
2: <%= javascript_include_tag :application %>
3: <% provide(:title, 'Questions About College? CollegeANSWERZ') %>
4:
Rails.root: /Users/adamzerner/collegeanswerz
Application Trace | Framework Trace | Full Trace
app/assets/stylesheets/bootstrap.css:1939
app/assets/stylesheets/home.css.scss:1
app/views/static_pages/home.html.erb:1:in `_app_views_static_pages_home_html_erb__737002310770935096_70160250580000'
Request
Parameters:
None
Show session dump
Show env dump
Response
Headers:
None
If you are using ruby on rails, then you can use the bootstrap-sass gem.
gem 'bootstrap-sass'
and then start using it by adding
#import bootstrap;
to the css file under app/assets/stylesheets. You can have all the functions provided by bootstrap.
But if you still want the customized version, you can place the bootstrap css files under app/assets/stylesheets and javascript files under app/assets/javascripts and images under app/assets/images. You can download the missing images from bootstrap and then go to /img for the images.
EDIT:
Looking at your error logs and the css you have provided in the comment. You have forgotten the semicolon after the background-image: url("glyphicons-halflings.png");
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'm on Debian Jessie, 32bit, editing with gEdit and trying to get BootStrap to work without an internet connexion. I went to getbootstrap.com/getting-started, downloaded the files from the left-most button, extracted the various folders (js, css, fonts) into a folder named bootstrap.
I also created custom.css in the css folder and threw in a line
#qlksjhdf { color:#FF0000;}
Within this folder, I created an HTML file. Then I copied some code from a working example. When I use the CDN links, all works fine, as expected, but when I replace the CDN with local linking such as "css/bootstrap.css", the styling disappears, although the H1 styling in "css/custom.css" works.
Do I need to "install" something or wouldn't just downloading and linking the files suffice ? And yes, I've also downloaded jQuery and linked it locally...
Are you sure that you're using the right file path for the Bootstrap resources. If you put everything in a folder called bootstrap, you should be able to link the css file like this from your index.html:
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
Double check the path you are using to reference the bootstrap files. That is most likely the issue. If everything looks fine, can you add some code to the example or create a JS fiddle with the code you are working with?
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.
We have the following line in our BundleConfig.cs
bundles.Add(new StyleBundle("~/css/global").Include("~/assets/css/global.css").Include("~/assets/css/global-custom.css"));
This is then used on our layout template like so
#Styles.Render("~/css/global")
In debug mode, the styles are all correct, as it just puts in links to the flat CSS files, but in release mode the optimisation takes place and we end up with a link like this
<link href="/css/global?v=JeCJ-mJfPPBREwlOCYDzyEG1VfJETaOYdJRHLkBLU9w1" rel="stylesheet">
But we end up with some style issues on the page.
Searching through the returned CSS shows that there are styles which the bundling has just not included at all. I have tried making the bundle only reference global.css (and not global-custom.css) with the same issue of styles from global.css not coming through.
I have looked at threads with other problems with the bundling and have tried solutions to those problems with no luck, and have not been able to find a similar problem online.
Does anybody know why this might be happening?
i have just deployed my rails application but the css stylesheet wont appear
I'm calling the stylesheet as follows:
<%= stylesheet_link_tag 'layout' %>
the obvious one is that the stylesheet exists in your directory at:
public/stylesheets/layout.css
Also, if you scaffold'd your models/views etc, make sure you don't have another layout file with the controller name in:
app/views/layouts/xxxscaffoldname.html.erb
cause the screws up your css layout rendering if you want to show the application.html.erb(or whatever you called it) layout only.