Customizing the forms
The sing in and registration forms
Now that we've added the navbar, this is what the Sing in page looks like:
It looks good enough, but I'd like to add a more personal touch to it. First, I'd like to wrap the form in a panel.
Open the file app/views/devise/sessions/new.html.erb and add wrap the existing code in a <div class="panel panel-default">...</div>, like this:
<div class="panel panel-default">
<h2>Log in</h2>
<%= bootstrap_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="field">
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<div class="field">
<%= f.password_field :password, autocomplete: "off" %>
</div>
<% if devise_mapping.rememberable? -%>
<div class="field">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end -%>
<div class="actions">
<%= f.submit "Log in" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
Next, I'd like to have the form centered on every type of screen. Bootstrap slang for this type of positioning is adding a div applying several classes, like this:
<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12"> ... </div>
Having centered the form, I will drop the previously added layout: horizontal and columns for labels and controls:
<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
<div class="panel panel-default">
<h2>Log in</h2>
<%= bootstrap_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="field">
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<div class="field">
<%= f.password_field :password, autocomplete: "off" %>
</div>
<% if devise_mapping.rememberable? -%>
<div class="field">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end -%>
<div class="actions">
<%= f.submit "Log in" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
Now the form looks like this:
We would like to move it lower with respect to the navbar and add some padding. To do this, let's create a custom CSS class for the form panels.
In <div class="panel panel-default"> add a new class, form-panel, like this:
<div class="panel panel-default form-panel">
Now open the app/assets/stylesheets/application.scss file and define the styles specific to this class:
.form-panel {
padding: 30px;
margin-top: 40px;
}
To get this:
To move the auto-generated Sign up and Forgot your password links to the right, you can add an inline style. Just wrap the <%= render "devise/shared/links"%> in a div like this:
<div style="text-align: right;">
<%= render "devise/shared/links"%>
</div>
Finally, this is the form:
And this is the full content of the app/views/devise/sessions/new.html.erb file:
<%= render "shared/external_navbar" %>
<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
<div class="panel panel-default form-panel">
<h2>Log in</h2>
<%= bootstrap_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="field">
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<div class="field">
<%= f.password_field :password, autocomplete: "off" %>
</div>
<% if devise_mapping.rememberable? -%>
<div class="field">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end -%>
<div class="actions">
<%= f.submit "Log in" %>
</div>
<% end %>
<div style="text-align: right;">
<%= render "devise/shared/links" %>
</div>
</div>
</div>
To bring the registration form to the same style, this is what I did in the app/views/devise/registrations/new.html.erb file:
<%= render "shared/external_navbar" %>
<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
<div class="panel panel-default form-panel">
<h2>Sign up</h2>
<%= bootstrap_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="field">
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<div class="field">
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>
<div class="field">
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
<div style="text-align: right;">
<%= render "devise/shared/links" %>
</div>
</div>
</div>
The new post and edit post forms
To modify the New and Edit forms for posts, the changes will be practically the same:
- Wrapping the forms in divs with panel classes and classes specifying the number of columns
- Removing the previous layouts attached to the forms
Finally, this is what I got in app/views/posts/edit.html.erb:
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
<div class="panel panel-default form-panel">
<h1> Edit Post</h1
<%= bootstrap_form_for(@post) do |form| %>
<%= form.text_field :image_link, placeholder: "Post image URL"%>
<%= form.text_field :title, placeholder: "Post title" %>
<%= form.text_area :description, placeholder: "Post description" %>
<%= form.submit %>
<% end %>
</div>
</div>
And, in app/views/posts/new.html.erb:
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
<div class="panel panel-default form-panel">
<h1> New Post</h1>
<%= bootstrap_form_for(@post) do |form| %>
<%= form.text_field :image_link, placeholder: "Post image URL" %>
<%= form.text_field :title, placeholder: "Post title" %>
<%= form.text_area :description, placeholder: "Post description" %>
<%= form.submit %>
<% end %>
</div>
</div>
This is what they look like now:
