I am using rails3 with bootstrap-sass gem.
I'm having an error:
ActionController::RoutingError (No route matches [GET] "/img/glyphicons-halflings.png"):
my bootstrap_and_overrides.css.scss is:
#import "bootstrap";
body { padding-top: 60px; }
#import "bootstrap-responsive";
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require paloma
//= require_tree .
try this code in bootstrap_and_overrides.css.scss, if you use gem "twitter-bootstrap-rails"
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings.png");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white.png");
Related
My application is doing some kind of logging and exposing my computer folders and username in application.css
I have the stylesheet tag on my application.html.erb
layouts/application.html.erb
<%= stylesheet_link_tag "application", :media => "all" %>
It renders a link like a normal rails applications would something along the lines of
<link rel="stylesheet" media="all"
href="/assets/application.self-
80b79e181044a0c9a308926720613f77d9222f04fe80f2a18ad8b83fa3ca7e3d.css?
body=1" />
However if a follow the link the document reveals sensitive information about my computer
/*!
* Bootstrap v4.0.0 (https://getbootstrap.com)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/* line 1, /Users/XXXXX/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/bootstrap-4.0.0/assets/stylesheets/bootstrap/_root.scss */
:root {
--blue: #007bff;
}
/* line 21, /Users/XXXX/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/bootstrap-4.0.0/assets/stylesheets/bootstrap/_reboot.scss */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* line 27, /Users/XXXXX/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/bootstrap-4.0.0/assets/stylesheets/bootstrap/_reboot.scss */
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
What could be causing this problem?
Edit: I'm using rails 5.1, once the app is deployed and running on production mode, it doesn't show the path of the production server it still disclosures my computer folders.
application.scss
#import "pulse/variables";
//Custom bootstrap variables must be set or imported *before* bootstrap.
#import "bootstrap";
#import "pulse/bootswatch";
#import "bootstrap-select/bootstrap-select";
Put your bootstrap stylesheet to /lib/assets/stylesheets then try to require with pipeline:
application.scss
//= require pulse/variables
//= require bootstrap
//= require pulse/bootswatch
//= require bootstrap-select/bootstrap-select
I am using the theme grasyscale-sass, mainly in one of the links of the project and ALL it works fine, and other links use its own SCSS file. In this scss file I want to change certain bootstrap variables as navbar-default-bg, etc, but to include two scss files (application.scss and my custom.scss file) with stylesheet_link_tag in the file application.html.erb I can't get the changes I've made to these variables in custom.scss, I think always the default values apply, however the normal code CSS is modified.
Any clue what I'm doing wrong? Or am I trying to do something "forbidden"?
Thanks in advance.
/**************/
Here application.html.erb file and how the two scss files are included, both in assets/stylesheets
<%= stylesheet_link_tag 'application', 'custom', media: 'all', 'data-turbolinks-track' => true %>
custom.scss file
$link-color: #cb2027;
$brand-primary: #cb2027;
$body-bg: #e9e9e9;
$navbar-default-brand-color: #cb2027;
$navbar-default-bg:#ffffff; /* Navbar default */
$navbar-height: 30px;
$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;
i{
color: #337ab7;
}
a{
color: #cb2027;
}
#import "bootstrap";
#import "bootstrap-sprockets";
.center {
text-align: center;
}
.navbar-brand{
font-size: 2em;
font-weight: bold;
}
...
and application.js file, included in assets/javascripts
//
//= require_self
//= require jquery
//= require jquery_ujs
//= require jquery.easing
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
// require.js
//= require grayscale
//= require masonry/jquery.masonry
// require_tree .
Import Bootstrap styles in app/assets/stylesheets/application.scss
#import "bootstrap"; and #import "bootstrap-sprockets"; go inside application.scss along with any other stylesheets.
Without going into how you can/should setup your directories for stylesheets, variables/mixins, etc. Your variables need to come before bootstrap in application.scss and your other customization's after:
Since you're using a theme that all ready has variables used to customize the base bootstrap styles, you'll have to change those Grayscale variables and/or styles in order to change them to what you want.
*In this example _variables = grayscale_variables from the theme and main.scss is basically application.scss.
application.scss
#import "grayscale_variables";
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome-sprockets";
#import "font-awesome";
#import "_grayscale";
#import "style";
grayscale_variables.scss
$grayscale-primary: #cb2027;
$grayscale-dark: #e9e9e9;
$grayscale-light: #cb2027;
$grayscale-body-font-family: "Lora","Helvetica Neue",Helvetica,Arial,sans-serif;
$grayscale-headline-font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
$navbar-height: 30px;
$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;
(*and only one bootstrap js should be used) see bootstrap-sass bootstrap-sprockets and bootstrap should not both be included in application.js
My application.scss, but remain unimplemented some variables, for example $body-bg, $navbar-default-bg and so, I think uses main.css of grayscale-sass theme.
I also tried changing the order of some #import
$link-color: #cb2027;
$brand-primary: #cb2027;
$body-bg: #e9e9e9;
$body-bg: #fff;
$navbar-default-brand-color: #cb2027;
$navbar-default-bg: #f8f8f8;
$navbar-height: 30px;
$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;
#import 'masonry/transitions';
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import 'custom';
#import '../../../grayscale-sass/asset/sass/main.scss';
I am using the following gems:
gem 'therubyracer', platforms: :ruby
#gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"
and in asset pipeline this is the code
*
*= require_bootstrap_and_overrides
*= require_self
*= require_tree .
*/
and in bootstrap_and overrides file this is the code
#import "twitter/bootstrap/bootstrap";
// Set the correct sprite paths
#iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
#iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
#fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
#fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
#fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
#fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");
// Font Awesome
//#import "fontawesome/font-awesome";
// Glyphicons
#import "twitter/bootstrap/glyphicons.less";
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// #link-color: #ff0000;
#import url(http://fonts.googleapis.com/css?family=Capriola);
and when i use the class <i class="fa fa-user"></i> like this glyphicon is showing. But for the class <i class="glyphicon glyphicon-user"></i
the glyphicon is not displaying the proper image.
Bootstrap is not being included in your asset pipeline correctly, try this workaround by importing from the CDN source instead of loading from an asset file:
Add this to the head section of your application.html.erb file in your views/layout folder:
FontAwesome icons:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
Glyphicon icons, which are packaged with the bootstrap minified CDN:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
I would strongly suggest you to switch to https://github.com/twbs/bootstrap-sass and follow the guide there
I'm running a Rails 3 app and am including the zurb-foundation gem to bring in Foundation 4. I noticed (in my local dev env) that every single Foundation JS plugin/lib is being loaded. I'm only using a couple, or so. My question is, how can I customize which Foundation JS files are loaded? I'd like to only load a subset of the Foundation JS files.
Thanks.
By requiring foundation
//= require foundation
$(document).foundation();
it requires all of these:
/*
=require foundation/foundation
=require foundation/foundation.alerts
=require foundation/foundation.clearing
=require foundation/foundation.cookie
=require foundation/foundation.dropdown
=require foundation/foundation.forms
=require foundation/foundation.joyride
=require foundation/foundation.magellan
=require foundation/foundation.orbit
=require foundation/foundation.reveal
=require foundation/foundation.section
=require foundation/foundation.tooltips
=require foundation/foundation.topbar
=require foundation/foundation.interchange
=require foundation/foundation.placeholder
*/
Instead, just require what you want.
=require foundation/foundation
=require foundation/magellan
$(document).foundation();
As the latest version of foundation-rails (5.5.0)
//= require foundation/foundation
//= require foundation/foundation.magellan
$(document).foundation();
I am trying to use the jQuery UI datetimepicker found here. I put the jquery-ui-timepicker-addon.js file in vender/assets/javascripts, and I put jquery-ui-timepicker-addon.css in vendor/assets/stylesheets. My application.js file looks like this:
//= require modernizr-2.0.6.min
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery-ui-timepicker-addon.js
And my application.css looks like this:
/*
*= require application_top
*= require jquery-ui-timepicker-addon.css
*= require application_bottom
*/
The javascript seems to be working, but instead of looking as it does in the example, there are no styles applied, and the hour/minute sliders to not show up. I stuck this in at the bottom of my view with the datetime picker:
<script type="text/javascript">
$(function() { $('#start_time').datetimepicker(); });
</script>
What am I doing wrong?
Remove .css from application.css
/*
*= require application_top
*= require jquery-ui-timepicker-addon
*= require application_bottom
*/
OR
load the styles in application.html.erb
<%= stylesheets 'application', 'jquery-ui-timepicker-addon' >