Transcript

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