Changing the Appearance of the Carousel6:09 with Dave McFarland
Most jQuery plugins provide two ways to change the appearance of whatever the plugin does. Sometimes the plugin offers display settings that you can change as part of the configuration object. Other times a plugin's look and feel are dictated by the CSS file. Let's look at various ways we can modify how the slick plugin looks on our web pages.
Most plugins provide two ways to change the appearance 0:00 of whatever the plugin does. 0:03 Sometimes the plugin offers display settings that you can change 0:05 as part of the configuration object. 0:09 Other times, a plugin's look and feel are dictated by the CSS file. 0:12 Let's look at various ways we can modify how the Slick plugin 0:16 looks on our web pages. 0:20 The carousel is looking really good and working great. 0:22 There are a few things, however, I'd like to change about its appearance. 0:26 The buttons are a bit small, I'd like to bump up the size of those. 0:29 But how do you figure out what styles to modify, or 0:34 add, to change a plug ins appearance? 0:37 That's a good question and there isn't a single answer. 0:39 Now the easiest way is if the plugin developer provides documentation about 0:42 the CSS for the plugin. 0:46 Some plugins have great documentation telling you which styles control which 0:49 parts of the user interface, but many don't. 0:53 And the Slick plugin doesn't. 0:56 That's too bad. 0:58 Now another method is to simply open the style sheet that comes with the plugin and 0:59 dig around in it. 1:03 You can experiment by changing one value in the style sheet and testing it out. 1:05 But keep in mind that you should really only adjust a single value at a time so 1:10 you can test to see what that one change does. 1:14 Now if you go into the style sheet and 1:18 make like 15 changes then preview the page, you may not be able to tell 1:19 which of the changes you made affected which parts of the user interface. 1:24 An even better way is to use the developer tools, built into your browser, 1:29 to inspect the HTML and CSS of the page. 1:33 Lets do that. 1:37 I'm going to right click on this dot, and choose inspect element. 1:39 This opens the developers tools at the bottom of the page. 1:44 I'm using Chrome here, but most other browsers have the same option. 1:47 You can see there's an unordered list with the class name of slick dots. 1:53 This list holds the little dots, or buttons, that control the carousel. 1:58 I want all of these dots to appear on top of the carousel. 2:03 So lets look at the style for this unordered list. 2:07 On the right side of the developers tools window 2:11 I can see the CSS associated with this item. 2:14 You'll see a style named, .slick-dots. 2:18 That's the style for this unordered list. 2:22 And you can see that its an absolutely positioned element. 2:25 The bottom setting is negative 45 pixels. 2:29 You can change CSS values in the developers tools. 2:33 Lets try a different value. 2:36 I'll try 20 pixels. 2:38 Great. 2:41 The dots are now on top of the carousel, but they're still too small. 2:42 Lets dig into this a bit more. 2:46 I'll click on one of the buttons here. 2:49 Notice these little flashes of color that appear on the buttons HTML? 2:52 The slick plugin is dynamically altering the HTML of the page. 2:56 It's adding and removing class names and CSS properties. 3:01 The developer's tools show you these live changes in real time. 3:05 Here's a .slick-dots li button style. 3:09 That's a style for the button. 3:15 But notice this colon colon before part? 3:18 That's what's called generated content. 3:22 That's content that you can add using CSS. 3:25 Now I've included a link to a treehouse video discussing generated content 3:29 if you want to learn more about it. 3:33 If I click the colon colon before, I can see that there's a style for that. 3:35 Notice the content property, that's what the browser adds to the page, and 3:40 see, it's a dot! 3:45 We found it! 3:46 For example, I'll just change this dot to the letter A. 3:47 Now the buttons are tiny little As. 3:52 I like the dots so I'll undo that change, but I do wanna change the size. 3:55 Look, there's a font size property. 4:01 Currently it's six pixels. 4:03 That's tiny. 4:04 I'll change it to 16 pixels. 4:06 Awesome. 4:09 Now that I've tried out a few ideas in the developers tools, 4:10 I'll take that information and add it to the actual CSS file for this project. 4:13 If you want to follow along, just click the launch workspace button on this page. 4:18 I could add my style changes to the slick-theme.css file. 4:25 That would be fine except if the plugin author updates the plugin. 4:30 He might also update the theme file. 4:34 Then I'd need to make sure I added my settings to this new style sheet 4:37 every time the plugin is updated. 4:42 That might be okay, but it could also be a lot of work. 4:44 Instead, I think I'll just add my additions to the main.css file. 4:48 That way, I can just replace the SlickTheme.css file when 4:53 the plugin is updated, without worrying about erasing any of my changes. 4:57 I'm gonna add these styles to the bottom of this file. 5:04 First I'll add a comment, so I'll later remember what these styles are for. 5:07 Next I'll add a style to adjust the placement of the dots. 5:12 Now I'll change the size of those dots. 5:18 Let's check it out. 5:29 I'll save the files and preview the workspace. 5:30 This is looking really good. 5:33 There's a lot more we could do to improve the look of this. 5:35 For example, maybe change the colors of the dots here, 5:38 they're a little bit dark for my taste. 5:41 But I'll leave that up to you. 5:43 As you can see, there are many ways you can improve how a plug ins user interface 5:45 looks, simply but updating CSS. 5:49 But I found a problem with this page. 5:54 Notice that now that there's a carousel on it, the sticky navigation no longer works. 5:56 Sometimes plugins don't work well together. 6:03 But in the next video I'll show you how to fix it. 6:06
You need to sign up for Treehouse in order to download course files.Sign up