0:00 [Music]
0:09 in this video I just want to cover the
0:12 differences between chroma and chroma
0:14 Pro and the way we use markers to fix
0:19 our styles in chroma Pro so first of all
0:24 we'll look at the simple basic chroma
0:27 stack from the examples project and the
0:30 setup here is very simple without our
0:33 initial styles and we have our triggered
0:36 styles so we're going to set the
0:39 triggered styles to when sticky fixes we
0:43 can use a marker if we want but it's
0:46 easy and simple just to use the sticky
0:50 fix settings so what we've got is we've
0:52 got a gray background before it fixes
0:56 and then we've got our black bear
0:57 background when it fixes so we can see
1:01 it as we fix we get a nice transition to
1:05 our black background and we've also
1:08 added some padding that you can see
1:10 we've got 10 pixels top and bottom it
1:11 just adds a little more to the effect so
1:15 that's very simple and that's how the
1:17 basic chroma stack works now if we look
1:21 at the same page but using chroma Pro
1:25 will notice a couple of differences
1:27 straightaway we've got a marker here
1:29 above the stack and we've got our fixed
1:33 Styles and this is the the key
1:35 difference in the way that chroma Pro
1:37 works in order that we can have lots of
1:40 different style definitions on a page
1:41 each of our thick styles is defined in
1:45 the child stack we can add another one
1:47 if we want we're just going to have one
1:50 on this page for that for now though so
1:53 if we look at the settings again we've
1:56 got our default styles now this is our
1:59 gray background that we can see being
2:01 applied on the page now with no padding
2:02 and before we had our triggered styles
2:06 now we're going to define those in our
2:09 fixed style stack so when it fixes these
2:12 styles are going to be a
2:13 right so all I've done is set favorite
2:15 background color and 10 pixels top and
2:18 bottom padding that we had in our
2:20 triggered styles for the normal chroma
2:22 stack
2:23 so that's sensible and logical we need
2:27 to tell it when to trigger though so
2:29 these styles take effect when a style
2:33 marker like this chroma marker here
2:35 reaches the top of the page we can have
2:38 it trigger when it's at the bottom of
2:39 the page but just for now we'll go in
2:41 with the default settings so in order
2:44 for this to change its style when it
2:47 fixes we've got it set to sticky so when
2:52 it gets to the top of the page it will
2:54 become fixed and we need a marker to say
2:58 when the happens we're going to apply
3:00 style 1 which is our definition here so
3:05 obviously the marker needs to go above
3:07 the chroma stack and if it's right above
3:11 it it will essentially be at the same
3:13 point on the page markers have no height
3:15 so so as soon as the top of this gets to
3:18 the top of the page it's going to fix
3:21 now I'm going to show you it's setup
3:24 wrong first in the default state we have
3:29 our default style and we have this
3:32 inbuilt marker and it's set to use if
3:35 initial style name now the inbuilt
3:38 marker is a marker that's automatically
3:40 placed in the chroma spec itself so just
3:43 like this one that you we've added to
3:46 the page here they'll be one hidden away
3:49 inside the chroma stack and it will be
3:51 called default style because this is
3:56 what we've got set here it's using the
3:57 initial style name so if we look at what
4:00 happens here we've got our initial style
4:07 a of the stacks gray it gets to the top
4:09 of the page it fixes and it stays gray
4:13 so our style hasn't been applied now
4:16 that's quite simple because our style
4:21 one gets to the top of the page so it
4:23 should go black but instantly
4:26 our inbuilt style imagine there's
4:28 another one of these inside this chroma
4:30 stack that's called default style that
4:33 gets to the top of page and so this
4:37 default coloring is applied again so we
4:40 never actually see the change so if we
4:42 turn that in built marker off so there
4:45 is no marker now for default style so
4:48 the default style will be used when no
4:51 other marker is present it doesn't have
4:53 to be called that with the changes name
4:55 to radically want and it would still
4:57 work or even spell it right but now that
5:05 we haven't got a marker in the stack
5:07 this dole be used when no other markers
5:09 are active so it's great when it gets to
5:13 the top of the page start ones applied
5:16 so everything works as we expect so all
5:18 we need to do for this case is we need
5:21 to remove the marker the inbuilt marker
5:26 so when would you want to use the
5:28 initial style name
5:30 well sometimes you may have another
5:34 style that you want beforehand and it's
5:38 useful to have this marker in the stack
5:40 and we'll take a look at the demo
5:45 project next and you'll see how I made
5:49 that using different names to this
5:52 darling so quick example if I just copy
5:56 this marker and paste it up at the top
6:00 so that's at the top of the page now and
6:03 just to make sure we'll just give it an
6:04 offset to minus 10 so this marker now is
6:07 star one which we're going to rename so
6:10 we'll call this red this is going to be
6:14 active as soon as the page loads so a
6:18 crumber Pro stack add default style is
6:25 using the initial star line at the
6:27 moment if we change that to red then
6:31 these default styles which are applied
6:36 when no other marker is active on the
6:38 page I'm not going to get into
6:40 because we've said that the default
6:41 style is red so we need a style for red
6:47 so will other child will call it red and
6:50 we'll just simply change the background
6:52 to red horribly bright but there you go
6:56 so now when we load the page before it
7:01 fixes a chrome resurrect so we haven't
7:04 used the inbuilt settings at all and our
7:09 marker is on so it stays red so if we
7:13 then go back to our chroma stack and we
7:18 say we don't want any marker so now
7:21 again there's no marker in the stack so
7:24 what we've got is we're going to say a
7:26 default default style instead of using
7:29 these settings it's going to be called
7:30 red so we're going to use red the red
7:34 marker then when we get to our star one
7:38 it's going to go black so it's like free
7:44 to refresh and as we get to our style
7:47 one marker it goes black now this if you
7:52 think about it is a very very powerful
7:54 feature because we're not tied to the
7:59 background that we set in the stack we
8:02 can completely ignore that if we want
8:03 and there are several situations where
8:06 that's desirable to do we don't want it
8:09 to suddenly change to these inbuilt
8:10 settings it's nice to have them for
8:12 convenience but it's also nice to be
8:15 able to ignore them and we do that by
8:17 turning the marker off and making sure
8:20 that we have another style in use all
8:24 the time so now we'll take a look at the
8:28 demo page and see how that works okay so
8:36 here we are in the chroma demo project
8:39 and in this case we've got our chroma
8:42 menu as a partial so we can just go in
8:48 there and say we've got a chroma Pro
8:50 stack and then I'm using a button bar
8:53 menu
8:54 and straightaway we'll see that here we
8:58 have the inbuilt marker ID as a drop
9:02 zone as a HTML area and this means that
9:06 when we're out of our partial because I
9:10 want indeed we can enter the default
9:13 style separately - for each page that we
9:17 want so on this on this page I've left
9:22 the default style set to default style
9:28 which again is just an arbitrary name
9:31 but we've got the marker set to custom
9:34 use with partials and that's what makes
9:37 this area appear rather than if we've
9:40 got it set to use initial style name it
9:43 will just use whatever we type in in
9:45 here now ordinarily that's fine but
9:48 because we want to use it with a partial
9:52 and we want to have a different default
9:53 style name for some of our pages
9:55 we can't unpin the settings that we can
9:59 unpin the text area in HTML area so the
10:04 marker name appears here so this default
10:08 style won't be used but this one will so
10:11 when we go back we can see why we might
10:14 need to do this so on our home page
10:18 we've got a menu that starts off with a
10:24 transparent background and active items
10:28 blue and we've got an SVG logo there and
10:33 when we scroll a bit we get a thick
10:36 shadow and I've even just change the
10:39 color of the underlined in the SVG and
10:42 that's just using the custom settings in
10:45 chrome a pro that allows us to target
10:47 anything that we like so as we scroll
10:52 down the page nothing happens on this
10:54 page this page is just a very simple
10:57 effect at the top of the page if we swap
11:00 to our features page it's the same sort
11:02 of layout so we can use the same default
11:05 style
11:09 so we've got same menu layer transparent
11:15 until we scroll a bit and then we get
11:18 our gray on the bar underlined bar and
11:21 drop shadow on this page we've got some
11:24 different markers so we've got as we get
11:29 down to the red section there's a marker
11:32 that's called red menu so that turns the
11:36 SVG itself gray and the underlined red
11:38 and it turns all that highlights in the
11:40 menu to red and then we get a bit
11:43 further down to a yellow section and we
11:46 color for denied with that as well but
11:49 the actual behavior at the top of the
11:51 page our default style is the same so no
11:54 problem we could do we could do that
11:56 with the normal default style settings
11:59 the different come the difference comes
12:01 when we get to the page that describes
12:03 the chroma Pro features separately so
12:07 let's have a look at that now straight
12:12 away you'll see we've got a very
12:13 different top of the page here which was
12:16 done deliberately to demonstrate this
12:18 use case this time we've got a big blue
12:23 header and quite clearly we don't want a
12:27 thick shadow and a white menu bar to
12:29 appear straight away here we want it to
12:31 appear down here where we've got the
12:35 atlas marker so if we were to use the
12:39 default style ah default style would get
12:43 applied and we have a bar though that
12:47 look ugly whereas we want it to happen
12:50 here so if we take a look in edit mode
12:54 so at the very top of this page you can
12:56 see that we've got a marker called hide
12:58 background logo switches so we're hiding
13:01 the logo and the background and that
13:05 corresponds to our fixed style that
13:08 we've got in our partial here now
13:12 because we want this place to be
13:14 different we don't want the default
13:18 style to be used and the
13:19 all style of course is the same for
13:21 every page because that's in the past or
13:23 settings for for our chroma menu but
13:26 within on pin the marker ID setting when
13:32 we set to custom and put in a separate
13:34 one so this page is no longer going to
13:37 use the inbuilt settings that we have
13:42 down here which is the default style
13:45 that we're using on all the other pages
13:47 this page is going to use this
13:50 background logo marker hide and you can
13:56 see that we've got all the different
13:58 markers for all the different pages in
13:59 our partial so the yellow menu in the
14:02 red menu is so on the last page the gray
14:05 logo underlined style and if we look
14:08 down the page we'll see as we get to the
14:10 bottom our blue header there's the lip
14:13 line our white bar and we get to our
14:19 gray logo underline when we get to this
14:22 sort of text area that's the same marker
14:25 that we used on the on the other two
14:28 pages and we get down to the
14:31 demonstration of hiding part of the menu
14:33 over the image so we ever hide menu
14:36 before the image and that will hide the
14:39 logo and I think examples button and
14:43 then after the image we have a gray logo
14:47 under line style coming back on again
14:49 all these markers are just for the demo
14:52 project so they just show where the the
14:55 marks are all these little marker IDs so
14:58 that they're absolutely nothing to do
14:59 with chroma just for the look of the
15:02 finished demo and I hope you get an idea
15:08 of just how powerful using the unpinned
15:11 marker IDs for this being built marker
15:14 remember you still got the styles in the
15:17 stack to use they've got their own ID
15:21 all we're doing is changing the ID of
15:25 the marker that's in the stack itself so
15:29 it gets triggered when it finds
15:32 a style this term becomes active"}]