Customizing Devise Views

Quick reference

• 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.