- Read Tutorial
- Watch Guide Video
Before we move on to customizing the styles for our proposal component let's actually fix what we have here going on in the nav bar. There's nothing the matter with it there's no bugs or anything like that. I'm just not a huge fan of this look and feel having this really dark background with this white and blue colors up top. I don't think that looks great.
I want to put some additional styles and we're going to put these in the app.component.css because we want these things to be available to the app.component.html file. That's the way that those are going to be encapsulated the first thing I'm going to do is we're going to override some of the styles that are there with bootstrap and I'm going to do it by creating a new class called nav styles. And we're going to do a few things with this one. So first thing I'm going to do is create a background color for it and set it equal to #1a1b22 which you'll see is kind of like a dark charcoal color but it's different than our background. It'll give a nice complement to it. So I'm going to save that. And then inside of our app.component.html file add it to the very top to that nav tag.
Now you can see that we have a much better-looking background, I think this looks better.
Now we have a problem with our link so let's go and tackle that.
The very first thing we're going to do is change the color of the of the a link. So anything with an a tag we're going to select inside of our nav style div's and this one is going to be just a color of white. So that is going to take care of changing the color on it. But remember we have other things like our active so active right now by default with bootstrap makes the item this kind of dark charcoal black color which doesn't work well here. So we want to take care of the active so I'm going to say.
.nav-styles a:hover { color: #c9c9c9; }
Now if you come over here and you hover over you can see that it gives a little bit of a darker kind of color it does something slightly off-white. I'm not a huge fan of you know dramatic color changes unless they are nice accent colors which we'll do here in a second. So for the hover, I like that it's just nice and subtle enough to know that they're hovering over a link and that's really all we need.
Next we're going to tackle the active which is the reason why our docs aren't seen. Say nav styles and we can say just dot active and this will select all the items that have the active class with it. Add a color with. And this one I am going to make a different color I'm going to make this one kind of an off red-ish kind of color something as a E6. 4 7 5 8. And here you can see that no changes were made. And it's because we also need to add the important flag. So I'm going to hover over here and actually you know this one I made one mistake and I'm pretty sure I know what it is if we click inspect. We can see that right here. I clicked on or I supplied nav styles but what I actually needed is Nav link. Notice how when we hover over that how this actual selector is going to be a.nav-link.active. If I select nav link that's going to give us the style we want. And that's how you can debug this if you run into something similar. This should be nav-link.active
.nav-link.active { color: #e64758 !important; }
If you refresh you can see that it gives us that kind of reddish color that I was wanting to go with. So that is everything we need on that side. Now if I click on proposals you can see it it's very difficult to see our proposals because we've changed the color to white. So we're going to override those colors now. So I'll say dropdown links a this is going to select the a tag and I'll say color give a hex of 1a1b22. And this is the same color that we used for the styles.
.dropdown-links a { color: #1a1b22; }
save that and you can see that that's there.
Now the last thing is you notice how this hover effect isn't really very nice. It almost makes it difficult to see when you hover. And I don't like it because it kind of almost looks like a link that you can't go to. I definitely would not want that in a relapse so I'm going to select this. And now will say a hover. And inside of this we're going to go with the hexadecimal # 252830.
.dropdown-links a:hover { color: #252830; }
And don't worry if you're following along. I did not memorize these hexadecimal colors. I have my notes here on another screen that I listed all the colors out on I went and researched when I was building the app and played with a bunch of different colors. So if you are thinking that you're not going to be able to have these kind of hexadecimal numbers just memorized off the top of your head. Don't worry neither do I usually I will open up Photoshop and open up the color picker. Once I find one I like I'll copy over my notes or directly in the CSS file. And so that's how I'm doing it.
Now if you come to the application click on proposals. Now notice when you hover it doesn't do that really kind of ugly graying out. Now it just adds a nice little background to it.
I click on proposals and if I now click on it now it's highlighted in blue which is perfectly fine that's what I want to have. So we have home docs and then each one of these so our NAV bar is pretty much done. I really like the way that it is functioning. So with all of this in place I think we're ready to start styling our components in our proposal.