okay woof man crazy time sorry about that guys
look at all the chat going on in there
um sorry about that I had some some camera difficulty wouldn't communicate with my uh with my computer so I decided
to try to unplug it and plug it back in and well whatever that was just a disaster
because it's plugged into my external GPU and Max really hate it when you
unplug an external GPU and so everything was jacked so I had to reboot and I have
to say reboots take a very very long time now um I don't know
anyway we're here we're ready to have some fun and uh let's talk about some cool web
design so um hopefully you guys can all see and hear me in the chat I assume
okay excellent clean my glasses oh yeah let's
go yep my hat see you know what the truth
is I had to go find my hat you know I didn't really need to reboot I just had to look good for you guys
okay so anyway okay um what we're gonna do Compass today so
I've been helping um someone out hopefully he's here on the live stream
um on the community with a stack that's been around for about 10 years now I think I released in 2013 called compass
and um it allows you to do like next in previous navigations and uh it's pretty
cool right um but I've always wished it would be a little bit more flexible
so um Hey Monday I was I was helping them out
and going you know what I Compass really needs to be made a little bit better like so I decided to completely revamp
it um and uh yeah completely rewrote it pretty much from scratch new icon
um and yeah I thought I'd show it off to you guys today okay
how many hats do I have uh I have a lot of hats although I'd say I wear this one a lot it's probably one of my favorites
I actually have I have it in two I have it in brown and and blue so
um last year I think it was two years ago I was in Hawaii and I saw this hat
and was like it's the same hat as my this was my favorite hat for the longest time I I wore this one like more than
anything and I saw the blue one and I was like I gotta have it so yeah now I
have it in blue and brown love it so anyway
um let's go ahead and uh share my screen hopefully that's gonna work
all right that looks like it's working Let's uh let's launch called rap Weaver no wrong keyboard combination
I don't want to launch time I don't want to watch Twitter tweetbot
which doesn't even freaking work anymore all right I I won't go off on the Tweet
bot Twitter tangent uh anyway all right let's go ahead oh quit okay good
rapid Weaver and set a tweet bot okay oh here it is I hope it's open already let's open compass
all right so let's show off what Compass does First Right
I'd say um this is available on um Weaver space already so
um I guess there actually is no demo um it's kind of hard to show a demo of
this um I think I'm just gonna be like hey yo watch the video uh which I'll have like
a quick after this live stream I'll create like a quick two minute video just kind of demo it
um so yeah there we go um it is uh 1995.
um if you owned Compass version one you get a discount I think it's 13.95 so
about 30 off or so whatever that comes out to be I think it's 30 off
um so yeah there we go so version two what does compass do so
um let's just go ahead and let's preview this and uh we'll show off what it does before we dive into the settings and
whatnot okay um so this is just a routine
um very simple website okay it's just for demo purposes hey new icon pretty
cool right I like it um so uh we have compass compass two and
then we uh if we look at our navigation okay um we have just this kind of simple
navigation here and by default Compass will actually analyze the navigation on
your web page and then utilize that to build the next previous links
okay so for example um right now we are on the home page and if you notice here if I click next
okay it's going to go to page two right here there is no previous button
because there's no previous page right this is there's nothing before this page so I can go ahead and click next
and it will take me to why is it so slow it's all local
oh okay so it took me to page two okay now here I kind of showed in page one
you know this there were buttons but here I've kind of changed them to be Lee's little arrow icons okay so um if
we go to page two we'll notice that I now have a previous and a next okay so we have previous and next
previous will obviously go to the home page and next we'll go to
um page now instead of Page Three um now Compass has some options you can
have it stay within the uh navigation hierarchy or you can have it be able to drop down Okay so this particular page I
have the next be able to drop down inside so it's basically going to go from page two to PHA to page 2B to page
2C all right so let's go ahead and click next
and as you see it takes us to to I'm not going to navigate through all of these okay
um but it'll basically go from 2A to do B to 2C from 2C it goes to page three right so let's go to page three really
quick now we'll see on page three I have some different arrows um you have lots of customizability I'll
go into that in a little bit okay now on here we'll notice that I do have a next in previous okay but this page I don't
have I have the break hierarchy turned off and the previous doesn't go to page
2C it actually goes to page two okay just to kind of show off where um this particular page I'm staying
within this top level hierarchy okay um if I um it has the ability to go back
to page 2C which is the previous Link in the entire menu okay or you can stay
within okay so there's a lot of of customization that we can do there let's click next I think there's some Special
Sauce in page four okay oh this one um
this one will be it'll make more sense if I were to go into um wrap it over and show you guys which
we will uh but one thing I want to notice it show you is that page four technically there is no next button here
but we have the ability also to loop back around so um on here there the next
will take us back to the beginning okay so we can do what's called link looping which allows us to basically restart so
the next um button on page four will then go to page one
okay and obviously the previous button will go to page three so um yeah what are use cases for this
right okay so we had a quick demo I won't remember I won't forget to share my
screen again I promise okay um so what are use cases for this
um pretty much if you have a set of web pages where you have like step one step
two step three or maybe chronologically where you want someone to be able to go to the next event or something like that
okay and guess what total CMS right probably a feature
request that I've got been gotten been getting for forever for blog is the
ability to go to the next blog post okay and um total CMS does not have that
feature however we have it now with compass so Compass
has some total CMS um Integrations that allow you to it'll intelligently figure
out the previous next blog posts um so that when you're on a blog post
page you can click next and it'll take you to the next blog post okay so pretty cool we'll demo that
today um and uh we'll show that off towards the end okay
so that's really cool um maybe you have timelines right so if you have an event like you again it's
just a step-by-step thing right where you have you know step one step two step three step four maybe you don't want to
have people navigate with the menu or with links or it's just nice to have both right maybe you have links to step
one two three four um and then you know this next and previous kind of is a convenience okay
so um this just gives us another option to build out some intelligent linking okay
now you might think well I could just build out um these buttons myself
and you could okay but Compass uh is nice because it kind of automates it you
can actually throw Compass inside of a partial throw that partial on all those pages and it'll dynamically create all
that those links for you so it just saves you a lot of time from being able to do that now with something like blog
you can't do that right Compass is really the only way right now if you want next in previous blog posts
um and maybe you're using that for for events or using it for to you know sift through your products or something like
that um yeah really encompasses the only way to do that right now okay all right so let's dive into
rapidity room show you what's going on there okay um and I won't forget to share my screen
because I almost did I totally almost forgot to share my screen
okay there we go no no yelling at me today I didn't forget okay so um
here we are on the home page of the project now this is the demo project that ships with compass two okay
um and you'll notice down here um there is two stacks that ship with compass two
okay um forget about this is compass one uh there's Compass Encompass link oh
another thing okay Compass ships with our 300
different it takes a while for some reason why isn't Stacks uh rent uh rendering all these arrows
I think it's because I'm live streaming it's taking its sweet time but it ships with 300 different arrows
that you can utilize okay um so yeah pretty cool uh if you wanted
you can like you know uh duplicate these if you wanted to change the colors or whatnot go ahead
um we'll go off on a little side tangent if you right click on one of these and say show and finder okay
it will open um this inside finder okay now I highly
recommend you don't modify these directly okay because these are the originals
that ship with the stack and if I ever ship an update anything that you've changed will get overridden okay so what
you want to do is you want to uh copy these maybe to your desktop or to somewhere else then do your edits okay
so there we go a little tip there okay
um but yeah Stacks are the compass ships with um around 300 of these arrows they're
all some really cool looking arrows so um I paid someone to design all these a
while ago and uh yeah they're really really cool okay
so uh let's look at the compass stack okay so as I said before there are two
stacks that come with a compass there is compass and Compass link
okay um so the compass stack it's really super simple to set up okay you define
your source of the timeline or the step-by-step process Now by default as I
said it's going to look for the menu on the page okay so we have link source which is first menu okay
um also if if you have if it's not finding your menu you can go ahead and give a custom selector maybe post them
in community we can help you out um you shouldn't need this custom menu selector okay
um because yeah this Compass has been around for 10 years and
I've over those 10 years have built an algorithm that finds the menus in any theme okay so yeah and
it will find the first menu on the page that's very important it does look for the first menu okay
um okay next up um Source list uh you can do total CMS
we'll go over that in a little bit and URL list we'll go over that in a little bit later as well okay
um if you want to allow link looping so this is the ability from the first page to loop back to the last page and from
the last page the loop back to the first page okay that's what link looping is
okay and next is menu break hierarchy if you turn this on this is what will break
into sub menus okay so um if you're using a menu and you want it to break
the hierarchy and drop down into a level or drop up into the previous level
um turn that setting on okay by default they're both turned off
so that's the compass stack super simple to use next up is the compass link stack
and this is pretty simple to use as well too so this allows you to um by default let's actually go to a
different page okay
excuse me there I want to show you uh the default state for Compass link okay
um so you can Define either previous or next okay and then you just basically
provide an image now prior I showed you all of those icons that
um that ship with compass basically you could just drag and drop those directly over here if you were to customize any of these
these logos such as I said how I showed you earlier and you can drop those on your desktop and then you can go ahead
and customize them however you want and then drag those into here okay
and then you can have an ALT tag for the image okay um so here we go you can also Supply
some custom classes um as well as if you if you're using you know Foundation six and swatches or
you're a CSS magician you can go ahead and create your own custom classes and assign it to uh this can link container
okay um so again here in this example I have a two of them and what's what's cool
here is that um I just use this in a two column version one of compass you kind of you
didn't have control over the layouts okay but with these I can put these links wherever I want on the page right
so you determine the layout you determine where all these buttons are going um to give you the ultimate flexibility
so here I've just um basically added it into a two column and then I have my two links in there but again you have full
control over all of this okay you can put these wherever you want
okay um all right so that deals with the custom
or the the compass link stack um where you can do next in previous as you see this one's set to previous and
you also notice if you set it to previous IT aligns it to the left and if you set it to right it'll align it to
the right okay um or I'm sorry if you set it to next it'll align it to the right if you set
it to previous it'll line it to the left okay there we go now you'll notice here that there's a checkbox for custom stack
content let's go ahead and let's go back to the previous page we're on and I'll show you what that is
because you'll notice here I have a button okay so all I've done here is I've just I've set it to next and I say
I want to use custom stack content um and inside there I have a button
okay and you can put whatever you want inside here okay now uh it is important
that you have some sort of Link okay now uh on another page let me find an
example I think it's this one no and one of these
ah well let's just here I'm going to I'm going to move this out of here just for now okay
um so let's say I want to put uh an image in here okay I'm going to be
I'm going to use one of these arrows okay but I'm just going to I'm going to drag and drop it so it added an image
stack instead of using the compass link okay um you know if you are just using an
image you're probably just going to use this okay but this is an example here
if you add an image okay in here or maybe a picture stack right here let's
do that maybe let's say you want to add a picture stack in there because you want to have some more fine-grained control over various things I'm going to
load a foundation six picture stack in there then I'm gonna go ahead and inside here I'm going to Chuck this in there
because maybe I I don't know I want some of these other controls and features of
um of this right so now uh because we're using a stack it's not going or it's not going
to align things automatically so we're gonna have to do that kind of ourself so I'm going to go ahead and uh I'm gonna
do uh text right
right uh here
whatever I'm not going to deal with that okay but so there is one other thing that we're gonna have to do
okay is that's gonna bother me I have to fix that okay so let's just go ahead in here container uh
do content alignment right uh wrapper
oops no Auto no wrapper we're gonna check that in there okay and that will work
once we're inside a preview okay and then here we're gonna do oh we need to
do display uh Dash inline okay
um and then now we're going to go ahead and let's review that really quick
all right so now we're preview and oh oh what's going on here not showing
up
did the volume drop did the volume drop my volume dropped way down is that
volume better um I didn't touch my volume but um
hopefully I raised it a little bit hopefully that's a little bit better for you guys
okay um sorry about that but uh yes sweet
okay cool um
why isn't this working what the heck what did I do wrong
there's that
Compass link next there's the next page here
hmm container I just take it out maybe I did that
what's going on here hey maybe it's because one thing I
wanted to show you is One requirement is that I have to have a link so I'm just going to go ahead and set this link to
be hashtag okay maybe that's the our issue there
oh and that's what it was okay I was I was hoping to preview show you that it didn't work and then fix the link but
apparently um yeah it requires a a link okay so um
you could just use a text right so you could just go ahead and um
let's just go ahead and put in I don't know let's say header right and in my
header I want to have let's just make it a paragraph we're going to make it uh right aligned uh and then
I have to add a link okay well let's change the text to be
next okay if I didn't let's go ahead and
preview that all right so there's next okay now it's still not text aligning right not sure
what's going on there uh display Dash inline Maybe
I don't know I'll figure out not sure what's going on with the layout there but aligning it right but
all right but the the Crux of the the thing here is in order to it could be
the theme uh oh I'm this isn't a foundation six I'm using Foundation six stacks and I'm not in a foundation 16.
okay that's probably the problem that's that's definitely the problem why all my text alignment settings aren't
working inside a non-foundation 16. okay that makes a lot of sense now
um so um in here now that I have a link if I
click next it takes me to the next page okay so again
that was uh that was a couple brain farts in a row there um if you're using again if you're using
stack content custom stack content you have to make sure that there is a
link somewhere inside and whatever the that link is a compass will go ahead and
replace the link that's there with the link to the next page or the previous
page okay so again super important you need to make sure that um that that's done okay let's go ahead
and dude did and now let's set that be right
so we're we're all good next
there we go so I use this button stack this button has a link by default okay most buttons do
um so go ahead and that will then it by default here it says JavaScript void zero but Compass will replace that with
with whatever um the next link is okay now you don't have to use Compass link
okay it's there for convenience but if you if you read the compass stack you
could just put in a compass previous Encompass next class on whatever you want so I think on yes this page here on page
four of the demo okay um I just I have a button here
okay and I can just add a class to it now here I'm actually using the starter pack button which in order to put a
class on it is a little bit funky so all I figured I'd show that which is why I have this as an example okay uh if you
edit the link you can add the class to the link okay um the starter pack button works it's
just the way things had to be okay um if you're using Foundation six
um you can nicely just go ahead and get a link button okay
um and then um it does it's not styled because I'm not using Foundation six at the moment um but then you can just edit the link
here and you put your class down at the bottom okay so um
you can put whatever again the class could be on whatever you want so you don't have to use the compass
link stack it's just there for convenience uh all you really need to do is put Compass
previous Encompass next because guess what all that Compass link stack does it just puts the class in there for you it
gives you some nice things to you know put in an image and whatnot but um it's a really simple stack
um so if you really want full control don't even forget about Compass link build your layouts however you want and
then use the compass previous Encompass next classes okay and you can actually
have multiple on the page and it'll update all of them okay so um so if you
depending on your layout maybe you want to have them in multiple places it'll update all of them okay so there we go
okay uh oh so uh next up is I told you that
we can import links uh from a URL list so in this particular page instead of
um setting it to be a first menu on page I set it to be URL list
and what you'll notice here is that I have a CSV of page paths okay now you
can't put fully full URLs in here you need to actually just put in just the path to the pages that you want
okay so um again so we have slash slash page two slash so it's it's everything
in your url minus the domain okay and make sure that you include the
the ending slash if you if you uh are using uh cruftless links okay
so very important um and there we go so now I just I can supply this CSV of the order on which
the pages I want to have okay so maybe a lot of these Pages aren't even in a menu
at all right maybe you have this 10-step process and you don't want to have those
10 steps in the menu anywhere so you can you can hide those pages from your menu and then Define all the lists for those
here okay and then based on the page you're on Compass will determine what your current page is and then what that what
the previous and next pages are okay so pretty cool there okay so this is this is actually a
really cool solution because you know there are a lot of issues over the years with compass where someone was like well
I I don't want to use the pages that are the order in which I'm using on my
navigation I want some sort of custom order right so this allows us to do that
okay cool okay I think that does it outside of blog
which will take a little bit of work I I didn't I should have done some prep work on creating a Blog
um so I need to create a quick little Blog Page let's go ahead and uh we're gonna we're gonna do this quickly from
scratch okay uh well I do have some blog data on my sandbox so we're gonna use
that but um let's go ahead and come on where's my
sandbox project
all right we're going to open up uh we're gonna open up this we're gonna create a super simple
um blog oh do I oh no I just crashed rapid Weaver
something on that page isn't doesn't like it okie dokie
okay all right uh let's go ahead and open up my sandbox project I'll make
sure I don't open up that second page sure
all right let's go ahead and do this now let's just go ahead and uh let's
Chuck in a total CMS let's just build a quick blog list page
we have blog list oops that's admin I want content
[Music] blog list all right and uh let's just go ahead I'm
just gonna do something quick let's just add in and yeah I know I already relaunched it
thanks Apple okay uh we're gonna add in an image
and let's go ahead and add a I guess a summary I have no clue what's in my my
test blog okay I'm pretty sure it's blog though is the CMS ID
okay um and let's just add a read more button
I'm just going to leave the default stuff in there we're going to need CMS core
all right and uh okay there we go
all right now I'm just gonna go ahead and create a new page for our blog post page
call us Compass post let's just make the the page so that we know
Compass Dash post
all right and all right let's go ahead and just do this right Ctrl C
paste that in there um I do that we're going to put a blog post
on the page this blog post is going to be blog
okay you have a title let's go ahead and add uh image
and we're going to add summary okay I'm not trying to learn any Design Awards on
this um let's just do pay
uh 48 okay so there's some padding there
all right let's go ahead and preview this so we can save our blog post URL
all right I'm going to save it to yes let's submit that
what is that no clue what that is but whatever
um okay then
oh I want pretty you are okay so one caveat is in order for Compass to work
with with total CMS blog you have to have pretty URLs configured okay so I'm
gonna have to preview this again because I now have to save the pretty URLs now let's go ahead and copy this
oops
all right and we're gonna submit that all right and then we're going to go to
let's just open up transmit really quick
I guess we can we can ah it's fine I already got transmit open
we're going to edit this file edit with transmit
all right and then we're gonna go let's add it
for traffic control stuff all right we're going to save that
close it and quick transmit okay now we're going
to publish okay hopefully I have a ton of projects in this
thing hopefully let's see how long it's going to take twiddle our thumbs
while this is publishing everyone anyone have any questions
no okay
oh I didn't I noticed I didn't uh put in the compass on it well let we'll finish the publish and then we'll make sure
that everything is working properly and then uh and then we'll uh we should be good to
go
exporting still exporting come on now it's publishing only 39 files nice
I thought we were going to be here for a while cool let's go ahead here
and let's bring over Safari come on Safari move over here there we
go and there
oof that machine is sluggish come on
all right so um let's go ahead I not pretty blog posts right but
um there we go vacation dreams test from zapier where's all the I know I had another I
thought I had like a new post for test
um go ahead and uh on home gonna go ahead I think I had some more
posts in here I'm just gonna Chuck this down on the bottom really quick
oops wrong I think I was playing around with
something I I do want to show you actually something as well let's go ahead and change this to the blog
okay and publish that again
oh uh cancel I need this I need the admin core on this page now that I have
uh oh hopefully that doesn't ah whatever
hey I need admin coordinator for the blog list to work and I need I need the license on there
too hey
publish
all right let's go ahead and refresh this page
come on come on Safari cash
what
I know I I put the admin blog list on there
what is going on
oh let me delete this I had it set to be 50 uh height of the browser
so it's probably there it's just it's just hidden and I have over over full of set to
Hidden so oh that's probably where all those other blog posts are that I was expecting to see
funny welcome to live streams
all right let's refresh now there we are look at there's all those
oh there's a couple others all right one thing I wanted I did want to show you okay
um there it doesn't show uh all the blog
posts there are still some I would expect to see like Brazil Olympics oh could be a date thing I don't know what
I was doing all right um one thing I do want to share is that
uh the compass integration um it will
it will sort by date okay um and then it will sort it'll filter
out anything that's archived or draft okay so if you have any uh blog posts
let's see what this one is this this blog list is set to be what
sort by newest posts all posts yeah all posts and then this one is
newest posts yeah hides drafts hides archives and this one
the drafts floral posts archive is hide let's say before all posts as well
whatever um but it has nothing to do with what
we're testing here okay so kind of look at this order we have vacation dreams test from zapier let's go ahead and
click on that we have tests from zapier okay um we need compass on this page now
so uh let's go ahead and do compass
all right so let's do that and uh just for ease of this I'm
just going to use the compass link actually let's go ahead and just uh copy these
we're just going to use this exact layout here
all right so inside Compass we're going to set to be total CMS I'm going to allow looping cmsidious blog
um I do have a setting to show old posts first because by default it's the most recent post that's first
um but I allow you to revert basically reverse the order of the blog list okay so
um again that's just conceptually because you're determining the order right so let's go next in previous uh
and these buttons and inside here I have the class for next and Compass next Encompass previous let's go ahead and
publish this page
all right so let's go let's just refresh this page here okay so I'm on this page test from
zapier we'll notice that I have a next button okay and it's going to take me to
New post for test so if I click on next I will see here that I now have a next
post and a previous post so I can click next and go to the next post right if I go to previous I can go to
previous go to previous again and there you know so works really really well
pretty cool I like it
testing one two three title for me and there's all kinds of someone was playing around with
scenario all right oh I think these blog posts what I'm I had I was expecting to see a lot more images than when I saw it
because I was using gallery for some of these other test ones not the image so there we go but as you see this is a
really great solution um for blog um again just Dynamic super simple way
of navigating in between blog posts now um I should also say that another valid use
for this okay let's go ahead I'm actually going to change this to be gallery image
okay just because yeah um so what I'm going to do here is I'm going to
um I want to show you an alternate while Compass is awesome um the way I've suggested people do this
um is something is different okay so basically what you do is here is on your blog post page you could add right
um a blog list maybe in the sidebar and maybe you only show uh you know
um I don't know three blog posts and then you show um ones that are related right so you
can do things like um you want to filter by author okay
um and then say you know show show related posts or if you did category
okay and you can say show related category from the blog post on the page right
um but this doesn't give you the the exact order right the next previous thing
right which is uh what a lot of people have been wanting um but this is a good you could use both
of these Solutions right so related blog posts with the same category or from this author sort of thing
um but then still have the ability to do the next previous with compass okay so anyway
um I think that does it for today um went a little longer than I expected sorry I had a couple little technical
hiccups today uh both before the live stream and during the live stream so always fun
um so yeah go check out uh Compass it is available now on the website
um so yeah just go to um at least
stacks compass
there we go um this this video as of right now is the older one
um today I will be um recording a new one okay I had to put there and this live stream actually
should show up oh look this live stream right now is already there okay but everything else is uh is already good to
go um so yeah you can go ahead and purchase twenty dollars 19.95 uh new if you're
upgrading from version one you get a 30 discount so um and go ahead leave a review if you
like it I see Massimo already bought it and implemented it this morning actually and uh he liked it he thought it was a
great upgrade so um yeah he figured it out without any videos so I guess it was easy to implement so thanks Massimo
and go ahead and leave reviews um for any stack every stack that you own go ahead and leave a review I would
appreciate it and other users would appreciate because they like to see uh what other people think about Stacks as
well so thank you very much I appreciate it um have a great day everybody uh if you uh have never joined a hangout
on Friday check us out on Friday it's uh one hour from right now but on Friday so
uh whatever that time is for you it's 1 30 p.m Pacific we all hop on Zoom we have a lot of fun we talk about web
design we learn um and that's where a lot of the real cool stuff happens in the and where all
the magic happens so make sure you check us out on Friday and hopefully we'll see you there
so cool thank you very much everybody I hope you again have a great week go out there and make something great bye