Locked lesson.
About this lesson
Using Bootstrap to customize Devise views.
Exercise files
Download this lesson’s related exercise files.
Customizing Devise Views.docx58.7 KB Customizing Devise Views - Solution.docx
58.7 KB
Quick reference
Customizing Devise Views
Customizing and styling Devise views is pretty easy.
When to use
Devise views are pretty bland right out of the box. But we can customize them by modifying the files in our app/views/devise folder.
Instructions
Add these two links to your navbar:
<li><%= link_to "Sign Up", new_user_registration_path %></li>
<li><%= link_to "Login", new_user_session_path %> </li>
Next: Modify the Devise form pages using Bootstrap Panels.
Next: Modify the Devise form pages using Bootstrap Forms.
- update all the form div class="field" divs to div class="form-group"
- add class: "form-control" to all the input fields
- add bootstrap class: btn btn-primary code to the form button
Be sure to make these changes on all the Devise form pages you'll be using.
Hints & tips
- Add links to your Navbar to allow users to sign up and login to your site
- Go through all the devise pages and customize them with Bootstrap panel and form code
- Change all your form divs to "form-group" and not "field"
- Add a class of "form-control" to all your form input fields
- Use a class of "btn btn-primary" on all your form buttons
- 00:05 In this video we're gonna customize this, make it look a little bit nicer, and
- 00:08 add some links to our nav bar.
- 00:09 So let's do that right off the bat.
- 00:11 Let's go to our views and home.
- 00:15 And open up our navbar and we have a home page and about us,
- 00:19 let's add a couple of more.
- 00:21 So we want some embedded ruby,
- 00:26 link_to and let's call this one sign up.
- 00:33 And now what path do we want?
- 00:35 Let's look through our rake routes here.
- 00:37 And what we want is new user registration, user sign-up.
- 00:42 So copy this, paste it underscore path and then close that.
- 00:50 Now we're gonna do the same thing.
- 00:54 Link_to login.
- 00:58 And to login we want to create a new user session.
- 01:02 You could see this is users sign in.
- 01:05 So copy this, right here.
- 01:08 Underscore path, close it, save it.
- 01:13 Come back, hit reload.
- 01:15 So let's see.
- 01:16 Sign up.
- 01:17 Log in.
- 01:18 Sign up, Log in, Home Page, okay.
- 01:21 So the next thing to do is make these look a little bit better.
- 01:24 So let's head over to getbootstrap.com and components and
- 01:28 we're gonna use something called panels.
- 01:31 So scroll down until you find panels and we want panel with headings.
- 01:35 So I'm just gonna copy this, we just need this part right here.
- 01:41 So come back here and now let's make smaller.
- 01:43 This what all of these new folders come and play,
- 01:47 let's start out with our sign up.
- 01:50 So we need to find that HTML page, and
- 01:52 a sign up is probably, let's see our registration.
- 01:57 No, and I'm gonna put some exclamation points, save this, come back and
- 02:00 hit reload.
- 02:01 Okay, so this is the right page and we know that's correct,
- 02:06 here is the form for this page.
- 02:08 We just need to modify it a little bit.
- 02:10 I'm just gonna paste this in here, in our panel title,
- 02:15 that's this, sign up so I'm just gonna paste that in and delete that.
- 02:23 And here's our panel body, so all of this stuff needs to go in the panel body.
- 02:29 So I can just delete that and I'm just gonna copy these things.
- 02:33 Delete them, come down here and paste them in.
- 02:39 Save that and take a look and see how that looks.
- 02:41 Okay, starting to look good.
- 02:43 We have our heading, I want a footer too.
- 02:45 So let's come back here and let's just grab this
- 02:50 footer code and I think that will go right here.
- 02:54 Let's save this, hit reload.
- 02:57 Okay so now we have a header and a footer and that looks good.
- 02:59 Let's put this link right here.
- 03:03 And that's just this guy right here so I'll copy this.
- 03:09 And paste that in there, save it.
- 03:12 Okay, so that's starting to look good.
- 03:14 Now the last thing we need to do real quick is change these guys.
- 03:18 So head back over to getbootstrap and click on CSS.
- 03:22 And we want Forms, we want this bootstrap forms.
- 03:25 And we don't actually have to copy and paste all these stuff,
- 03:28 we just need to look through here and see that to change the forms,
- 03:30 we just need to add a couple of things.
- 03:32 The first thing is this form group div.
- 03:35 Every time there's a div, we need to change that.
- 03:38 So let's come back here and look through here for
- 03:42 all the divs with fields and just paste that in there for all of them.
- 03:47 So let's save that and hit reload.
- 03:49 And that's not quite there yet.
- 03:51 We need to add this class form-control to all of our inputs.
- 03:58 And these are inputs, all right, whenever you type in something.
- 04:01 So look for our inputs, and we just need to go add a comma,
- 04:07 class .. actually .. there we go.
- 04:15 Now, let's save this and hit reload.
- 04:17 Okay, so that looks much better.
- 04:20 So let's just copy this and add it to all of our input fields.
- 04:26 So just kind of look through here and every time
- 04:30 we see a field, password_field, save this.
- 04:36 Okay, so that's starting to look a little bit better.
- 04:37 Finally, let's change this button.
- 04:39 And we do this the same way we've added other buttons by giving this a class of
- 04:44 btn, .btn-primary.
- 04:45 Save that, hit reload.
- 04:48 And now we have this nice button, it's the same color, we have a link.
- 04:51 And that looks pretty good, I think, it's a pretty decent form.
- 04:54 So if you click this, you can go to the Log in page.
- 04:57 We need to do the same thing to all of the other forms.
- 05:01 The Sign up form, the Login form, the Forget our password form.
- 05:06 And I'll leave that to you, that'll be your homework for this lesson, and
- 05:10 just look through here.
- 05:11 Look through all of these directories, and
- 05:14 find the pages that correspond with those links.
- 05:18 And you might have to do the rake routes to sort of piece it together and
- 05:21 figure it out, but I think you should be able to get it, no problem.
- 05:24 So go ahead, make the changes we made to the Sign up form,
- 05:27 to all the other forms and that would be all for this video.
Lesson notes are only available for subscribers.