Formtastic help says to add next lines in application.css:
# app/assets/stylesheets/application.css
*= require formtastic
*= require my_formtastic_changes
But what i'm gonna do when it is scss? Can't find it in search engines.
theres nothing left to do for you, place your my_formtastic_changes.scss in app/assets/stylesheets. Rails will automagically compile your scss file and add it to application.css
Related
I want to use SB Admin v2 Themes in my RoR application. I downloaded it and I don't know what's next to do.
BTW, I have gem bootstrap-sass in my Gemfile.
Some time ago I've developed a gem to add all the assets of the sb-admin-2 theme, here you have it: https://github.com/dreamingechoes/bootstrap_sb_admin_base_v2
Add this line to your application's Gemfile:
gem 'bootstrap_sb_admin_base_v2'
And then execute:
$ bundle
Or install it yourself as:
$ gem install bootstrap_sb_admin_base_v2
Then, add this into your application.js file:
//= require bootstrap_sb_admin_base_v2
and this line into you application.css file:
*= require bootstrap_sb_admin_base_v2
And you're ready to use the HTML structure of the Bootstrap based admin theme SB Admin 2 on your Rails application.
What I did is:
Create an admin.html.erb layout with the base markup provided in index.html of the SB Admin 2 template
Take a look at the js and css files included in the template and put them in their corresponding dirs in vendor/assets
Add the corresponding requiere and import in application.js and application.scss manifests
Don't include the assets for Morris charts until you really need them.
In the file sb-admin-2.js remove the lines that add acttive css class for the menu.
Implement menu using simple-navigation gem. It would look something like
# encoding: utf-8
SimpleNavigation::Configuration.run do |navigation|
navigation.items do |primary|
primary.item :dashboard, 'Inicio', admin_path, link_html: {icon_class: 'dashboard'}
primary.item :clients, t_title('routes.clients'), admin_clients_path, link_html: { link_active: current_page?(admin_clients_path), icon_class: 'users' } do | clients |
clients.item :clients_new, t_title('routes.new'), new_admin_client_path
end
end
end
SimpleNavigation.register_renderer admin_sidebar: Sb2AdminSidebarRenderer
SimpleNavigation.config.selected_class = 'active'
Not last but somewhere between the steps above you'd create partials for side menu, navbar top, etc.
This is incredibly frustrating.
I have added a few CSS files to my vendor assets, and I cannot seem to get them to get precompiled, or at least FOUND by my production server.
The files are found in something like this:
/vendor/assets/stylesheets/cssfw/style.css
/vendor/assets/stylesheets/cssfw/app.css
/vendor/assets/stylesheets/cssfw/plugins.css
/vendor/assets/stylesheets/cssfw/custom.css
And they're loaded like this on my application.css
*= require cssfw/style.css
And inside style.css
#import url(app.css);
#import url(plugins.css);
#import url(custom.css);
This works fine in my development environment (obviously), but all of those 4 CSS files cannot be found anywhere in the assets in production.
I'm obviously missing to include something, but what?
If I use something like this in production.rb:
config.assets.precompile += %w( *.css )
I get a barrage of errors, cause then it goes through every single stylesheet I have in the /vendor/ directory. if I try to be specific (such as specifying style.css), the same initial errors persist, and style is nowhere to be found.
How are they supposed to be included exactly? Preferably, I wouldn't want to include ALL the vendor assets files, cause there's only a handful that I'm actually using, but the folder contains around 20 or so that I haven't yet configured.
I'm using Rails 4.1.6 with Ruby 2.1.0, on Apache Phusion Passenger.
The trick was in changing #import to *= require, cause #import isn't following the assets pipeline. I'm still unclear of why that happens, but I changed this in style.css, which after all was actually being loaded all this time.
In my application.css:
*= require cssfw/style # /vendor/cssfw/style.css
And in the first part of style.css:
/*
*= require cssfw/app # /vendor/cssfw/app.css
*= require cssfw/plugins # /vendor/cssfw/plugins.css
*= require cssfw/custom # /vendor/cssfw/custom.css
*= require cssfw/plugins/animate # /vendor/cssfw/plugins/animate.css
*= require cssfw/plugins/box-shadows # /vendor/cssfw/plugins/box-shadows.css
*/
This would make Rails to look for them in the proper places in the vendor pipeline, although I'm being forced to practically include the entire path, minus cssfw. If I leave it out, it works fine in development, but production cannot find them.
I didn't move anything else to my application.rb, or production.rb, in case you're wondering. I think this may have a more elegant solution, but this works for now.
you should set in production.rb:
config.assets.compile = true
and in command line use:
rake assets:precompile
before launching it your server.
I want to be able to use an environment variable to swap out a site-specific stylesheet with sass variables to define colors for an instance of a Rails app. I can't seem to figure out how to use ruby code inside a sprockets directive to define the dependency.
What seems like it should work:
// stylesheets/application.css
/*
*= require "#{ENV['SITE_STYLESHEET']}"
*= require core
*= require profile
*/
Where ENV['SITE_STYLESHEET'] = my_stylesheet and stylesheets/my_stylesheet.scss exists.`
The error I receive is: couldn't find file '#{ENV['SITE_STYLESHEET']}'
Is there any way to use ruby inside a directive?
This might not be the most eloquent way to do it, but I think you could do something like this.
Create initializers/assets.rb
In this file
Rails.application.config.assets.precompile += %w( ENV['SITE_STYLESHEET'] )
I am trying to remove a line in one file on Rails. I found a method gsub_file, but it was an undefined method in Rails 4. It's like reverse method of insert_into_file of thor.
e.g.) app/assets/stylesheets/application.css
Before
*= require_tree . <- Needs to be removed!
*= require_self
After
*= require_self
This should be performed in Rails Application Template.
If you are implementing an application template (for use with the rails new myapp -m option), try using the Thor gsub_file, like this:
gsub_file 'app/assets/stylesheets/application.css', /*= require_tree .\n/, ""
Take a look at the rails_apps_composer gem if you'd like to see lots of file manipulation using Thor.
I recently installed active_admin gem.
Everything is working fine on Rails4, but jquery in my bootstrap page is not working anymore.
All animations are broken now, its like static page.
Any way of fixing it?
Thanks,
Michael
Solved.
What i did was, moved file active_admin.js.coffee from app/assets/javascript/ to vendor/assets/javascript . Also moved file active_admin.css.scss from app/assets/stylesheet/ to vendor/assets/stylesheet/ .
In application.js from content nothing was added, and require_tree is needed for both of those 2 files (application.js. and application.css )(no need to delete require_tree).
Same goes for active_admin.rb, nothing was added there either.
Application is now working correctly, loading css and jquery (my 1.7 version, not AA one).
-Michael
The key is to open application.js and application.css and remove the require_tree .. This is a bad default on Rails part because the user should specify load order anyway
Also do not forget to ad these lines in config/initializers/active_admin.rb
# == Register Stylesheets & Javascripts
#
# We recommend using the built in Active Admin layout and loading
# up your own stylesheets / javascripts to customize the look
# and feel.
#
# To load a stylesheet:
# config.register_stylesheet 'my_stylesheet.css'
# You can provide an options hash for more control, which is passed along to stylesheet_link_tag():
# config.register_stylesheet 'my_print_stylesheet.css', :media => :print
#
# To load a javascript file:
config.clear_stylesheets!
config.register_stylesheet "application.css"
config.clear_javascripts!
config.register_javascript "application.js"
Then in you application.js
//= require jquery
//= require bootstrap
//= require bootstrap.switch
//= require bootstrap-tooltip
//= require active_admin/base
....