Transcript

00:05 sweet we're live let's see yep there we go 12 24
00:13 excellent there we go hey everyone how's it going everybody so i unfortunately have chris on for us
00:21 today sorry you know uh
00:24 [Laughter]
00:26 and we just lost more than half the people oh yes oh man
00:30 [Laughter]
00:33 so i thought it was fun you know i know a lot of you probably joined last week and um you you know we built that stack looks
00:41 like i'm a little blurry there we go okay um you know we built that stack and at the end of the live stream i challenged everybody to
00:49 um try to build the same exact stack using swatches and um
00:56 yeah voila chris was the man he did it uh there was actually one other person uh that posted i think was yesterday actually
01:04 um as well did you look at his project chris i i i wanted to look at it i didn't yeah it was an invitation similar to yours very much so i mean it was
01:12 almost you know verbatim actually oh awesome sweet um so yeah i thought it'd be fun to have chris on today
01:20 and uh to talk about how he built um we'll show what he built how he built it and um i gave him a little bit of
01:27 feedback on friday but maybe we can we can have a look at it again and and get some more ideas and play around with some more stuff and then um at the end of today chris
01:36 has a special deal for um everyone and he's got a cool something really cool i know he's been working on it for a very long time so that'll be a fun little
01:45 launch for him so yeah so uh without further ado chris why don't we why don't we jump in and uh
01:52 let's see which what you built alrighty so
01:59 get back to it okay so last week we were learning how to build a stack that actually did
02:07 something like this so it's a um you know like a profile hover card where when you hover over it the image kind of zooms in and over to
02:16 the to the right a little bit and then you have the social media icons come up and i can't remember actually if the
02:23 name changed color on the stack one but i i wanted i think originally it was fully transparent but i kind of like you have it there
02:31 yeah i mean just just you know it's like something extra i guess so you know i built this and uh i know i think i got
02:39 pretty close to what the stack does um and then you know being the obsessive type that i am i
02:47 wanted to take it further and so i total cms'd it and so now i have you know
02:55 the ability to have a blog list ooh i like the little glow that you added there yeah i um i was i wanted the i
03:03 wanted the black text like over here on steve uh this is uh one of my best friends cats by the way steve um it you
03:11 couldn't really tell maybe i would adjust it a little bit more but you know i just wanted to put like a a white shadow on it to see if it would
03:19 work and then it did that glow effect and i thought well that's that i like that
03:23 [Laughter]
03:25 and so so like i went and i just i added you know in the total cms blog form you know i have the name
03:33 the email a title and then the social media info and so you can now have you know your thing
03:40 with its own unique email unique social media posts and then the unique titles and then in one and what joe was talking
03:49 about was having the the social media and the well he wanted maybe the social media and the name to come in at a
03:56 slower pace but i thought the social media in the title and have the name come in immediately so you see how it kind of fades in just
04:05 a little bit after yes yeah just just little little touches like that so okay but i'm i'll show you how i got all
04:13 that but i think we first need to actually build the card so i'll go back to
04:21 my empty template and i have my notes over here in case i get a little lost okay so really all i have is uh site
04:29 styles with fun awesome and utility classes up and then uh i have my first swatch palette and then just a container okay
04:38 so how i started out was a simple one column and
04:46 you got to give it some width and height i had to lower my resolution on my
04:53 monitor for this and everything's a lot longer and out of place all right so
05:01 the width actually i'm going to name it so i named it anim card
05:10 card and the width i did 300 by 380. i think that that was pretty similar to
05:18 what it was in the um in the uh stack so let's see 300
05:26 oops and i'll just keep them consistent across small medium and large and 380.
05:38 okay let's see beautiful coming along
05:44 [Laughter]
05:45 all right so and then the next thing i did was i gave it oops
05:53 i gave it a background ah kind of important to have a background
06:01 for your profile picture okay zoom controls always in the way
06:12 sorry everybody i lost my thing there we go so my background i'm gonna make it an
06:18 image there's my nose hope you like it
06:27 anim card okay so let's see let's preview that
06:34 still nothing okay that's fine back okay
06:43 and then what i did was and oh yeah i got to give it the uh the class
06:51 ah my nose all right and so yeah this you know it looks funny but
06:58 like it you need to have like in order for that text to come through you know obviously we need to have an overlay as
07:05 well so you know i mean i literally i just started building as i saw and that's kind of how i i do it you know i just see them as like little blocks you
07:13 know joe gave us you know the unlimited lego set so you know each one of these swatches is just you know a different kind of piece
07:22 so where's my background overlay or overlay background there we go and
07:30 i'm gonna make that zero and i'm just gonna go through this quick because like it's a lot
07:37 it was a lot of little steps and i set the i just duplicated that and i'm gonna set the uh overlay that we want to about point 30
07:46 and i'm going to make that hover and change the class am cardia
07:53 and atom card now i notice when you previewed the height wasn't was a little funky um
08:08 very that's very simple you know um and it's already a pretty good start and actually you know when i was doing this
08:15 i was like why i hate it being on the left i hate it being to the left so i'm going to fix that now because it's going to bug me so
08:23 i'm going to do card and if y'all don't know if you have something like this
08:30 and you want to center it it's very simple margin swatch and then you set it to auto
08:38 and there you go centered okay so and now okay so i'm gonna go ahead and
08:47 just do the transitions um as normal but i'm gonna show you guys something joe showed me last week on how
08:54 to keep that nice and tidy and kind of cleaned up so i'm going to do a transition swatch
09:03 animal card oops all right
09:13 all right so here's the thing this is what stumped me when i first did it it's not working right i want the overlay
09:20 background to transition you know smoother and it's not why i don't know i'm not a programmer like joe
09:28 but i do know that you need to not use the class or an element you go into here
09:36 and you do anim card hover still not working what i do wrong
09:44 anime card hover over before oh yeah
09:51 before not not hover before there we go there we go so now another thing you could have done
09:59 just to remind me if i interject him while we're doing not at all oh okay so um if you were to use the class setting
10:06 go back to that swatch okay all right so and then now you pseudostate before
10:14 oh okay there you go there you go and and you can you know that we're affecting that because if you look at the bg overlay look at the swatch that's
10:23 there or the the the selector on the bg i'm pointing on my screen not like you can see
10:28 [Laughter]
10:30 oh no i i see exactly what you're talking about yeah so if you look at the selector there you see that it says adam card colon before right so it kind of gives
10:39 you a little hint that that's what the overlay vg swatch is targeting so um so yeah there you go okay so
10:46 that's yes that's and that's good um for the one-offs then i mean that would work you know really well but later on guys i'm going to show you i'm going to stick
10:55 to this for now um because you'll see why in a little while i know why but yes he knows why of course joe knows all all right so
11:04 let's see next all right i think we're done with the atom card right now actually no we're not we want a radius i
11:11 forgot about that so we want obviously radius rounding okay
11:20 you know roundy that's the one swatch where i use the human friendly term instead of like the technical term and so many people's like where's the radius
11:27 yeah i know one time i didn't use the technical term you know thanks thanks joe thanks for that
11:35 all right so it's hard to see probably on here but the card itself is round but then if i hover over it it's not round why is my
11:43 transition yeah we can see it oh wait i gotta take that off there we go okay so you can see the corner right there right
11:52 yet another thing that stumped me for a while okay so i'm going to take this copy it and for rounding what i'm going to do
12:01 is kind of the same thing i did before with the transition and i'm going to do i'll just copy and paste it
12:12 okay and preview and now we have rounded corners for the for the overlay so the overlay because
12:20 it's the before i guess you got to play a little different game with it and yeah but you know that's that's how you uh do that
12:29 all right so i'm going to put another swatch palette up here because i like to keep things separated all right just a little pause really quick
12:37 while you build out this maybe um just let everyone know what is a before element there's before and after think of those as like little
12:45 extra virtual containers that are attached to your class element but you need to target them differently
12:53 if you want to do things with them okay so um so yeah so that you know work when you say we're creating a before element like
13:01 overlay bg does um it's just this fake element um that it it's it's there and we can style
13:09 it but its styles are not associated with the actual class it's like a separate element does that you know so hopefully that
13:16 makes a little bit of sense um so yeah there we go all right so i'm for my interior so
13:25 okay let's look at this so okay i got the the main card with the with the picture on it um what i want now is to have an interior
13:34 where there's a that white border that goes around right so the way i did i know the joke told me a different way um and
13:41 honestly i heard most of it but just for for today's purpose we're gonna do it the way i did it
13:48 because it still works so what i did is i have another i'm going to put another container or a column in here another one column
13:56 and i gave it a width of 290 percent pixels and a height of
14:04 was it two ah oh what's that let me re re-add this is what 370.
14:16 37
14:17 [Music]
14:18 okay and 200 pixels perfect okay so you know just interior column in there uh and then what i'm going to do is
14:28 put the border on that okay now because we wanted to be transparent initially
14:36 i'm going to just you know keep simple and then 0 pixels give it the class
14:46 i'm naming this card int by the way card interior all right and then i'm going to copy and paste that and i'm going to give it a 1
14:53 pixel width and make it a solid white solid-ish white
15:01 all right there we go and see still can't see it that's all right so i'm going to give it some padding
15:11 card interior and i'm just going to do so i'm going to keep it on simple give it an 8 pixel padding
15:19 okay still not showing let's see
15:26 oh i need i keep forgetting to do this card that helps a lot you know giving the thing you want all right so there we go
15:34 so i'm gonna i want to take the padding off i think maybe i had it on there before let's see
15:44 that's fun let me see what i got going over here
15:54 [Music]
16:07 them both set oh i see okay maybe i just have it the one border
16:15 and i have it set to hover over this animal card
16:27 it's not i'm gonna delete this real quick and see what okay so you do need two orders yeah no i know
16:35 and i have it i have two on my my project file that i'm that i was working with and i'm trying to see the difference between them because
16:44 one is actually they're kind of both the same if you're wondering about the position it's probably a margin you probably need
16:51 to add some margin to it yeah i need to add a you need to add a five pixel margin to it there we go okay i'm not sure what was
16:59 so okay so i i have this um here let me copy and paste that i'm gonna make this a one
17:09 okay so now okay now it's now it's working the way it should i'm not really sure why maybe so let me let me tell you a better
17:17 way by going from zero to one you'll notice that things kind of will shift a little bit the contents will shift because everything's getting that
17:25 that extra one pixel is getting added so when you're animating borders the best thing to do is leave it at one pixel
17:32 and then and then change the color from completely transparent white to full white does that make sense yes yes
17:41 it is so then i would do so this one would be um copy and paste
17:49 that i guess so that all right and then that one that this one set hover parent and then make that zero make that zero
17:58 uh well that actually want the the other one being apparent my bad the one that's fully white is going to be hover painted okay and then the other one will turn
18:06 that off right does that make sense so the one pixel is always there in your layout so things don't get moved but then the color it's just the color
18:14 of that border changes okay that makes more sense okay yep that makes sense i had a padding
18:22 you know you probably tell me a better better way to do this too but i put a padding of eight pixels on this
18:31 what's it oh yeah and i got to do my um i forgot the i did this where it was vertical line i
18:38 think middle ah that's what you did okay yeah okay and then center horizontal
18:50 no let me check mine over here
18:58 yep center middle and then
19:01 i think that got positioned relative i don't know why oh i do because of the position stack i use later
19:10 that's okay i'm not gonna worry about it too much because i don't waste time trying to troubleshoot it but it clearly i got it to work
19:17 one time um okay so then i'm gonna do a transition margin auto maybe actually that's uh
19:26 you know that might actually be it i'm autumn yep that was it
19:32 joe for the rescue all right so again like i said before that you know if you want something centered i d i just use in a utility class for
19:41 this uh on that interior uh column good catch joe all right and then rounding
19:50 i'm gonna do card interior and all my rounding i they're all the same um
19:57 actually they're all 10 radius so and you'll you'll see the benefit of that in a little bit all right so there you go
20:05 cool all right let me get my card int and
20:14 smooth nice okay so i'll do the um the background animation now as well so i'm going to go ahead and use i'm going to
20:21 use a um what's it called background props it's in the swatch pack if you guys don't have a swatch pack get
20:30 the squash the swatch pack because it's awesome let's see card anim
20:38 and then i'm going to do scale background and i'm going to get my exact numbers because i was it took me a while to
20:46 playing with it to figure out the right amount so i did 560 by 650 not percent
20:57 560 by 650 okay let's test that
21:04 didn't work why not and then
21:10 oh i think i had to do a bang important no
21:17 left middle padding box okay one do it on hover left middle
21:25 oh yeah i gotta do uncovered i'm dumb all right there we go
21:33 these lives man make you kind of trip over yourselves all right
21:44 let's see scale background left middle adam card hover
21:52 oh oh okay not card in them there we go
22:07 on that to make it smoother and then this one though this one is going to be
22:16 actually i think this anime card hover and card
22:28 yeah we're getting there
22:42 i don't have bang important on here so i'm going to take it off just to keep everything the same huh i'm not sure why it's doing that
22:51 the little if you go to transition yeah swipe thing and go to the general
23:07 were you only targeting a particular property on your setup let's say like background size uh-oh background
23:14 position yeah i got it set to all
23:22 so let me check my anim card background property if you go to back to your background the original
23:31 background setup did you have a background size set two maybe
23:38 uh click on i i think you need to have a scale 300 and 380 there we go that's what it was
23:49 303 there's a reason why it took me about an hour and a half to do all this initially
23:57 there we go all right so just so everyone's clear i'll go back real quick all right so one
24:04 thing that i didn't do in the um background original background swatch is um obviously setting the size and
24:13 if i'm not mistaken joe pointed all that out when he showed me the background props uh trick so
24:21 um you need to have a starting point you know for this to scale from so yeah so there you go we forgot to do
24:28 that yep whenever you're transitioning so he's doing this animation using a transition swatch correct so in order to transition to a value
24:36 which he's doing in the background props setting he's transitioning to a larger background size you need to have a an initial value
24:44 which is should be set inside the background swatch right so you said he's setting the so what he just did is he fixed the background size to be 300 by
24:52 380 and then on hover he's changing the background size to be something different i always think he's he's also changing the background position i
24:59 believe as well and um so and then when you add the transition swatch that will then cause the
25:07 um the animation of transitioning from one value set to another value set yeah good job hey
25:14 all right so next thing is just the the title you know the name of the person so i'll do a font color swatch
25:23 and i'm just going to make it like a a grayish color and i'm going to name it
25:31 card title and then i'm going to copy and paste that and i'm going to make that white
25:39 okay and then another transition swatch and card title
25:48 gotta make this hover actually this one is gonna be anim card and hover parent exactly now why
25:57 did you do that chris because here i'll i'll not do that and show so if i do that if i hover over anywhere in the card it
26:06 won't change if i hover and even if i don't if i hover over the thing it won't but if i just turn on um
26:14 that's because you didn't have hover on yeah if i do that that's the word
26:22 weird and transitions on that card
26:28 title cards oh god you know what i'm gonna learn one day i'm gonna put sticky notes all over my
26:36 my screen add the stupid class to the thing you want it to affect maybe in foundation seven i'll add a feature that allows this it'll just
26:45 automatically add the classes from your head no that would be fantastic i'll try to do that yeah if you can just know what i'm thinking at all times when i'm working it'll be awesome thank you
26:54 [Laughter]
26:57 all right you can call the dummy swatch all right here we go so now if i if i hover over the card it won't do it but if i hover over the name then it will
27:05 and so i wanted to do it when i hover over the card so i'm going to come over here and i'm actually going to do instead of this hover
27:14 i'm going to type adam card and then hover parent so now
27:21 when i hover over the card anywhere it actually comes up and does what i want it to do okay
27:29 awesome glad we got that done all right so then and i think that's that's actually fine where the position where it is i
27:37 mean you could obviously make it center right you know add some padding but i'm happy with where that is right now um okay so then i'm gonna do another
27:46 swatch palette because i like to keep things organized and i'm going to now do a menu just a
27:53 simple menu okay and i'm going to just i'm going to
28:09 oops oops there we go all right pretend i just built all this out and all this is is just you know
28:17 font awesome uh code nothing big uh but the menu is just it's vertical and i i'll text alignment center
28:26 um and so okay so card social this is you know i i already have the class there so i don't have to worry about it all right
28:34 so i'm gonna i'm gonna start styling the uh the menu oh i guess real quick we can look and see what this does okay i don't want it to be like a tattoo on
28:42 my face so we need to move it and style it so i'm going to use the menu swatch or menu styles
28:51 and i'm just going to set the text to white and the hover text to white with 80 opacity
29:08 social there we go okay so yay now i'm gonna do a
29:16 an opacity swatch card social
29:23 and i'm gonna set this to zero copy and paste that set that to 100
29:31 and i'm gonna do the same thing i did up here with the uh this transition i'm just going to copy and paste it down here
29:38 and change the title to social because i want it to happen on hover the transition
29:48 social i'm going to name it social card card social yeah good
29:57 and on the opacity one area i need i need to actually do this so anim card
30:06 and hover okay so now if i hover over it anywhere it will do the
30:14 the transition to show it now i want to position it so i'm just going to use a position swatch
30:23 okay and so earlier um i i set this column to be position relative so that i can
30:30 actually position things within it so i'm going to position this menu relative to this
30:39 column okay and so i'm going to do is to the left and bottom
30:45 and let's preview that did i do
30:51 [Music]
30:53 pixels oh parent there we go i had to set the browser okay so there you go now it comes up
31:01 it's in the bottom left of this column okay so yeah so i mean that's
31:09 more or less what the stack is that joe built for us to do but the nice thing
31:16 about this is you know that stack and i mean look i'll be honest i've i've bought that stack in the past uh you know like i've
31:25 i've found stacks that do similar things and you know you spend like 10 15 20 bucks on them and they're they're great for you know this but
31:34 next thing you know you you want to start you know adding more stuff to the stack and and making it you know more elaborate or you
31:41 know wanting it to do something that it wasn't you know originally designed to do and that's where the beauty of you know swatches comes in because
31:49 you know i i did all this with you know however many swatches up here and i can do so much more however i want it to you know i can make
31:58 it look however i want it to look and do whatever i wanted to do so it's that's that's just the power of foundation sticks and swatches
32:06 um i mean that's pretty cool you know that's pretty cool looking and you can go through and you can add you know your your different things and
32:14 so like i i showed over here you know i went in and i added the mail button and you know these are actually not menu so
32:22 how would you add how did you i'm just curious um how did you add the transition so that the the buttons showed in later how'd you do
32:30 that oh okay so the trend that transition is actually pretty simple so um
32:38 all i did was i did a delay and i think i did like one second
32:49 yeah just a one sec or maybe i did last i did a half a second delay perfect yeah
32:56 yeah so i mean that's that's pretty cool you know someone goes to your you know about us page and they see all your employees and you know
33:05 they see that then they're gonna they're gonna think you uh you know what you're talking about so yeah and then um
33:13 i was going to show you guys you know how i consolidated this um a bit so if you noticed i had rounding here
33:21 and i had rounding here and that's my only two roundings i'll just stick to rounding for now um so
33:29 i tend to name my swatches by the way so like this one would be anim
33:37 card something like that so i know what they are um i won't bore you and do all of them but i'm gonna put one up here and just name it
33:45 uh general so like general purpose swatches and i'm gonna take this one and put it up here
33:51 and let me get rid of this color palette okay so since i have these two roundings that are the same
34:01 i will consolidate them and instead of using the class i'll just use the css so always put a period on these so you
34:10 do that and then a comma and then do option return so you can get a new line
34:18 and then i'm going to do this i'm just gonna copy it and paste it in here
34:25 okay and then i can get rid of this guy so now i have one swatch that's serving two
34:32 purposes okay you also have the card int as well rounding let's see second swatches stack all the way to the
34:41 right there we go okay yeah good good eye so card int and then i'll put a comma
34:50 and paste okay so then now i can get rid of that so that's three swatches that have been converted to one you preview
34:58 and you get the same thing right then i do the card oh i didn't put the period
35:05 there we go okay so there you go you consolidated your css made your site a fraction of a second faster to load
35:13 and google likes you there you go and the same thing can be done with the transition swatches if you have multiple
35:20 transitions uh throughout like i have you know one two i think three
35:27 maybe three three that are four that are the same but then i had that one off where it was uh you know happened
35:34 delayed yeah the delay so um yeah this one so you could put all those transitions
35:42 into one transition swatch that controls everything and it just makes things a little bit cleaner and and you know by the way you know
35:49 this is kind of the way that i i've been building out my um my websites now is since you know this this would be a
35:58 component of the website i wouldn't necessarily put all these swatches inside of the swatch other side
36:06 of the site styles i would have them all in here and knowing me i would put them all inside
36:15 of a pin which is the greatest stack known to man and that way i can you know collapse it
36:22 and label it and color code it and you know just organized to the institute degree um
36:29 so that's that's basically how you know i built this one and you know if you wanted to you know do a total cms version of it
36:38 i'll just i'll show it to you i have a project right here so
36:45 all i did was i went in and i added a blog form and i did you know
36:53 title is the name i um media is the email tags is what i used for the um
37:01 the position the title of the whatever the person does and then the summary is just a text markdown so that i can you
37:09 know use the font awesome code inside of it and so then you know obviously you need to have your blog
37:17 list as well but when i come over to the total cms version actually let me close this because they conflict with each other because they're using the
37:25 same names all right that's another thing about pin that i love is i can have
37:33 two of the same things almost and you just turn one off and turn on the other it's really great for troubleshooting
37:41 so okay so i have way more swatches in here obviously but that's because you know i wanted to style
37:48 the the name a bit more and then i added the uh the the title of the person and i have a little thing in here a
37:56 layout rule for the email so if there is an email then it will show and if there's not an email it won't show and you can see that
38:05 in here so like steve has an email i have an email but poor creature we haven't given her an email yet so we're we're waiting for her 90 days
38:14 to be up to prove herself all right and then let's see so
38:21 really it's just using the the macros in here and then the text um
38:28 part is pretty simple actually i'll just do steve so when you edit steve's information
38:37 it's the font awesome with an ahref tag in there and you gotta know a little bit of html
38:45 but it's super super simple html um in fact this is probably some of the most basic html that there is so yeah i just did you
38:53 know line after line after line and then it just styled the way it's supposed to
39:09 cms and um one off one that i did this guy uh on my uh weaver based site
39:17 site and it's a it's a freebie so if you want it you know you can go and download it all i require is your email
39:26 and that's it so score dude hope you guys like that so one thing to kind of extend that a
39:33 little bit like um how could we make that kind of like a reusable component
39:41 okay um did i download your project
39:51 or once you share your screen so i don't have to try to get the project file so go to rapidweaver again okay so what
40:08 okay cool hey probably what i would do is um i'd probably consolidate
40:15 those swatches stacks into one this is a personal preference obviously and then i i would do pens inside the swatches stack that one for the anam card one for
40:24 the card title you know so i would separate them out by pens right that's probably what i would do um
40:31 but on top of that probably what i would do is so you have this pen stack that is a
40:38 does that pen stack have everything yeah cool so probably what i would do is um you know you probably give the pen a
40:46 title or whatever right and then and then what you can do is you can click that red template button at the very top yep right
40:56 all right so all right just for fun why don't we create a template out of that
41:04 so there we go and then you can give it give that template a name yeah i'll just oops
41:11 how to do animated uh pc a pc here animated profile card there we go and now it's a yeah exactly yep so now like
41:20 if you were to just add a new page just for fun all right if you were to add a new page
41:28 right and then if you go there um search for it there it is you drag it out you extract
41:36 that so you'd unpack it and voila you have your card right now what's kind of cool is um now these swatches
41:44 they could um a lot of these are just generic right so if you wanted multiple cards on the page all you have to do is cop
41:52 is copy that layout right the containers sorry yeah right so like if you were to um you know
42:10 um and that is the background image ah yeah right right so um what you'd have to do is you probably have to create a a
42:19 special class for each of those containers that was like you know card one card two or either that or it could be chris card creature card something
42:27 like that right yeah um and then what you would have to do is you'd have to create a one swatch that it that would contain the
42:35 background image for that particular card and then the uh then the background props so that it can transition actually
42:44 well the background props is that you don't need to redo that one because as long because you're we're doing anime card hover right so that'll still affect
42:52 it as long as it has both anim card 2 and um anim card then it should work
43:09 uh did you uh so that bottom one you'd have to do and card and card two so it would have two classes i'm card and part
43:18 two oh that makes sense yeah right sorry i accidentally hit print i don't know if you do that all the time right i
43:25 i i'm so used to printing or previewing with rapidweaver i got the command p like at the ready yep all the time man i don't know how much
43:33 ink i've wasted that's funny there we go there you go so you see how that one so not now
43:41 the only style that gets overridden is that anime card two which will override the uh that's that's funny
43:47 [Laughter]
43:49 just don't ignore that guys i'm sorry so yeah so now at this point you know you could have like all the generic
43:57 swatches like tucked up at the top of the page and then you know and then at that point you could just have you know that one could be specific to each card yeah and
44:06 i can you know if i wanted to just knowing me again i would have yep you could have you could have a you could add that background swatch
44:13 directly above that card yep exactly exactly perfect 100 percent
44:21 [Music]
44:27 my mac is slowing down a bit but i'll zoom yeah i know
44:34 there we go yeah it keeps everything clean yep 100 awesome
44:43 cool well thanks chris i think you said you want to show off something new right yeah very quickly i don't want to you know
44:50 keep you guys too too long but uh so i am finally launching my uh
44:58 my um field office um project today so you can go to weaverbasesite.com
45:06 and you can check out the project i have a full demo where it will show you exactly you know
45:15 what the project is and um yeah i'll just kind of go over so like it's a crm for those who you haven't shown this to
45:23 and it allows you to keep track of contacts projects proposals invoices and uh yeah and really
45:32 communicate and uh keep track of everything all within this crm so if i click on all crm
45:39 you'll see that i have like a bird's eye view of everything i've got going on um you know i have this where you can hide and show things that are you know if the
45:48 list gets too long or whatever you can search filter you know all the fun stuff and um
45:55 you know you can also go in and change the way it all looks so you know i have my workman theme
46:02 everybody loves the workman theme so it makes everything orange and gray like joe loves so that's that's just a one i built in
46:10 for you but you can go in and customize pretty much anything in here i'll set that back i don't want to
46:17 make anyone throw up there we go all right there we go but yeah so i mean it's it's
46:24 fully customizable and you know the cool part is is that you can go in and um you can view your clients
46:33 okay so you can if the details get too long you know you can show and hide and you can see associated contacts associated
46:42 projects and it's all done by associating the emails and it's also yeah it does that really because i use
46:51 one form to control all of them so when you go in to add a new entry
46:58 you set the title but then you choose crm type and it's either a contact project whatever and so when you go to like put the contact name in like let's
47:06 say that uh this is a project for you know chris powers just double click on that since chris powers is already in
47:13 there you know you can just select it oh there's his email you know it doesn't work for phone but that's okay i mean really
47:21 it's the email and the name and the company that you want to be able to select and then
47:29 you can also do templates like i have the ability or you have the ability to go in and there's a template library that you can build
47:36 so these are the templates for the different crm types contacts projects proposals um like a basic
47:44 uh proposal so i can go in and i can view the proposal and this is just a proposal that i threw together as an example
47:52 um you can edit straight from here and you know it's just it's pretty powerful and i tried to make it as full features
48:01 as i possibly could um and actually i'll show you how to do the the templates how to actually implement them
48:08 so like if you do a new something and we'll just pretend that this is a you know a project if i come over here
48:16 to the details section which is the main section where the main information would be you can say pick template and uh
48:24 project so basic project if you click on it another light box comes up and here's the template that you
48:33 made beforehand so you're not having to reinvent the wheel every single time and just you know click on code view select all because if you don't it's
48:41 going to not keep the the formatting and then come in here do code view
48:49 paste code view and then there you go now you got your uh project template all set up and ready to go
48:57 you know it's just so i hope you guys like it um i'm offering a 20 uh discount actually
49:06 uh through sunday for only you guys because i like you guys let me get the code okay so the uh if you go to my site and
49:15 you and it's for everything on my on my weber base site site uh it doesn't it doesn't matter it doesn't have to be uh field office could be whatever so the
49:23 the code is live launch weaver based site youtube live with joe from weaver bass weaver space 20.
49:33 okay so i hope you wrote that down i'm kidding it's just live launch 20.
49:40 live launch 20. live launch 20.
49:46 so yeah that's my uh this was my latest time suck i spent so long on it you've been
49:54 working on this for a couple months right at least longer than a couple months yeah and the reason why is because i did it where i
50:01 had each of these contacts projects and everything all separate forms and i realized i'm putting the same information in each one
50:09 of these things why not just use one form and everything changed
50:15 [Laughter]
50:16 everything but like but also too this was a huge huge learning curve when
50:24 it came to using this little guy if you guys aren't using the the dev inspector you're missing out like when i'm working this is how i work
50:33 typically with ipad pro as my my simulator and then this opens so i can figure out what things are
50:40 um but you know in order to get for at least the way i did it to do the decor so that y'all can change
50:47 like the fonts the font headers and the paragraph colors and the buttons and all that stuff you know going through and searching for all this was was very
50:56 interesting and i'll actually show you um in rapidweaver let's see if i have it open somewhere
51:03 let's see yep there you are i'll actually show you what that looks like in the code so i can scare you a little bit
51:13 so if you come in here okay i have this this um partial for the site style or for styles so i
51:20 have um always active and toggle so when you toggle one of those things on it looks like this
51:28 so you have all this fun stuff all that's being controlled by
51:38 wow that that decor thing so i went in and basically did all the the css
51:46 i found where everything was so that when you put something in there it that the styles would match you know something you you have control
51:54 over you know what the headers look like but it will match across all the headers and then main components will have the same color so you're you know it doesn't
52:02 look like you know some weird hodgepodge of awful colors throughout the project it'll actually look nice for you and you
52:10 can set a background uh image as well for the chris um someone tried live launch 20
52:18 and they said it didn't work is it is it case sensitive i put it in all caps in the chat i wasn't sure yeah it should be all uh all caps
52:25 all kind of we're done here i'll check and make sure that it is live launch i mean i i went on before and it seemed to uh oh you know what i initially i had put
52:34 it just for field office but then i said it to be anything in the store i wonder if it reverted back or maybe i didn't save it
52:42 i'll check i'll check i'll send you a uh a i just sent you a message about what what i told everyone
52:49 it was live launch 20. yeah this month yep okay no spaces right no nothing just no no
52:56 spaces yep okay i'll fix it guys as soon as we're done here that's that's what i'll do so i'm sorry if you have any issues hit him hit chris
53:03 up on his weaver base site space on the weaver space community yeah um if you don't remember over there go join over there he's uh he's been doing
53:12 some youtube videos and a bunch of stuff so yeah it's been fun it's been fun watching him build this i i've been he's been kind of
53:19 giving previews on the hangouts for the past few months and it's been fun seeing the the progress and it's it's pretty cool how he built
53:27 an entire crm on top of total cms pretty mind-blowing i know it's it's it's it's pretty crazy the things that you can actually do
53:36 with and and by the way it's it's really foundation six and total cms
53:43 and that's it i i tend to not use too many other stacks um i had i did use offsite in this to get the to make it
53:52 look and act like i wanted it to with the um you know with the seamless you know buttons over here and everything
53:59 i did that because of a simplicity sync but it's worth it it's so worth it guys sweet well thanks for coming on chris
54:07 that was that was a lot of fun thank you i appreciate it a couple hiccups but that's okay yeah yeah you know hey that's that's live you know that's just
54:15 that that's that's how things that's how the cookie crumbles so oh yeah who wore it better who wore better oh yeah yeah exactly we we didn't organize this but
54:24 yeah we we totally dressed exactly the same today we hopped on the zoom and chris was like
54:31 whoa dude you got the memo good right
54:39 franco says you were better chris i win this round
54:45 [Laughter]
54:50 cool well thank you very much chris i appreciate it and everybody else hopefully we'll see you uh if not next week maybe on friday getting our friday
54:58 hangouts going um it's an hour from right now but on friday they're a lot of fun um you get to hang out with you know the cool guys like chris even more you know
55:07 because who wants to hang out with me it's all about hanging out with chris and other better guys
55:11 [Laughter]
55:13 so cool take care everyone and uh we will uh we'll