Preview
Video Player
00:00
00:00
Changing the Appearance of the Carousel
6:09Most 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