sweet we're live let's see yep there we go
12 24 excellent there we go
hey everyone how's it going everybody so i unfortunately have chris on for us
today sorry you know uh [Laughter] and we just lost more than half the
people oh yes oh man [Laughter]
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 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 um try to build the same exact stack
using swatches and um yeah voila chris was the man he did it
uh there was actually one other person uh that posted i think was yesterday actually 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
almost you know verbatim actually oh awesome sweet um so yeah i thought it'd be fun to have
chris on today 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 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 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 launch for him so
yeah so uh without further ado chris why don't we why don't we jump in and uh
let's see which what you built alrighty
so get back to it okay so last week we were
learning how to build a stack that actually did 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
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 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 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
pretty close to what the stack does um and then you know being the obsessive type that i am
i wanted to take it further and so i total cms'd it
and so now i have you know 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
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
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 work and then it did that glow effect and i thought well that's that i like
that [Laughter] 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
the email a title and then the social media info and so
you can now have you know your thing with its own unique email unique social media posts and then the
unique titles and then in one and what joe was talking about was having the the social media
and the well he wanted maybe the social media and the name to come in at a 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
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 that but i think we first need to actually build the card
so i'll go back to 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 styles with fun awesome and utility classes up
and then uh i have my first swatch palette and then just a container okay so
how i started out was a simple one column and
you got to give it some width and height
i had to lower my resolution on my monitor for this and everything's a lot longer and out of place
all right so the width actually i'm going to name it so i named it anim card
card and the width i did 300 by 380. i think that that was
pretty similar to what it was in the um
in the uh stack so let's see 300 oops
and i'll just keep them consistent across small medium and large and 380.
okay let's see beautiful coming along
[Laughter] all right so and then the next thing i did was
i gave it oops i gave it a background ah
kind of important to have a background for your profile picture
okay zoom controls always in the way
sorry everybody i lost my thing there we go
so my background i'm gonna make it an image
there's my nose hope you like it anim card
okay so let's see let's preview that
still nothing okay that's fine back
okay and then what i did was and oh yeah i got to give it the uh the
class ah my nose
all right and so yeah this you know it looks funny but 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 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
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 so where's my background overlay
or overlay background there we go and i'm gonna make that zero
and i'm just gonna go through this quick because like it's a lot 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
and i'm going to make that hover and change the class am cardia
and atom card now i notice when you previewed the height wasn't was a little funky um
oh that's because your unit is set to engage so yeah so now it'll be fine all right
there we go there you go guys all right 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 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 i'm going to do
card and if y'all don't know if you have something like this and you want to center it
it's very simple margin swatch and then you set it to auto
and there you go centered okay so
and now okay so i'm gonna go ahead and just do the transitions um
as normal but i'm gonna show you guys something joe showed me last week on how to keep that nice and tidy and kind of
cleaned up so i'm going to do a transition swatch
animal card oops
all right 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 background to transition you know
smoother and it's not why i don't know i'm not a programmer like joe
but i do know that you need to not use the class or an element you go into here
and you do anim card hover
still not working what i do wrong anime card hover over before
oh yeah before not not hover before
there we go there we go so now another thing you could have done 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
go back to that swatch okay all right so and then now you
pseudostate before 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
there or the the the selector on the bg i'm pointing on my screen not like you can see [Laughter]
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 you a little hint that that's what the overlay vg swatch is targeting
so um so yeah there you go okay so 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
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 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 forgot about that
so we want obviously radius rounding okay
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 yeah i know one time i didn't use the technical term you know thanks thanks
joe thanks for that 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
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 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 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
okay and preview and now we have rounded corners for the
for the overlay so the overlay because 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
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 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 extra virtual containers that are
attached to your class element but you need to target them differently
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 overlay bg does um it's just this fake element um
that it it's it's there and we can style it but its styles are not associated
with the actual class it's like a separate element does that you know so hopefully that makes a little bit of sense um so yeah
there we go all right so i'm for my interior so
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 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 honestly i heard most of it but
just for for today's purpose we're gonna do it the way i did it 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
and i gave it a width of 290 percent pixels and a height of
was it two ah oh what's that let me re re-add this
is what 370.
37 [Music] okay and 200 pixels perfect okay so you
know just interior column in there uh and then what i'm going to do is
put the border on that okay now because we wanted to be
transparent initially i'm going to just you know keep simple
and then 0 pixels give it the class
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 pixel width and make it a solid white
solid-ish white 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
card interior and i'm just going to do so i'm going to keep it on simple give it an 8 pixel
padding okay still not showing
let's see 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 so
i'm gonna i want to take the padding off i think maybe i had it on there before let's see
that's fun
let me see what i got going over here
[Music]
you know what it's interesting is i have on mine i have two borders
and i have them both set oh i see okay
maybe i just have it the one border and i have it set to
hover over this animal card
it's not i'm gonna delete this real quick and see what okay
so you do need two orders yeah no i know 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 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 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
so okay so i i have this um here let me copy and paste that i'm
gonna make this a one 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
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 that extra one pixel is getting added so when you're animating borders the best
thing to do is leave it at one pixel and then and then change the color from completely transparent white to
full white does that make sense yes yes it is so then i would do
so this one would be um copy and paste 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
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 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 of that border changes okay that makes
more sense okay yep that makes sense i had a padding
you know you probably tell me a better better way to do this too but i put a padding of eight pixels on this
what's it oh yeah and i got to do my um i forgot the i did this where it was vertical line i
think middle ah that's what you did okay yeah okay and then center
horizontal
no let me check mine over here
yep center middle and then [Music] i think that got positioned relative i don't know why
oh i do because of the position stack i use later
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
one time um okay so then i'm gonna do a transition margin auto
maybe actually that's uh you know that might actually be it i'm autumn
yep that was it 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 this uh on that interior uh column
good catch joe all right and then rounding i'm gonna do card interior
and all my rounding i they're all the same um 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
cool all right let me get my card int
and 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 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 the squash the swatch pack because it's
awesome let's see card anim
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 playing with it to figure out the right amount so i did 560
by 650 not percent
560 by 650 okay let's test that
didn't work why not
and then oh i think i had to do a bang important no
left middle padding box okay one do it on hover
left middle oh yeah i gotta do uncovered
i'm dumb all right there we go
these lives man make you kind of trip over yourselves
all right let's see
scale background left middle adam card hover
oh oh okay not card in them
there we go there we go okay it's like a horror movie
all right now i'm gonna do a transition on that
to make it smoother and then this one though this one is going to be
actually i think this anime card hover and card
yeah we're getting there
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 the little
if you go to transition yeah swipe thing and go to the general setup yeah
i'm not sorry no you don't know yeah general um
were you only targeting a particular property on your setup let's say like background size uh-oh background
position yeah i got it set to all
so let me check my anim card background property if you go
to back to your background the original background setup did you have a background size set two maybe
uh click on i i think you need to have a scale 300 and 380 there we go that's what it was
303 there's a reason why it took me about an
hour and a half to do all this initially there we go all right so
just so everyone's clear i'll go back real quick all right so one thing that i didn't do in the um
background original background swatch is um obviously setting the size and
if i'm not mistaken joe pointed all that out when he showed me the background props uh trick so
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 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 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
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 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 believe as well and um so and then when you add the
transition swatch that will then cause the um the animation of transitioning from
one value set to another value set yeah good job hey
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 and i'm just going to make it like a
a grayish color and i'm going to name it card title
and then i'm going to copy and paste that and i'm going to make that white
okay and then another transition swatch
and card title gotta make this hover actually this one
is gonna be anim card and hover parent exactly now why
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 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
that's because you didn't have hover on yeah if i do that
that's the word weird
and transitions on that card title cards oh god you know what i'm
gonna learn one day i'm gonna put sticky notes all over my
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 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
[Laughter] 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
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 i'm going to type adam card and then hover parent
so now when i hover over the card anywhere it actually
comes up and does what i want it to do okay 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 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
swatch palette because i like to keep things organized and i'm going to now do a menu just a
simple menu okay and i'm going to just i'm going to
cheat and take the menu that i already made and put it over here
oops oops there we go all right pretend i just built all this
out and all this is is just you know font awesome uh code nothing big uh but
the menu is just it's vertical and i i'll text alignment center
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 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 my face so we need to move it
and style it so i'm going to use the menu swatch or menu styles
and i'm just going to set the text to white and the hover text to
white with 80 opacity okay so
it's either one or the other i can't i can't have both card social
there we go okay so yay now i'm gonna do a
an opacity swatch card social
and i'm gonna set this to zero copy and paste that set that to 100
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 and change the title to social because i want it to happen on hover the
transition social i'm going to name it social card
card social yeah good
and on the opacity one area i need i need to actually do this so
anim card and hover okay so now if i hover over it
anywhere it will do the the transition to show it now i want to position it
so i'm just going to use a position swatch
okay and so earlier um i i set this column to be position relative so that i can
actually position things within it so i'm going to position this menu
relative to this column okay and so i'm going to do is to the
left and bottom and let's preview that
did i do [Music] pixels oh parent
there we go i had to set the browser okay so there you go now it comes up it's in the bottom left of
this column okay so yeah so i mean that's
more or less what the stack is that joe
built for us to do but the nice thing 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 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
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
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 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 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 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 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
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 that oh okay so the trend that transition is actually pretty simple so
um all i did was i did a delay and i think i did like
one second
yeah just a one sec or maybe i did last i did a half a second delay
perfect yeah 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
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 i was going to show you guys you know how i consolidated this um a bit so if
you noticed i had rounding here and i had rounding here and that's my
only two roundings i'll just stick to rounding for now um so i tend to name my swatches by the way so
like this one would be anim
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 uh general so like general purpose swatches and i'm
gonna take this one and put it up here and let me get rid of this color palette
okay so since i have these two roundings that are the same
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 do that and then a comma
and then do option return so you can get a new line and then i'm going to do
this i'm just gonna copy it and paste it in here
okay and then i can get rid of this guy so now i have one swatch that's serving
two purposes okay you also have the card int as well rounding
let's see second swatches stack all the way to the right there we go okay
yeah good good eye so card int and then i'll put a comma
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 and you get the same thing right then i do the card
oh i didn't put the period there we go okay so there you go you consolidated
your css made your site a fraction of a second faster to load
and google likes you there you go and the same thing can be done with the
transition swatches if you have multiple transitions uh throughout like i have you know one two
i think three maybe three three that are four that are the same but then i had that one off
where it was uh you know happened delayed yeah the delay so um
yeah this one so you could put all those transitions 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 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
component of the website i wouldn't necessarily put all these swatches inside of the swatch other side
of the site styles i would have them all in here and
knowing me i would put them all inside of a pin
which is the greatest stack known to man and that way i can you know collapse it and label it and color code it and you
know just organized to the institute degree um
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 i'll just i'll show it to you i have a project right here
so all i did was i went in and i added
a blog form and i did you know title is the name i um
media is the email tags is what i used for the um
the position the title of the whatever the person does and then the summary is just a text markdown so that i can you
know use the font awesome code inside of it and so then you know
obviously you need to have your blog 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 same names
all right that's another thing about pin that i love is i can have two of the same things almost and you
just turn one off and turn on the other it's really great for troubleshooting
so okay so i have way more swatches in here obviously but that's because
you know i wanted to style 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 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
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 to be up to prove herself
all right and then let's see so really it's just using the the
macros in here and then the text um part is pretty simple actually i'll just
do steve so when you edit steve's information
it's the font awesome with an ahref tag in there
and you gotta know a little bit of html 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 know
line after line after line and then it just styled the way it's supposed to
actually over here there we go so yeah i mean that's that's it and uh
i actually have this this whole total cms and um one off
one that i did this guy uh on my uh weaver based site 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
and that's it so score dude hope you guys like that
so one thing to kind of extend that a little bit like um
how could we make that kind of like a reusable component okay um
did i download your project
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 we can do is go to uh go to the page
that has just the one you just created oh okay just because it's yeah a little simpler
okay cool hey probably what i would do is um i'd probably consolidate
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 the card title you know so i would separate them out by pens right that's
probably what i would do um but on top of that probably what i would
do is so you have this pen stack that is a does that pen stack have everything yeah
cool so probably what i would do is um you know you probably give the pen a
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 all right so
all right just for fun why don't we create a template out of that so there we go and then you can give it
give that template a name yeah i'll just oops
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 if you were to just add a new page just for fun
all right if you were to add a new page right and then if you go there um
search for it there it is you drag it out you extract that so you'd unpack it
and voila you have your card right now what's kind of cool is um now these swatches
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 is copy that layout right the containers
sorry yeah right so like if you were to um you know copy paste that per se
now really the there's only one thing that is unique for each instance right
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 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 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
background image for that particular card and then the uh then the background
props so that it can transition actually 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 it as long as it has both anim card 2
and um anim card then it should work just fine
there we go yep 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
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 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 ink i've wasted
that's funny there we go there you go so you see how that one so not now
the only style that gets overridden is that anime card two which will override the uh that's that's funny
[Laughter] 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 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
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 directly above that card yep exactly exactly
perfect 100 percent [Music]
my mac is slowing down a bit but i'll zoom yeah i know
there we go yeah it keeps everything clean yep 100
awesome 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 keep you guys too too long but uh so i
am finally launching my uh my um field office
um project today so you can go to weaverbasesite.com
and you can check out the project i have a full demo
where it will show you exactly you know 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 and it allows you to keep track of
contacts projects proposals invoices and uh yeah and really
communicate and uh keep track of everything all within this crm so if i
click on all crm 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 list gets too long or whatever you can
search filter you know all the fun stuff and um
you know you can also go in and change the way it all looks so you know i have my
workman theme 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 for you but you can go in and customize
pretty much anything in here i'll set that back i don't want to
make anyone throw up there we go all right there we go but yeah so i mean
it's it's fully customizable and you know the cool part is is that you
can go in and um you can view your clients okay so
you can if the details get too long you know you can show and hide and you can see associated contacts associated
projects and it's all done by associating the emails and
it's also yeah it does that really because i use one form to control all of them
so when you go in to add a new entry 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
say that uh this is a project for you know chris powers just double click on that since chris powers is already in
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 it's the email and the name and the company
that you want to be able to select and then 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
so these are the templates for the different crm types contacts projects proposals um like a basic
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 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 as i possibly could
um and actually i'll show you how to do the the templates how to actually implement them
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 to the details section which is the main
section where the main information would be you can say pick template and uh
project so basic project if you click on it another light box comes up and
here's the template that you 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 going to not keep the
the formatting and then come in here do code view
paste code view and then there you go now you got your uh project template
all set up and ready to go you know it's just so i hope you guys like it um i'm
offering a 20 uh discount actually 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
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 the code is live launch weaver based site youtube
live with joe from weaver bass weaver space 20. okay
so i hope you wrote that down i'm kidding it's just live launch 20.
live launch 20. live launch 20.
so yeah that's my uh this was my latest time suck
i spent so long on it you've been 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 had each of these contacts projects and everything all separate forms and i
realized i'm putting the same information in each one of these things
why not just use one form and everything changed [Laughter]
everything but like but also too this was a huge huge learning curve when
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 typically with ipad pro as my my simulator and then this opens so i can
figure out what things are 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 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 interesting and i'll actually show you
um in rapidweaver let's see if i have it open somewhere
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 so if you come in here okay i have this
this um partial for the site style or for styles so i have um always active and toggle so when
you toggle one of those things on it looks like this so you have
all this fun stuff all that's being controlled by
wow that that decor thing so i went in and basically did all the
the css 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 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
look like you know some weird hodgepodge of awful colors throughout the project
it'll actually look nice for you and you can set a background uh image as well for the chris
um someone tried live launch 20 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
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 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
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
it was live launch 20. yeah this month yep okay
no spaces right no nothing just no no 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 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
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 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 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
with and and by the way it's it's really foundation six and total cms
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 look and act like i wanted it to with the um
you know with the seamless you know buttons over here and everything 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
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 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 yeah we we totally dressed exactly the
same today we hopped on the zoom and chris was like whoa dude you got the memo good
right franco says you were better chris
i win this round [Laughter]
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 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
because who wants to hang out with me it's all about hanging out with chris and other better guys [Laughter]
so cool take care everyone and uh we will uh we'll