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 vs Chroma Pro - Sticky Settings thumbnail

Chroma vs Chroma Pro - Sticky Settings

Learn about the differences in setup and features between the Chroma and Chroma Pro stacks. Tips and tricks on how to best use the sticky and fixed settings. We specifically highlight the differences between the Chroma and Chroma Pro stacks.Learn about the differences in setup and features between the Chroma and Chroma Pro stacks.

Categories: Demo


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