Transcript

00:08 hey everybody how we doing
00:15 today I'm drowning in my sorrows yeah you got me actually a little warm let me take this sweater off here oh shoot car
00:23 key one second my I think my son's going to need this car key to go to work one second let me uh I'm going to go uh put this downstairs next to the front door
00:32 one second give me just give me one
00:57 second okay sorry about that
01:09 all right Matias how's it going Mr Cole Ryan is here Mr oil field gas
01:16 gifts oil field sorry oiled field oil and gas gas man I am Tongue Tied today
01:24 gas gifts man that's like a tongue twister oil field oil and gas gifts man that's a a mouthful
01:33 Ryan Franco how's it going bud
01:42 excellent scooty the gezer suy the gezer okay so
01:51 guys as I said my uh did I say in an email I don't know I work three three days on this I am I'm actually quite pooped
01:59 I uh I worked hard to get this site done um by today and uh yeah I literally 20 minutes
02:09 ago I had to run to the corner store to get a little energy boost cuz uh man I I wasn't sure how I was going to do a live
02:17 stream so hopefully we'll we'll be good to go normally when I get when I get going get the juices flowing on the
02:23 stream just starts going hard right so wolf how's it going excellent good to see you Budd
02:31 Mr Len Canterbury I've been to Canterbury excellent that was actually
02:40 one of my one of my favorite little towns in uh when I was in England man that was 18 years
02:47 ago damn that makes me feel old 18 years ago
02:54 okay so so long ago okay let's um so today we are going to
03:01 be building a website from scratch now I already built it okay um
03:08 it did take me a pretty solid two and a half days um and two of those days
03:16 yesterday or Monday and Tuesday were like long days too okay so I'm going to try to condense this down as much as
03:25 possible um I do want to make sure that I kind of go over the whole process I think it it's a simple
03:33 website but yeah I thought it would be fun to uh a build a a website from scratch with Foundation 6 I know that a
03:42 lot of uh new users are coming from Foundry and kind of want to learn the ropes and this a pretty simple it's a
03:48 simple website um and so yeah I thought that would be kind of kind of an interesting idea to just rebuild this
03:55 entire um site from scratch and then um integrate it with total CS 3 now I use
04:01 total CS3 on this because well uh it's I I I needed to build a website
04:10 that was live right it needed there there's nothing to test a product than to actually build something with it now locally I build these little test demo
04:19 websites right but like building an actual web page or an actual website using a tool
04:27 nothing can compare to that right so um yeah last Friday now this website is for a mastermind group that I run uh I've
04:36 ran this group for maybe 10 years now I don't even remember it's been a long long long time
04:43 um and it's just a little website to help manage our weekly meetups okay and um yeah so uh I thought it was it was a
04:52 simple website something that was useful and I got to test out total cms3 okay so it was kind of a win-win win all around
05:01 and without further Ado let's go ahead you don't want to hear me jabber on about this um you want me to share my
05:12 screen all right Kyle he needed a Celsius today too yeah D these things these things are good I I I I've
05:22 resisted watching the videos that tell you how bad they are for you um because man they work uh never have two of them
05:31 though like early on I I banged two of them a couple times and wow that's a lot of caffeine okay so keep it to one
05:39 you're good to go um but because my wife says they're
05:47 super horrible for you and I resist watching the videos telling me why they're horrible for you I try not to drink them unless I I really feel the
05:54 need to so um today is the day um where are we going okay let's go ahead and
06:01 and let's load up this website okay let me log in here oops one second got to go into this and we go
06:09 into there oops what happened there oh that's the wrong one uh that that login
06:16 for the the live site this is my local one actually no yeah no actually hold on
06:25 all right okay all right uh that's the admin portal we want to go to the live
06:34 website all right now obviously um what you're seeing here um this is the site we're going to be building today okay um
06:43 simple little web page right there's not a lot to it um you know it's just simple menu bar up at the top have a little
06:51 mission statement um we'll have like a little grid of meeting notes right so notes from every meeting um who attended
06:59 who missed um and then further down we have like a directory okay so directory of
07:07 people and uh oh I I guess here let me let me let me go over the feature list from from
07:15 top down I guess okay so up here we have the ability to add a new meeting so you can click on that it'll add a meeting
07:22 okay um we have our list of meetings here you can click on this and it'll open up that particular meetings note
07:29 notes okay obviously this is all dummy data okay but uh yeah so we'll have notes
07:36 here um and then you can also search right so you can be like uh you know search for Joe okay and voila right so
07:45 it has a search page you can do a full content search here and it'll search all the meetings and give you the results and then when here you can go ahead and
07:53 see you know the meetings Okay um so yeah there we go okay so that's pretty simple
08:08 with FaceTime or whatever right uh you click on the email it'll send the email um it'll open it in mail.app right or
08:15 whatever your default Emil client is um we click on their person's website if you click on here let's go to
08:23 me right if you click on this this is my goals right um so you have a little bit information about me my my goals for the year my goals for this particular
08:31 quarter okay um and then below we have uh links to all the various social media
08:39 profiles right so if I want to find now in this case I only have it on my card okay it doesn't have any of the others
08:46 but kind of get it so depending on if the person adds that information to their profile um the icons will show up here you notice that everybody does have
08:54 a contact card and if you click on that um it actually opens up a QR code which you if you were to scan that with your phone it'll add the contact card to your
09:02 phone which is pretty cool okay um would be nice to eventually figure out a way to if if you're on a Mac download it or
09:11 something like that right um but yeah uh I just wanted kind of an excuse to use the QR code features in total CMS so um
09:20 yeah there we go total CMS has QR code features if you didn't know okay um and that's basically it uh
09:27 also um with the a the entire site is authenticated so you have to be logged in to access it none of it is accessible
09:34 on the web um and if you click on this edit profile and goals um it takes you to your profile right I know you are
09:43 logged in so I allow you to edit your profile so here you can go ahead and edit all your information and uh we have all of that
09:52 uh kind of in a custom a custom custom form right so this is a custom total cms3 form um and then I've customized
10:09 nice okay I'm pretty happy with how things turned out um okay let's go back to the homepage um there is one there is
10:17 actually one page um so there's a charter page um so again I just built the site this week so uh one thing we're
10:25 we're g to be doing in my meeting on Friday um is we're kind of drafting up a charter for the group it's kind of like
10:32 the the rules of the group right and and you know various standard operating procedures and whatnot right and um so
10:40 this this actual page is will be publicly accessible um because let's say in the future we want to invite someone uh we
10:49 want to send them our Charter so they can actually see it and know whether or not you know this kind of group will fit
10:56 with their schedule and whatnot okay um so just show you here I'm going to log out okay and if I go to if I go to the
11:05 Charter page hey you'll notice that the charter page is accessible um minus the menu
11:13 right it doesn't show any of the menus it's just like the blank Charter page okay um but if you go to any other page if I click on this I'm not logged in so
11:22 it's going to prompt me to log in oops did I did I type that wrong what
11:33 the heck oh I need to be hold on there's there's two level all we'll talk about
11:40 that in a little bit right um and I will go into the when we start doing total CMS um we'll dive
11:48 into the admin area a little bit but at first actually we're going to go over the just the raw design of the website
11:57 okay so we're going to we're going to review the raw design um because before I I integrate total CMS I had to design
12:04 this I I didn't know what I wanted the site to look like um and so yeah I mocked it up using purely Foundation 6
12:11 Stacks okay and uh so without further Ado uh let's close this browser window we're going to open up uh rapid
12:20 Weaver he we're going to open up um so this is the project file now I wanted to uh kind of build this from scratch
12:29 instead of me just going through this project file and showing you um I thought it'd be fun to um build components from scratch and then maybe
12:37 bring in some some stuff from this project file okay um so I'm going to go ahead and uh create a new
12:45 project and uh let's go ahead and add a Stacks page okay and so again this is just a completely blank uh blank project
12:55 file and that's what we're going to be working on okay now um here let's just do
13:04 uh we'll just call this live I'll save it to my desktop all
13:14 right now before I can start designing um something I felt that I
13:22 needed is like something that's important I think to any website okay okay and
13:29 that's uh here let's just bring uh bring here okay something that kind of is is the rock that kind of determines
13:36 everything about a website not everything but a lot right is is a logo right like so um my group as you see is
13:45 called the growth Guild okay and um I was we we needed a name so actually the name is new too before we
13:53 were just a group of people that met and I was like well if I need if I'm going to build a website for us we need a name right so I found the growth Guild okay
14:02 uh.org and registered that this week and uh and so we have a name cool and then I
14:09 I needed a logo okay and um so let me show you the logo
14:15 now I didn't design this logo okay um and it looks it looks a little rough large okay but at a small size it
14:23 actually looks quite nice I think right um I use chat GPT to Design This okay
14:31 and um yeah I figured I'll uh here let me show you exactly what I did let me go ahead I'll open up chat GPT on my Mac right hold on let me put it over here I
14:40 only want to let me find the chat I don't I don't need all my chats uh posted on the internet so there let me
14:47 find the oh okay here right so here is my chat that
14:57 um that I Ed to create this logo pretty much just said I need concepts for a logo for a mastermind group called the
15:04 growth Guild that's all I that's that's what I typed and chat gbt came out and B popped all these things um and uh so it
15:12 gave me a bunch of ideas and I liked this tree uh this tree emblem with roots and branches right I like the concept of
15:20 that idea right because it's kind of like um it's kind of like growth right so I said I love the tree emblem can you mock up some logos for me and its first
15:29 mockup was this and I loved it I was like I really like that okay um and I at first and then I went
15:39 to I said hey can you give me the file and it created this and I was like that's not what I wanted um I I wanted
15:46 this logo and I couldn't actually I could never actually get this particular logo it to just give me that raw thing
15:55 right um so what I ended up doing was um I I loaded this particular image and I load it into pixel Mater and I just
16:03 cropped it and straightened it out and that's all I did for the logo okay um it's just it was purely just me
16:11 downloading this particular image um throwing it into pixel Mater and you know just getting rid of the
16:18 background and as you see in the screenshot the image was a little cockeyed so all I did is straighten it out um so yeah not rocket science as you
16:27 see here here is the the actual image right again pretty simple and this website again it's it's nothing for a
16:34 huge company if if I were to use this as a business or something that was like you know more than just a group that I
16:41 run um I'd probably take this concept and then redesign it using Affinity designer or pay someone to do it okay um
16:50 I do like the concept of it but as you see when we get larger okay um it just it's it's losing
16:58 some stuff right um but like I said earlier I think it looks great small and that's pretty much the only place it's going to be used up at the at the top of
17:05 the site okay now um next up is so now that I have my I my logo
17:14 situated I needed to um figure out the site colors okay um now what I did was I
17:23 opened up the logo here let me just go ahead and open up this logo okay and I wanted in order for my site to if
17:32 this is the the logo for my site I want the colors of the website to be used from this logo right um so what I did is
17:40 I took my uh my favorite color tool it's called color slurp okay and all I did is I just used this Color Picker and I
17:48 picked various colors um from the image and I created a color palette a few shades of green um kind of this gold
17:56 that's around the outside um and a couple different different shades of white okay um I kind of have a very
18:03 light green which is actually here and then actually what what I did was so this is uh this I thought this was going to be my white color but it turns out it
18:12 as it wasn't white enough um so what I par what I did is there were no other versions of white in this logo and I
18:20 didn't want to use white white I I try in my designs to not use Pure White okay
18:26 I always try to tone the color down a little bit whether or not it's um it's just toning it
18:33 down um from here let me for example let's just go ahead and do uh let's go to my grayscale color palette okay um
18:41 and if you see like here is pure white a lot of times what I will do is I'll I'll adjust it now if I want it to be just
18:48 pure white but toned down a trick is to um take your colors and reduce them all by the same amount okay so let's say I
18:57 do 250 250 250 okay um that's fa a lot of times that's actually maybe too much I think 250
19:06 oops uh hold on ah if I can type okay FC is I I use
19:14 that I use FC a lot which is 252 that is very very close to White okay um but it
19:20 just kind of tones down the really harsh brightness of white sometimes okay um so uh but what I did on
19:29 um the growth Guild okay is I I started with this color okay and then um in this tool it has a let's see what did I do
19:38 here here tints um and I just kind of kind of went through this and was like I just want a slightly whiter tint like
19:47 that's pure white this is just slightly off white and that was this color that I used here uh well uh it's not the same
19:54 color I I used these to kind of find a slightly off-white version okay now if you see these these colors are 248 249
20:03 246 um what this does is it actually adds a very I'll bit very minor a very minor
20:10 green tint to this white okay um so yeah so that's how I found my color palette so now I I have my color
20:19 palette that I want to use for my website now let's go ahead and start using that color palette
20:27 okay and and um so over here what we need to do is we need to start with a sight Styles right so let's go ahead and start with a sight
20:36 Styles okay and uh what I do here is uh all let's keep it big uh normally I mean
20:43 I've used site Styles a lot so uh I tend to uh remove those uh distractions um I
20:49 loved them when I started but uh I tend to not need them anymore okay um they
20:56 just kind of are distractions but I do like that they're there uh and some people love them and I do think they're
21:02 great okay um so let's go ah here uh also I I know I'm not going to use any of these extra utility classes I
21:10 recommend you turn that off if you don't think you're going to need them they're on by default for backwards compatibility sake um but yeah uh I I
21:19 turn off the load extra utility classes I love the normal utility classes though okay uh we might dive into those I don't know if we'll dive into that today I
21:27 have a video on them check it out he now our site Background by default site backgrounds for um all Foundation 6
21:34 sites are going to be white and like I said I don't like it to be white so I'm going to go ahead in here and I want it
21:41 to be this color okay so what I'm going to do is I'm just going to take that color and drag it into there okay as you see it saved that color right that's
21:50 actually kind of a cool little trick that I like about these color palettes is you can just drag and drop your color onto the palette and voila you get the
21:58 color okay um max width um I think in originally my tests i h i reduced this to be a th000 pixels and then I
22:06 increased it back to 12200 I I just like 1,00 pixels for a standard site width
22:14 okay okay um now we have our our primary color our color palettes okay and what I want to do
22:22 is um I'm going to set my uh primary color to be this green okay and and then I'm going to use this white as the
22:30 primary text color okay my secondary color I'm going to use that brown and I'm going to use that same white color
22:39 right um let's see for white um I'm going to use this color so if anywhere I'm referencing white um in various
22:47 things I'm just going to use that okay um and then for black I'm going to reference this darker um gray green and
22:58 then my overlays I also want to use the darker green okay and actually we're going to give that like a 70%
23:07 opacity I'm kind of whizzing through some of this stuff I mean a lot of this stuff I took time to kind of do back and
23:14 forths of of my content right um okay so now on my header I'm going to use this color green for my
23:23 headers and then um I forget I think am my text I think I left it black let me just check no I did make the text uh the darker
23:31 green okay and so uh instead of the text being black it's going to be this very dark green voila my links are going to
23:39 be that color okay and then my link hover uh I forget what I did what did I do on link hover I just kept it the same
23:48 color right so link hover I just kept it the same and then what I did do is um I did um when you un when you hover over a
23:57 link it'll underline it okay so uh by default links are not underlined when you hover over them they will be
24:04 underlined okay um uh let me I think I kept 48 and then
24:11 I think I did 36 on my h3s this is something that I mean you'll tweak probably over time right and then here I think I did
24:20 uh 36 there yeah I think that's right uh my buttons I think my button text I did slightly larger let me
24:29 see uh buttons 18 and 20 yeah so here we're just going to do um um 16 oh no uh
24:39 10 12 18 and 20 okay these are uh you can customize the size of your text in in the various
24:48 size buttons which is nice okay um and then my my border radius I increased that to five I believe so uh yeah I did
24:57 that five and my gutters uh 20 pixels 32 I think I yeah those were default okay
25:03 so that's site Styles all done okay um and if we preview uh you'll notice that the there's nothing except the site
25:12 background which is no longer white okay but there we and if we turn on the color palette so you can kind of see
25:19 there's our our colors okay so there we go um actually the text oh it's a darker green oh yeah cuz
25:27 I used the the dark green uh for the text and then the slightly lighter for the headers that's right
25:34 okay um so now my base colors for my theme or my site um are pretty set and
25:41 they're all based on that logo okay now something I am going to do is just to save some time um here we're just going
25:48 to did I do anything there's nothing here it's just a container okay sorry I'm going to refer that other site just to kind of remind myself of what the
25:57 heck I did um um just to kind of make and I added some padding to that so we're just going to add I'm going to add a p24 here just to add a little bit of
26:04 padding around the entire site content okay um and then at the very top we're just going to have this um I'm just
26:13 going to copy this in there and we're going to paste that in oops paste right and that is inside the three column um
26:21 so if we look at this um pretty simple right it's just the um I have a three column stack okay uh and if we preview
26:30 that this is what we're looking like okay so we have um our picture okay uh with our logo we have our
26:38 header uh and then we have a menu okay and um essentially the column one
26:45 shrinks to content um and then the third column also shrinks to content and then the the center column that has this
26:53 header it's just Auto it's going to fill up the rest of the space okay um by doing that essentially um it gives us
27:09 content okay there we go um and I think that's all I did there now another thing that preview
27:16 this I set this preview said I don't look at the stacks so maybe I I redevelop something so um down here I have a uh accent line right just to add
27:25 a little bit of divider so I'm just going to go ahead and check in pop we're going to do that okay
27:33 now if you notice that this divider is not necessarily exactly what we what what I think would look nice so what I want to do
27:41 is uh we're going to go ahead and um let's style that a little bit and so uh here let's just do that uh I'm going to
27:50 go ahead and add in a uh a border Swatch okay and uh what I want to do is I want to style uh the divider
27:59 okay um so I think if I go to elements actually and just do divider is divider in here oh interesting divider is not in
28:06 my list here that's interesting I need to that should be in the list right what I'm going to do is I'm just going to go to CSS I'm going to type HR because I know that's what a
28:15 divider is that's my bad I you know I should have that as a page element since it's a def definitely a foundation element but so I want to style um this
28:24 is going to style all dividers on the page okay and uh what we're going to do is I'm going to um for the color of the divider I'm actually going to use a
28:32 Swatch right so we're we're going to see me do this a lot during this project where instead of going simple and defining a color okay what I'm going to
28:41 do is I'm going to defi I'm going to use a color that's defined inside site Styles okay so um this instead of uh defining the color I'm going to set to
28:48 be my secondary color okay and remember the secondary color is here let's let's enable the colors back so we can kind of see those my secondary color is this
28:57 this golden brown right all right um and then on top of that I think I want I think I you made it a little bit fatter right so we're
29:04 just going to do um and I only want it on the bottom right so we're going to do uh let's see border size was going to be
29:12 two pixels okay and we're only going to do the bottom border and uh we're going to only do the bottom border and make it
29:18 solid right so let's uh let's preview that there we go there's my nice little
29:25 um line okay my little border all right now the next thing that I did
29:33 actually before I even developed all the page content was I I felt I needed to find a really good font okay now I spent
29:43 a long time testing fonts and playing around with fonts and and all kinds of stuff right oh there's an update
29:52 uh I'll remind me later right I won't install that update now while I'm on a live stream don't break things when you're on a live stream um okay
30:01 and uh I use this app called uh right font uh you don't need it though it is not cheap okay um but one thing I like
30:09 about it is um you can actually search and look through all the Google fonts okay um now you can also just go here and go to
30:17 fonts. goole.com okay um and you can PES through all the fonts here another really great resource
30:26 um is and actually use this um for this project okay if you go to type
30:35 wolf there we go okay if you go to typ Wolf um there's a lot of this interesting site where he
30:43 kind of just shows you tons of fonts and font pairings okay and I think on here he
30:51 has let's see top free fonts that aren't oh that aren't Google so here's uh top 10 uh font combinations on Google gole
30:58 fonts okay so here is a oh this was his his paid product which I own I do own
31:04 that and it's good um oh here top 40 Google fonts okay um and so here we go I
31:13 I think I actually used this and I found the the font that I use
31:23 is where is it there it is it's algra sand
31:31 oh here it is uh oh it's very it's at the very top okay so I I chose this I
31:38 wanted um for the heading at the top of the page okay um essentially what what I did
31:45 here is uh let's go ahead and type in the uh growth and actually I wanted it
31:53 in all caps right so it's the growth Guild okay and
32:01 um in here you can kind of you know I wanted a a Sans serif okay I knew I I wanted that and by property I kind of
32:10 wanted I knew I wanted like a fatter font okay um and so you can kind of just kind of peruse through these and and see
32:18 the all the various uh types and how things look right um and if we look here
32:25 this is the one that I chose okay uh Sands bold it's the one that I
32:31 chose and um then what I did is uh so if you go to if you visit this on Google
32:39 fonts uh let's go ahead and oh on my on my on my laptop I got
32:47 used to the new version that has a different layout one second give me a give me a second here
32:55 uh where can I get little panel they changed the layout in this in the tool there's a nice sidebar in the other one in the new version that
33:05 I can like copy the name oh well let's uh let me just here copy this name there
33:14 we go that way I don't remember need to remember how to type it we're going to go into browse Google fonts okay and I think Google fonts if
33:23 we go into this uh Google fonts itself
33:29 has pairings choosing type oh they used to do they not have that
33:39 anymore I guess they don't have that anymore um and uh was it in here nope
33:47 essentially that now what I so I I knew what I wanted this this particular font okay and then what I think what I did
33:54 was I did um pairings okay so if you just search for your font and recommended
34:01 pairings oh here on typ Wolf they have it download oh font pairings uh let's
34:10 see what did this they use that pleas he tell you what font no he
34:19 doesn't uh best font pairing oh I think it was I I remember this site I think yes it was this site so yes I did Google
34:27 algra s's font pairings and I found this page and um I I went through a bunch of these I ended up all just spoiler alert
34:35 I ended up with with Merryweather okay so uh what I decided was I was going to use algra Sands for my headers and then
34:43 I was going to use Merryweather for everything else on the page okay so um let's go ahead and set that bad boy
34:52 up um okay and just to save us a little bit of time I am just going to I'm going to cheat and I'm going to go ahead and
35:07 right in here okay uh we'll look at them but just save me a little bit of time here because I know we're uh we got a lot of stuff to cover
35:15 today so here we have uh I loaded my two Google these are the Google font Stacks that are here okay that come with
35:22 Foundation 6 now I know not everyone can use Google fonts right if you esecially if you're in Germany right um You can
35:29 always download those and use them as Local web fonts or whatever okay for Speed and convenience I just went with
35:36 Google fonts okay um so I chose uh the default font here is Merryweather so if
35:43 you look what I did is I set the Page by default to be um Merryweather okay um normally what I do is I assign a class of
35:51 Merryweather um of the the name of the type face right so that way if there's anything else that I know I specific speically want to be to be a particular
35:59 font um all I have to do is put the Merryweather class and it will kind of be forced to you know get that font
36:06 family um so again pagewide default because I want this to be the pagewide default throughout my page um I assign it a class of Merryweather so if I can
36:16 ever want to use that I can um and then further down you put in uh this edit label is just to kind of give you a uh
36:23 some notes okay this is important though family name Merryweather that has to be the exact name from Google fonts
36:33 okay um and then uh you define what weight you wanted I want this to be
36:40 400 okay so I'm loading the 400 weight of Merryweather for all text on my page then you you can supply a fallback which
36:49 is uh here I I supplied a serif font if you're curious what a serif versus a non-s serif is I don't want to
36:56 go town too far this pathway okay um but so you you'll see things like siif
37:04 and Sans serif I'm not going to go into the other ones script is obviously uh you know script ones right so they're kind of the the more fancy crazy fonts
37:12 okay but a lot times people don't know what a serif and a Sans serif is okay Sans or a serif font okay if you
37:22 look at these fonts that we're looking at here you'll notice that each letter kind of has these tails okay um those are called
37:32 serifs okay so all these fonts like the T instead of it just being a a straight at the top it has these little these little doys right these serifs um these
37:41 accents on every character okay that is a serif font now if we look at a Sans serif you'll notice
37:50 that there are none of that right the T it's mostly I mean there's some accents to some of these fonts right there's kind of some curvature they're not all
37:57 straight lines okay but there's nothing there's no hanging serifs or Chads coming off of the letters so that's why
38:05 these are called a Sans serif Sans meaning does not
38:12 have Okay so yeah Sans siif doesn't have little fancy dooh coming off the letters
38:19 that's a very technical term doohickey okay so yeah these serfs are a sand serpant are pretty much are more they're
38:27 considered to be a more modern um type face now um I personally think that it's
38:34 nice that if you mix up Sans serif and sarif fonts on a web page okay let's go
38:41 ahead and search for um let me just turn off that filter and let's search for Merryweather
38:49 okay um if you see Merryweather is a serif font but the algra Sands is a sand siif
38:58 font I think it's nice to mix up your headers and your your text to be the
39:05 opposite of each other so here um again Sans serf is going to be my headers and then Maryweather which is a sarif font
39:14 is for my default text so there we go okay um yeah little uh text or font
39:22 education there so here I'm Lo loading Merryweather and then in this Google
39:30 font what I'm doing here is um I'm loading in again here let's start at the bottom here my family name is algra
39:38 Sands the font weight that I want is 700 um and then further up I gave it a class of algra Sands so I don't know
39:47 maybe I wanted a button or a paragraph for some reason to be algra Sands I can plop that class on there and voila okay
39:56 then up here at the top I don't want this to be Page by default because I only want this to be default on all of my headers so I checked all of my
40:03 headers now sometimes you don't want your H6 to be the header maybe you want that to look more like the default text on the page so there we go right but as
40:11 you see here you can select all the elements that will be assigned by default you can give it a class um and then you know obviously your font family
40:19 definitions now here I gave this a uh oops this should be a Sans serif fallback font okay because algra Sans is
40:27 a Sans serif font you want your fallback font to be a Sans serif not a serif that
40:33 way um while the font is loading it will display your headers as a Sans serif
40:40 font um that's installed in the system and then it'll convert it to the font once once we're done okay so um now that we've loaded those let's go and
40:49 preview oh and in preview I hate this the Google fonts sometimes they don't load inside so if we preview in the
40:57 browser you'll see now we get this nice uh well I I think it's nice right this nice bold um up here at the header um
41:06 you'll see that now this is uh Merryweather okay uh with my menu now if you notice this isn't this
41:13 isn't really um lining up properly with the logo it would be nice if if the logo and the text were were proper right if
41:20 they were all the same size okay so um one thing I I didn't mention here is my
41:27 picture I set it to be 48 pixels okay it's a circle right so I know it's going to be 48 by 48 so I know that this image
41:34 is going to be 48 pixels tall now um in sight Styles what I did is since I want them to all be the same
41:42 size if you notice here I made my H1 48 pixels tall okay so that means in theory this
41:51 text is the same size as this image okay but why aren't they they they lining up and that has to do with font uh or I'm
42:06 the size of your line needs to be taller than the size of the font itself hopefully that makes sense and so and you see this when I highlight this
42:15 you'll see that there's a bunch of space below and above this and that's because by default um I think this is 1.5 so basically it it kind of centers
42:24 the text in a line height that's 1.5 * bigger than the font itself so how can we fix that so uh what
42:33 we're going to do is I'm going to go ahead and add in a um a font style stack
42:41 okay and um what I'm going to do is I'm going to Target H1 okay uh because I want to Target that particular header another thing if you
42:49 wanted to do what you could do is I'm sorry uh did I add a class oh uh no oh you could add a particular class cl to
42:57 this header if you only wanted to Target this one okay totally possible okay um and uh yeah I'm just going to give this
43:06 um a utility class so let's just call it line height one okay um just that we don't
43:15 you have a default class of my class on everything right so I I tend to uh for the font stuff like to put in something in there uh and then I'm going to turn
43:23 off the text size because all we want now is this line height and I'm going to set this to be one across the board so
43:32 what this is is by setting the line height to one it's saying the line height is going to be the exact size of the font
43:40 itself okay so now if I go and refresh this voila so now my text has a line height
43:48 of one which is the size of the text which equals the size of the
43:54 icon that is starting to look nice
44:04 okay okay so there we go uh we did we did quite a bit already right um so but
44:12 we have a lot of work to do right but this is a good a great start we have a nice start to our page we have good colors we have some nice fonts picked
44:20 out um now I have to agree when I have to say when I built this I actually didn't even have a menu up here I decided to add that later but it's okay
44:29 okay um so next up is uh let's build out our sections of of the pages right so I
44:39 know I want to have my kind of my mission statement up at top and then a meetings area that has all these
44:45 meetings um and then a a members area okay so um let's go ahead and just build
44:54 out that kind of basic structure of my page
45:03 okay all right so we're going to do in we're going to add in a header okay and actually you know there's a there's a new stack uh or
45:12 relatively new stack that I I kind of like uh called Bento Box I I think I've done a pretty decent job with it I like
45:18 it and um what we can do is I'm going to uh create I'm going to add a container in here okay and this container I'm just
45:27 going to make it a uh a section okay and we're going to make it a simple container and uh yeah I think that's it
45:37 right what i is I'm going to add in that we're going to add make that an H3 okay and I know uh this is going to be a um
45:47 let's see mission statement okay um and let me get I'll get back to
45:55 Bento Box really quick but now I have this container now this container I set it to HTML tag of section kind of for uh
46:02 you know this is called something called semantic HTML where um I know that this container is a section of my web page
46:10 right um technically like uh let's see like this Bento Box actually also has HTML tag and I'm going to set this to be
46:18 main um which is this is the main part the main content of my page okay now th
46:26 this really does doesn't make a huge amount of difference um but if you're techy and geeky and really want to go
46:33 all out um we have a lot of fine gr controls like that okay doesn't style anything differently um and you can
46:41 argue whether or not it helps Google index your page or not okay but um yeah it's people that
46:49 are like to be very OCD about certain things so now we have a container each one is set to be a section
46:57 okay and I'm just going to copy and paste that now if you notice um before Bento Box I would I would used the same
47:05 thing I would have done container container container and then I would have added like a margin on on each container okay but now with Bento Box
47:13 what I can do is um I can add a gap in between sections of my page so and I can make them all uniform so what I'm going to do here is I'm actually going to set
47:21 it to be 32 okay so now I have 32 pixels in between each
47:28 section and I can I can quickly adjust that actually earlier I know on the site I'm using 32 but earlier I had it set to
47:35 24 right and now all of that is set on one page right or I'm sorry in one
47:43 location and there's also a Bento Box Swatch and whatnot watch the video on that okay um which you can then assign
47:49 it to a container or something like that okay and then up here um this was
47:57 uh meetings okay and over here this was um
48:06 members okay uh let's go ahead and preview
48:12 that voila okay um so let's start building out what do
48:22 we want to build out next let's build out um I guess I I can quickly add just a a paragraph in there right so let's just quickly add in u cuz I know the
48:31 mission statement is just a paragraph of text right so let's just let's just get her done again right now we're just mocking things up we're trying to create
48:38 stuff right so I'm just going to add in some laurum ipsum
48:45 okay now now we're going to get to uh something that's interesting here so we added this mission statement right and
48:53 and that looks okay but right now it's just this big B ginormous bit of text
49:01 okay and here's a nice trick that I like to do um on my websites
49:09 okay and what I do is I'm going to uh there is a common nomenclature out there
49:16 that says um it is very difficult to read long bits of text like this okay um
49:24 pretty much the the best kind of range where a human can actually read is
49:31 around 65 characters per line I think there's a range it's like 60 to 75 or something like that I personally
49:39 normally use 65 characters okay so how can I how can I make sure that this paragraph is never bigger than 65
49:48 characters okay so pretty simple actually let me close some windows here let's see we don't need that I tend to you know over time get a accumulate
49:57 Windows being open remind me later and I don't need that okay um so what I'm going to do is I'm
50:05 going to add in a um with Swatch and um what I'm going to do here is I'm going to go to CSS okay and I'm
50:15 going to type in P comma UL or I'm sorry UL comma O Okay um and basically what
50:24 what this does is it's going to Target all paragraphs and and unordered lists and ordered lists okay um so yeah it's
50:32 going to Target all of that and what I'm going to do is um I'm going to go into minmax and I'm going to go to
50:40 detailed and under Max unit I'm going to use characters and under Max size I'm going to put
50:49 65 so now I have a minimum size of zero which is fine and then a maximum size of 65 characters
50:57 let's have a look voila so now I have this uh this paragraph of
51:04 text that uh will never go above 65 characters pretty awesome now you might be thinking well what about this big
51:12 huge blob of empty area over here that's okay it's okay to have white
51:20 space embrace it okay I'm get getting a little nervous there's not many people in the chat so if you are um yeah have
51:29 any questions let me know okay
51:44 um looks like I lost some users
51:52 here okay um so now yeah now that I have the
51:59 mission statement kind of done let's let's move down to uh members okay and uh what we're going to
52:06 do is we're going to build out a uh we're going to build out a block grid okay because I just want to kind of a block grid
52:14 of of data so uh so now I'm going to go into
52:22 again I'm going to skip meetings actually this is the order that this is the exact order I did when I built this um I didn't know what I needed what I wanted my meetings layout to be so I I
52:31 went to what was the easiest section of the page which was members because I knew I kind of wanted a member card right so we can see everything so let's
52:40 just go ahead I'm going to go into block grid okay and add that below members and then um inside block grid uh
52:50 I I'm going to do uh on small I want one um and then maybe on medium and large I wanted to I don't remember exactly what
52:58 I did before we can look at that later but um let's start with that and um in my block grid cell
53:05 essentially I want a card okay so let's go ahead and interesting you guys are commenting but my my viewer count went
53:13 down to zero so that's why it uh yeah it's wasn't updating so I was just nervous that people like either the stream stopped or something like that
53:21 okay um okay so now anyway we want a card so I'm going to use this Foundation 6 card and I'm going to draw drag that
53:27 in okay um now I spent a long time I kind of know what I've do doing now uh
53:34 but I spent hours kind of messing around and dragging things here and there and to kind of get the layout that I wanted okay so you're you guys are going to
53:42 benefit from I already know what I did okay for the most part I don't have every setting memorized but there we
53:49 go um and then inside of this card okay I had a I have a two column
53:58 okay uh oh wait uh I thought it was
54:05 a wait what what happened there oh there we go I have a two column inside the card okay um and then on this side here
54:14 I'm just going to for ease of it I'm just going to copy this picture stack so I don't have to
54:20 um we're go over there just going to paste all right put that picture stack over there okay and then over here um I
54:30 I just have a bunch of text here I'm just going to copy this this is just a bunch of text okay uh just to save a little bit of time just a card section
54:38 stack okay which is from here card section um and I have a header with
54:44 which is Jo Workman um and then uh one thing you'll notice that some of this
54:52 content is getting truncated and this can make it hard inside edit mode okay um so a lot of times in Block grid what I'll do is there's this cool setting
54:59 here called Full width in edit mode what that does is it makes just an edit mode it makes it so that card no matter what your size is for your block grid just
55:08 makes it 100% width okay which is nice okay so now we can start playing around with this a little bit
55:15 more now I I played around a lot with how to um display um the phone number email and
55:25 website okay okay and what I what I settled on was the list stack now this list stack actually isn't in Foundation
55:33 it's actually from my starter pack okay and what it allows you to do is it allows you to create a bulleted list okay now by default it'll actually
55:42 create bullets um but I set it to be a style of none okay and another thing that I did is I used the utility class
55:50 um because by default it adds a little margin because normally bullet lists are kind of indented a little bit so I wanted to get rid of that by doing using
55:58 mlon Z which is a utility class for margin left zero okay voila okay I now
56:07 have a link uh a list now uh I did have to in order to get these to be links um
56:14 I needed to type out HTML into here okay um so there is that um but link HTML
56:23 isn't too difficult okay um so yeah there were other ways I could have done this I could have used a menu stack um
56:32 the the foundation 6 menu would have worked um that tends to have some padding around all the menu items and then I could reduced the padding or set
56:39 the padding to zero that totally would have worked and then at that point I wouldn't need to use the HTML in here as
56:46 well um but this works okay uh I was just I'll be honest I was just kind of lazy to have to muck with
56:55 the menu styles get it exactly how I wanted um this was pretty much exactly what I wanted style-wise I just needed
57:02 to use some HTML for for the links and I'm not scared of HTML it doesn't scare me right so um I'm good with
57:10 that okay and if you notice here something that's really oh well before I get into that okay then we have uh I just have a button that is going to open
57:19 my goals um and as as you saw on the web page that opens up a light box so I just used an open goal a button stack um and
57:29 set it to various settings right so uh I set the color to be primary so it used the actual primary color which is that
57:36 dark green okay um I set it to be a hollow button and I wanted to be round
57:43 okay so uh I try to use uh all the same style buttons throughout the site um I do mix Hollow and unhollow buttons um
57:52 but all of them are pill-shaped okay so I they all have the round setting chat uh set okay and then below I have Social
58:01 Links okay um now in here what I did is I just uh have a container and then I have
58:08 svgs okay um and these svgs I got from uh there's all kinds of places where you can use it I could have I could have
58:16 used font awesome 5 it is integrated into Foundation um however what I did is I used an app called nucleo again uh it
58:25 is not cheap I think it was like hundred and some odd dollars um but it just has a oops what did I do there I clicked
58:33 something okay um but it has just a ton of icons so I can search for like you know LinkedIn okay and it just gives me you
58:42 know here's the LinkedIn right right and then I can just right click and say copy SVG code and voila okay so I did that I did an SVG
58:50 stack okay um some cool things that this app does okay uh
59:08 secondary or my link color okay it's this color from here okay if you notice I didn't set that anywhere okay um so
59:16 what I did is if you notice if I add so here inside the SVG I said add link okay if you remember inside site Styles my
59:25 link color are set to be this secondary color okay
59:31 so how did I get um this SVG to follow the colors defined on the page so if I
59:38 if I don't have a link okay this icon is actually going to be it's actually that very dark green okay because it's
59:45 inheriting from the default text color okay but once I added a link to this it
59:52 follows the link color how do I do that okay okay
59:59 um essentially uh there is a cool feature in an SVG where if you set the fill okay if you set the fill to be
01:00:07 current color it has to be set to this exact thing current color okay it will follow the current
01:00:16 color of the um text in that particular area and it will assign the SVG fill color to be that okay now a cool feature
01:00:25 of nucleo um whenever I right click and say copy SVG it automatically sets The Fill
01:00:34 color to be the text color that current color um and that's a that's a feature
01:00:40 in the uh in the settings and it's in the advanced options here so if you have nucleo okay
01:00:49 if you set the advanced options to remove inline colors okay what that will do is by default it'll use whatever
01:00:57 color I Define here okay um but with that setting now when I whenever I say copy SVG code instead of choosing the
01:01:06 colors that I have here or the color that you actually see it'll it'll put in current color for you okay so little
01:01:14 small little tangent I know not everyone is going to have this nucleo app um but if you don't have that uh again it's not too terribly hard
01:01:23 just set the current color again to be or set the fill to be current color in your SVG and then it we'll use that um
01:01:31 that cool little trick okay right so yeah so in here uh this is just a um Social Links uh and then I just added
01:01:39 SVG Stacks one for each social network um and yeah again this is just a mockup so I just added a link and then the
01:01:48 default link is fine because I again I'm not trying to add content here I'm just trying to get my design the way I want
01:01:54 it okay and let's uh let's go ahead and see how this
01:02:06 here okay um so couple things um a these
01:02:12 svgs are ginormous okay um so a couple things that you could do oops I'm going
01:02:18 to go back here okay um well hey let's look at everything else here I have my card okay and my header is good all
01:02:26 these links if you if remember we set uh underscore on Hover to be set right underline on Hover so that's working our
01:02:34 link colors are the correct color um our header is the correct color our uh button is good okay so yeah everything
01:02:42 else is looking good except for these social icons okay so what can we do
01:02:49 now oh you guys can hear my dogs yeah the gardener is here um so they they don't like the gardener very
01:03:01 much is markdown easier for links um yes markdown is easier for
01:03:07 links however um this uh list item stack doesn't support markdown um this this
01:03:15 particular list item only supports HTML so markdown wouldn't help us here okay
01:03:24 um Okay so what can we do here um what I'm going to do is I'm going to cheat a little bit uh just to save a little bit
01:03:32 of time I'm going to go over here and I already have some um some Styles in here right so I'm
01:03:39 going to go into here and uh let's just add in a Swatch a stack above okay I'm going to paste this pen move it up into
01:03:47 here and let's look at this all right so I'm doing quite a bit here okay um
01:03:56 so let's look at this let's look at everything that I've done here so here I have a container okay that I have a class called Social
01:04:06 Links okay and um so what I'm doing is on all
01:04:13 these swatches um I'm either targeting that Social Links container or I'm going to Target um child elements okay so
01:04:23 um essentially what we're going to do now is let's preview this okay so now what we'll see is um
01:04:32 they're a they're all in the line the svgs have been made small um they've also been made by
01:04:39 default their I think 50% opacity when I hover over each one um it changes the
01:04:45 opacity to one and it makes it grow right a nice little
01:04:54 effect okay let's let's analyze how we did that um so the way uh first let's start
01:05:03 off with the size okay um so in here um I'm defining I'm basically targeting all the svgs inside Social Links and I'm
01:05:13 setting the width to be 20 pixels okay easy we've talked about that one let's shrink it
01:05:22 okay um next is uh the padding okay I wanted um I wanted actually you know
01:05:30 what what would be kind of cool is I'm thinking I'm thinking I'm
01:05:40 thinking here um here let's do
01:05:47 this watch this all right I I I want to kind of show you guys the progression because obviously I I built this out
01:05:54 progressively okay so I'm going to say Do not uh post um in here what I'm going
01:06:01 to do is I'm going to remove all of these pop them over here all right so
01:06:09 right now um I'm going to set the width of my svgs to be uh 20 pixels okay and
01:06:17 uh let's go and preview that you know another thing we're going to do is I'm going to go uh no wait that's not what I wanted
01:06:26 there and then we're going to go here okay let's make this uh efficient so now
01:06:33 that I have now I have my preview over here and my stack over
01:06:41 here okay um so now all my icons are good right they're all 20 pixels just by
01:06:48 this one this one uh Swatch okay now how do I make them in line okay so now I'm going to use a display Swatch now this
01:06:57 is definitely kind of a there's different ways we could do this okay um I could have used something like a block
01:07:04 grid okay and then displayed them all out okay I went for a slightly simpler approach and this probably something um
01:07:13 that definitely is an advanced thing and it's only Advanced because I I understand the underlying technology
01:07:21 okay now I understand this isn't true of everybody okay um so that's why we have these live streams okay so let's look at
01:07:28 the structure here I have Social Links which is a container okay and then inside of that I have
01:07:36 svgs okay so when I use a display Swatch and I'm targeting the Social Links class so
01:07:44 I'm targeting that container okay I'm going to set it to be excuse me display
01:07:52 Flex Now by doing that what that does is um it changes the the stacking context
01:07:59 of that container by default as you see things stack on top of each other but you'll notice when I refresh this page
01:08:08 now instead of them being on top of each other they're now directly next to each
01:08:14 other okay now Flex does a lot more but that little tid bit of information can
01:08:21 be very powerful if you have again if you have a container and you set it to be a display flexx all
01:08:28 the contents of that container will default to be directly next to each other instead of on top of each
01:08:35 other so we're getting there right so uh again I set my width first to be 20 pixels so I made all the svgs smaller
01:08:45 then I set the container to be a display Flex so everything is now next to each other okay now obviously we uh we need a
01:08:53 little bit of of pading right cuz I think that that doesn't really look nice we need some stuff in between okay so
01:09:07 bottom and eight pixels on the left and right okay let's refresh and there we go so now each one has four pixel or eight
01:09:16 pixels there's actually a 16 pixel uh Gap in between each one because each one has eight pixels on both sides so that kind of evenly spaces those out rather
01:09:25 nicely L okay um okay so now uh you know I
01:09:31 thought in at this point I thought that these icons were just a little too in yourr face right I mean they're they're
01:09:40 very they're very eye-catching okay so what I wanted to do was at this point I wanted to adjust the opacity of them so I'm going to go ahead
01:09:48 and I I added an opacity Swatch and let's talk about the selector here actually I should have talked about
01:09:54 this in the in the padding Swatch okay um so what I did here is you'll notice that I have the class of Social Links
01:10:02 and then what I'm targeting is the child elements uh Kyle says fluxbox is one of
01:10:13 the hardest modules in CSS to understand yes fluxbox is hard um it is definitely tricky okay um
01:10:21 I'm I'm not going to try to teach all of fluxbox but that one little trick was a nice one okay um so here is a nice little um so I'm I'm targeting uh Social
01:10:31 Links to that container and then I'm going to Target all the child elements again let's visually look at that so I'm
01:10:38 I'm uh I have Social Links and then I'm targeting the SVG stack now if I wanted I could have gone ahead and selected all
01:10:47 of these svgs put the same class on all of them and then I could have targeted that class that's not very efficient right because then in the fure future if
01:10:55 I added a new SVG I'd have to remember to add that class to that as well so um instead what I do is I Target this one container that has a class of Social
01:11:04 Links and then I want to Target all of its children so again here I'm targeting Social Links and all of the children
01:11:13 elements again this is just a strategy of just being a little bit smarter with your swatches because again now I can
01:11:20 add as many svgs inside of this container and they'll automatically get those particular stock FES does that
01:11:27 make sense whereas if I were to add a a class to this SVG I'd have to if I were to add a new SVG stack I'd have to
01:11:34 remember to also add a class now chances are you would copy and paste this and that would do it for you okay but again
01:11:42 why why require a class when we don't need one okay so that's a little Advanced Swatch selector tip there
01:11:50 okay um so here uh in the opacity I set the opacity to 50% so let's refresh
01:11:57 let's look at that and there we go so now um they're at 50% now obviously I think it would be nicer if when I
01:12:05 hovered over it actually made them full uh you know the opaque basically okay so let's go ahead I'm going to add in
01:12:13 another um Swatch and what this does is it's going to use um all the Social Links and I'm
01:12:21 going to use the selector add-on of hover okay okay and then I'm going to set the opacity to one so
01:12:29 now when I refresh and now when I hover over you'll notice that the colors now become fully
01:12:37 opaque and that's nice but I think a um if you notice the transition is a little uh it's a little abrupt right so to fix
01:12:46 that what we're going to do is we're going to use a transition Swatch okay and what this uh what a transition
01:12:54 Swatch is it ows you to transition from one style to another okay so here on
01:13:02 Social Links child elements um I I set the transition speed to 300
01:13:10 milliseconds so now when I when I hover over instead of it being in an Abrupt color change it takes 300 milliseconds
01:13:18 to go from 0.5 to one right so it's transitioning
01:13:25 now I think this it's close but I'd like to add a little bit more Pizzazz that let someone know that you know they can
01:13:33 kind of click and just makes it a little bit nicer and so one thing you can do is you can add a transform okay now that was the last Swatch let's delete that
01:13:41 all right so this transform what this does is it scales okay so what this does I I I'm targeting only the Social Links
01:13:50 on Hover okay and um I'm going to scale to one 1.2 so I'm going to make it 20% bigger
01:13:59 when I hover over so let's refresh and voila now not only do we do
01:14:07 we go from um 50% opacity to fully opaque it also grows to
01:14:14 20% and it all does it in a nice animation pretty cool right I'm really liking how this is is
01:14:23 working so far okay now I think my card I'm pretty happy with it okay um something if you noticed
01:14:31 has very Square edges and depending on your design um you either going to probably go with square or you're going
01:14:38 to go with round corners okay and um so if you go to the card what I want to do is I want to round the corners on this
01:14:47 card okay so I'm going to go ahead and there's something really nice that we can do there is a utility class called
01:14:54 radius you can add it on anything and anything you add it to gets a
01:15:01 radius okay let's refresh oops refresh okay so now if we notice
01:15:11 here I have rounded Corners voila pretty cool right
01:15:25 all right so now what we can do is um you know if we want to fully test this layout a lot of times what I'll do now is I'll just kind of uh you know because
01:15:33 I want to see what this is going to look like when I have lots of things on on there right so let's go ahead and copy this and paste paste a few times refresh
01:15:42 and there's there's kind of like my grid uh and now we start seeing some problems right a these cards are budding up right
01:15:49 next to each other that's obviously not good that's an easy fix though we can go to our block grid stack okay and let's just add some gutters okay gutters on
01:15:58 the top and the bottom and let's refresh right there we go okay so now we have uh
01:16:04 some nice gutters now this gutter here I'm pretty sure actually this uh uh these cards
01:16:13 okay let's go ahead and go back into the the one card okay um I'm going to go ahead and Shrink this Social Links so it
01:16:21 doesn't take up lots of space in edit mode I'm going go to this card and I'm it has a bottom a bottom
01:16:28 um margin okay um and so what I'm going to use I'm going to use a uh MB colon zero on that
01:16:37 okay and um now I'm just going to take that block grid cell and I'm going to paste it
01:16:45 again there we go all right so now you'll you'll see that now it's nice now all the gutters are equal right it's the
01:16:53 little things you got to pay attention to right that I didn't like that and how did I know that there was a bottom margin okay let's let's go into that
01:17:07 all of those right that's right so I'm going to let's go to this card again and I'm going to delete this utility
01:17:16 class right and let's just refresh that so if you notice here the Gap is bigger now okay um so
01:17:25 I'm going to open up the dev inspector um so yeah if you just go ahead and click on this card we can kind of just
01:17:32 kind of go up and voila margins are always going to be orange in this Dev ins Spector okay and you'll notice that um when I hit this the card component
01:17:41 and we know it's a card because it you can kind of tell from the code right this is div class equals card radius remember we did add the radius class
01:17:48 ourselves um and when I do that you'll notice that it has a bottom margin okay and you can actually go if I click on this card you can actually see all these
01:17:56 are all the styles that are applied to it okay and if we scroll down we probably should see oh here margin bottom one REM and we actually if I go
01:18:05 ahead and turn that off we can see I can turn that style on and off in the dev inspector okay um so I know if I if I go
01:18:12 ahead and set this to be zero voila it sets margin bottom to be zero everywhere okay and so in order to
01:18:20 make that that um that change permanent there's two things I can do I can use use a utility class like I did here MB
01:18:27 colon zero uh that's probably probably my most used utility class is MB colon zero margin bottom zero um and or
01:18:37 another thing is I could added a um a margin Swatch set it to be zero and then applied that swatch to the card you know
01:18:45 but yeah mix and match whether or not you want to use a Swatch or some utility classes the utility classes can be
01:18:52 definitely useful okay so um there we go I just noticed we're at like an hour
01:19:01 and a half almost and I still have a long ways to
01:19:10 go oh Steve asked me about the greater than sign okay you know I I was gonna I was going to glance over that Steve but
01:19:17 you caught me okay um okay
01:19:25 um he caught me good one good eye Steve man keep me on my toes okay um I'm just going to go back
01:19:32 to one card just to reduce the Edom mode okay um for those that that maybe didn't
01:19:39 know okay or that didn't see um right so it was in this particular
01:19:46 one uh on this hover Swatch okay um a uh so let's let's stop and let's look at
01:19:55 opacity okay um so in this opacity Swatch um I used Social Links and if you notice I used um the child selector
01:20:04 elements um selector add-on okay um and one thing that is nice about
01:20:14 swatches okay is that um I inadvertently or I sneakily let's say I sneakily
01:20:21 attempt to teach you a little bit of CSS okay because while over here you can put in a class name and then you can you
01:20:30 can choose this thing called uh child elements what you'll notice is over in the Swatch over here it actually shows
01:20:38 you the exact CSS selector that is used what does that mean what that means
01:20:46 is um it's the same as if I were to go um over to here and go to the CSS mode and if I were to type in that same exact
01:20:53 selector so was do sociall links um greater than star okay oh uh i' have to
01:21:03 set that to be none okay essentially now this Swatch is the same exact thing that that that I did
01:21:11 before okay it's just a lot of these little settings that I build for us they're it's kind of like a CSS selector
01:21:17 Builder right okay so when I choose uh child elements well first off let's go to none okay
01:21:26 oops so um by default if you just add a class you'll notice that um what the Builder does is adds a little dot in
01:21:34 front of there so it it knows dot in CSS is to the way to define a class that we're targeting something with a class
01:21:42 so dos Social Links targets anything with a class of Social Links okay now
01:21:48 when I added on the child Elements by the way a small caveat uh I don't this
01:21:55 month or last month I released a update that changed this from pseudo state to be selector add-on I really like that
01:22:03 change um I don't know if you guys do but yeah selector add-on just makes sense so for this selector add-on I chose child
01:22:11 elements and if you let's look at what that did okay um so it did CH uh Social Links uh greater than
01:22:20 star what this does is it f is it says um star obviously if you don't know means anything okay so star means
01:22:30 anything now what the greater than sign says is it's anything that is a direct
01:22:38 child of Social Links um so if I were to change this
01:22:45 selector add-on to be all descendants okay you'll notice that that changes to just be space
01:22:53 star okay what's the difference between those let's have a look over in the dev
01:23:01 inspector okay um all right so let's let's look at the exact exactly what we're looking at
01:23:08 here okay um so let's find uh here it is here is Social Links
01:23:16 okay I actually don't need I close that no it's not that is it this no I'll just
01:23:22 do that okay so here here we have Social Links okay and if you notice inside of
01:23:29 Social Links I have all of my little icons okay now inside of there um I there's a lot of other stuff there's a
01:23:37 link and then inside the link is an SVG and inside the SVG there's even more stuff okay now uh let's go over here
01:23:45 when I say OPAC uh Social Links space star that means all descendants okay so
01:23:53 what that means is is it not only Targets this div but it also Targets this link this SVG this uh group SVG
01:24:03 group this SVG path it targets everything okay now for something like um opacity that probably doesn't matter
01:24:12 but if you're using something like margin or padding or border or background color or something like that right um You don't want to Target every
01:24:21 single child every single descendant okay so in this case what I I only want to Target this div I only want to Target
01:24:29 this and this and this and this and this so in this case I only want to Target the direct children of Social
01:24:40 Links so uh and that's what that carrot does okay or I'm sorry that's what that greater than sign does so when we choose
01:24:47 child elements and we do instead of space star we do greater than star okay what that does is it finds anything that
01:24:57 is a direct child of Social Links okay hopefully that is hopefully that makes
01:25:04 sense okay now let's go to this um opacity on
01:25:11 Hover okay um so normally when when I do a hover style um here let's I'm going to delete this and we're going to recreate
01:25:19 it normally when I create a hover style I copy that swatch the original original state and I paste it
01:25:27 okay then I make adjustments to what I want on Hover so in this case I want my opacity to be one okay and then normally
01:25:36 what you would do is you you would change a selector add-on to be um hover
01:25:44 however let's look at what this does right I'm going to refresh this page if you notice that doesn't actually
01:25:53 work right it's not working okay because I'm I'm targeting Social Links itself the container I'm not targeting the
01:26:01 children at this point because I Chang my selector add-on from child to
01:26:06 hover okay so um what that means is I I need to I need to muck with this this
01:26:14 selector and and find a different way to Target the um the svgs when I hover now
01:26:22 one thing I could have done is I could have done uh oops darn it I closed that didn't I let's let's refine those things all
01:26:31 right um if you notice in here I could Target there's SVG has a class so I could have done something like this
01:26:38 Social Links space um SVG okay and then done um
01:26:47 hover right that could that could have worked okay and that does work okay there's a
01:26:54 lot of different ways to do this okay um but what I did was I already knew um again let's go back to I started with
01:27:03 this Social Links um oops uh save that Social Links greater than um star and
01:27:10 that gets me all my child elements but how can I get hover how can I mix child elements and hover at the same time
01:27:18 because I I I need to use both selector add-ons okay um so what I is I just did something tricky and I just took the um
01:27:28 greater than sign oops I just took the greater than sign and I could have done greater than star okay um and then set
01:27:35 this to be hover and at that point this would this would work as well okay so let's go ahead and refresh and that does
01:27:43 work okay um but I I I just because I know CSS uh I I knew I didn't need the star um and I just needed to have a
01:27:52 greater than sign um and so what this says is um Social Links uh uh greater
01:28:07 style okay so and that's what I ended up with on the on the site um and what I
01:28:14 had earlier and uh and yeah Stephen you called me out okay so that was a nice
01:28:20 five or 10 minute tangent there okay if you ever need to if if you just
01:28:30 do um okay um you've probably seen me use
01:28:38 this app um if you've attended my live streams at all or hangouts um this is an app called Dash
01:28:47 um you can also just find all of this online Okay um it's all on MDM web docs
01:28:54 okay um but Dash just integrates it and it's all local on my Mac um and I can search it fully okay and it has I use
01:29:02 Alfred and integrates with Alfred as well um but yeah you can just search here and do selector I think it's selector list
01:29:11 and um is this one that has all no this isn't this isn't what I wanted
01:29:26 uh types uh Universal selectors ah here right
01:29:36 um well that just tells you about ah there is a I know there is
01:29:49 a oh there is a CSS Doc Page I mean I it's all in my brain now but I know um for a while I used to reference it every
01:29:57 now and then before you know uh that kind of showed you all those little things the greater than signs and there's other ones okay some of them are
01:30:04 there's like a little TIY one that is like a a brother um or next two basically um which is useful sometimes
01:30:14 um oh there's a plus sign um as well which is good uh I guess this one has some of it but anyway uh also hold on
01:30:22 one second let me uh me share something I I've preached this book a
01:30:34 lot okay it's um HTML and CSS by John Ducket okay um I think there's one
01:30:41 chapter in this book that is now kind of obsolete um but for the most part um this book is gold okay um it is like no
01:30:50 other technical book you've ever seen okay it's like a it's like a coffee table book okay it
01:30:59 literally is like the most approachable technical book I've ever seen um and it
01:31:05 is it is a brilliant way to learn CSS okay brilliant now I I I've boughten
01:31:14 like four versions of this book or four the same version but for books spend a little bit extra get the
01:31:21 hard cover okay um the bindings on the soft cover book are not fantastic okay
01:31:29 um so yeah on am this book is cheap on Amazon spend a couple extra bucks to get the hard cover okay um if you didn't buy
01:31:37 the hard cover already sorry uh eventually your bindings on your soft cover I've gone through two or three of them okay um I I I'll be honest I don't
01:31:46 really use this book any longer um but it is gold right check out this book
01:31:52 HTML and CSS John Ducket it's awesome okay all right uh let's get back to
01:32:03 sharing okay um
01:32:13 okay what was I doing now oh um okay I think I think I'm pretty happy with the cards right um
01:32:25 let's see what else did I uh let's just preview this page
01:32:34 um yeah all right so now let's move up uh you know I I can create these little edit profile buttons those are
01:32:42 pretty simple um again we're we're going to all we we can start mocking this up
01:32:50 this page up now actually um let let's move to actually We'll add these little uh these little buttons here I've actually changed this a little bit on the final site I'll have this new
01:32:58 meeting it's I have it a little SVG over here so we'll tweak this up a little bit to kind of get uh the final you know uh
01:33:05 this final page done oh one thing I okay um I I wanted to add some um some some hover styles to the card itself
01:33:14 okay um so I'm going to do is here what I do on that oh okay
01:33:21 yeah um what I do here oh interesting uh sorry just
01:33:29 reminding myself of some of the other things that I I did okay
01:33:38 um I'm going to copy these Styles okay and um I'm just going to paste them into
01:33:46 here right uh I'm not going to dive into every single one of these Styles okay but let's go ahead and review what I've
01:33:53 done a little bit right um oops so this uh targets member card and inside here
01:34:08 notice it instead of that remember earlier I added this um this utility class mb0 okay um here I just had member
01:34:17 card I actually have a margin Swatch that sets margin to zero there we go okay
01:34:24 um so let's refresh that so now voila okay you'll notice now that when I hover okay let's close that when I hover we
01:34:33 get a nice effect but if you notice something here you'll notice that that shadow gets cut off okay um so let's go
01:34:41 ahead and if we look let's go ahead and on this container okay uh I'm actually going to do it on all of these uh
01:34:50 actually let's just do this one container I'm going to set overflow to be visible okay on that refresh
01:34:58 that oh it could be on uh where is where is
01:35:12 that oh actually it's the bottom of the web page I think interesting yeah if I were to add
01:35:21 in uh did I what did I did I add some I thought I had some pading here
01:35:29 hold on one second yeah it should be
01:35:39 interesting oh there's overflow hidden it's on this bad boy here all right so
01:35:47 on this container overflow visible
01:35:58 come on man all right let's see let's keep going down uh let's see we have this container here overflow
01:36:12 visible oh wait oh oh I'm looking at the wrong wrong project file oh Jesus I was looking at the old one uh
01:36:21 okay uh visible all sorry my bad go on this one uh overflow
01:36:30 visible there we go okay helps if you open if you change make the setting changes on the right
01:36:38 project file okay um so there we go um so here we will see that when I hover over the card um we get a shadow and
01:36:47 also the the card kind of lifts up a few pixels right it gives it a quite nice effect okay
01:36:55 um so let's let's just look at that really quick so um here I I provided a maximum height to
01:37:04 the um to the cards okay um and why did I do that I don't
01:37:12 remember now um here we do the Shadow on Hover I'm not sure that actually is doing anything useful
01:37:24 yeah interesting 1 th000 pixels minimum
01:37:32 100% oh okay um yes uh this this Swatch actually isn't even useful anymore I was that was
01:37:41 from I was playing around with some other ideas okay um Shadow so here we have a um a default Shadow actually here
01:37:48 let's do uh actually there is no Shadow by default okay and then on member card on Hover right basically I'm adding uh
01:37:57 and the shadow if you look the shadow um is using a actually you know I should do a use a Swatch color and then you can actually use uh
01:38:06 let's say I want the primary color okay and that way uh the Swatch uh the shadow
01:38:12 always follows the colors from sight Styles right one thing I don't like
01:38:19 about that you we could probably tweak that a little bit is that um it makes it very harsh right so what I had done is I
01:38:27 used that the same color from uh primary but then I made it opacity 40% right so
01:38:34 that um it makes the shadow much less harsh um you could probably tweak these settings a little bit though maybe increase the blur and decrease the
01:38:42 spread a little bit to kind of make it so um that color isn't quite as as
01:38:49 harsh um so anyway so yeah there is a shadow on Hover and just as before if you notice the shadow kind of animates
01:38:57 it's not like an Abrupt change okay um I used a transition Swatch we already learned what a transition is and then I
01:39:06 use a transform Swatch um to make it rise up by two pixels okay so in
01:39:12 transform I use move and I move on the Y AIS negative pixel negative -2 pixels up
01:39:20 okay so yeah so I'm moving -2 pixels up um and I I left all the other uh settings uh
01:39:27 default and one thing I also did is uh by default board uh cards have a border okay uh if I just go ahead and here just
01:39:35 show you I we'll disable that okay cards have a border okay and um W they they look actually it makes it
01:39:44 look nice uh it doesn't look nice when you have the shadow um so yeah I what I did is I just added a border Swatch and
01:39:51 I set the Border uh it border size to zero pixels so you're setting I'm setting effectively removing the border
01:39:59 from the card okay and uh there we go it gives it more of a flat look um when
01:40:07 without the shadow um and then it I think it looks nice so there we
01:40:14 go okay um so there is the some nice effects that we did for the card um let's look
01:40:23 at some some other things that I did okay um let's look at the uh open goals okay so this button um I like
01:40:31 Hollow buttons but I thought it I thought would have been nice when I hover over the button it kind of um flips the colors okay um so let's have a
01:40:41 look I I'm going to copy that and this is a really really really simple one okay um so on this button I
01:40:50 have a class set to open goals okay okay and something that I I like to do um
01:40:56 when I remember okay is uh when when something has a class I put that same class in the title so that I can see
01:41:05 that this uh button has a class of open goals right so like on this card uh when I added member card okay I should have
01:41:13 added it to the title okay and that kind of when I when I'm looking at my um stuff I can see um all the various
01:41:20 classes that I can Target things with okay so if you see down here I have Social Links okay uh on the button I
01:41:27 have open goals um and then in this in the card I have member card right so now I have all various things that I can start
01:41:36 targeting so if we look at the open goals I have a background and a font color swatch so um basically uh what I
01:41:44 did is I did open goals on Hover and then I I set the background color to be the primary color and then on for font
01:41:53 color I did on Hover set the uh color to be the white color and again I I'm using the Swatch colors here so that um if I
01:42:02 were to ever modify the colors and sight Styles um it's going to just reference those colors super useful uh you can
01:42:09 define a custom color but then at that point it's no longer linked to your kind of your site colors right so um I like using these Swatch colors as most as
01:42:18 much as possible okay um so now let's refresh this page now when I hover over this button uh we
01:42:25 get a nice U kind of uh effect where uh again the background color changes to be that uh that primary darker green and
01:42:34 then the goals are uh the text color is white pretty nice
01:42:43 okay um now the last bit here
01:42:50 is comes into effect um I'm going to show you the problem that I had now right now this card looks
01:42:58 I think looks amazing okay I think it looks pretty awesome uh and uh at this point what I
01:43:05 did was I then um oops uh I'm I'm going to take this right and
01:43:13 we're going to duplicate this multiple times just so I can start testing um this page out uh with multiple cards I
01:43:21 think it looks I think it looks great right right but then you start playing around with okay now we need to make sure it looks good everywhere it looks
01:43:29 great on desktop right but how is it going to look when I start once I start
01:43:36 shrinking oh no what happened now uh I can refresh and oh man what the heck's going on this starts it starts looking
01:43:45 horrible right uh so what are we going to do here you know it it looked really good when
01:43:53 was on a big screen uh when the image was bigger than the text okay it looked great but once we
01:44:01 started going down starts to not look great
01:44:07 okay so what are we going to do
01:44:14 here this next bit um took me a long time okay um and I'll I'll show you a
01:44:23 there's a cool tool um it is not cheap okay um it is even subscription
01:44:30 software okay um and uh it is pretty nice though I have to
01:44:37 admit I I sometimes I forget that it's there um and I forget to use it myself um but it is a it is a special browser
01:44:46 called polyan okay and um what it's really good as it kind of shows you
01:44:53 your pages um across a lot of devices all at once okay now you could use um
01:45:01 the simulator windows in Rapid Weaver okay uh definitely possible um poly pane I think is nice
01:45:09 but again it it is not cheap okay so you might uh you might just be fine using the dev inspector and um using like this
01:45:17 responsive view okay in the dev inspector okay where you can be like okay I want how's it going to look on an
01:45:25 iPad Pro now right and you can start seeing this okay so um I admit polyan is
01:45:32 a luxury right and it is a subscription a yearly subscription I bought it Black Friday last year um and I said I'm going
01:45:42 to use this for a year see if I like it and I have to admit I kind of forgot about it for a long time and it just
01:45:49 kind of fell by the wayside um however when building this site over
01:45:58 the past few days it was actually a it was really nice okay I I really did like it um it was a huge benefit what I do is
01:46:06 and what I did is I actually added a fourth view here um and I added a small iPad Mini
01:46:16 okay so I kind of had this this view was kind of like my view right where you have small iPhone um actually instead of small tablet what it is I set this to be
01:46:25 um iPhone 16 uh here let's do this one is like a iPad or iPhone what's the oh here the mini right
01:46:33 so yeah here we have the iPhone 12 mini iPhone 16 Pro an iPad and then desktop what's kind of cool is it kind of syncs
01:46:42 the scrolling uh it it it's a nice app okay again I'm not going to sell you on this app um because it is expensive but
01:46:51 it's nice right allowed me to quickly debug this stuff and really I think it looks okay on on small devices um but
01:47:08 okay um and let's go over what I did to fix
01:47:15 this uh let's uh how do I exit this mode there we
01:47:20 go all right so let this mode here right just looks
01:47:27 garbage so let's analyze this layout a little
01:47:33 bit okay um so here I have a block grid oops let's just open up the top one okay
01:47:42 I have a block grid and um and a two column right so there's two things I can kind of break here um and if you notice
01:47:50 in this two column um I had it set to 12 and then um so column one um on small
01:47:57 devices it goes full width and then on medium devices it uh basically it splits
01:48:03 50/50 okay now let me remind myself what I did here okay oh
01:48:12 yes okay um this very interesting okay
01:48:24 and then that was I remember photo yep yep yep yep yep yep right um so a couple things you'll
01:48:33 notice that in here I have a link container um and the reason I did that is that um essentially uh what I wanted to do is if I clicked on the person's
01:48:42 picture or on the goals button it would open up their that person's light box okay so um that's an easy fix right so
01:48:49 let's let's let's add that really quick um let's just go ahead and add a link
01:48:57 container and I I did put a a class of member Das photo on this okay and I'm
01:49:05 going to add that there
01:49:12 okay and let's just copy that paste it in there okay
01:49:19 um so now uh eventually when when I go to to create this I can I can configure this link to open up that light box
01:49:34 okay trying to think of the best way to do this without taking an hour to to to go through my entire
01:49:41 thought process of of this um because again this this bit took me a
01:49:49 lot of playing around and ideas and uh I first I I chucked this whole thing and I tried to do it with Bento um which kind
01:49:57 of worked but I kind of like the Simplicity of this this layout and I wanted to make it work okay um so I
01:50:05 think what I'm going to do is let's let's analyze um what I did here and I'll tell you why I did it okay
01:50:14 um all right so let me just review let's see this
01:50:23 block grid okay so in the block grid um this is probably the simplest thing um I went from small in medium is one column
01:50:32 and then large is two column okay so uh let's make that change first okay so in this uh in this block grid I'm going to
01:50:40 change my medium to be one so I'm going to one column for small and medium and then large uh I'm going to break up to
01:50:49 two now let's have a look at what that looks like all right so uh here on large we go two
01:50:56 column and then once we hit medium it goes to one column okay uh and then small it goes to
01:51:04 one column as well okay so that that's actually I think a pretty decent workflow right I think that I think that
01:51:11 that looks a lot nicer so that fix actually I didn't I didn't do that fix first I tried a lot of other complicated stuff
01:51:19 first that that actually is really nice really simple small change and if you notice it it actually
01:51:27 completely changes the layout a little bit just by that one simple change because we kind of have two styles of cards right now right if you look uh on
01:51:36 here we have the image and then our content okay and then on small the image is on top with our
01:51:44 content okay and then on medium um it goes from it goes to one but it's side by side
01:51:52 side so it's not as tall right so we kind of have three different cards here just with that one simple little
01:52:02 change okay now one thing we need to fix is um this image like right here it's
01:52:10 not it's not working too great okay so and that is a little complex
01:52:18 okay um so let's go ahead and I'm going to copy I'm going to do what we did before and I'm going to I'm going to take all these swatches that are here
01:52:27 that are assigned to member photo okay we're going to paste them in here and actually you know what I did uh
01:52:34 what I liked before is I'm going to um I'm going to say Do not publish any of these okay uh and now actually I'm going
01:52:41 to go into here all right um and let's just go ahead and all right so now uh what I'm
01:52:50 going to do is I'm going to move everything up uh one at a time okay um so we can kind of see the
01:52:58 difference um of what we're doing okay let me talk about conceptually what what I plan on doing first okay right
01:53:08 now um this First Column okay is uh controlled by the size of the
01:53:17 image right and if I shrink this uh if I shrink the browser okay that means the size of of in this two column the size
01:53:26 of the columns remains kind of static right it's 50% but this image because how images scale is when
01:53:35 you when you make it more um narrow it shrinks right because the image
01:53:42 scales right and it it's set to display the entire image all the
01:53:49 time so what I plan on doing is I'm actually going to make this First Column here
01:53:57 static okay um so uh it's just going to be a static size it's always going to be the same
01:54:08 size of the card hopefully you see that right if we go down again look the image is the same
01:54:16 size it's just the content okay and then when I flop down a you'll notice that the cards oh that one kind of oh this
01:54:25 one got a little funky for some reason with that image but in this image here okay you'll notice that um it doesn't display the
01:54:33 whole image um and it only displays kind of a portion of the image okay now something happened in this particular mockup not sure I I must have fixed it
01:54:42 in a different location okay um but yeah there we go I'm thinking this uh this mockup
01:54:51 actually I fixed some of those issues on the non-m mockup page okay I might be jumping ahead of myself a little bit
01:54:59 okay um so let's review this okay um and actually to do this let's look at my two
01:55:07 column settings okay so in in this two column settings
01:55:13 um column one on small is going to be 12 okay and on medium it's going to be shrink to
01:55:20 content okay because let's say on medium and large it's just going to shrink down to the size of this one column and I'm
01:55:27 going to statically set that size of the column okay um and then in column two it's just
01:55:36 always going to be Auto so column two which is the content it's always going to be it's always going to grow as much
01:55:42 as it can to fill all the space right so let's make those changes I'm going go into column this two column
01:55:51 I'm going to set it to be uh instead of uh 12 on small and then medium it's going to be shrink to content and then
01:55:58 uh the second column is always going to be Auto okay essentially having it uh uh
01:56:05 how it was uh 12 on small and then Auto effectively the same thing okay but um
01:56:13 yeah we're just going to set to Auto on everything just to keep things simple right so now we've done that
01:56:22 now um what I need to do is as I told you before I'm going to set the width of the of this member photo okay I'm
01:56:31 setting it to be 192 pixels okay let's see what that
01:56:44 does okay actually in this case um it's only this card remember I can't I have a lot of other cards just focus on this on
01:56:52 this one right here okay so as you see that is uh oops this
01:57:08 object fit okay because what we want to do now is we want to take this image and have it fill the
01:57:16 container okay um and we need to do a couple things um
01:57:32 first is member photo okay I want the member photo which is this photo I want it to grow to be 100% height okay so
01:57:41 here I set the height of member photo to be full container height so height
01:57:48 100% then what I'm doing is I'm targeting the image inside of member photo and I'm setting it to be cover
01:57:57 essentially I'm taking the image and turning it into like behave like a background image okay and then you set the position to be Center Middle
01:58:06 actually these settings are the default settings okay for object fit so um and let's have a look at
01:58:12 that right so now again I set in member photo I set it
01:58:19 to be 192 pixels I set it to be 100%
01:58:26 height and then I set the image to fill the container and Center itself even if that means cropping some
01:58:34 of the image and as you see it looks different than this over here but now as I shrink it looks good
01:58:43 okay well it doesn't look good on small yet we're getting there okay okay because on small we have it set to be height 100% that's not what we
01:58:53 want right so um I have another um another thing here called height third
01:59:08 height so now when I when I refresh okay and I go back to small you'll notice
01:59:17 now okay the small container is uh it it takes 33% % height and but the image is
01:59:24 still kind of filling the container and centering itself pretty
01:59:35 cool okay um now have to admit I'm not sure I I recall what happened I'm not sure what happened down there uh it doesn't happen
01:59:43 on the on the prod site we'll look at that in a second whoops didn't mean to do whatever I just did that was an
01:59:50 accident okay okay here let's quickly look at that what did I do
01:59:59 there something that's useful some sometimes when you're debugging stuff sometimes you can put the inspector on the side um especially when you want to
02:00:07 debug um small view um
02:00:16 so wonder if it was in that card remember I think I I deleted a uh I
02:00:23 think I deleted something that member card I think it was this height Swatch let's see does that fix
02:00:37 things nope that didn't fix it remember card
02:00:45 okay what did I do here
02:00:53 oh it's still way over there that's weird
02:01:03 oh okay instead of that two column being Auto if I set it to be 12
02:01:15 Auto okay that worked and then
02:01:28 this small 12 medium shrink that's
02:01:36 correct uh let's look at this two column what did I do here
02:02:10 right uh what vertical alignment what if we did top that actually would probably do it oh but then that that's not what
02:02:19 we want
02:02:40 I remember running into this yesterday let me let's set that back cuz
02:02:48 that obviously oh I did refresh
02:02:57 I recall fixing this yesterday but I think I did it after I was in out after I was out of the mockup phase I think I
02:03:03 fixed it but um here I'm going to I'm going to cheat
02:03:13 a little bit here uh let's go back up to here which is the final page it m card
02:03:29 open walls you know for fun I'm just going to I'm going to copy
02:03:37 this let's go to my mockup
02:03:52 still not
02:04:07 fixed oh it's meetings down
02:04:17 here oh it's meeting notes on 111
02:04:23 gutters vertical line stretch looping up
02:04:32 cell 12 12 12 Auto oh yeah I did do 12 Auto there
02:04:53 oh man here I am doing the wrong project file again it's all
02:05:01 good idiot all right let's go back to this one sorry paste in
02:05:11 there oh same exact Behavior right
02:05:25 all right uh let's all right
02:06:01 H it's stuff like this that can take me a half hour to figure it out or something like that um I don't want to waste your time I obviously did figure
02:06:09 it out in the final project I do remember this what was it though that is bugging
02:06:18 me uh let's go ahead and let me just preview this page because this page doesn't have the
02:06:27 problem right oh oh it does oh let's go to the homepage oh oh let's let's go to the
02:06:36 actual live
02:06:47 page oh I remember now um
02:06:54 uh I remember now uh let's go to oh here
02:07:02 yes I have this sneaky little Swatch at the bottom of the page I used equalizer
02:07:09 okay that was stressing me out here all right um so I used an equal here just copy that that's why you keep your stuff
02:07:18 together um actually here all so what I did is I used the equalizer
02:07:26 Swatch and I targeted um the class member grid okay which is um this here
02:07:33 let's um I added a class to the block grid itself okay called member grid so I'm going to do member Das
02:07:42 grid let's add it to the title because that's always good okay and then
02:07:49 um I targeted the uh equalize class uh
02:07:53 card column okay and that
02:08:01 was where did I put the card column class okay I put it on um on the member
02:08:11 photo I have a card column class and then in this card section I have a card column class okay and essentially what
02:08:21 it's going to do is it's going to uh set the height of the member photo to be the same height as the card
02:08:29 section okay and actually you know what now that I'm thinking about this solves a different problem that I didn't run
02:08:36 into I think right but it's fine this was a something that I
02:08:50 did see how that that works was it this
02:09:02 one oh also I think part of the problem is that okay let's go ahead I'm going to
02:09:10 delete
02:09:27 what that equalizer Swatch did uh okay um what you would notice is without that
02:09:35 equalize um if we were in this view here if you notice uh well if if let's say
02:09:43 someone didn't have a phone number okay the size of this content would be different than the size of this content and what would happen is um the car
02:09:51 cards themselves um would have like a small Gap somewhere so that equalize was needed and it was something that I
02:09:58 figured out as I was testing with live data okay um
02:10:05 okay I'm going to move on hopefully I I discover uh what I I did um
02:10:13 previously okay to fix that issue because at this point I'll be honest a lot of these minor tweaks that I'm
02:10:20 making right now okay um I didn't make until I already migrated this particular
02:10:28 page to be used as total CMS and we're already two and a half hours in on this
02:10:33 okay so um all right let's uh let's move on and hopefully again hopefully we'll
02:10:41 we'll figure out what's going on in that small device because I did fix it uh and I do remember it happening I don't
02:10:47 remember the exact fix though okay um let's go ahead
02:10:54 and I'm going to take this um this block grid um that I built for the meetings
02:11:01 okay and uh I'm just going to copy and paste that okay and we'll we'll review what
02:11:10 I've done here okay um so if you see this layout it's pretty simple it's pretty simple um I actually uh started
02:11:20 uh this lay out with hold on one second let's go ahead and just do
02:11:28 hide which show the top one okay um I started off with the same exact card
02:11:35 down here okay if you notice even says member card it uses all the same classes to be honest I I probably should change
02:11:42 it since this is a meeting card and not a member card uh I should probably maybe make this instead of a member card maybe like a I don't know a guild card or
02:11:50 something like that so that it's a generic card that could be used anywhere but I was
02:11:57 lazy right so it uses the member card class um that way we get the same uh hover effect okay as we got with the
02:12:04 other one so we get all those styles for free just by adding that uh card with a member card
02:12:11 class and then um in here I just added a card section um and then in there I have a a
02:12:18 header um I have a button uh that uses that same uh I use the same open goals class so that we get this uh this effect
02:12:27 again this is a meting notes so maybe I should uh rethink the open goals class since it's now more generic and it be
02:12:34 something that you know isn't open goals right um but I did make it smaller so I just changed the the button on this one
02:12:42 to be a smaller button um and then here I just I used a block grid okay and in the block grid it
02:12:51 just adds in um a bunch of images okay and I thought it would be fun here I have a header a block grid of images and
02:13:07 people okay um in it um so that's why I made the columns seven so it'll if everyone attends all seven images will
02:13:17 fit perfectly right here in one row um but obviously some people miss they'll be you know dispersed across two of the
02:13:24 things okay so this was my general mockup actually this this I played around with quite a bit with different layouts this was the a pretty simple
02:13:33 layout that just I I really liked okay I played around with like adding people's names but it just didn't look great
02:13:42 right um so yeah having just a list of images uh with uh the people down here
02:13:48 uh was was pretty good okay um so at this point um actually it was before the before I did the meetings uh
02:13:56 the meetings layout um I actually started integrating total CMS into this and let's start doing that now let's start integrating total CMS into this
02:14:06 layout um and so let first off let's let's go into here and let's integrate total CS with with the members grid
02:14:15 okay um so this is kind of uh ending the foundation
02:14:24 build site build portion of this um page or this live stream okay and
02:14:31 we're going to start diving into setting up total CMS now I'm not going to set up total CMS from scratch here and and I'm going to show you what I did um or else
02:14:40 we'll be here for five more hours okay
02:14:52 um so I'm going to go into um my total CS admin
02:15:02 area oops what's going on
02:15:11 here there we go right um I created um if you notice this is the total CMS 3 um
02:15:20 now I'm not going to dive into publishing essentially publishing total CS super easy all you have to do is add in your
02:15:28 um total CMS core to the page okay um and then you publish and you get
02:15:36 access to this now a workflow that I've I've grown to really like while playing
02:15:42 around and using total CMS 3 is um total CMS works 100% inside preview
02:15:50 okay okay um but um I have M running okay if you notice this um this domain
02:15:58 here is just local. thegrowth guild. org okay and um in
02:16:06 M I set up that as a domain U this this domain doesn't exist on the internet um
02:16:13 and so basically I set it up um and it w it looks at a folder that inside my project file okay if I go go to my
02:16:21 publishing settings it just uh publishes to that local folder okay and then I can just preview
02:16:30 it right here inside M and um I really like that workflow
02:16:36 um I mean for me I I never use you know I I don't know it just it I just kind of
02:16:43 learn to always use the browser and so now what I do is and Publishing to a local folder even though total CS 3 has
02:16:50 a lot of files 5,000 files um is super fast okay um so yeah that's the kind of
02:16:58 setup that we're going to be using today it's running a full-blown Apache web server so that you know um total CS 3
02:17:06 works great I have a custom domain that I can reference that works perfectly on my Mac you can't get to it it's not
02:17:13 online it's only on my Mac okay um and yeah it this this works with or without rapid Weaver even running
02:17:22 okay so pretty cool um what I've done here is um again I I'm not going to go through the ground
02:17:30 zero of total CS 3 um but in total CS 3 you create something called a schema so I need to
02:17:38 be able to manage meetings and members so I've created a meeting um schema and these are all the fields available to me
02:17:47 um in that schema we have an ID for the field a date uh who attended who missed um summary
02:17:55 and chat then we go to my member schema okay and that has a lot of fields okay um we
02:18:03 have a photo whether or not the user is active or not so I can actually disable a user um and basically turn them off so
02:18:10 they can't access it an ID a name an email phone website birthday I have some cool stuff with birthday I'll show you
02:18:16 in a little bit um password LinkedIn um so basically a bunch of social profiles so LinkedIn Instagram YouTube xmed on
02:18:25 Facebook um a little about paragraph um the person's goals for their year and goals for the current quarter um and
02:18:34 then some hidden fields for um you know when their account was created how many times they've logged in and their last login
02:18:42 okay um oh and passwords in here somewhere password okay so there's a lot of fields for a user okay um um but yeah
02:18:51 there we go uh you define uh the required Fields um and then all the fields that you want
02:18:57 to be able to access um on the main page okay and also any field that is searchable okay so like in meeting uh
02:19:05 when I set up the search I wanted to make sure that everything was searchable so actually all fields are part of the index because I wanted to be able to
02:19:12 search for any field okay okay so uh yeah really quick that
02:19:21 was that okay uh then I went in here you can uh I created a bunch of other things that I did um actually here let me go
02:19:30 into the setup I took the time to go through here and set up the factory information so like here is an image um
02:19:36 for name I use name um and email I it just set Factory to be email um and what
02:19:44 this does is it allows you to automatically generate things right so for example if I go into my uh
02:19:51 meetings you notice that it just automatically generated a bunch of stuff for me okay using something called the
02:19:58 factory and you can automatically add if I want to add 10 more meetings um it just adds fake data into your CMS right
02:20:06 so right now I just created 10 meetings right now so if I go back to my meetings um you'll notice that there's actually a page two here there wasn't even a page
02:20:14 two before okay so I've added 10 more meetings uh which is pretty cool okay it didn't populate attended and missed
02:20:22 because yeah it it's not that cool okay um but it does generate a lot of fake data and i' same thing for users um it
02:20:30 created a bunch obviously I created mine manually and then I just created a bunch of other users that had names and emails
02:20:37 and fake phone numbers and fake website kinds okay um I did manually upload my
02:20:45 photo um so that you know um there isn't the ability to uh you know maybe I should create a Joe Factory so you can automatically you know populate your CMS
02:20:53 with pictures of me if you ever wanted that right um there we go okay um I'm probably not going to dive too much into
02:21:09 did is I I just added like this the site logo um I added uh in style text I have the charter and our mission statement
02:21:17 okay as static text in the CMS okay with that done uh let's go back to
02:21:27 um our project okay so let's start off with building um
02:21:35 this okay and uh showing you how uh I'm going to basically migrate all this data
02:21:42 okay so I actually kind of liked this workflow quite a bit um you know
02:21:50 building the the mockup and then um taking this data and replicating it many times to create the final grid um that I
02:22:01 wanted okay so uh what we're going to do is uh let's make this window a little bit bigger so I can have the
02:22:09 uh the stacks Library open actually we don't need the pages just a library okay um so now here I have all of my my total
02:22:18 CMS Stacks I know they all have the same same icons right now and that makes it a little bit tough but uh eventually they'll have their own icons okay um so
02:22:26 what I need to do is I need to create um member cards here okay and so in this block grid I need to I need to generate
02:22:35 multiple block grid cells for every single member right so if you see this this particular area Okay uh right here
02:22:45 I need to replicate this for every single member okay so let's do that
02:22:52 so we're going to do this with the loop stack okay and again at the very top you add in your total CMS CMS core you can
02:22:59 actually even add it into the uh the features inside sight Styles okay um so what we're going to do is
02:23:06 we're going to drag this into the block grid stack right it has to be inside block grid okay and then what I'm going
02:23:14 to do is in I'm going to drag this block grid cell into the loop
02:23:21 that Mak sense okay so now what I'm going to do is I'm just going to start replicating or
02:23:29 deleting this data with the data that I need okay well let's configure the loop first so in the loop I need to uh Define
02:23:36 The Collection so uh the collection that I created um for this was called members so I'm going to Loop through the
02:23:44 members collection okay um in total CMS and the loop variable basically I'm
02:23:51 going to uh each one of these is a member okay so most of the time your collection and your variable are going
02:23:58 to be the plural and singular versions of whatever you are doing okay so we have members and when we Loop through it
02:24:06 each each instance of the loop is going to be assigned a variable called a
02:24:13 member okay so um and now what I can do is I can then access that member information
02:24:21 so um for example here now this is where it's very important that you know your data okay
02:24:29 uh let me go back to uh here so if I go into my collections we'll see that I'm in members okay and actually let's go
02:24:36 into our schemas and see what a member is here's all the data that we have available to us so obviously my the name
02:24:45 of my member is called name okay so here I would use curly brace curly brace member.
02:24:57 name okay so there wherever I put this this is now where um the member name is
02:25:05 going to be put okay um and just for Speed I'm going
02:25:12 to go ahead and in here I'm just going to copy these
02:25:27 all right so um here basically if we look in
02:25:38 here I have the member phone number now I updated the this again I am using HTML as I said earlier okay and uh
02:25:46 essentially I I'm using the telephone uh syntax so you do Teel colon and then it's going to inject the phone number
02:25:54 into the U into the URL and then I I put the phone number as the link text okay
02:26:01 um then uh I do the mail for email I put I use a mail to link and then I put in the member email and then the member
02:26:09 email is text again this might be a little more user friendly if I had again chosen the menu stack instead of list um
02:26:17 but I was kind of building this for myself and it I'm not scared I'm not scared of HTML but um yeah in retrospect uh it might be a little bit
02:26:26 more user friendly uh for you guys to use the menu stack uh for something like this okay um and then you wouldn't need
02:26:32 to know the some of this scarier syntax now this is kind of interesting
02:26:39 okay so um let's look at let's look at my
02:26:45 um my user account okay if you notice here my website is
02:26:52 set to https www. weaver. space okay however if
02:27:08 okay oh oops where where' I go down here you'll notice that it doesn't say
02:27:15 https weever dospace okay and
02:27:23 um this is because I I did some twig trickery and
02:27:30 um if we look at this let's inspect this really
02:27:42 quick okay if we look at this we see that the link inside the the link it we
02:27:48 have to have https col Weavers dospace okay but in the text part of my link I
02:27:55 don't want that I it just doesn't it looks nicer if you have if I were to put www. weaver. space inside the link it
02:28:03 wouldn't work okay you have to have https or HTTP uh or else it won't link
02:28:10 to the correct website okay um so what I did was um for the for the actual
02:28:18 content of the um um link the text of the link I stripped
02:28:24 out the https and the ending slash with twig right because twig is freaking
02:28:32 really cool okay and um I'll I'll show this to you um I do some a lot of twig trickery in
02:28:40 in this project um and yeah just because I was playing around and I thought it was fun okay um so I will I'm not going
02:28:48 to dive into every single little thing but I'll I'll show you what we can
02:29:02 do all right let's turn
02:29:11 on um let's oh uh hold
02:29:18 on uh language mode HTML all right there we go now we can kind of see see this a little
02:29:27 bit better okay so if we look at this um I have the beginning of my link and and
02:29:34 then you have href equals and then inside here I have U member. website and this is where it's going to put in the
02:29:42 exact data um here let me go ahead and close some of these tab that I know we don't need anymore okay so it's going to put in the
02:29:51 exact website all of it okay uh and then I use Target blank which opens it in a new tab uh and then inside here right
02:30:07 here's my closing link tag and then inside here this is the
02:30:13 content of um the text of the link so we're using some magic in here
02:30:22 okay and what it's doing is it's doing member. website so it's taking the full website that includes https okay and
02:30:29 then I'm splitting it what that means is it splits it based on um the
02:30:36 slashes okay so what that means is okay so what what it what it's doing
02:30:45 is it's finding every single one of these and it's kind of a splitting that data so it's going to be that's one part of the data that's another part of the
02:30:54 data and that's another part of data okay so first it's getting that as one part and then it's getting this then
02:31:01 it's getting that and then it's getting that so it's splitting the data um splitting this string based on a
02:31:10 slash okay then um now this is the this is probably the the most confusing part is
02:31:19 um of the results from the split I want you to start at um so this
02:31:27 is an array again this is getting quite technical okay um in Array this is uh
02:31:34 item number zero this is item number one this is item number two
02:31:42 and that's item number three okay so it split this string into an array where
02:31:50 this text is item number zero that's number one that's number two and that's number three so what we do is we say okay I
02:31:59 want you to start at number two so it's going to start here and then only give me
02:32:07 um one only only go one okay so basically what what it's doing is it's it's slicing this up and it's
02:32:16 returning a different array that only contains the text that I asked it to
02:32:22 okay now if I had done um 2 two what it would do is it would give me Weaver
02:32:29 space slash it would have returned an array of Weaver space and slash because it says I said start at number two and
02:32:36 give me two items okay um so slice also returns an array now in in this array again I only
02:32:46 wanted one okay so it only returns this but in it returns this as an
02:32:53 array okay so at that point I pipe it and say give me the first item and and
02:32:59 it is that so yes um hopefully I know that was confusing and I don't teach
02:33:07 programming very much so hopefully you know some of that stuck in your brain especially since we've we've been talking now for almost three
02:33:16 hours okay um but yeah this now returns Weaver
02:33:24 space and yeah uh that was that was a lot of fun I thought that was pretty cool uh because it makes it a little bit
02:33:31 more user friendly a little bit nicer but it it also means that I don't need to save two versions of my string in the
02:33:38 CMS right so anyway there we go um okay that was interesting all
02:33:46 right so let's go down let's keep going if you no now um in my button I have Joe's
02:33:54 goals well in my data I don't store first name and last name as two different fields I store Joe
02:34:05 Workman so if I want Joe's goals I need to be able to purse this
02:34:12 string and give me just what I wanted okay so let's have a look at that I do something very similar um and let's have
02:34:21 a look at this so inside of this um this open goals button okay um I copy that so here we have member.
02:34:34 name um and then I'm splitting on a space similar to up here I'm splitting
02:34:40 on a on a slash here I'm splitting on space and then I'm giving me the first one right so let's say if I'm doing Joe
02:34:49 space workmen okay it splits on a space it uh split again returns an array an array
02:34:59 has zero and one okay and basically I'm saying give me the first item in that array which is
02:35:07 Joe so now this returns Joe and I have an apostrophe s goals so this returns
02:35:15 Joe's goals pretty cool
02:35:22 okay um and then in Social Links okay um I have a Q QR code thing
02:35:29 here we'll review that in a little bit um it's something I added after I did the whole mockup thing okay uh it's pretty cool though right but we'll
02:35:38 definitely look at that all right in Social Links um you notice that I have a uh the link
02:35:45 containers just like I had before um now here I I have a new one for for the contact card again we'll skip that for
02:35:52 now I added something uh for each one of these okay so before we just had a link container and the SVG now I have a
02:36:01 conditional around each one and what this says is um the conditional the rule is purely member.
02:36:11 LinkedIn now when you have that what it says is does a user have member.
02:36:16 LinkedIn defined if they do do display this content and then it goes to the next one and the rule here is member.
02:36:30 Instagram so um so basically it says if the user has defined if a user has set member. Instagram um use add link
02:36:39 container with the Instagram logo this way um if a user doesn't Define something so let's say for example I'm
02:36:46 going I'll disable I'll delete my LinkedIn okay and let's save this let's go back to this page and if I
02:36:55 refresh right whever my card is there it is linkedin's gone so this makes it so that if someone
02:37:04 doesn't provide a particular social link it's not going to be defined and that's why all these other users that um have no data um because these were all
02:37:13 artificially generated ones I didn't take the time to add Social Links for any of these so they're all gone
02:37:22 okay so that's pretty
02:37:29 cool all right um now let's look at the um the
02:37:38 image okay um and so uh in order to replace this image uh we're GNA have to
02:37:45 go into here and we're going to find the image stack in the
02:37:53 content image okay and we're going to drag that out there right and I'm just going to delete this
02:38:01 picture so we're replacing that image with the total CMS stack uh version okay and so what we're going to do is um we
02:38:10 need to define the object ID um for this and the ID basically we need the ID of the member so that is member.
02:38:19 ID okay up here member. ID now this is a variable that we're referencing from the loop so what we're going to have to do
02:38:28 is we're going to have to say that this uses a variable for the object okay um now um because we're referencing from a
02:38:36 custom collection we need to check this box and we need to set the collection to be members and the property of my image
02:38:45 okay it's not image it is I think it's photo um yeah so if we go just to show you uh
02:38:54 I the name of that property is photo okay so uh here I'm going to use property
02:39:01 photo okay and you can set all your width and height and crops and all kinds of stuff um here
02:39:15 okay sweet ultimate I'm uh I'm getting a little winded now that we're at 3
02:39:27 hours and I think a lot of you are um probably uh brain overload as well okay
02:39:36 um so I am going to maybe put my foot foot on the gas a little bit and I apologize for that for those that
02:39:44 are um you know novices to Total CS3
02:39:51 okay um but I I wanted to show just kind of how some of these more advanced things are possible you know um I do
02:39:59 have other videos that that go even more beginner for total CS 3 and I know I'm breezing through a lot of this and not really going through all the general
02:40:06 concepts again we'd be here for days if if if I did okay so I apologize for
02:40:13 that okay um
02:40:22 okay what I'm going to do is I'm I'm actually going to move over to this project file that has um everything okay
02:40:31 and I'll show you some some other things that I did um in here to get things uh working okay um so inside the loop here
02:40:40 if you remember I have a checkbox for active Okay um and what I did here is um I applied a filter to this loop stack so
02:40:48 I have a filter and assort okay um and in the filter I just said filter if the
02:40:55 active property is set to true that way I can go in and I can disable any member that I want I can go in here and I can
02:41:04 um disable this member and that particular member is now disabled okay and they won't show up on
02:41:11 the homepage okay so that filters out anyone that is um that is active so we only want to
02:41:20 display people that are active um and for sort I just shed it to shuffle um and that way if you go here
02:41:27 um it's just you refresh the page it's just they're just always in a different order okay um I think for a small group
02:41:34 like I said my group only has seven people Shuffle is great it kind of just shuffles everything you can see everyone in one in one Fell Swoop anyway um
02:41:42 Shuffle probably doesn't work great if you have a a lot of things in your in your list right so you probably want to have some sort of defined um sort and
02:41:50 sort by a particular field like maybe by name or something like that okay I just thought it would be fun to have Shuffle
02:41:57 that way everybody has a chance to be on top okay
02:42:07 um let's talk about something that's kind of fun um and that is this
02:42:13 um I'm not going to go through this in great detail okay um
02:42:21 but uh I thought it would be fun again uh my group is a it's a small group of people um and we've grown quite close
02:42:30 have a nice friendship and um it's nice to be able to know when it's somebody's birthday okay um and so I added it if
02:42:39 you know in the uh in the admin area you can Define someone's birthday right so you can Define their birthday and um I thought it would be
02:42:47 fun to add this little emoji when it is somebody's birthday week not just today but like it's their birthday
02:42:55 within plus or minus 5 days right um so that if we meet every Friday
02:43:02 I know if your birthday just happened or it's about to happen right thought that would be kind of fun and I did it um so
02:43:10 yeah pretty cool um so basically um here I will show you the TW Wiig um
02:43:20 let's just paste this in here uh let's turn on wrap word wrap all right uh actually let's make it a little
02:43:28 bit smaller oh there we go looks much nicer now okay um I'll quickly just review the it so I I get the date of
02:43:36 today I create a variable called today that gets the date um then I get I take the member's birthday and then I get the month and
02:43:44 the day of the mer of the of the birthday because I don't want the year I just want I I need to know the month and
02:43:51 the day of their birthday so that then I assign that to a variable called month day then I get the current year of their
02:44:01 birthday so I get um basically um let's say it's November 6th so their their
02:44:08 birthday is on November 6th basically this then gets me a date object that is November 6
02:44:16 2024 even though in in the in the CMS it probably November 6th 19 you know 60 or something like that right um but now I'm
02:44:25 getting again their month and day of this year so that's uh some tricky stuff
02:44:34 there okay um then I create a start and end date so basically what I do is I get
02:44:40 the current year minus 5 days and the current year plus 5 days
02:44:49 I wonder if I do um language mode oh oh that's probably much
02:44:56 nicer okay um yeah so now I get the current year um modify it I'm subtract
02:45:04 five days and then I I return the actual date object of that pretty cool
02:45:11 right so now I have a start date and an end date okay so I chucked all of that inside of an HTML stack well first off
02:45:20 actually all of this is inside of a conditional that if somebody set their birthday because obviously this is only going to work if they actually defined a
02:45:28 birthday so I have a conditional that checks whether or not they set their birthday and if they do all of this
02:45:34 stuff runs okay so if they did set a birthday I I run all of this and I I get the start date and the end
02:45:42 date then I have another conditional that basically says here let me uh take
02:45:50 this okay if today which is is greater than the start date and today is less
02:45:58 than the end date so if it basically if the date is between the start and the end which is plus or minus 5
02:46:07 days display this container that has an emoji that's
02:46:14 it um and then I do have some uh uh uh uh up let's see here it is I just
02:46:24 have I have a couple things right so I I set the font style for the Emoji or the font size I set a position um I change
02:46:32 the cursor um and I transform it so I rotated a little bit okay so essentially this position Swatch is the important
02:46:39 one this is what basically takes that emoji and always puts it at the top right corner of my card
02:46:49 right pretty magical that's some that's some Next Level stuff there that that was a lot of playing around to get that
02:46:56 to work um and oh another thing I do if you notice um I don't display people's
02:47:04 birthday but if you hover over it you can actually see what their what day their birthday is right so um I added
02:47:11 that with just a little um I added a container around this and in the container I added a tool tip and inside
02:47:19 the tool tip I just display their birthday using twig inside of the content of the tool tip and I just say member. birthday and
02:47:29 I put in uh the date format that is November 4th or January 6th or something like that right so there we
02:47:37 go pretty slick this is next level stuff right there like that's pretty cool and again it's all Dynamic it'll only
02:47:46 display this if it's Plus or plus or minus 5 5 days of the person's birthday like that's pretty
02:47:56 cool right just to show just to just to play around here I'm going to go ahead I'm going to change my birthday if you see here uh it doesn't show uh this so
02:48:05 I'm going to change my birthday to be um 114 1980 okay which is um November 4th was two
02:48:14 days ago right so now if I go ahead and reload this page okay the birthday sign shows up on my
02:48:22 card with November 4th because it's plus or minus 5 days but didn't show that before because August 4th which is my
02:48:30 actual birthday isn't within the realm of possibility right definitely next level
02:48:39 stuff okay um pretty cool stuff there uh the same
02:48:48 process that I did for um the mockup of um this meetings thing you know I like
02:48:56 that where I dragged I I basically replaced all the mock data with total CMS data I did the same thing up here
02:49:03 okay and let me show you what that looks like okay um so here again I added a loop
02:49:10 stack inside of that block grid okay um in here I I put the collection to meetings I put the V Loop gr variable to
02:49:19 be meting okay um at that point I can then use meting do whatever to display my
02:49:26 data so here um at the top I have the date okay um it is meeting. dat and then
02:49:34 I pipe in uh I format my date using this logic here so capital M gives you the the
02:49:41 uh letters or the the word ver or the short word version of the date then I have a space and then I have the day
02:49:49 comma and then capital Y gives us the full year right so that displays the meeting
02:49:56 date I then have the meeting notes um and we'll go over uh in a little bit how I open up the light boxes right so when
02:50:04 you click on this it opens up a light box okay um wa then in attended now this is
02:50:12 pretty cool so I have another block grid and this is something that I I'd never done before total CS 3 either I
02:50:21 have another loop stack okay um let me show you uh what it looks like when you add a
02:50:28 meeting okay um so when you add a meeting now this is actually a page that
02:50:35 I'll man there's so much more I I haven't shown um in this project I uh I didn't want users to to log into the
02:50:44 total seams admin area so I created this custom page that has the um meeting form
02:50:52 okay um so in here you put in your date and if you if you click on the attended
02:51:07 members okay so I I can just click on the member names for the for the attended and the
02:51:16 missed that's really cool okay and uh in a little bit I can show you how I did
02:51:24 that actually you know what let's go ahead and let's Jump Around um so inside of the total CS admin area um if you go
02:51:32 to your schema for your meeting okay we have the attended and missed
02:51:39 um fields or properties okay let's look at attended okay um the this is a list uh
02:51:49 field okay and if we go into the settings we'll see that there is um some really cool uh settings that we can set
02:51:58 for um this works for list fields and select boxes okay and what you do is it allows you to
02:52:06 create relational options and what it does is you can Define you can give it uh the collection of members so it's going to go to the
02:52:15 members field um you Define a value and a label okay
02:52:23 um so the label is what you see in the dropdown but the value is the ID okay so
02:52:29 what I'm doing is um in that form while you see the person's name the value that
02:52:37 gets added is that user's ID
02:52:45 number okay so this allows us to do relationships between different collections
02:52:56 now so again it's going through the collections it's going to Loop through and it's going to create options for oops darn
02:53:04 it it's going to create options for each member where the value when a user is selected is their ID but the label that
02:53:12 you see in the form is the name so the value again the value that gets saved is their ID right so that's important to know to
02:53:21 know because now um I am looping through my
02:53:28 meetings and inside there I need to Loop through all of the people that attended this
02:53:37 meeting man I am getting hungry um so I have a second Loop
02:53:49 and in here I am looping through meeting. attended so I'm going to Loop
02:53:56 through everyone that attended this instance of a meeting and then I'm going to uh the
02:54:03 loop variable is called member
02:54:12 okay now it's uh this isn't the member object what it is is it's just the ID so I I probably could have called this just
02:54:20 ID right um but it's essentially uh it's going to Loop through the attended and the actual variable is going to be
02:54:28 member the ID of the member okay so now uh what it's going to do is
02:54:37 it's uh it's going to Loop through each member and it's going to create a block grid cell and if you notice right when we do
02:54:44 that uh let's go back to the homepage um it's going to Loop through each person that attended this meeting and
02:54:53 add an image for each person that attended okay so um when it Loops
02:55:08 member okay and that is probably be it should be member ID right so it should be Loop variable is
02:55:16 member ID okay okay and so in here that variable is called member ID and then it's going to be a part of
02:55:23 the collection members and the property is photo so again in order to get the image
02:55:32 for each member all I needed to know was the ID once I know the
02:55:38 ID um the collection and the photos or sorry the collection of the property are static values I know exactly what they
02:55:46 are because I know the memb collection is member and I know the property of the the photo that I want to bring in is photo okay another thing we need to make
02:55:55 sure that the object value of this we have to tell that we have to tell the stack that that is a variable okay I set my sizes to be 32 or
02:56:05 64 by 64 okay so it it puts in a 60 it brings down and generates a 64 pixel version of
02:56:14 that image I want to ensure that um because I
02:56:23 wanted these to be circles I need to make sure that the even if the person uploads a nonsquare photo that it
02:56:30 generates a square version of the image therefore I set the fit and crop to crop focal point when you do that it's going
02:56:38 to make sure that the image that is generated is exactly 64 pixels by 64 pixels and it will crop anything else
02:56:45 outside of that for more information on images I have other videos on that on
02:56:52 how the cropping works okay and then obviously it uses the focal point which by default is the middle of the
02:57:02 image all right um so yeah there we go that Loops again Loops through all of
02:57:08 the um the member images or all the members and displays the image for each person that is attended and then I do
02:57:17 the same exact thing I have a header for mist and then I have another block grid and then I Loop through all the people that are inside the mist and I display
02:57:25 that all the images for all of those pretty cool
02:57:39 right um sorry I was not paying attention to uh uh the chat James you said is this going to be more complex
02:57:47 than the previous version um I mean I I have I'm I'm definitely driving at 60 M hour right now okay um
02:57:55 so I know a lot of stuff that I did is probably very very this video this live stream wasn't meant to be a here's the
02:58:03 basics of total CS3 I personally think that total CMS 3 will be easier than total cms1 um but
02:58:11 it's also has some really cool more it's easier to do more advanced things okay that you can never do in total
02:58:19 cms1 um so yes please don't take what I'm showing you right now as
02:58:26 a uh as a beginner tutorial to Total CS 3 okay um I tried to do somewhat of a
02:58:34 beginner thing with the when I built the website with Foundation um but yeah uh again I we'd be here for days if I
02:58:43 tried to start from the beginning with total CMS 3 okay um and thank you Sean for the for
02:58:52 the comment you said I make it all look easy um okay so yeah
02:58:59 um that's how I kind of built out this grid okay as you see I I didn't a lot of these meetings were dummy data so I
02:59:07 didn't go ahead and try to you know add in attendees for each of this dummy data okay um so excuse
02:59:15 that um okay next
02:59:22 up um let's talk about
02:59:29 um oh how about these light boxes okay um I will go through uh essentially the implementation for this this light box
02:59:39 and this light box are identical okay it's just um so let's pick let's pick
02:59:46 the the profile one okay we'll go over that implementation okay um if we look at the
02:59:54 project file okay um while this website does appear to be a single webpage project for the most part there are
03:00:03 multiple pages okay um so like if I were to click on this this looks like it basically what this is this is actually
03:00:11 an iframe and the iframe is injected inside of a light box same thing here if I click on this this is an iframe that is
03:00:20 injected into an uh into the light box okay what's kind of cool about this approach is um if I hold down the
03:00:29 command uh tab if you're if you're familiar with browsers if you command click uh it opens a link in a new tab so
03:00:37 if I'm going to command click this button okay it does open the light box but you'll notice is actually opened up another tab that is this person's page
03:00:47 right it's basically the page that is inside of that light box okay
03:00:53 um so yeah that's pretty cool uh I need to I need to run I'm
03:01:04 going to take a quick potty break or not a potty break I need water okay um so just give me a minute I'm going to run
03:01:11 downstairs and get a glass of water um my mouth is getting famished here um so I'm sorry I just need to take a quick Break um literally 30 seconds I'm going
03:01:21 to go get a cup fill it up with some water I'll be right back maybe you can do the same thing
03:01:46 okay
03:02:16 e
03:02:46 e
03:03:16 e e
03:03:57 okay I even found some leftover breakfast here I'm going to take a couple bites of uh bites of food here
03:04:30 okay Sean you asked a good question why use why why have one light
03:04:37 box instead of a why have an ey frame in a light box so um we'll answer we'll answer that
03:04:46 it's a good question talking for three hours straights No
03:04:56 Joke Man okay
03:05:09 okay why why not do multiple light boxes okay I'm still sharing my screen
03:05:17 right thank God okay let's take this um this into account uh if we look down here um I
03:05:25 have two light boxes I have a member light box and a meeting light box
03:05:32 okay um so if I wanted to have
03:05:38 uh all of this data show up in a lightbox okay and um not use the iframe
03:05:47 approach um it is possible um there's some caveats okay um
03:05:57 if you could basically uh drag this into um let's say this light box into this container right I'm just going to shrink
03:06:04 that okay um and then uh basically uh in right now you remember this is the loop
03:06:13 okay and so it would create a light box for every member in this Loop okay and inside of this light box you could
03:06:21 actually put in content like you could put in all of this content into this light box okay I have an offsite I'm not going
03:06:29 to I'm not going to do that I'm not going to delete the offsite and do everything like you know I would okay but you can you can display you
03:06:37 know all this you can put the member name all this list inside of the light box you can definitely do that okay
03:06:44 however um in this case um I want to also in this light box I want to display the about the goals uh and the goals
03:06:54 right so both goals and the about and uh now remember in order for
03:07:02 something to display in the loop okay it needs to be a part of the index and I'm pretty certain if I go to
03:07:11 here if I go to look at member okay inside member the about and the two goal
03:07:18 content areas are not a part of the index so I now I could add those to the
03:07:26 index but um as as we know it is it is better from a perform from a performance
03:07:34 perspective to um have the least amount of data in your index as
03:07:43 possible so in this case um I don't want I I don't want access to the about or the quarters or or the the goals inside
03:07:52 of the index okay but had I I could display them in here okay um now another caveat
03:08:02 is once I uh if I create a light box for every member so every member has their own unique light box I need to do some
03:08:10 trickery with um the light box ID now this isn't too difficult you could probably just do um I mean every member
03:08:18 has a an ID so I probably could just do like uh member. ID right inside the
03:08:26 lightbox ID and that would work right oops member. ID right so I could probably add member. ID into the light
03:08:33 boox ID and that would ensure that every single light box had a unique ID right definitely possible okay um but
03:08:42 it's just it adds a layer of complexity okay
03:08:48 um so those are two two reasons why I don't do it that way
03:08:56 okay again I don't want to have all data inside of my index by using an iframe I
03:09:02 can um I can point that iframe to the member page and the member page has access to
03:09:10 all of the data about a member okay let's let's explain um how I
03:09:19 did it here oops and let's open up this this member
03:09:28 light box okay so let's look at this member light box a the the light box ID is called member okay um and then inside
03:09:36 the offsite um uh it's important you give it a name I called the name here member
03:09:43 page okay so the light boox setup is actually very minimal and you just set you can set the URL to be blank it's
03:09:54 fine yes so Sean you're correct uh by by uh this by putting the light box in here
03:10:01 you potentially have I mean here I only have seven members but if you had a 100 or a thousand things it would create a
03:10:09 thousand different light boxes right and potentially if that light box had an image or something special it would then load in all of those resources
03:10:18 right this way it's only loading things when you when you click on it okay so well I'm getting ahead of myself okay so this light box is pretty simple um again
03:10:27 the me the the important thing is here in the light box you set up a member uh a lightbox ID which is member um and
03:10:34 then the offsite um I set you have to give it a unique name so I call it member page okay so let's look at this
03:10:42 um this goals button because remember if we go into uh this when I click on it it does two
03:10:50 things okay it it um opens the light box and it loads a specific URL into the
03:11:01 iframe okay so let's look at that con that settings so if we look at the edit
03:11:09 link okay um what I'm doing is I'm linking to the page and passing it the member ID
03:11:17 right so what that is is that's this page if we look at the URL oops okay it is just um uh Slash member and then
03:11:27 question mark ID equals and then the ID of the user now here because I I was using fake data the IDS are like these
03:11:35 random things but you know in real life like if here if we go to my uh my nicely created user account if we click on this
03:11:43 one oops not in the light box okay we'll see here it says ID equals
03:11:51 Joe Workman okay so um here again I'm just loading the member page I'm going tell it to go to the member page and
03:11:59 then ID equals and then I'm injecting the member ID which in my case here is Joe Workman is my ID okay I'm injecting
03:12:08 that with twig okay then um
03:12:17 in Target by default it's set to current window what we want to do is we want to set the target to be iframe
03:12:26 name so if I were to set this to be current window this would essentially make this button open this web page just by
03:12:35 clicking on it but that's not we don't want it to load this web page we want it to load the web page into an
03:12:42 ifame and this iframe name is the same name that we configured inside
03:12:53 offsite okay so that um this setup here loads the URL inside of the
03:13:01 iframe now further down we have an add custom attribute okay and this we do data- open
03:13:08 equals member what this does is this tells the link to open the light box
03:13:18 data open uh can be used across a lot of foundation components um light boxes dropdowns off canvas okay um so you can
03:13:28 open up any foundation component or most Foundation components with data- open and then you have to give it the ID of that component and that ID obviously has
03:13:37 to match the ID that you defined inside of the component so in the light box I gave it an ID of member so we said data-
03:13:46 open member see attribute data open member so the combination of these
03:13:55 things to these two things that we've done opens the light box and loads the member page inside of the iframe all
03:14:04 with one click that's I discovered this trick I don't know a couple years ago and it was
03:14:10 like it was man it was oh man opened up so many cool possibilities okay I love it
03:14:17 okay again the benefits are um the resources for you know right I
03:14:25 mean these are pretty simple right um you know it just loads an image and and some other extra text right um but this could have a lot of extra like if this
03:14:34 this could be a G have a gallery in it or something like that right and um at this point with the way we've built it
03:14:41 now this the data inside this light box is only ever loaded when you click
03:14:49 so it makes the page super performant this is a great workflow okay and an added benefit that
03:14:57 I kind of like is if you hold down the command key and click you still get the option of it opening in a new browser
03:15:05 window I like that too so you get both right I mean I still have this page right and we can look at this page
03:15:13 right let's go ahead and look at that now right so we go to this this this is the member page this is this page here okay
03:15:22 um and so what what do we do here um here we have
03:15:29 uh the I'm using the uh total CMS uh object data loader okay so I'm using
03:15:36 where data loaders I'm using the object data loader stack okay and it's right here and what I'm doing is I say the
03:15:44 collection is members and load the um get the ID from the URL so what it's doing is it's parsing the URL and it's
03:15:53 getting the ID from the URL dynamically and then um it assigns that member to a variable called member right
03:16:01 so again this is kind of like similar where you know your collection is kind of going to be the plural and then your variable is going to be the singular
03:16:09 because we're loading that particular member and then a lot of this data is actually the same exact uh I just copied and pasted from from the other page you
03:16:17 you'll even notice on this page when I hover over you still get the hover effect okay um I kind of like that I was like I left it in there cuz it was kind
03:16:25 of like just like a nice little Easter egg or something right um so yeah I just L um the QR code which I don't think i'
03:16:34 I've shown if you click on that it gives you the QR code okay um remind me I can go over that in a little bit okay it's still has the me as you see it has the
03:16:42 member stuff like now may maybe on this page maybe I don't want to load in the the birthday I could just delete delete that and now that that member stuff is
03:16:50 gone okay um and then further down uh basically I'm just I'm doing um what am
03:16:58 I doing here uh I'm doing oh about Joe and again I'm doing that little uh that little split thing where I only get the first
03:17:06 name okay and then I'm adding the about contents and then um so here here's some
03:17:13 interesting uh stuff so um the goals for 2024 and goals for Q4 2024 are Dynamic
03:17:21 so a this is always going to display the current year and this is always going to display the current quarter that we're
03:17:28 in of the current year so right now it it's uh Q we are in Q4 2024 so this is
03:17:36 all Dynamic and I I did that with this little twig statement here
03:17:43 okay um I'll admit I I even Ed I think for this I Ed chat GPT to create this particular twig for me um and I didn't
03:17:53 need to I don't think I did anything actually to be honest with you um yeah so then uh it it this creates a variable
03:18:09 right um and then um if someone doesn't have a so here I do uh display the member goals if they don't have any
03:18:17 goals set it displays no goals set so there's a way of defining default data right so like if I were to go
03:18:25 to uh was it this one before oh let's just go to another let's go to this one uh oh uh oh looks like maybe maybe that
03:18:34 is broken cuz it should display no goals for okay there might be there might be a
03:18:41 problem with that oh well um interesting I I swear I thought I saw that working
03:18:48 anyway um so now I I did have some small customizations um for some of the member
03:18:57 photo stuff just for this page um so for example uh if we look at
03:19:04 oops over here if you notice uh it doesn't have uh it actually oh the the background color of this um I've changed
03:19:12 it to be uh the same as the background color of the web page so so that it kind of bleeds into the web page so it doesn't look like a card until you hover
03:19:21 over it so again again because um the other member photo stuff is actually inside of my partial my with site Styles
03:19:28 um on this particular page I want to override some existing settings and just change things up a little bit um so yeah there we
03:19:40 go um oh another thing uh that's quite cool is uh you notice that when we go to the this page you see the the menu bar
03:19:48 up at the top okay but when we click on it in here you don't see the menu bar okay um that's a feature of
03:19:56 offsite and uh he um something I haven't shown you is how I created this whole site layout
03:20:05 partial um maybe we could do that that's kind of going backwards back into Foundation 6 the site design World okay
03:20:14 um so inside this um this is my menu bar okay uh which which you see now has been I added a couple other things added a
03:20:21 log out button um and links to the homepage as well as the charter page okay um but the thing is here I added
03:20:28 this inside of an offsite hide stack okay and what that does is um
03:20:39 oops um what that does is um if you visit this web page uh inde dependently
03:20:48 um it shows everything okay but when you open up that web page inside of a light box or inside of an iframe IT hides that
03:20:57 particular thing right so that's how we I can kind of make this experience a little bit nicer um because when you go
03:21:05 directly to the page you want to see this right because you want to be able to get back to the homepage right and maybe see some other stuff again this is a very simple site but maybe you could
03:21:13 have a whole bunch of other stuff that you can do okay or hide um but yeah when you're in a light box you don't want to see the menu and
03:21:20 the title bar again like that that's not useful so um that off-site hide stack will hide that menu when is inside of
03:21:29 the iframe but when it's not inside it'll display it so pretty cool little um hack
03:21:37 there okay um so that was a very long- winded explanation of how the light boxes are
03:21:44 done um again the same exact thing was done for uh the meeting notes button um it goes to a meeting page um which the
03:21:54 same exact thing happens if I were to go up here and uh command click on one of these um here is the meeting page right
03:22:03 uh again the same thing this this top bar um is hidden within the iframe um but else if it's not it opens it up in
03:22:11 the light box right pretty cool
03:22:28 um next up hey guys I have a I have a half hour
03:22:38 left okay um before I have a hard break I didn't I never thought I'd be going for four hours but I half hour and we
03:22:45 got to call it um let's talk about some of the other pages that we have so um let's talk
03:22:54 about uh the the ability to add a new meeting okay um so if you see I have a page here
03:23:01 called new meeting okay and um since this has a form on the page you need to have the admin core stack on the
03:23:10 page okay um and then uh here actually let's let's let's back up
03:23:18 a little bit before I get into that let's talk about why uh I have this this thing called this site layout
03:23:25 okay and um let's go ahead and let's duplicate this
03:23:34 page okay so there are uh some things on a web page so when you're building out a site okay
03:23:43 um I'm going to extract let's see let's take this site layout and unpack it okay um so obviously as we build our web
03:23:52 pages out uh there are going to be a lot of things that we want on multiple web
03:23:58 pages or every web page okay and um let's um so up here obviously I have
03:24:08 a lot of swatches okay so remember I I unpacked this particular uh partial and it contained site Styles uh which has a
03:24:16 lot of these has a lot of these other uh the the Social Links a lot of these other swatches that I created um that I
03:24:23 use across multiple Pages uh initially I didn't have them inside sight Styles because they were um I only used them in one page and then I decided like you
03:24:32 know I used them across multiple pages so I just chucked them in here into the into the partial um and it's nice kind of separating them out um so I have my
03:24:40 meeting grid stuff I have some the search input that potentially shows up on multiple pages so um I added that into there as well okay
03:24:49 but um the important bit here actually I should
03:24:58 have I don't know if I can keep do undoing my changes oh
03:25:07 well in this site layout let's look at it here okay obviously I have a lot of partials or I have a lot of styles okay
03:25:15 but um in this area I had um again at the very top of every web page is this menu okay so um
03:25:24 again I showed you why I have it in inside the offsite hide because if I load a page inside of an iframe I don't want it to be there okay um and then I
03:25:32 have a three column that has um here it's loading the logo from the CMS okay um and
03:25:40 then here I have a section lock which which I'll I'll get into hopefully we have time to get into into some of the authentication stuff that I did okay
03:25:48 basically if the remember I showed you before how the charter page if you're logged in if you're not logged in it doesn't show the menu okay that's what
03:25:56 this section lock does so if you're not logged in it's not going to display this menu okay um so that's how that's done
03:26:05 um and then this menu item with the log out um there's a special macro called cms. logout and that will always create
03:26:13 a logout URL for you okay um so that's how that's done okay now before I talked
03:26:21 about remember in when we were doing the mockup I had a Bento Box right um so in
03:26:27 here on this page um I had this container uh that has uh again uh the
03:26:35 three column and the divider and then I had this bento box and all of my page content is inside that bento box right so what I did is I created a
03:26:45 partial out of that and here's the container here's the the menu here's the Bento
03:26:52 Box those were components that I wanted on every single web page so I created a partial out of that
03:27:08 partial and then all the content in here gets inside of that same exact layout so that every single web page has the same
03:27:16 exact layout okay pretty cool now um on some pages like this new meeting I I don't
03:27:25 want this inside the of the site layout partial because not every web page I want to have the admin core same thing with the page lock I don't want every
03:27:32 single page to be locked because this Charter page isn't uh locked right it's actually publicly accessible okay um so
03:27:42 yeah um and then uh I had a couple custom swatches uh for this particular page okay and let's talk now let's talk
03:27:50 about this uh this new meetings page okay now I talked about the kind of the site layout partial that I
03:27:56 created this is actually really super simple okay so all I did is I had a a heading so I have a header say new
03:28:04 meeting and then I have a custom form stack okay and that is if we go to forms custom
03:28:13 form now this is the super the easi implementation of it because inside here
03:28:19 there is a checkbox for auto bu form okay and uh when you set that so A
03:28:27 you you in your form you set it we're creating a form for my the collections of meetings my meetings collection and I
03:28:35 just set it to be autobuild form and what it does is it goes out into the collection it looks at the schema and it
03:28:42 will automatically build out the form for me pretty cool
03:28:50 zzy um and then uh what I wanted to do is in here I uh I automated the ID field um
03:28:58 and it just uh the ID is automatically created every time with a with an ID The UU ID um because yeah I just want to be
03:29:06 able to create a meeting and this the ID is just some arbitrary random numbers and digits right and letters so uh I
03:29:13 don't want to display the meeting the ID field here um so what I do is I have a Swatch here that just hides
03:29:21 it okay so I just uh display Swatch ID field display none
03:29:30 done okay another thing I could have done is I could have gone into
03:29:36 the um into the schema for a meeting um oh I guess I did do that I I
03:29:43 think I did that afterwards um I set the form to be hidden okay so whenever you create a new
03:29:50 um a new ID um it just hides the field automatically so actually this Swatch isn't even needed anymore okay um and if
03:29:59 you didn't know um for ID Fields you can set up an autogen setting and if you set the autogen to be exactly this
03:30:07 essentially it just makes the the ID always automatic and it will always be unique okay um so that way that's why in
03:30:16 this particular instance it's okay to always hide or set your ID field to be hidden because the object ID is always
03:30:23 going to be some random string of letters and numbers okay it's not pretty to look at
03:30:30 um as you you saw them earlier uh if we go into our meetings I mean it's these here right so again they're not nice to
03:30:38 look at but they're guaranteed to be unique okay so there we go
03:30:47 um so that's it for the for the form this was I I have to say uh I forgot that I built this Auto build form thing
03:30:54 and uh yeah it worked it worked like magic here absolutely Gang Busters pretty cool okay and I already showed
03:31:01 you how to do the uh the attendees stuff so that you can you know have a defined preset list and Associate and do some
03:31:09 linking and relationships between um you know again different collections objects in different collections
03:31:18 okay um now let's go into the let's go back up to the
03:31:28 homepage and let's show um this edit profiles thing actually well right before we do that um because that that
03:31:37 requires I I show you some authentication stuff first um let's look at the search okay so here I I can search anything so I can search up Joe
03:31:44 hit enter and it takes me to the search page okay and so uh if we go to the search page
03:31:52 here um relatively simple page um I did do some fancy styling this is just a
03:31:58 foundation 6 form um I did some fancy styling on there um I'm not going to dive into the styling if you want to join me on Friday I'm happy to um kind
03:32:07 of show you how I did that essentially I just uh I did a bunch of form uh swatches here actually wasn't even that much was it oh no I think I added that
03:32:15 too the um here so there was a few different swatches here set the background to transparent unset the Box
03:32:24 Shadow unset uh borders um added a bottom border um change the font and set
03:32:31 the height okay that's the the 5-second tour of what I done okay um so yeah I I kind of like
03:32:41 that um and so it's just this this search field obviously I didn't an inline I did an inline form here so that
03:32:48 the button and the field are inline um you don't really need to click the search button because you just hit enter right so you just um I just type lauram
03:32:56 there's none laurum there's some right so you can search and you know and whatnot I just probably make this page not do that scroll thing um I just
03:33:04 copied and pasted the this this grid layout from the homepage but I'd probably turn off this maximum height so it just displays and it Scrolls the page
03:33:13 instead of this container um this uses a search field um so in the uh in the input here um it uses a keyboard type of
03:33:23 search um this is just a foundation 6 form okay so yeah you kind of get that for free uh with the little uh with the
03:33:31 little X you can clear the search and whatnot um done by the browser which is nice um so yeah
03:33:40 um here this is a pretty rudimentary uh you know loop again I'm looping through meetings um in this particular one um
03:33:49 I've set it to be a search form okay so I enabled search within this Loop um and yeah uh if you notice when when I do a
03:33:58 search that returns nothing I have um nothing found content uh that you then display down
03:34:05 here um and then essentially I just duplicated that the same exact layout that we have on the homepage um but here
03:34:13 uh the loop instead of preloading data um or instead of loading all of it it only loads data from the search
03:34:21 request okay so yeah because I uh you just do that by enabling this um right there okay and if you're curious how on
03:34:30 the homepage how I have a search box here okay um on the
03:34:36 homepage that is also where is it oh here that is also a form okay that
03:34:44 is set these the search URL uh to the search page okay so we just do a get URL action and we point it to the URL of the
03:34:53 search page which is SL search right so the URL on this page
03:35:08 web page and it's just the same exact form um in this form in the homepage form I just made the text smaller right
03:35:16 so I just made the text smaller and the the box and everything a little bit tinier um and but yeah it's just it's just a foundation 6 form that points to
03:35:24 this page so is this form this form right here it's the same thing I just styled it I added some additional styles
03:35:31 that just made things bigger so that's
03:35:41 it okay right the last bit um authentication
03:35:52 okay so um here we have a button that um shows you how you can edit your profile okay
03:36:01 now it is impossible um for this particular form if you look at the you know as the meeting ID it loads the
03:36:09 meeting from the URL this doesn't do that and that's a security because we I don't want people
03:36:17 to be able to edit other people's profiles right so like if I put in uh you know uh
03:36:24 profile any other profile via the URL this form isn't going to do its job right um that's because um I've set it
03:36:33 to only load in the data for the user that's currently logged in okay now before I can go on how I
03:36:42 accomplish that let's back up and look at how we lock down this entire
03:36:51 website um from the stack standpoint it's super easy okay at the top of the pages that I want locked you just add
03:36:58 the page lock stack which is right here in the authentication group of total cms3 add that at the very top of the
03:37:06 page now one important thing here is place this before the CMS core stack okay so this needs to be the very first
03:37:13 thing on the page if you want to lock it okay if you if you put this below CMS core uh some it's you're not going to
03:37:20 get the your expected Behavior okay because it it this has to happen before okay that's why I have this little
03:37:28 warning in there it has to be before the CMS core stack it actually threw me for like an hour or so I thought I had a bug because I I basically what I did is I I
03:37:36 put this inside of sight Styles behind or after CMS core um and things weren't working I was like I knew I had this
03:37:45 working before what happened and so yeah it was just cuz it has to be before now uh if you remember
03:37:53 um in total CS uh there is an authentication group okay there is an
03:38:01 authentication collection if you notice that only has me right in it okay and then um members so
03:38:10 um this this was a this website was actually really great use case for this and a test for this because um I want my
03:38:18 members to be able to log into this website okay but I don't want them to be able to access this admin
03:38:28 dashboard so uh one way to do that is to create two different authentication
03:38:35 collections um in order to log into this dashboard you have to be added to the O collection this o collection is special
03:38:45 okay it again you have to be in the off collection to be able to access this dashboard if any if a user that was
03:38:54 logged into um this website any of the users and if they tried to access that dashboard because they knew the URL or
03:39:02 actually on the bottom of this page I actually added a nice little thing a little lock down here when you click on that it takes you to the dashboard um but if you were again if
03:39:10 you were logged in uh as a member and you clicked on this you would get an access denied okay because they they
03:39:16 they are not a part of the off collection now if you look at the O
03:39:26 collection there are a certain number of fields required for um an off collection
03:39:34 a you need to have a field called active you need to have an email field you need to have a password
03:39:42 field um you need to have a creation date a log uh a last login and a login
03:39:50 count okay there's some other things that you could optionally add that but they're not required such as um maximum
03:39:57 login count expiration date and groups I didn't need these particular
03:40:03 three features for um my use case okay but if we look at the members
03:40:10 collection okay um let's just go into the into the definitions here uh you'll notice that I added the active
03:40:17 field right that requirement um so in order for a collection to be used as authentication again it needs to have
03:40:26 these fields um uh active uh password uh and all those other ones I said uh last
03:40:34 login account created last login and they have to be named this exact thing if you're ever curious you could just go
03:40:41 look at the off schema you can see all the EX all the available Fields here here okay and uh I haven't do I don't
03:40:49 think I've documented that yet but I'll I'll make sure I document uh custom authentication
03:40:55 collections okay so um with that said that's how that is set up um you just need to make sure when you create and
03:41:03 again you can add as many other extra Fields as you want so I added like you know all these social media Fields all these goals and about me stuff okay um
03:41:12 you can add additional as many additional Fields as you want but uh you have to have uh those other fields in order for authentication to
03:41:22 work okay um so uh back to the rapid Weaver um so imp page lock um since I'm
03:41:30 using a custom authentication collection um you have to Define uh the collection that you're using so if you turn this off it's going to assume that you're
03:41:39 you're using the oth collection um I don't want it to use the O collection I want it to authenticate against the
03:41:45 members collection okay and uh then basically on every single web page that I want locked I I put in that same stack
03:41:54 now I probably could partial this out but I I was I just copied and pasted the stack okay but yeah to be to be fair you
03:42:02 probably would want to um now remember this Charter uh page I don't want this page to be authenticated so I don't have
03:42:09 a page lock stack on this page because this the only page in the entire project that doesn't require a login
03:42:16 but all the others do so the search edit profile they all have the page lock stack and they all have the collection set to
03:42:26 members okay so now with that set up um once you um if you ever to go to any of those web
03:42:34 pages it's going to uh here I'll log out right um again if I go to um if I go to
03:42:40 the Charter page again I can access this page again I'm
03:42:48 not logged in and I know that cuz I don't I'm not seeing the menu up here because I'm not logged in um and if I go back to the
03:42:56 homepage okay it's going to require that I log in oops what happened did
03:43:07 I oh yeah I changed my I or I changed the the the the email address on my account uh support
03:43:26 oh there it goes okay okay so I logged into the account that doesn't have access to the dashboard right now I did that on
03:43:33 purpose um so I can log in and I can see all the data okay um I can go and I can edit my profile okay um
03:43:43 and uh but if I click on this I'm going to get an access denied cuz the account that I just logged into um doesn't have
03:43:52 access to the dashboard pretty cool
03:44:01 okay uh page lock stack locks down a whole page can you set a message to inform them that they have no access
03:44:08 well yeah you just saw that right so um yeah when I logged in it said access denied um and then you can either click
03:44:16 this page or click that link or after I think 10 seconds it'll it'll redirect you back to where you were
03:44:25 okay um okay um now let's talk about this edit
03:44:31 profile page okay in this edit profile um
03:44:37 form he so if we look here um this um it's the same thing it uses a custom form
03:44:45 okay um however if you'll notice that it's it's quite a bit nicer right I the
03:44:52 member field the member uh data or the schema has a lot of fields and I didn't want to have it just like this one huge
03:45:08 tabs um and it gets you access to all the various parts of a profile okay and um yeah I just I thought this was an
03:45:16 interesting um UI okay so um to do that again I'm loading
03:45:24 in the data oh well um so there in the off uh form there is a user data stack
03:45:34 okay and um when you add this to the page it loads in the user data for the
03:45:40 currently logged in user okay so in that case I'm logged into
03:45:47 this account it loads my account information onto the page okay and it gets you access uh actually in the settings of this stack
03:45:56 it shows you all the various things that you have access to you have access to the user ID the username the user email blah blah blah blah blah blah blah okay
03:46:05 so um let's skip this tab layout that I built all right we can review that in a little bit if we have time but I want to
03:46:12 go into this collection okay or this custom form so in this particular custom form I I am not using the autobuild form
03:46:21 feature remember in the other one it was simple I just clicked that and I I just magically got the form okay but it was the form it was just a simple
03:46:30 form okay and I was okay with that but this one I don't want one big huge ginoris
03:46:37 form so and I also want to um now this actually feature I isn't in your version
03:46:44 okay the this uh checkbox to say load object that doesn't exist that's something I just added uh cuz I realized
03:46:50 I needed it okay to do this so um I'm loading in an object and I'm loading it from the member's collection and I'm
03:46:59 giving it the user ID again I'm you I'm I I can use user ID because I added this stack to the page
03:47:08 and it loads all the user data into a variable called user therefore in here I can give it the
03:47:16 object ID of user ID and because that is a variable I need to check this little button right
03:47:24 there now if I wanted to load in if I turn off that I can put in you know Joe dworman but then at that point that's
03:47:32 always going to load the Joe Workman user and that's not
03:47:40 help um user. ID because we want to dynamically load in the currently logged
03:47:47 in users I from their ID okay so at this point um what you need
03:47:56 to do is um you need to add in oops um you need to add into this form I this is a big form it actually has a lot of
03:48:04 fields okay I just have them hidden okay um here let me let me shrink some of
03:48:13 these actually okay so this uh this is the first tab so
03:48:21 um if you notice here inside the form I have a tabs content stack and then um inside the tab
03:48:29 contents stack I have the contents for an about tab a social tab a goals Tab and a password
03:48:36 tab okay and then again that's the contents so this is the contents of the social tab this the contents of the goals Tab and this the content of the
03:48:45 password tab okay so if we here if we look at the password tab you'll notice that it only has the contents of the password field okay and you add that
03:48:53 through this little plus button and you can add in the type of field so for each of these fields you put in the property of the
03:49:02 field and you can put in a few other options within the field
03:49:09 okay now if you wanted you can also do custom attributes with that point you can do a custom label place holder and help text but if you if you don't do
03:49:17 custom field attributes it pulls it from whatever you stored inside the CMS which is what I'd recommend okay so it says label here but
03:49:25 on the on the page it actually pulls in password because that's how I've labeled that when I set up the schema
03:49:32 okay so again the password uh tab has the password the goals has the goals the
03:49:38 two goals things right um the social has all the various you know soci on or LinkedIn Instagram YouTube blah blah
03:49:47 blah and then the about tab has the uh the image field which is set to a property of photo the name field which
03:49:55 is set to a property of name so on and so forth now there are some fields that I want I don't want the user to be able
03:50:01 to access okay so like the ID field um I so I add all the ones that I don't want
03:50:07 to be seen um I I add them as hidden Fields right so basically what it is is down here I went in Hidden field and
03:50:16 then I added in the property CU I just want to I don't want to remove the values another thing I could have done is I could have just
03:50:24 Chuck them into a a you know a visibility stack or something like that as well okay
03:50:32 um so yeah so that that breaks again that breaks down uh all my tab content and it pretty much turns my form into a
03:50:40 tab content right and then um now now I I based this layout um off of actually
03:50:49 there's a template called um tabs or vertical tabs okay it's part
03:50:58 of my free template pack for foundation 6 um and that's what I use to build this out um what's kind of cool is um by uh
03:51:06 when there's enough space we have vertical tabs on the left and on mobile we have tabs on the top
03:51:15 right so um that's a nice little setup as you see it just uses Vis I I create my tabs twice and I just use visibility
03:51:23 to um show and hide them based on the break points right so this one shows for uh hide for small only and this one is
03:51:32 show for small only right pretty cool I like it um now I did do a bunch of
03:51:39 customizations for tabs um and you see down here I have all these swatches that customize the look and feel to get me
03:51:48 the basically the background the colors um to match my site um I have round corners on the tabs uh actually that was
03:51:57 just the um I think that that was just the radius Swatch uh or not oh no there yeah it was
03:52:04 just a radius uh radius class okay but essentially like on the border I remove the Border because tabs have borders I
03:52:11 remove the Border um I uh by default the the tab contents have backgrounds um I just wanted it to look
03:52:19 like it was on the web page right so um I just nuked the background on the tab content so it's transparent it's
03:52:26 none um in the panels uh by default there's some padding around this um I I
03:52:32 nuked the padding um background on the tabs so the background here um I wanted it to be one of my colors um that I
03:52:40 defined in sight Styles so I just used the Swatch Color Oops Swatch color of white which is as you see it's that offwhite it's not quite white
03:52:49 right um and then I styled let's see the borders uh the fonts I made them larger um for some reason the the tabs have
03:52:58 very small text by default so I made them bigger okay um I and all of these if you're curious
03:53:08 um I didn't know the classes of these off the top of my head um and for tabs if you notice there there's all these
03:53:14 under C Swatch selectors element there's all kinds of stuff for tabs so there's tab container there's an individual tab
03:53:22 there's an individual active tab there's the tab content wrappers and the tab content panel okay so based on all of these you
03:53:30 can uh you know I used uh this page element to Target all of these okay even like here like see to Target the active
03:53:39 tab is actually quite a complex CSS selector you don't need to know what that is you just click t tab active and that's if you see here the active tab is
03:53:48 that dark green okay and as you see it pulls in the color the primary color from site Styles I don't actually set
03:53:55 the color it just uses the primary color from site Styles okay um so yeah there's just a lot of various little um little
03:54:04 doohickeys um what was this one oh this one was by default tabs have a uh they're underscored the active uh the
03:54:12 active tabs underscored I didn't like that so um yeah I this one was used font Pro I should make that easier in the
03:54:21 future just normal Foundation okay okay um so yeah that's pretty much how this
03:54:28 form was built again uh the magic is uh I load in the the currently logged in user a the page is locked so you can't
03:54:35 even access this page if you're not logged in so um if you are logged in then it's going to continue and you will
03:54:42 uh we're going to load in your data um and then in the form I'm loading in your user ID so it always loads in the
03:54:50 data for just the loged in user um and it generates this cool tab layout for the
03:54:59 form I think it looks actually I'm I'm really happy with this with this little site um I say like I think uh this
03:55:07 feature of the custom form was the only thing I added to Total CMS to accomplish everything I've showed showed you
03:55:15 today um everything else is uh is done uh which is pretty
03:55:29 cool okay um with that guys I I think I've gone over the entire site um that
03:55:36 was 4 hours for those of you that are still with me man you are a hero um I know I didn't I kind of sped up and I I
03:55:45 I glossed over some things um but yeah uh hopefully you enjoyed hopefully you
03:55:51 got some out of some stuff out of today um and I know it was it was I'm sure you're going to watch the the the
03:56:09 any other questions um please go ahead and post on the community on the for this event I'm happy to answer any
03:56:15 questions um I know someone's going to ask me for the project file
03:56:23 um I don't know what to do about that uh this is a site that I I did build it for
03:56:30 an actual project it wasn't a paid project but um I'll consider it um so yeah uh I hope
03:56:40 you enjoyed this are the lasting questions I think I I know there was a lot of stuff in the chat that I didn't mention but I think I answered all of
03:56:49 the questions um so if you yeah if you have any other questions um if you want answer now speak now or forever hold
03:56:57 your peace um if not thank you very much everybody um I'll stay on for a couple minutes and and watch the chat to see if
03:57:04 there's any um anything else here let's let's PR through the page um see if I I
03:57:11 missed anything um in particular one thing I I'll say things some things I don't like okay
03:57:21 um I'm not sure I love this scrolling container here on the homepage okay um actually I I didn't um
03:57:30 when I was building this prior to like an hour meetings here these two anything in the past you just go to the search page or something like that you know um
03:57:39 yeah and maybe by default in the search page I'll I'll just display everything by default instead of having a blank page
03:57:48 um yeah uh I'm not yeah I don't think I love the the scrolling container it kind of makes it funky as you're scrolling down the page because once you once you
03:57:55 hit this block and you start scrolling it Scrolls that instead of the web page so H I don't know I I don't love that
03:58:02 okay um when will you release the missing feature um oh for the custom forms um there I'll admit there are a
03:58:11 couple other minor little things I've tweaked um I was thinking of releasing it this week just as a very minor update
03:58:19 since I'm doing the I did this live stream um so yeah probably uh this week again it's just a some minor things I
03:58:28 know everyone wants all the the depot and the other stuff that I haven't done yet um but I I could probably ship an update this week uh with these minor
03:58:35 changes that I that I've done okay um that way it's just out there okay so yeah I I'll commit to doing that before
03:58:43 the hangout on Friday I I'll ship an update um beta whatever we are at 13 right now um with what I've done here
03:58:51 okay good question thanks Steve um so yeah I didn't I didn't like this what else didn't I
03:58:59 like um oh I didn't go over the QR code stuff all right really quick
03:59:11 um okay where is the QR code good stuff all right here um so funny enough you know how I talked
03:59:19 about how we have these light boxes okay that are outside um for the QR code stuff I actually have a light
03:59:28 box um in the in the loop okay and
03:59:37 um there is a uh here let's copy and paste this into
03:59:44 okay um so essentially what I'm doing here is um there is I built a twig extension for QR codes um and actually a
03:59:53 lot of this is documented uh if you go to uh oops uh shoot hold on one
04:00:03 second let me log into my other account
04:00:11 here all right um we go to the docs and then go to
04:00:19 um uh filters no uh shoot oh QR codes
04:00:26 boom um so uh here's uh docs act okay another uh the documentation for for VCF
04:00:34 and event um they weren't detailed docs like this they were just uh Stupid examples like these ones were so another
04:00:42 update for this is some of the QR the doc for the the QR codes I detailed out all the various Fields okay um so yeah
04:00:50 so basically this QR code. VCF VCF is a virtual contact whatever F stands
04:00:58 for um so this is an a contact card right um so yeah so uh we did that so
04:01:07 basically I have qr. VCF and I do first and then what I do is I the first name is the member name I split by the space
04:01:14 and I put first the last name is member split last right um and then I do uh
04:01:21 member phone member email member website okay
04:01:29 um uh and yeah I for this particular use case that's all I needed I didn't need any of the other member Fields okay um
04:01:38 then so where was I uh oh I was in the I was here right so basically inside
04:01:44 because this uh this generates an SVG file okay this macro generates an SVG
04:01:52 that is a QR code so I put that inside of an SVG stack okay and I I in fact actually I I
04:02:07 does this funky thing where it like yeah does something weird um yeah I actually didn't need to use an SVG stack I could
04:02:15 just put an HTML stack um okay but anyway I'm getting beside myself um so here I have a light box that I set if
04:02:24 you look here remember I said earlier if you have a light box inside of the loop um you have to actually make sure that
04:02:30 the ID is unique so I did qr- member ID okay um so now that that now that
04:02:39 light box is unique for this member okay and then in the Social Links when I uh
04:02:47 do the link container around the address card um I do data- open and then the
04:02:54 value where the light boox ID needs to go needs to needs to also contain the
04:02:59 member ID so I have qr- member ID see so I do data open oops how did that
04:03:10 happen data open and then QR member ID okay and then I don't actually need to link to anything so I just leave the
04:03:18 default link to be um JavaScript void zero so yeah that's how the QR code
04:03:25 stuff was done um and if you're curious I actually have some uh here now that we're talking I think it
04:03:33 was did I have some QR code swatches oh here i' had an SVG Swatch
04:03:41 that just um makes the SVG use the primary
04:03:47 color okay so um so yeah the SVG just uses the primary color so when you when you click on it even the color of the
04:03:56 SVG goes with my website's colors pretty
04:04:04 cool oh another thing I didn't even talk about is if you notice on each of these I also added a little tool tip so it it it shows you the the network right so
04:04:12 mastedon X Twitter Youtube so on so forth that's super easy to do as well um inside the
04:04:21 svgs where is it here in the Social Links um in the link container for each one I just put add tool tip and then
04:04:30 LinkedIn and then this one is ADD tool tip Instagram so so on and so forth pretty
04:04:37 simple a lot of that stuff was I just added like one bit at a time it was like okay you know I just created like task
04:04:44 list oh actually you know another cool man I I really got to get going but something cool that I something I do
04:04:52 when I code is um I do stuff like this like let's say this is some code right and I'll I'll do a little um you know to do
04:05:02 um you know blah blah blah okay um right let's say it's
04:05:09 uh well if if I'm in like an actual code file it actually uh when I when I when I add the word Todo to a comment um it
04:05:17 actually turns this line orange okay and what I found myself to do is like when I had an idea let let's say um I wanted to
04:05:26 add QR codes um here okay and I didn't want to forget that and I could have like a separate to-do app and I do but a lot of times for just simple stuff like
04:05:35 hey don't forget to do this here's here's a little trick okay I chucked a pen on the page okay
04:05:43 and then I did this um so I would do like I don't know
04:05:49 too um QR codes something like that okay um and then what I do is I just set that to be orange and let's say orange I
04:05:58 determine orange to be my to-do color okay and then content is I'm not going to add any content to this I always hide
04:06:05 so now I have this this bright orange um pen and I know whenever I see a bright orange pen it's a to-do
04:06:14 you know and you can even do something like you know you can make it big something like that so you just do you know oh that's too big but
04:06:24 whatever you know so yeah you know uh I don't even think you need to header I you can like that or not but I would
04:06:31 just probably just do that right so whenever I see an orange pen somewhere on the page I know it's a reminder to me like hey I there's something I need to
04:06:39 do like I should add this QR codes right here you know and uh I did that a few times throughout this project I had an idea and I didn't want to add it to my
04:06:47 to-do app so I just kind of chucked cuz I do that in code all the time like I said I just Chuck in a little to-do comment and just to remind myself later
04:06:54 hey eventually I need to to do I need to do this and I was like why don't I do that with pens and uh I don't know I kind of liked it it was an interesting
04:07:02 workflow so take or leave it okay guys you got me for an extra 15 minutes when I said I was going to leave
04:07:10 so um I'm out of here I promise I'm gone now
04:07:17 um all right okay guys I am I'm going to call it there I think I reviewed everything
04:07:26 um about this site if you have any other questions or things you want to ask me um join me on Friday at the hangouts or
04:07:33 post on the community I'm happy to help and answer things out so take care everybody um that was I think the longest live stream I've ever done so uh
04:07:42 hope you enjoyed it and learned a lot and learn a lot in the future because I'm sure you're going to rewatch this and play it and pause it and do all kinds of cool stuff so take care hope
04:07:50 you enjoyed this hope you got some benefit see you on Friday bye