About Stacks Guru

Stacks Guru is born from the need to search the vast number of videos out there on stacks built for Stacks Pro and the Stacks 5 plugin for Rapidweaver.

We have scraped over 500 videos to get the transcripts for each in order to make the spoken word searchable.

Please use this free tool to help you learn and discover the awesome power that Stacks and the stacks made for Stacks have to offer.

Stacks Guru

Video Reference

Leave a Tip!

Every little bit helps to keep this going. I'll be doing my very best to keep up with the likes of Joe when it comes all the videos he posts!

Chroma - Marker & Style Names. thumbnail

Chroma - Marker & Style Names.

Categories: Demo


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"}]