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: