Customizing the Look

Now that you have Devise setup with signup and signin links, it's time to add some CSS to those pages.

Styling the Flash Message

What happens when someone tries to sign in with incorrect information? Devise displays an error in the code you added, but there's no CSS to mark it:

This is the HTML we want to style:

<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

Create a new CSS file to store the new styles, and call it messages.css.scss. Inside the file, add CSS for the .alert and .notice classes.

app/assets/stylesheets/messages.css.scss

.alert{
  background-color: #f45252;
}

.notice{
  background-color: #bef0ff;
}

When you now try to sign in with an incorrect password, the error shows up in red. However, the text and color are too tightly together, so let's make some adjustments:

.alert, .notice {
  margin-top: 5px;
  border-radius: 3px;
  padding: 5px;
}

Notice how we used a comma to apply the same CSS rule to two different CSS classes. This is how the error message looks:

This looks good, but if you visit another page on your site, you'll notice an issue. The red box shows up even without an error. You can add a condition to fix this:

layouts/application.html.erb

<% if notice %>
  <p class="notice"><%= notice %></p>
<% end %>
<% if alert %>
  <p class="alert"><%= alert %></p>
<% end %>

Now everything should work well. Finally, it's time to look at the errors that can show up when signing up. Go to users/sign_up and try signing up with short non-matching passwords. The site will display an error message:

This doesn't look like a proper error message, so some small adjustments are needed.

Q: Since I didn't actually create this page, what class or ID should I create a CSS rule for?
A: As discussed in the CSS tutorial, you can inspect the element to view more information about it. In this case, Devise adds the ID "error_explanation" to the div where the list of errors appears.

Once you've identified the error_explanation ID, you can add styles to it:

app/assets/stylesheets/messages.css.scss

#error_explanation{
  color: red;
  h2{
    font-size: 1.4em;
  }
  ul{
    list-style-type: none;
  }
} 

Note how this CSS takes advantage of a feature of SCSS to concisely add styles to h2 and ul elements inside another element (#error_explanation). Now all the errors look appropriate:

Since the registration process is set up and styled, it's time to commit everything to git and push it to the live site!

git add .
git commit -m "setup devise users and styles"
git push heroku master && heroku run rake db:migrate

The last line will push everything to heroku and then run the migration to setup the database. You can now test out signing up on your live site!

Next we'll create admin privileges so certain users can change any data on the site. In a later tutorial, you'll see how users can like products and more!