Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Dark navbars and overriding bootstrap
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Now let's look at one final thing before we leave our example here. Notice this is light across the top, and if you look up here,
0:08
you can see that I have a propensity for dark navigation across the top. Not, always, one of my podcasts is all about the white
0:15
but I kind of like this dark style when I am doing developer type stuff, I know this is like a podcast where developers come,
0:22
we all like dark themes - not all of us, many of us like dark themes, so how do we do that? Well, it turns out to be super easy.
0:28
If we come over here, we can say instead of navbar-default, we can have navbar-inverse, now if I just do that, and refresh this page,
0:37
now you can see we have a nice dark version and everything inverses itself. It's really great, but notice there is something weird going on,
0:45
and this makes no sense to me why Bootstrap does this, but they do it. Look, really carefully here, zoom your eyes up here into the corner.
0:54
Notice? Rounded edges, like what the heck? Why would rounded edges be here?
0:58
I think they just kind of overdid it on the rounded edges when it comes to navigation. Like it just doesn't make any sense to me,
1:05
it seems like it should be a bar across the top. Never mind, we can fix that really easily. So up here, we can see .navbar has border-radius like that,
1:18
let's copy this, and here is the way I like, any time I'm overriding a Bootstrap theme, instead of sticking this into my main site,
1:25
what I would do is I would have a style sheet like this, I always put this right after Bootstrap. I can call it something like bootstrap-overrides.
1:38
So, any time you want to change the default behavior of Bootstrap, put it there if it's not specifically about your site,
1:43
so you kind of know like what themes of what things am I doing specifically to sort of be part of or counteract what Bootstrap is doing.
1:52
So let's put this here and we want of course "0", now we are going to need to include that so bootstrap-overrides. Thank you, PyCharm.
2:07
Now if I go back over here, refresh, so much better, you can see down here somewhere, this is the border radius that came from Bootstrap
2:17
but the bootstrap-overrides said "no, no, no, no - stand back, we're putting zero here" and if you look carefully again,
2:24
now it looks more like you might expect.