0:00 [Music]
0:11 in this video I just wanted to cover a
0:14 little more about using markers with
0:16 chroma Pro and how the marker names and
0:20 the style definition names can affect
0:23 each other if you're using more than one
0:25 chroma Pro on the page and this examples
0:30 a very simple one there's not a lot on
0:32 the page we've got our main menu here in
0:36 a chroma Pro stack and it just does one
0:38 thing it goes from the default style of
0:42 a blue bar which matches this blue
0:46 section leti it's fixed upon and it
0:51 changes to a white background soon after
0:54 we scroll we've got a marker offset of
0:56 40 pixels on it and that's right below
1:00 the chroma Pro stack so we'd expect that
1:02 to happen after we scroll 40 pixels the
1:04 bar will go white now also on this page
1:08 we've got a second chroma Pro and this
1:12 is set to fixed bottom and sit over here
1:15 and this is our social bar so it's also
1:18 set up with a contained width and scale
1:22 to content and I'll just show you what
1:25 that looks like first and there it is at
1:30 the bottom of the screen and this is
1:31 this is a standard setup if you want a
1:34 contained with scroll up at the bottom
1:38 and it's done by a marker so the mark of
1:42 indicated where these red paragraph is
1:44 just for reference so when that gets to
1:46 the top of the screen it reverses its
1:48 position down and back up again
1:51 okay so that that's all fine but what's
1:54 not happening is our menus not changing
1:56 color as we'd expect so let's go back
1:58 and have a look at it as we said it
2:02 starts out blue with these with this
2:06 default style and then we'd expect it to
2:09 go white and there's one thing that's
2:14 going wrong here and if you markers
2:17 aren't doing what you expect them to do
2:19 in the marker settings as a show marker
2:22 in preview
2:23 and if you click that you can change
2:25 what color you want the mark to be so
2:27 let's make this yellow now this'll only
2:29 ever show up in rapidly the preview it
2:31 won't get published so if you leave it
2:33 on it doesn't matter and when we preview
2:35 the page now with that turned on we can
2:38 see we have a dotted line with some
2:41 angles either side and it tells us the
2:43 marker name here not markers to the
2:45 white background style so we can see it
2:48 sort of where we expected 40 pixels
2:50 below the bottom of our chroma fixed
2:54 position stack and then when we scroll
2:59 we notice it's not moving and the reason
3:05 it's not moving is because we've put it
3:08 inside the chroma stack itself which is
3:11 fixed so we just fixed our marker which
3:14 is a bad thing to do
3:16 so that's mistake number one so let's
3:18 just move it out of the chroma stack
3:22 itself so we've no longer fixed the
3:24 position of that marker and will now see
3:27 the marker starts off in the same
3:29 position but now it scrolls with the
3:31 page and now the menu behaves correctly
3:34 it does it exactly when that marker gets
3:38 to the top of the page now the other
3:42 problem we can have is if we've got two
3:45 stars with the same name now in this
3:50 stack we've turned off the default style
3:53 because from the sticky position video
3:57 we know that we don't want a marker in
3:59 this stack if we turn back on this
4:02 marker then at the top of the page now
4:06 the first marker that it sees will be
4:09 this default style and then we'll get
4:12 our white background so we'd expect not
4:14 a lot to change and indeed we get our
4:18 white background but now it goes blue
4:23 again as we get further up the default
4:27 style is being applied again that we
4:29 haven't got another marker for this
4:30 stack this Chrome has only got one
4:33 marker defined on style defined and
4:35 that's white background
4:36 there's no other white background marker
4:39 on the page so what's going on well the
4:42 second chroma stack we've got here has
4:47 still got its marker turned on that's
4:49 fine for that when we don't need to turn
4:51 it off because all it's doing is sliding
4:53 up and down it doesn't matter about its
4:57 own market but this marker is also
4:59 called default style so what's happening
5:03 is this stack has a marker in built into
5:06 it so when this stack gets to the top of
5:09 the page it's going to tell all
5:11 chromeless stacks that use a style
5:14 called default style to apply default
5:17 style because it's just like having a
5:19 marker on our page like this one here
5:22 that says reverse slide up it's just
5:23 like having one of those but one called
5:25 default style it's just built into the
5:27 stack so when that gets to the top of
5:31 the page so it's just above this red
5:33 paragraph here when that gets to the top
5:35 of the page every chroma that uses
5:38 default style is getting its own default
5:41 style it's not getting the red one it's
5:43 getting its own default style which for
5:46 this stack is defined as blue so if
5:50 you're going to use more than one on a
5:52 page and you don't want them all to get
5:53 the same style then just change this to
5:56 default style too for instance that will
5:59 fix that problem instantly the page
6:02 refreshes and now when that stack gets
6:06 to the top our other chroma is
6:08 unaffected so just be careful about
6:13 style names of course it is very
6:15 powerful because they can share style
6:17 names as well so sometimes it's great
6:19 because you want one style to apply to
6:22 more than one chroma stack on a page
6:24 then that's fine they'll go by the
6:28 definitions if they've got their own
6:30 style definition and they hit a marker
6:35 with that name they will apply their own
6:37 style definitions they won't get a color
6:39 from a different chromel resetting from
6:41 a different chroma but they will apply
6:44 whatever they've got in their style
6:46 definition for that name
6:49 so I hope that's five minutes sure
6:53 that's useful and I'll see you next time"}]