Custom Layout for Devise

Custom Layout in Devise, devise is an awesome gem that provides the quick and easy way for the rails app to have user authentication.

But you may be face with the need to add a custom layout to devise. There’s a couple of ways of doing so, but today I am going with the easiest way without bloating your codes.

In Application.rb in config, add the following section.

config.to_prepare do
Devise::RegistrationsController.layout "conversation"

This will apply the conversation layout to the Devise::RegistrationsController.

You will need to have the conversation.html.erb layout in the appviewslayouts folder.

Visit the following article to understand more on the layouts

Layout in Ruby on Rails


Layout in ruby on rails provide the flexibility to allow different views to come together and render as a page. Think iFrame but we without the cross-domain issue.

Layout are located in your project, appviewslayouts, by default you will only have application.html.erb

Layout will always have the  <%= yield %> tag, this will render the current controller/action.

What is this important?

Imagine this, you have a Landing Page for public users to visit the application and now you have a Dashboard Page where the users sign in.

These two pages will have different layout for sure. You will also want to ability to maintain them separately and maybe reuse some of the codes that you have developed as part of the project.

How do I then do it?

Taking the example above, say you have a Landing Page and a Dashboard page.

You will also have the controllers for them HomeController and DashboardController respectively.

Within the respective controller, after the class declaration, the first line end the following code

layout “public”

public will be the name of your layout file in the appviewslayouts folder.

application.html.erb is the default that will be applied to the rest without any additional setting.

Sample of the Layout for HomeController.

class HomeController < ApplicationController
layout "public"