About Stacks Guru

Stacks Guru is born from the need to search the vast number of videos out there on stacks built for Stacks Pro and the Stacks 5 plugin for Rapidweaver.

We have scraped over 500 videos to get the transcripts for each in order to make the spoken word searchable.

Please use this free tool to help you learn and discover the awesome power that Stacks and the stacks made for Stacks have to offer.

Stacks Guru

Video Reference

Updating weavers.space with reviews and more thumbnail

Updating weavers.space with reviews and more

05/11/2023
Joe shows updates being made to the weavers.space website, including the addition of a reviews system and other improvements.

Transcript

00:14 okay Mr Francis Mr Cole thanks for popping on today
00:26 let me uh fix my camera right here a little bit there we go hey oh I just realized I still got my old man sweater on pretty nifty though right pretty nice I like it
00:39 even got the front pockets you know like I have set look he already knows what I'm gonna ask Mr you're a pro Mr Cole look at you
00:53 hey Steve okay um um okay so today uh we're gonna be talking about
01:05 um just some stuff that I've been working on um I thought you know I shipped um layout last word layout layers last week and uh people have been loving that one hopefully if any of you guys got
01:20 layers it's still on sale um so you can get 20 off still uh just go through the checkout a lot of people get confused that because the discount gets applied at checkout so add it to your cart and then click like throughout the final step of the checkout then the
01:33 you know discount gets applied blah blah blah so um check out layers A lot of people have been really loving that actually um so yeah it's been it's been a good stack people have been really liking that one
01:45 so hopefully uh you're capitalizing on I don't normally do launch sales so um so yeah this week you know I thought so yeah this week you know I thought hey I I do I am working on total CMS 3
01:59 but I felt that there was just a few things I wanted to kind of tidy up and maybe clean up around Weaver space and um yeah I figured I'd show you show off some of that stuff today um I did something literally I I started
02:12 the stream a couple minutes late because I was wrapping up something new on the community um so added uh some new resources over there and um so yeah let's just give you a tour and then
02:25 um either we'll end early or you guys can get some questions or whatnot you know every time knock on wood I say yeah this is gonna be a quick one today you know we go for an hour and a half but anyway let's um
02:40 let's jump on it let's go ahead and um share my screen um actually you know let's go to the Community First um since I I literally just added that okay um and it's a minor it's a pretty minor
02:52 um and it's a minor it's a pretty minor thing but um hopefully it was it was actually a great um shout from Peter here it is Peter
03:04 um yorensky okay had a great idea about adding a help resources space over here and so I added a help resources space and essentially it's just all the various locations that we can go for
03:17 help okay um so I added a few I probably if you um so I added a few I probably if you have any more suggestions on things to add um something I I just popped in my brain
03:29 maybe add some like stack developer you know stuff um I'll add a post here about you know stack developer um things um if you want resources on how to learn that um I can add that there none of the resources are really mine but you know I
03:45 actually created a um a little FAQ or whatnot um in the stacks Discord which is listed somewhere here where is it it's gone that oh gotta show more
04:00 oh interesting okay so yeah the stacks Discord um is there um so yeah pretty good stuff here okay so um yeah I added a bunch of just resources so
04:12 um this mostly I've probably most of you here already know about all of these things but um just kind of online resources for various help and whatnot okay so Ariel check that out
04:27 um you do have to I think I think it should be publicly accessible let me know in the chat just uh hey yeah do you does everyone see the help resources um I should have made it so anybody can access it you don't have
04:40 to join the join the space um you can if you want I think you can just uh uh well you have a join button I'm already a member so there should be a join button um and then you'll get notified if I add any new things into here okay but um but
04:53 yeah there we go um again really simple one but I like it so good job thanks Peter for the idea and uh we're on to Weaver space
05:09 all right Weaver space so first thing I oh you have to join okay thanks Steve sorry you have to join but
05:24 I'll play around with the settings see if I can make it so you can just access it without having to join I don't know even though if that's possible but I'll have a look okay um so this uh as you noticed if I posted
05:38 so this uh as you noticed if I posted about this yesterday don't know if anyone saw it um but uh yeah I decided to play around and add a new um kind of filter bar okay so if you can click let's say if I
05:51 click on any of these kind of filter parameters um I can quickly filter um for everything um you know we can kind of go through here um now these filter collections that I
06:04 called them okay um I just kind of threw these ones together I just kind of threw these ones together I'll probably come up with more okay um actually probably what I'll do is um what I'll do is uh category I'll
06:21 probably I'll probably copy all of these categories oh man that's a lot I don't know um uh maybe I won't copy all of these I don't know that's a lot um but anyway I thought they were I thought but anyway I thought they were I thought
06:35 it was a cool idea just kind of have these categories I might like combine audio and me and video or something like that so so because it I think there's quite a bit of video stuff there's I don't have too many audio Stacks right so
06:49 um so anyway uh yeah it's just pretty cool you can kind of if you want to see what's the newest what are the newest Stacks this then sorts by the latest released um this one sorts by update so you can
07:01 sort and see everything that has been updated um Essentials doesn't have anything yet um that was kind of an idea um I just tagged starter pack for now
07:14 um but we'll add more Stacks to these um so give me some feedback on the community about this or even in chat right now if you want to about you know what sort of collections do you want like I'm thinking it'd be kind of cool I
07:26 mean I I guess I kind of like you know searching for things like images and stuff like that it's okay but I think having stuff like I don't know e-commerce maybe I I don't I don't know that's kind of a a very broad one because a lot of stacks could
07:40 be used for e-commerce right um I was kind of thinking of having like an Essentials but like maybe like a step one step two step three sort of thing like you know and you could pick and choose like if you're just getting
07:53 started here's step one right and then like here's that the next level of maybe Stacks that that's kind of hard to do groups like that because depending it all depends on what you want to do right
08:05 um but I don't know I think obviously like something like the starter pack would be in step one that's like everybody should have that right that's what I'm thinking um maybe like SEO helper like you know if you want SEO helper maybe that's step
08:18 two because maybe people are just starting don't care about SEO I don't know but um yeah I just thought this was kind of a nice way of creating groups again the groups that are here I just quickly kind of throw those out there at the top of
08:31 my head uh I want to kind of get this concept out if you're curious this is done with Horizon um and uh so yeah it has this scroll bar for those that don't use the trackpad you can you know use the little scroll
08:44 bar here [Music] um you know I actually I've been kind of a you know I actually I've been kind of a side note on Horizon um I found like potentially some JavaScript I found like potentially some JavaScript hacks like if you're if you're using a
08:57 traditional Mouse and use the scroll wheel like if I I could like potentially detect if you're using the scroll wheel over a particular region then maybe I can like scroll horizon or something like that
09:11 maybe uh it's something I I it's something I've been wanting to do and I think I found potentially a way of doing that so um little side tangent there but um yeah there we go so I don't I don't see
09:23 any chat in the uh hope I guess everyone loves it because I don't see anything posted in the uh in the chat about it so um there hope you guys enjoy that hope you like it and again give me some feedback on you know what are your
09:36 thoughts like what I want to make this useful for you guys like to you know what obviously search works right you can just type in whatever you want and it kind of searches things right and and all these terms that are in these light boxes I'll just give you a little hint
09:48 like um you know clicking on this is the same exact thing as me like searching for light box up in here right they're just kind of like pre predetermined ones um oh well obviously there's some
10:02 different ones like newest is actually a more complicated query but um yeah and I've already got questions on Joe how are you doing this because this is you know what stack you're using
10:14 to do this cool amazing filtering um it's one of the stacks I think I showed it's one of the stacks I think I showed it off last week or week before that I'll probably eventually release um it's something that's strongly tied into
10:27 total cms2 and those of you that are in the know I've delayed total CMS or I've killed off total cms2 I'm working on total CMS 3 um and what will occur what will happen
10:40 with this particular stack layout search thing um I don't know yet okay um this particular grid that you see here um if you if you weren't here I think um if you if you weren't here I think this was last week I know all the weeks
10:52 are blending together um I do plan on releasing this particular layout um this grid as a stack okay um and uh yeah I'm I'm thinking
11:04 potentially that like the search and filtering thing could potentially be a stack on its own kind of then you can use it with any sort of Grid or layout kind of my thinking I'd hate to I mean I I like to make
11:19 I really like to make products that are um very Niche or in what they do right so very Niche or in what they do right so like this is a search or filter stack like why tie it to a single grid layout let's make it so it works with any sort
11:33 of layout right um that's my thinking right so that's kind of why I like to build you know tools that do one thing really really really well and they'll work outside and they'll work with other things right because
11:47 um again while this grid is cool what if you wanted to have search for something else right um so there we go okay so anyway um not much else to say about this it's just a filtering group
12:00 um they were actually uh I don't have it here anymore there there was all this baked in before it was but it was hidden behind like a peekaboo you had to click a little filter button here and then a little filter button with a grid of buttons showed up and
12:15 um some people used it not many people did though so um yeah now we have this little doodad hopefully it'll get more use and uh we'll see okay next up is
12:29 let's find oh oh it's uh search for Total CMS sorry about that all right total CMS so if we go to a product page now and I pick total semester because I know it has a couple of them already
12:41 um we'll see that we actually have reviews now so I put the top the product page you'll see how many stars a particular product has been rated um it's given it's this one's gotten three five out of five stars so thank
12:54 you very much for those people that have already submitted some reviews okay we can go all the way down to the review section and we can read the reviews yay so um yeah we have product reviews now so um yeah we have product reviews now so
13:06 fun um and every product page has a review section and I would love for you guys I would really appreciate it if um you could take a couple minutes of your time occasionally and submit reviews of
13:19 various Stacks that you own um I would appreciate it other users would appreciate it because obviously people like to buy products that are rated good and they want to know our you
13:32 know supported feature Rich and work well right so um if you want to take the time to leave a review there's a button at the bottom um it's actually on the footer of every page now as well well so at the bottom of every page there's a leave us a review
13:45 and um oh no that goes to the wrong link use this link I'll have to fix that link
13:59 um so yeah here we go there's a weaver space slash review okay and that will take us to this review form um I am using an external service if
14:12 you're curious I am using external service to correlate these reviews um something I've wanted to do for a long time but at some point you just go you know what I don't have time to build an entire review system so I'm just
14:27 gonna Farm it out so I'm using a service um to do this um so this is just the kind of their form and a little iframe on my site so please go ahead and um go ahead and submit your details here I
14:39 do require an avatar um so upload an avatar you could sync it from various social media sites I'll put your name company is not required put in your rating and then type in your your review um now I am working with this company to
14:52 um now I am working with this company to make sure that we can kind of get a drop down of the products but for right now if you just um type in obviously if you put in a review I'll get notified I'll see which um product you're reviewing and I'll
15:06 make sure it gets on the product page so um so yeah just type in your views submit that and I would greatly appreciate it you can submit as many reviews as you want for as many products as you want um I would be grateful for every single
15:19 one that you do okay so and that's a cool little service um if you're curious it is called endorsal um and it's nice it's a good service and they have a lot of really interesting
15:31 features okay so uh we'll probably sprinkle that in every now and then in various other places um so you know you'll probably see it maybe on the homepage I'll have some you know generic just testimonial reviews or somewhere like that right but I'm really
15:44 happy about um about how this works it'll show you how what it looks like when um let's go to a product that doesn't have so you'll see that layers doesn't have
16:00 any reviews so um yeah says zero reviews So Sad Panda there um there's only a few products right now that have reviews Foundation total CMS obviously the big ones right um but I would love to have reviews
16:13 about every stack so um yeah if you use any stack obviously submit reviews for foundation and total CMS awesome I would like that but any other thing too right uh I don't know starter
16:26 pack layers feeds you name it just go ahead and um yeah if you can uh maybe during the live stream every week and you guys are watching just go every week I'm gonna submit one or two reviews for Joe for the awesome stacks and uh yeah I'd
16:40 appreciate that so and hopefully you you enjoy it and be honest in reviews you know I yeah be honest it was it a four star five star three-star um I will look into that and maybe make products better because of the reviews it'll be interesting reviews are new for
16:54 me as well so okay how about a cms3 button oh how about a cms3 button oh
17:08 yeah cms3 is coming um you'll you'll notice this up here I have my little my little um this is an app man totally sidetracked here this is an app called one thing do you see this in live stream yeah okay so it's up here it's in my
17:23 menu bar and all you do the only thing it is is you put in like your main goal for that what you should be working on right so my main goal right now is total CMS 3 which is why I have that up there so that you know all the app does is
17:36 just you know you type in whatever you want and it changes it up there so I'm all right so yeah the one I think it's called pretty sure it's called one thing
17:49 here let me verify that yeah one thing I think it was free on the App Store um so yeah I I first I was like oh that's a stupid app and then someone uh you know someone I enjoyed uh you know really loved it and I installed it was
18:02 like you know what I do kind of like that so um there we go okay [Music] [Music] um um next up next up
18:16 I'm going to talk about a couple things I plan on doing um it'll probably be my work for the remainder of this week and uh and that has to all do with email um I'll show you one thing that I plan on
18:29 I'll show you one thing that I plan on doing here let me open up my uh my email project so if you guys don't know I have a project file that has like every email I make right
18:42 um it's just a my newsletter project okay and inside there I have and inside there I have um all my launch emails all that jazz it's all my launch emails all that jazz it's all there if you get um you know like if
18:55 you buy Foundation uh you get an email right um that says thanks for buying here some links and whatnot right that was done in the email stacks
19:08 um so yeah just built all with email so here's this the email if you buy foundation and you didn't get this email before um boom there you go you get this email right but anyway um what I wanted to show you is so like
19:22 what I wanted to show you is so like today's email was for the live stream okay and um if you notice this is the live stream template this is exactly exactly what it looks like
19:34 but um probably what I'm gonna do is um I'm going to start adding a couple things at the very bottom of the email okay and probably just do like a recently updated so just um you know just a little section that
19:47 says hey these Stacks were recently updated um um just so kind of people can kind of get a just so kind of people can kind of get a barometer of you know new things that are going on um obviously if a stack is recently launched it'll be in there but it'll
20:00 kind of be a dynamic thing that just kind of shows shows off when this email was sent to what were Stacks that were recently recently updated so that's something that you might see uh in the coming weeks uh get implemented I'm playing around with
20:12 ideas um I had an idea of uh hold on a second let me find error actually here you guys can help me vote I was playing around with some layouts I took a screenshot of something
20:27 here it is there it is okay so I was playing around with like uh all right so uh you know here's the
20:39 email with just the icons and then here we got the email with the kind of the the social banner I don't know um I kind of like the icons I think it looks nicer but the um if you don't know what the
20:53 stack is then the social banners give you a little bit more context so I don't know um what do you guys think let me know in the chat um something I'm playing around with and I'm going to probably do the same concept for
21:06 um deal of the week email as well okay so uh deal of the week email me it up top will remain the same I'm just probably gonna put you know a few of the data about things that are recently released just to kind of get that
21:18 information out there um and spread the awareness of maybe some Stacks you didn't even know existed okay so there we go um next is my and I also posted this on uh
21:32 next is my and I also posted this on uh icon with names Jason says cool thanks um everybody says the icons I agree it looks a lot nicer okay
21:44 um so you know my Weavers digest emails I so you know my Weavers digest emails I don't know I've sent out of 40 some odd of them over the years um I I used to try to send them out Weekly
21:56 I I used to try to send them out Weekly right but um they're they're and everybody everybody they're they're and everybody everybody at least they tell me that people I never had anyone say they don't like them um but uh I guess it's everyone that's
22:12 um so I I plan on changing those up a bit and the reason is they're a lot of work right they take me between three to four hours to put together
22:26 um and a lot of times I'll delay putting and a lot of times I'll delay putting them off because it's like well I don't want to spend three hours writing this email right now because I got all this other stuff to do right so
22:39 got me thinking the other day that well what if I were just to send out bits of information when they come up right so um and I I never maybe you'd turn into like and I I never maybe you'd turn into like maybe a daily email
22:53 I'd say that but I I never probably would stick to that schedule I don't you know trying to do something every day but it would probably just be like bite-sized things like let's say someone posts something amazing on the community and
23:05 um I want to make sure that everyone sees it right or I watch this really cool YouTube video I posted a YouTube video I think it was earlier this week or last week about color theory and using color palettes
23:19 um and it was a great video but I I think it would be interesting to while posting them on the community is great I think actually just sending a little text only email um kind of exactly the same format as
23:32 the Weaver's digest it's just quick little blurb hey check this out maybe my one or two sentence thoughts about it and boom that's it right um so kind of Weaver's digest but small bite size and I think I'm gonna call
23:45 them Weaver bites um and so yeah I'm gonna probably start that pretty soon again they're probably gonna just gonna use the same exact email look as the digest which is pretty
23:58 much just my logo and then text that's it um I want to make them as simple to create as possible for me um so that all I have to do is type A few sentences send it out to everybody
24:12 that wants it okay so anyway that's my ideas on bite size sweet bill says we could talk about it
24:29 more on Weaver teasers oh boy that sounds naughty Jason I don't know about that one uh I I think I like Weaver bites maybe I uh I I think I like Weaver bites maybe I could do a play on words and be like b-y-t-e-s you know something like that I
24:42 don't know but I I like it I'll probably go Weaver bites I think it's because it's like digest is like a I don't know I like bites I think it's fun okay never tried these email Stacks getting
24:55 started okay yeah um Mr Mr Len go ahead and um give the email Stacks a shot you can build out emails with uh with Stacks it's a lot of fun um some people have figured out how to um some people have figured out how to
25:08 use them with like apple mail um check out the community I think I put it in the common questions actually Massimo um kind of has a workflow I don't officially support that um it's something maybe I'll try to look into in the future but Apple makes it
25:23 makes it tough to make it like really easy to use so they're kind of made for sending out email newsletters and email blasts to your groups and you know your email lists and stuff like that so yeah
25:37 hey um so now we're uh yeah look I promised we'd be quick today um so if you have any questions I'll go through the the chat see if I missed any um but that was kind of all I had today was a really simple one just kind of
25:49 show you what I've been working on this week I'm on a obviously show you the reviews see if you guys would be kind enough to submit some I'd appreciate that but let's go through and find some questions
26:07 argenter I'm not sure what you mean um can you use match height inside of a can you use match height inside of a
26:22 light box that will be tricky okay um and the reason for that is anything inside of a light box on page load okay so let's pretend we're we're a browser right and we're loading our
26:35 content and by default a light box is not visible on page load right so anything inside of it is zero height
26:48 okay doesn't have any height because it's not visible so on page load when match height goes ahead and checks to see the height of its content to match it well there is no
27:02 content to match right because it's not even visible so the JavaScript will just return zeros for everything because technically that is the height of the content that's inside of a light box so therefore
27:15 match height will not work well inside of a light box um the only caveats to that where it could is if you were to set like some sort of minimum height or or a static
27:28 height to the content so that way let's say you set a height on the light box of 500 pixels well that light box even though it's not visible
27:41 still has a height set of 500 pixels so um that within then inside that the content then has a place to kind of grow inside of that 500 pixels um so then match height could work right
27:55 um so It's Tricky I wouldn't recommend it um so yeah match height inside of a light box is is definitely going to be a tricky one hopefully that helps out though
28:08 um again the only way to even possibly get it working is use you know static Heights or minimum Heights or something like that um on your content okay so um sorry about that hope that probably
28:23 let's see any recommendations on web hosts for rapidweaver Pages using chili dog now
28:37 but many email problems through cpanel so chili dog is great um I do I'm good friends with Greg um and Brian Brian uh does support for them
28:50 um but if you go to my start page Weaver space start um there's two primary hosts that I recommend um for uh for rap Weaver sites one is chili dog because Greg does give great customer service hopefully you've talked
29:03 to them about it um I'm not a fan of cpanel as well um so I I get it right and a lot of hosts use cpanel cpanel is just a piece of software that a lot of Hosting
29:17 companies use to manage accounts and server settings and stuff like that right and it can I I don't like it okay um so another option is dreamhost um I have an affiliate account with them
29:31 and if you use my link that's on Weaver space slash start um you can go ahead or if you go to I think you can go ahead or if you go to I think it's Joe workman.net dreamhost maybe um you can get I think you get a
29:43 discount okay I forget exactly what it was I'll be honest but um you get a discount and obviously I get a few pennies as well um so I do like dreamhost um I've been using them for about 12 years I don't use them for all my websites though
29:57 um I do use a third uh hosting company called digitalocean and that one definitely isn't for the average person um that digital ocean is you have to
30:09 manage install the server you have to do everything right so um I do like digitalocean very affordable for the server that you get um but you have to do all the work okay of managing the server updating the
30:22 server patching the server if there's any issues you're the person to contact right um so yeah anyway check out digitalocean I I think I have a I have an affiliate code for that if you really want um and
30:34 then get a discount uh with them too but I would check out dreamhost they're they're online management panel is brilliant like I love it it's not cpanel it's like a custom web app that they
30:47 built and works really well so yes as David says chili host is pretty good um as well so um and I do recommend both on my starter
31:00 page but you know hey for you got to recommend two I like because some people just I don't know they just don't click with one service or another um so yeah I would check out dreamhost
31:16 okay um and with hosting you get what you pay um and with hosting you get what you pay for just saying like the five dollar a year things that some man some hosting companies are atrocious
31:28 you definitely get what you pay for um so if you can afford it um even with dreamhost I think I spend um I have a VPS with them a virtual private server I think I spend like a hundred and
31:41 twenty dollars I pay yearly so I think it's 120 a year for a virtual private server I mean that's really cheap like um I don't know in my in my opinion it's um I don't know in my in my opinion it's Dirt Cheap
31:55 um for for a server for a whole year and I can host as many websites as I want on it so yeah check that out box delivers match height oh Sean says
32:11 filter by collection delivers match I didn't notice that that's on my list of things I need to remove the for some reason I'm not sure why match height works is inside lightbox good catch Sean that's probably exactly
32:26 what uh I did that entire rant for man I yeah all of you were as I was
32:38 doing my ranty people were telling correcting me saying uh whatever okay sorry about that okay uh did I miss a simple question other than using the site Styles primary secondary alert
32:51 colors is there an easy way to change the color style of one button sure it is that's easy so it's just a background right um so there's um so there's
33:03 as with a lot of things there's always more than one way to skin a cat right so um um let's do is that a button I assume you're talking
33:19 about Foundation six um so hopefully you're talking about um so what he's talking about everyone is we have color all right so I can do primary color secondary color success
33:31 color alert color warning color right okay so how can we do that so first off um we can use this a component color swatch
33:45 okay and okay um so I have a class called alt colors um so I have a class called alt colors and we're just gonna we'll change the
33:58 primary color for that we'll change it to um pink pink okay or whatever that is and let's do the secondary color as Bat Blue and alert we'll do well that kind of
34:11 doesn't make sense huh we'll do yellow whatever okay I think it's CMYK colors those are actually your head colors okay so um so here now if I just put in the alt so here now if I just put in the alt
34:23 colors button colors class alt colors voila okay and um yeah so now and if I if I change it's um yeah so now and if I if I change it's set to be primary color
34:35 um and if I change it to be secondary color I get that blue and if I change it to success oh I think it was alert the other one I did right yellow okay so oh shoot share my screen
34:53 such a rookie mistake rookie rookie rookie rookie let me do it all over again hey all right we'll do it all over again darn it hate when I do that I was wondering like how come there's typing
35:05 share like they want me to share oh Jesus hey Button stack all right um inside the button stack
35:19 um hey as you see here I go to the color and I change success and alert and warning and um yeah yeah then now what I can do is I'm gonna go to in my site Styles I'm going to use
35:31 component colors okay and we're going to set the class to be alt colors okay and uh let's go ahead and quickly you guys heard me do this before but now you can actually see me do it or
35:45 you can change primary colors to that secondary colors to that and alert will change to this yellow okay so there we go three colors all changed so there we go three colors all changed okay now if I go to this button and I
35:59 put in my ALT colors class there we go so um I set this color to be primary we can set it to be secondary we can set it to be oops it was alert right if you notice it's now it's no longer using
36:13 those colors from site Styles it's using right so um that's one way to do it that's a pretty good way actually
36:25 because you can kind of create a secondary color scheme that you can then apply to whatever else you want okay um so for example um now let's look at something that has now let's look at something that has
36:41 colors uh tabs right tabs so let's just quickly build out tabs so let's just quickly build out tabs and we have tabs content okay now let's just
36:54 uh error actually save myself a little bit of time we're gonna just go to go to templates and we're going to search for tabs and we're gonna do tabs all right cool oh there's some tab content
37:07 thank you very much okay and we're going to extract that all right so now I have this tab content right and uh what we can do is if I were to go ahead and put in this compo this
37:21 alt colors here what you'll notice is right so um you notice the tab text okay um it went from the primary color which
37:35 is that blue to the new primary color from alt colors okay so that is a way of creating and probably tabs maybe wasn't the best like if you were to do I think accordion could be better or something like that
37:50 right same thing here so an accordion um if I were to go ahead and put in alt colors there we go guess what the text colors and all the color schemes of various
38:04 Foundation components hence why this is called component colors um there we go so that's one way to do it there we go so that's one way to do it okay um I think that's a good way to do it um I think that's a good way to do it
38:18 okay um I know sometimes you're like well I um I know sometimes you're like well I only need two colors here but I I don't need to redefine black or white and all that jazz well then don't redefine them
38:31 just use what you need okay um there is another one uh there is a color there is another one uh there is a color override so if you really really only all right let's put in alt colors on
38:44 this one and I want to do uh color override of primary and I want to set it to be um red and we can even do that important and
38:59 how come that is not that's weird
39:15 Alt colors there he goes that was some edit mode there he goes that was some edit mode caching there you guys saw that right I wasn't going crazy I deleted that swatch and it was still kind of styling there
39:29 um so there we go now I've I I've used the color override Swatch now this particular Swatch is only part of the Swatch pack okay but allows you to override the primary color um for whatever you add that class to
39:41 right so if I go ahead and change this to be pink now the primary color is set to Pink for whatever class I do that to okay and if you notice it allows you to override the colors for all kinds of stuff
39:57 so there we go cool um so that's a second way to do it okay what's another way we can do it okay um so we want to change the background
40:10 of a button guess what it's just the background right so um we can go to general which is our general swatches and um that can be used for all kinds of stuff
40:22 let's just use we'll just stick with the alt colors um class okay so we have alt colors uh we're gonna set the background color and if you see it or it already started
40:36 changing right so there we go so now I I can use a background Swatch right and if I wanted I can even instead of colors let's say I want an image background and I want to I want to make it a Stacks button
40:48 boom look at that all right you can make it contain no uh scale whatever there we go now you got a Stacks button
41:03 okay so I I don't necessarily like image background buttons but okay there you go okay I'm I'm sure that spurred a bunch of I'm I'm sure that spurred a bunch of questions let's see here um okay if the Swatch is needed on each
41:15 okay if the Swatch is needed on each page simply put it yes so Jason is wondering uh what if the if the Swatch needs to be on every page um yeah so you add it to site Styles add site Styles into a partial okay and if
41:29 you don't know what a partial is um it's this green button right there okay so um I go ahead and I can create a I can create a partial out of this probably want to give it a name because
41:43 um for live stream right or something like for live stream right or something like that and then um obviously if I were to add any sort of um swatches here not as many as you want
41:55 and go back okay and then basically if I add this partial to every page all I have to do is double click in and edit it once and it'll change it everywhere okay so um yes partials okay and I'm going to go
42:08 and extract that but um there we go so that little green button allows you to create a partial and if you ever want to access those partials they're right here so like uh here it is so this is here's the partial that I just created I can add that to
42:22 the page okay the site style should be in a partials the site style should be in a partials
42:35 yep exactly it would be cool to have custom names too but I understand that's part of the foundation okay so if you want custom names okay you want you want to have a custom name for your color well we can do that
42:48 okay um with the color override Swatch or the um with the color override Swatch or the custom color swatch okay um so here we'll use the custom color um so here we'll use the custom color swatch I can give it look a color of my color
43:01 um and you can give it a whatever color you want we'll go with this your head pink um then then right and now how do I take this custom
43:14 color which is my color which is my color or let's let's call this uh your head primary
43:27 so your head pink that's my color name okay then we can go over here and we can go back around and um let's just call this
43:39 um most keep alt colors I guess right all right so all do I still have all colors on this yes I do okay so here I want to have my background color be a Swatch custom color
43:53 your head pink boom boom okay now so this kind of a roundabout okay now so this kind of a roundabout way right you're creating your own named colors um and then you can use that named color um and then you can use that named color
44:06 um here this does require the Swatch pack okay um so yeah and if I ever want to change your head pink um because this references your head um because this references your head pink not the color itself it references like
44:19 not the color itself it references like a variable right think of these as a variable I can change this um to be oh let's change it there and voila changes there too changes there too
44:32 so Ray there you go hopefully that helps um Ray there you go hopefully that helps um you can use your own custom colors right um it is a kind of a roundabout thing right because you're you're creating
44:45 your colors using the custom color and then you can reference those colors from let's say the background Swatch and there's a bunch of other swatches that allow you to reference that okay um so when you in the background you just click the Swatch and here you can
44:58 pick a color or you can pick custom color custom color is the default one but you can pick a other color a Swatch color and there we go
45:11 sweet uh Jason says there's a partials video yes I have an entire video on partials and how to use partials and strategies for partials and there's also another
45:26 one on templates and externals which are similar to partials but different in terms of their scope um so yeah check those videos out sweet that was kind of a fun little doodad to that was kind of a fun little doodad to kind of you know show you all the
45:40 different ways of styling the background of a of a button right uh I think we showed off four or five different ways right um so another one if we did color um so another one if we did color
45:53 override there is the ability to assign yeah see this one this one's kind of funky so you can do color override but then you can like override the primary color with a custom color so this is this is even another layer
46:07 right so let's take your head pink right here let's go ahead and I'm going to delete I'm going to delete that and um let's change your head pink back to um let's change your head pink back to Pink just so it's true right all right
46:22 um for alt colors I wanna I wanna assign the primary color
46:35 to a custom color so right now for anything that has the alt colors class I want to assign your head Dash pink
46:50 hope did that make sense okay that this is definitely uh a roundabout way okay but you know it is
47:02 this is interesting and Powerful um you know if you need something like this okay so I have a button here it's set to use the primary color and it has the alt colors um class now if I delete the alt colors
47:14 class now if I delete the alt colors class it goes back to the default primary color okay Alt colors okay so what this does is
47:28 it's saying set the primary color for anything that has alt colors set the primary color to actually reference the variable your head pink or you know set it to be the custom color your head pink which is defined in
47:40 this other Swatch all right so another roundabout way of doing it um but pretty cool um if that's something you need to do right and there's a couple there are some users that went
47:56 all in and they Define like their color um using all custom colors with custom names and then they basically assigned those to primary secondary alert you know whatever so they could use their own names instead of primary and
48:10 secondary and whatnot um definitely an edge case for the super definitely an edge case for the super OCD okay but um there you go there's there's a sixth way there you go there's there's a sixth way
48:22 of doing it okay we went we got obviously more obscure and complicated as we went on so cool hey guys
48:36 I don't see any other questions popping in so I think we will uh let's call it a day and hopefully you learned something today um that was kind of fun again fun little um that was kind of fun again fun little thing at the end with the uh with the classes and the colors and and whatnot
48:50 so hopefully you enjoyed that um go and leave us some reviews please I'd appreciate it um that would be great so I when I log in tonight to see all the new testimonials I'm gonna have like a hundred new testimonials right so uh that would be awesome
49:04 um so I appreciate that um hopefully we'll see you guys on Friday hang out as usual Friday 1pm um Pacific so basically what time is it right now it's one hour from right now but on Friday
49:18 okay so check us out then um Weaver space hangout um we hop on zoom and a bunch of us and a bunch of you guys that are already here watching us now um are there and we get to chit chat and
49:32 talk live okay face to face so that's always fun so cool guys hopefully you'll have a great rest of the week go make
Search the page
0