How to customize devise form css in rails
Solution 1
Devise will use you default layout. So the CSS that you are using in your views/layouts/application.html.erb
will be used in your generated devise views.
If you want devise specific layouts, you can create a views/layouts/devise.html.erb
file where you can serve devise specific CSS. It will pick it up automatically because of Rails naming conventions.
The above will work for any controller, just add a file in layouts named after the controller eg. views/layouts/reservations.html.erb
for ReservationsController
You can also add specific layouts for the Devise::RegistrationsController
by making a directory views/layouts/devise
and adding views/layouts/devise/registrations.html.erb
Solution 2
If you are doing controller-specific stylesheets, that is, if you switched off automatic compilation of all of your stylesheets into application.css
, you should name your stylesheet after a devise controller, e.g.:
registrations.css.scss
and add it to Rails.application.config.assets.precompile
list in assets.rb
.
The placement of the stylesheet is standard, app/assets/stylesheets/
so watch for name collisions between devise's controllers and yours.
To pick up a controller-specific stylesheet in a layout you need something like this:
Rails up to 4.1
<%= stylesheet_link_tag controller_name, media: 'all' if Rails.application.assets.find_asset("#{controller_name}.css") %>
Rails 4.2+
<%= stylesheet_link_tag controller_name, media: 'all' if asset_present?("#{controller_name}.css") %>
# ...meanwhile, somewhere in the helpers...
def asset_present?(name)
# Rails 4.1 had Rails.application.assets filled out in all environments.
# Rails 4.2 has it filled only when config.assets.compile == true which is only
# in development by default.
if Rails.application.assets.present?
Rails.application.assets.find_asset(name)
else
Rails.application.assets_manifest.files.values.map { |v| v['logical_path'] }.include?(name)
end
end
Solution 3
To generate device view run this line
rails generate devise:views
and do what ever you want with page styling.
to read more Click here
swapnesh
#SOreadytohelp In love with MEAN & MERN stack, ex was LAMP. Feel free to contact me at- [email protected]
Updated on June 04, 2022Comments
-
swapnesh almost 2 years
Command
rails generate devise:views
successfully created folders under\app\views\users
I am looking to customize the devise forms but not sure whether the css to be placed in
application.css
or i need to separately createuser.css.scss
. Googled a bit and check git doc for this but none is specifying for CSS handling in devise.Let me know the correct way of handling it