0:00 [Music]
0:10 this is a very quick tutorial on how to
0:13 use the custom user styles in chroma Pro
0:16 so if we start by just adding a chroma
0:20 Pro stack to our page and this time what
0:24 we'll do is we'll just drop some
0:26 different content into it other than a
0:28 menu and we'll use a header as an
0:33 example and the first thing we're going
0:36 to do is just give this a bit of style
0:40 so we're going to make it a yellow color
0:45 let's say and let's just change it so
0:49 this is Chrome now you may have
0:53 something alongside an existing menu
0:56 where you may be building a menu or
0:58 using the dotter builder menu and in
1:02 which case you can style other things
1:04 just by giving them a custom class so
1:08 we're going to go down to the bottom of
1:10 these header Pro settings and just call
1:12 this menu header with a hyphen in it if
1:18 the stack you want to use doesn't have a
1:21 custom class selector you can always put
1:23 it in one of those CSS box stacks and
1:26 address it that way so what we're going
1:31 to do with this we're going to have it
1:32 as a fixed position menu at the top of
1:35 the page and we'll leave pretty much all
1:38 the settings at default and then we're
1:41 going to change the color of the bar and
1:44 we'll leave this at this this blue color
1:46 and let's perhaps add a bit of padding
1:49 top and bottom when we change the color
1:52 so we're going to need a marker to tell
1:55 it when to adopt this setting and we'll
1:58 put it just at the top of our page text
2:01 here I'm just going to leave the style
2:04 names as the default style one for now
2:10 so if we preview that
2:16 we'll see that when we get to our marker
2:18 as expected we get our padding and the
2:21 color change so it'd be nice to change
2:24 the color of that header which is what
2:27 we're here to do and for that we have
2:30 custom user styles so when it's
2:33 something that's not in the predefined
2:35 settings like menu colors which will do
2:38 all the major menu bars and there other
2:42 styles and dropdowns
2:43 then we can use custom styles and we've
2:48 got fired for to play with sir and you
2:51 can see in the first control we've got
2:53 the selector now this can be a class or
2:56 an ID or even an affricate and you can
3:00 stack them up with commas as well so you
3:02 can refer to several things in your bar
3:04 at once in this case we just want to
3:06 refer to dot menu header so that's going
3:12 to address the menu header class and you
3:16 can see the default settings are to
3:18 change the color which is what we want
3:21 but let's change that to white so we'll
3:25 make that hash FFF you could just type
3:28 white in there if you want to use one of
3:30 the standard colors and you see there's
3:33 a transition setting here as well now by
3:35 default again that's set to color so we
3:39 can just leave that as it is and we
3:42 should now have our color change on also
3:48 there we go as well as the menu glass
3:50 changing we've changed our custom class
3:54 color so that's very easy but I just
3:58 want to mention a more advanced usage
4:01 where you may want to change two things
4:03 at once
4:04 so if we think about changing the
4:10 opacity at the same time so we one might
4:13 want to make the opacity nor point eight
4:15 as we change the color and for that we
4:19 would set the opacity of the parameter
4:24 naught point eight as the value and we
4:26 want to transition the opacity
4:29 this time now the way CSS transitions
4:32 work is they all have to be on one line
4:35 now each one of these user Styles is
4:38 going to write a block of CSS code as
4:41 per these instructions so what's going
4:44 to happen if we did this is that the
4:47 menu header item is only ever going to
4:50 have a transition of opacity because the
4:52 last instruction written will win if
4:55 they're different selectors it's fine
4:57 you can use different things so all we
5:00 need to do in this case and this is
5:01 really a bit of an advanced case is just
5:04 get rid of the color out of there and
5:07 put it in there with a comma so now
5:10 we're going to transition the color to
5:14 white we're going to transition the
5:16 audacity to naught point eight and that
5:19 transition which is going to get used
5:21 for the menu header class is going to be
5:25 color 200 milliseconds ease opacity 200
5:29 milliseconds ease now we could in fact
5:31 change the opacity timing so that takes
5:35 longer we could make that 500 but the
5:38 key is the transitions all have to be on
5:40 one line of code for a given selector
5:45 like the menu header that's the only
5:48 time that this gets a bit complicated if
5:54 we don't preview that we now see that
5:59 the opacity drops as well as the color
6:03 changing if we were to make that a bit
6:05 more extreme so we can make it not point
6:08 to and it really saves in you see the
6:13 difference and the two things transition
6:15 smoothly together
6:22 now while we've got this project open I
6:24 just wanted to show you one other things
6:25 that we can do and this is to do with
6:28 markers and offsets imaginary if we
6:32 wanted to change the style of the menu
6:35 when we get to the bottom of the page so
6:38 let's let's create a new fixed style
6:41 while we're up here and I'm just going
6:44 to copy that one and change the
6:45 background to red so then we'll have all
6:47 that having settings already there and
6:49 everything else will stay the same
6:51 including our transition so nothing's
6:55 going to change other than the
6:56 background color and we're going to call
6:58 this mark this style page bottom and we
7:06 therefore need a marker for our page
7:08 bottom which we're going to put
7:10 unsurprisingly at the bottom of the page
7:12 and let's just make sure we've got that
7:16 named the same before we do anything
7:18 else now markers trigger when they get
7:23 to the top of the page plus or minus
7:26 this offset that we define here so what
7:31 we need to do is we need this marker to
7:33 trigger when it comes on to the bottom
7:35 of the page not when it gets to the top
7:37 because it's never going to get to the
7:39 top so for that we have marker units of
7:43 browser height so we can offset this
7:47 marker by the full height of the browser
7:50 so push it down to the bottom and it
7:54 will then trigger when it comes on at
7:58 the bottom rather than when it goes off
8:00 at the top so what we need to do is move
8:04 this apparent position of this marker up
8:07 by the height of the browser so that
8:09 when the actual marker itself comes on
8:11 to the page at the bottom here then each
8:16 trigger position is an entire browser
8:18 height up so we're going to need a
8:20 modern negative marker off so we're
8:23 going to add - now the first thing you
8:26 might think well if we add 100 - 100
8:28 percent of the browser height we're
8:30 going to be good to go and
8:34 the trouble with browsers is they bounce
8:36 and if we get down to the bottom of our
8:39 page if I hold it at the bottom of the
8:41 page with my touchpad then yes it works
8:44 but because of the bounce it just comes
8:47 back slightly and we lose it so
8:49 solutions very simple is we don't use
8:52 exactly a hundred let's say use one
8:56 hundred and five percent because then it
8:57 will get to the top of the screen we're
8:59 going to make it a hundred and five
9:01 percent offset upwards so it'll get to
9:04 the top of the screen just slightly
9:06 before we actually scroll to the bottom
9:08 and it will mean you don't get that
9:11 nasty bad so you can scroll down to the
9:13 bottom and even flick it down to the
9:15 bottom with the bounce and it will stay
9:17 read so that simple way that you can
9:21 make markers relative to the bottom of
9:23 the page instead of relative to the top
9:25 of the page and you can play around with
9:27 this this value depending on how far I
9:30 mean if we made this 125 percent then it
9:34 will trigger a lot sooner than the
9:36 bottom of the page so we're going to get
9:39 sort of that that behavior so you might
9:43 want it to trigger when a footer comes
9:44 into view something like that but it's
9:47 very easy once you realize that you've
9:50 just got to move the apparent position
9:51 of the marker up relative to the height
9:54 of the browser and we get our three
9:58 state bar finished thanks for watching I
10:01 hope that's been useful and I'll see you
10:04 next time"}]