- Read Tutorial
- Watch Guide Video
So our design is looking much better. But we solve a few things that we need to clean up. Namely, we need to implement our log out functionality up here need to move our footer and replace this base one here and then we also are going to need to stretch our layout a little bit width wise by default. He gives us a pretty narrow kind of with for our NAV and we need to update that. But none of that is going to be too difficult so we're going to walk through how to do it. It's also good as it's going to give you experience and how to take a way out but not leave it the way that you got it. But also customize it however you need.
So let's start off with the footer because I think that's going to be probably one of the more basic things that we're going to implement. So I'm going to open up the application layout file here and as you can see with our footer right now we have our copyright generator which is really our footer and this is separate from what's being shown on the home page. So if I go to Home HTML you can see that we have this mast foot right here. One of the first steps I could do would be to create a partial called footer and we are eventually going to do that. But for right now I'm going to take it one little step at a time. So I'm going to cut that out of the home page and place it right here.
I'm going to take our copyright generator which is coming from our gem and I'm going to slide it. All right. Inside of these paragraph tags now I'm going to press save. Come back hit refresh. Now look at that. There is our nice footer and it's slide. It's lighting in perfectly where it needs to be. Now I don't like having our footer code right here I'd much rather have this in a partial so I'm going to cut that out. Come to the shared new file. And here I can say _application_footer.html.erb paste all of that in and now indented all properly hit save.
Now, all we have to do is render it exactly like we did our nav. So come here. Say <%= render "shared/application_footer" %>. Now that we have that everything should still work exactly the same on the page and it does.
So that was a footer and that was the easy part. Now let's talk about how we can take our log out link and our log in and register links and place them right up here. This is going to be slightly more challenging because remember we created an application helper method here and we need to update that in order to get our functionality going. So let's see we have our login helper. Let's imagine the easiest possible scenario where we just pull it out of the file and place it into our application nav right after portfolios hit paste and we're good to go. Not quite. This is in the right spot but this doesn't look like the other links. So let's see what we have to do in order to make this possible. Remember log in helper has the at it's connected to the application helpers. So if I open up the application help or you can see our log in helper method here. Now we could simply add in the classes and hard code them. Remember we have this nav link code here. So we could technically come and just add it to each one of these spots that would be possible in order for all of these. This would be a really bad practice because then it essentially renders our log in helper completely useless when it comes to what we're going to need for the other layouts and we want to call this log in helper from all of our layouts. But we want it to look different. So a great way of doing that is to use methods.
Remember with our source helper we had a layout name so you can pass in arguments and you could do it this way where you have parentheses but you can also do it where it's just something like this. Ruby is very flexible on doing that. I wanted to do both. Usually, I do it all in this style. I wanted to do it this way here just so you could kind of see that there are two different ways. If you take on legacy applications you're going to see both options. So it's good to get a feel for both of those. Now I can simply take this style and replace all the hard-coded styles. And now this is simply a method argument. So whenever we call log in helper now we have to pass in a style and then we will automatically populate in each one of these spots.
So if I hit save and come back to the nav now we can actually pass a style in so I can just take nav link pass that in as the method argument because this is just a Ruby method. Now it can pass in this. And now if we come back hit refresh we'll get that. We actually have this working and it looks the same as all of these.
Now if I click log out and we have a little bit of an issue. So this issue is related to something we implemented earlier if you remember how we implemented in our application helper this brake tag that was a stopgap. There is no reason why we need to have that. That would be a bad thing in production. That was simply to make things look a little bit nicer for our original ugly site. But now we can just give this a space. We still want to concatenate all of this code together. But now when we have to do is put a space in between those two save.
Now if we come hit refresh everything is working. So this is good. If I log in and log in everything is working and our styles are staying there you log out because we have two main links if we want to have this kind of with we have the exact amount of links we want for our portfolio. So do we get rid of links to match the template? Absolutely not. We can change the template. And so if you do not know where to start on this that's fine that's what we're going to get into. The first place I always start especially if I'm using a set of styles I've never used before I right click on what I want to change.
So I'm going to right-click in the browser click on inspect and this is going to bring up the inspector tools and if I click on this little Inspector link here this is going to let me select different parts of the page. And as you notice as I'm doing that in the bottom left-hand corner it's changing and showing what elements I am selecting. It's a pretty cool way of being able to say I want to know what the name of a class is. You can also look in that code but I find this is a little more intuitive because I have the ability to actually click and select the exact items so if I click on this. This is what I want. As you can see this is the masthead class and if you look at the styles over here this actually shows us what we're doing that has this really narrow frame which is the width of 42 rem no. rem is a unit of measurement for HTML and CSS. Now a very cool thing I can do is I can actually click right here and change this so if I want to say that I want to have 60 rem this will show me what the with would look like at 60.
Now please note I am not making changes to the source code. This is simply allowing me to test things out in the browser environment and then I can go make the changes to the code itself. So here if I want it at say 45 still a little bit too narrow let's say 55. That looks perfect. So that is what we're going to go with. I'm going to close this out. Notice if I hit refresh it goes back exactly to where it was.
We have to come to sublime. Open up application SCSS. And there are a few ways we could search for what we want to change. If I hit search and go type in masthead you're going to find that there are a lot of things that say, Masthead. So that's one way of searching might take you a little while to find it. Remember we know that there was something that said 42 rem and this took us exactly there. This doesn't always work. Sometimes the class names are better because they that you're searching for something and there are five thousand instances of it in that file. This is going to be a very slow way of finding it. But in this case, that is actually a better way.
So I'm going to select that. Change it to 55 hit save. Come back here and now this is a permanent change on the site. So if I click home that works about me works. Contact log in and if I log in right there everything is working. So I am liking this, this is all looking very nice. Now one last thing we're going to change is I'll show you how to make that functional. So if I come here and go to the home layout notice that all of this is just essentially bootstrap code. So I'm going to come here and I can do this a couple of ways now and I'll actually do both so you can see learn more if I want this pointed to the About page. There are a few ways I can do it. I could say about me which I believe is our path if I click about me. That is the path I'm gonna save. Come back and if I click on learn more you can see it takes it to about me. Now that's not really the best way of doing it because I imagine that we changed this route then our hard-coded route would no longer work.
Now we also could use embedded Ruby. So I would say this I could put this inside and say. About me path save and if I hit refresh. Now this works. And so that's another way of doing it. And the last way I'm going to show you which is the way we're actually going to go with is a straight link to method. We can learn more or you could just say about me where you get willingness to your portfolio so you can vote however you want. And now you take the About Me path here. Then you still need your class and then you can grab all of these styles. Paste those in and the embedded Ruby. And that's a cleaner way of doing it. This would be preferable way compared to the other options. So now if I hit refresh everything still works and you can see it says about me and it takes you right to the About Me page.
So there is going to be one little piece of homework for you to do and it's something that I don't think it makes any sense for me to go through and to have you watch me do which is to fill these pages. The home the about me and the contact page. All of the pages that use this layout and fill them up with your own content. So this is essentially your online resume. So I'm not going to be able to tell you what to put on at all. Show you what I will put on it and I'll give you a preview of that in the next guide but I don't think it's worth either time for me to type that all in manually. So that's that. Do that before you watch the next video. If you're following along and you're building out your portfolio.
So in the next video, I'm going to show you what content I use for the home, about me, and contact. And then I'm also going to go through and style the login and register pages because it uses the same master layout file and as you can see it's pretty ugly. This has a this is definitely not what we would want our log in and our registration pages to look like. So I think we're just going to put them in a nice little clean box give these these form elements some specific styles. Clean up the buttons things like that. So that's where we're going to do in the next guy and say come back to the terminal git status. Here we can see that we made a lot of changes for commit message we'll say "updated master layout styles along with helper methods" git push for engine design we'll push all this code up and in the next guide, we will continue building out our portfolio.