Apparently, my microphone didn't think I did a good enough job on the last time because I actually filmed this entire episode. And then after finishing it all up. Found out that the mic had been unplugged the entire time. So we are going to do it again. And the reason I mention it is because I already performed the push up to git with all of the code and the pull request and all of that kind of good stuff right here so we're not going to do that at the very end but we've gone through that in every single section so you should be familiar with that process. I reverted all the changes so we are going to implement them here.

We're going to build in the correct styles because right now it's pretty ugly so let's come into our application.css file. And if I come all the way down to the bottom we already saw that when we built out the HTML structure that I added a tech news class and we haven't done anything with it. So that is the first thing we are going to do is we are going to add some custom styles to it.

Additionally, one thing I did is I changed the search code one more time to coding instead of rails just to get some more results in and play with it. I actually did like some of those that were coming in. So that was one other change that I made.

Inside of the tech news class, I want to first change the color to black which is going change all the font colors to black and then I want to add a margin of 20 pixels in between each card.

.tech-news {
color: black;
margin: 20px;
}

This is going to give us a little bit of space.

Now if I come back and hit refresh this is going to go out to Twitter it's going to pull in all of our tweets. And as you can see this now has all of those then also colored the text black.

Now we're going to color these links a different color, you can pick out anything you want. You could go with black, you could go with blue. For right now I think I'm going to go with green. I'm just going to copy tech news and pasting this in. I can now say that I want to select all the links and change the color to green.

.tech news a {
color: green;
}

Switching back and hitting refresh.

Now I have as soon as it loads up. There we go. We have green text.

This is exactly what we're looking for, this is something I am very happy with. I think this is coming along nicely now. I don't like the way these cards are looking. So what I want to do next is add some padding throughout that and the way I'm going to do this is a little bit different. It's kind of similar to what we did with login card and this is the reason why right here in the template I structured it where tech news encapsulates the card so now we can do exactly what we did with our login, remember how we didn't want to override all of the card styles for every other card in the app?

Well it's for this exact reason because I want to be very specific and careful with how we're performing our override so we can use this exact same syntax and say when a card class is nested inside a tech news we want to do something a little bit different. And in this case I want to add padding of 30 pixels.

.tech-news > .card {
padding: 30px;
}

If I hit save now, and come back and hit refresh. We should have some styles that mimic what I'm wanting and which is to have a little bit more space here. And I think this is perfect.

I am very happy with how all of this is coming along. Each one of these items is now clickable and you have a full news section on your site, so great job!

Now the next thing I want to do is we need to add a link up here at the top because right now there is no way for users to get here unless they know the URL. So let's open up our super handy helper method. This is the reason why we created it, remember how much time it took every single time we wanted to add a new nav item we had to go change it in about five different spots and it was just kind of a pain to deal with. Now all we have to do is come right below our last one. do our hash add a new item and this is going to be tech_news_path and we can say Tech News hit save and that should be all we have to do.

If I hit refresh now we have tech news in our nav bar

It also has the cool automatic activator so it's white and underlined and that's perfect. Now if I click on blog we see tech news. If I click on portfolio and come and take a look at this tech news is there. That's working nicely.

Now the last thing that I want to do is, notice how on this one template we do not have a wide enough kind of width on our site?

So let's open up the application.scss file one more time and I'm going to search for .cover-container. And this first one is not exactly the one we want because this is just the margin for right and left. We don't want the second one. It's actually the third one the one that is nested inside of media and we played around with this one before. So I'm going to change this width to 65rem.

Now if I hit save and come back and hit refresh you will be able to see that. Now we have a with that is wide enough for this template and that looks perfect.

Now this entire nav bar is on one line. If I go to any of the other templates it had zero effect on any of these just like we wanted. But on our template that uses the main application layout. This is all looking perfect, so very nice job with that! I am excited about it.

After you've implemented all those changes make sure that you push it up to GitHub and merge it in with the master branch and pull it down into your local master branch. And then we can go to pivotal tracker and cross off these tasks because we are done with this module.

Very nice work!

Great job in getting all of that done. And in the next section, we're going to have a fun one. We're going to get into how we can implement live data by having the new rails 5 action cable module activated in our app.

Resources

• Source Code