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