I know that last episode was a little bit long. In this guide, my goal is to simply finish up this one form component. Then we can have one example that we can use to populate all the rest of our login, registration and password forms.

I'm going to open up Sublime Text here and looking at our card-block. Because if we want to see the features that we want to add. Adding onto the card-block is one of the logical spots. What styles do we want to add here? We have all of our labels here are all the way centered and I don't really think that we want to have our content centered for any of our card items. I'm simply going to add text-align: left as that style and that's going to simply be appended exactly like our 'color: black'. This is going to be text-align: left;. Now if I come back here, hit save. This looks a million times better. I definitely prefer the way that this looks. Coming here you can see that we can barely make out what 'back' says. I know that it says 'back', but you kind of have to look kind of hard at it. That's definitely not what you want, it makes the most sense to simply change this color. Mostly likely do black as well. Let's come back here and think about the best way to approach this. Going to edit you can see that we have this link "Back" right here. This may seem like an easy one, where we could simply add a class onto back and make the color black and that's all we have to do. However, it's not quite that simple when you think about it, from a scalability standpoint. Because if you look at, let's go to our sessions_new. We have a full set of links here, but they are rendered as a partial. So, they are rendered through the devise shared links. If you go to 'shared/_links.html.erb' you'll see all of these links. Now I'm not sure about you, but I don't want to go and add styles to each one of these links manually. So, that is exactly what we would have to do if we went with the approach to simply add a style to back. Instead, what we can do is create a div that we nest this link inside. Now we can say class="auth-links". The cool thing about this is after we've built this out. Inside of our sessions_new and our other items that have this 'devise/shared/links' partial call right here. We can simply wrap them up as well and then all of the styles will be populated automatically. I'm going to just copy what I wrote here and now we simply have to come down to our custom styles and say .auth-links { color: black; }. This by itself though, won't do the trick. If I copy this, hit refresh. You can see, nothing happens. So, what gives? The reason is because div itself is considered the parent element. We need to be more specific, so I'm going to say auth-links a { color: black; }. This is going to select all the tags or all of the links inside of our site. If I hit refresh now, you can see that now this says back and it's in black. It is much easier to read. This is how we can customize all of our forms and this is a much better way of doing it then you know, some of the other ways such as having a black background or just leaving the defaults. This looks a million times better and as you can see it'll be fully functional. If I come here, delete my middle name and then type in my current password. I can hit update, It'll take me to the home page, but if I go back and go to localhost:3000/edit you can see that it has successfully changed my name. This form is still fully functional. Excellent job in going through that. Let's see all the work we did here git status we updated the application and completely re-wrote this devise registrations/edit file. I'm going to say git add ., git commit -m "Updated styles for user edit page", git push origin design and we are good to go. Now that we have this in place, what we're going to be able to do now. Is essentially use this as a model and start populating all of our other forms. Specifically, our other authentication forms, like our login, our registration, our forgot my password, all of those other forms. We're now going to be able to use this as an example and we can simply customize it based on their size and how we want to look. I will see you in the next guide, where we go and we attack our registration form.

Resources

• Source Code