1 00:00:00,280 --> 00:00:03,770 Most plugins provide two ways to change the appearance 2 00:00:03,770 --> 00:00:05,700 of whatever the plugin does. 3 00:00:05,700 --> 00:00:09,290 Sometimes the plugin offers display settings that you can change 4 00:00:09,290 --> 00:00:12,030 as part of the configuration object. 5 00:00:12,030 --> 00:00:16,580 Other times, a plugin's look and feel are dictated by the CSS file. 6 00:00:16,580 --> 00:00:20,090 Let's look at various ways we can modify how the Slick plugin 7 00:00:20,090 --> 00:00:22,190 looks on our web pages. 8 00:00:22,190 --> 00:00:26,010 The carousel is looking really good and working great. 9 00:00:26,010 --> 00:00:29,840 There are a few things, however, I'd like to change about its appearance. 10 00:00:29,840 --> 00:00:34,450 The buttons are a bit small, I'd like to bump up the size of those. 11 00:00:34,450 --> 00:00:37,240 But how do you figure out what styles to modify, or 12 00:00:37,240 --> 00:00:39,770 add, to change a plug ins appearance? 13 00:00:39,770 --> 00:00:42,760 That's a good question and there isn't a single answer. 14 00:00:42,760 --> 00:00:46,710 Now the easiest way is if the plugin developer provides documentation about 15 00:00:46,710 --> 00:00:48,150 the CSS for the plugin. 16 00:00:49,210 --> 00:00:53,160 Some plugins have great documentation telling you which styles control which 17 00:00:53,160 --> 00:00:56,290 parts of the user interface, but many don't. 18 00:00:56,290 --> 00:00:58,020 And the Slick plugin doesn't. 19 00:00:58,020 --> 00:00:59,570 That's too bad. 20 00:00:59,570 --> 00:01:03,930 Now another method is to simply open the style sheet that comes with the plugin and 21 00:01:03,930 --> 00:01:05,570 dig around in it. 22 00:01:05,570 --> 00:01:10,030 You can experiment by changing one value in the style sheet and testing it out. 23 00:01:10,030 --> 00:01:14,880 But keep in mind that you should really only adjust a single value at a time so 24 00:01:14,880 --> 00:01:18,050 you can test to see what that one change does. 25 00:01:18,050 --> 00:01:19,380 Now if you go into the style sheet and 26 00:01:19,380 --> 00:01:24,140 make like 15 changes then preview the page, you may not be able to tell 27 00:01:24,140 --> 00:01:28,200 which of the changes you made affected which parts of the user interface. 28 00:01:29,350 --> 00:01:33,430 An even better way is to use the developer tools, built into your browser, 29 00:01:33,430 --> 00:01:37,100 to inspect the HTML and CSS of the page. 30 00:01:37,100 --> 00:01:37,610 Lets do that. 31 00:01:39,240 --> 00:01:42,790 I'm going to right click on this dot, and choose inspect element. 32 00:01:44,160 --> 00:01:47,900 This opens the developers tools at the bottom of the page. 33 00:01:47,900 --> 00:01:51,114 I'm using Chrome here, but most other browsers have the same option. 34 00:01:53,611 --> 00:01:58,710 You can see there's an unordered list with the class name of slick dots. 35 00:01:58,710 --> 00:02:03,490 This list holds the little dots, or buttons, that control the carousel. 36 00:02:03,490 --> 00:02:07,070 I want all of these dots to appear on top of the carousel. 37 00:02:07,070 --> 00:02:09,700 So lets look at the style for this unordered list. 38 00:02:11,670 --> 00:02:14,590 On the right side of the developers tools window 39 00:02:14,590 --> 00:02:18,330 I can see the CSS associated with this item. 40 00:02:18,330 --> 00:02:21,175 You'll see a style named, .slick-dots. 41 00:02:22,610 --> 00:02:25,580 That's the style for this unordered list. 42 00:02:25,580 --> 00:02:29,250 And you can see that its an absolutely positioned element. 43 00:02:29,250 --> 00:02:33,210 The bottom setting is negative 45 pixels. 44 00:02:33,210 --> 00:02:36,430 You can change CSS values in the developers tools. 45 00:02:36,430 --> 00:02:38,350 Lets try a different value. 46 00:02:38,350 --> 00:02:39,600 I'll try 20 pixels. 47 00:02:41,840 --> 00:02:42,690 Great. 48 00:02:42,690 --> 00:02:46,890 The dots are now on top of the carousel, but they're still too small. 49 00:02:46,890 --> 00:02:49,330 Lets dig into this a bit more. 50 00:02:49,330 --> 00:02:50,860 I'll click on one of the buttons here. 51 00:02:52,270 --> 00:02:56,700 Notice these little flashes of color that appear on the buttons HTML? 52 00:02:56,700 --> 00:03:01,030 The slick plugin is dynamically altering the HTML of the page. 53 00:03:01,030 --> 00:03:05,120 It's adding and removing class names and CSS properties. 54 00:03:05,120 --> 00:03:09,278 The developer's tools show you these live changes in real time. 55 00:03:09,278 --> 00:03:15,610 Here's a .slick-dots li button style. 56 00:03:15,610 --> 00:03:16,810 That's a style for the button. 57 00:03:18,250 --> 00:03:22,710 But notice this colon colon before part? 58 00:03:22,710 --> 00:03:25,660 That's what's called generated content. 59 00:03:25,660 --> 00:03:29,120 That's content that you can add using CSS. 60 00:03:29,120 --> 00:03:33,200 Now I've included a link to a treehouse video discussing generated content 61 00:03:33,200 --> 00:03:34,370 if you want to learn more about it. 62 00:03:35,540 --> 00:03:40,860 If I click the colon colon before, I can see that there's a style for that. 63 00:03:40,860 --> 00:03:45,020 Notice the content property, that's what the browser adds to the page, and 64 00:03:45,020 --> 00:03:46,180 see, it's a dot! 65 00:03:46,180 --> 00:03:46,770 We found it! 66 00:03:47,900 --> 00:03:50,960 For example, I'll just change this dot to the letter A. 67 00:03:52,570 --> 00:03:55,630 Now the buttons are tiny little As. 68 00:03:55,630 --> 00:04:00,150 I like the dots so I'll undo that change, but I do wanna change the size. 69 00:04:01,240 --> 00:04:03,560 Look, there's a font size property. 70 00:04:03,560 --> 00:04:04,840 Currently it's six pixels. 71 00:04:04,840 --> 00:04:06,050 That's tiny. 72 00:04:06,050 --> 00:04:07,830 I'll change it to 16 pixels. 73 00:04:09,280 --> 00:04:10,590 Awesome. 74 00:04:10,590 --> 00:04:13,670 Now that I've tried out a few ideas in the developers tools, 75 00:04:13,670 --> 00:04:18,790 I'll take that information and add it to the actual CSS file for this project. 76 00:04:18,790 --> 00:04:22,540 If you want to follow along, just click the launch workspace button on this page. 77 00:04:25,270 --> 00:04:30,770 I could add my style changes to the slick-theme.css file. 78 00:04:30,770 --> 00:04:34,830 That would be fine except if the plugin author updates the plugin. 79 00:04:34,830 --> 00:04:37,750 He might also update the theme file. 80 00:04:37,750 --> 00:04:42,480 Then I'd need to make sure I added my settings to this new style sheet 81 00:04:42,480 --> 00:04:44,830 every time the plugin is updated. 82 00:04:44,830 --> 00:04:48,320 That might be okay, but it could also be a lot of work. 83 00:04:48,320 --> 00:04:53,230 Instead, I think I'll just add my additions to the main.css file. 84 00:04:53,230 --> 00:04:57,850 That way, I can just replace the SlickTheme.css file when 85 00:04:57,850 --> 00:05:02,910 the plugin is updated, without worrying about erasing any of my changes. 86 00:05:04,572 --> 00:05:06,830 I'm gonna add these styles to the bottom of this file. 87 00:05:07,840 --> 00:05:11,450 First I'll add a comment, so I'll later remember what these styles are for. 88 00:05:12,640 --> 00:05:15,920 Next I'll add a style to adjust the placement of the dots. 89 00:05:18,880 --> 00:05:20,900 Now I'll change the size of those dots. 90 00:05:29,410 --> 00:05:30,380 Let's check it out. 91 00:05:30,380 --> 00:05:32,590 I'll save the files and preview the workspace. 92 00:05:33,630 --> 00:05:35,500 This is looking really good. 93 00:05:35,500 --> 00:05:38,090 There's a lot more we could do to improve the look of this. 94 00:05:38,090 --> 00:05:41,100 For example, maybe change the colors of the dots here, 95 00:05:41,100 --> 00:05:43,140 they're a little bit dark for my taste. 96 00:05:43,140 --> 00:05:45,340 But I'll leave that up to you. 97 00:05:45,340 --> 00:05:49,980 As you can see, there are many ways you can improve how a plug ins user interface 98 00:05:49,980 --> 00:05:52,350 looks, simply but updating CSS. 99 00:05:54,270 --> 00:05:56,850 But I found a problem with this page. 100 00:05:56,850 --> 00:06:03,170 Notice that now that there's a carousel on it, the sticky navigation no longer works. 101 00:06:03,170 --> 00:06:06,170 Sometimes plugins don't work well together. 102 00:06:06,170 --> 00:06:08,710 But in the next video I'll show you how to fix it.