okay let's see how many people we got in here
oh there we go oh restream change the little chat app
it's interesting okie dokie how's everyone doing today let me know in the chat
excellent Chris Powers is here Mr Francis and back on the normal time yep
all you uh you Europeans uh got I think it was like three days ago your time changed it for
a couple weeks we were out of sync so I got a lot of emails why'd you do this live stream early I didn't do it early
not for me at least same thing on our Friday Hangouts everyone who's joining an hour late for
weeks so everyone will be on time this week right hey Aloha Tony
excellent okay I assume that you guys are posting that
audio and visuals all good so uh let's get cracking Okay so
I know a lot of you are well if you are attending this you probably already used total CMS because uh yeah unless you're
evaluating it um then you'll see how awesome the style text editor is
so um yeah you know I uh what spurred this was a uh a post I think it was last
week or two weeks ago and uh had a user who wanted a button
inside a uh his blog post he wanted like a button that linked out to I think a
subscribe form or something like that and uh his solution was to create a
button with Foundation six take a screenshot of it and then insert the picture and add a link
and I was like I I guess that works but I figured today we will show you a much
better way to accomplish that okay um and we're gonna go over all kinds of advanced well some are not so Advanced
but we'll call them Advanced things uh with uh hip wig okay and the style text editor
that's baked into total CMS and easy CMS so um everything we're learning today will
apply to um total CMS and easy CMS uh it'll all
apply to the current version and it should all apply to the current uh the future version three that I'm
working on uh right now as we speak so um fun times
so uh actually one question I always get is why is it called hip wig Okay so
uh let me uh tell this history and story about how the word hip wig came to uh
came to existence because it is not an industry-wide term it's just a silly
name that I came up with okay and I have some goop on my glasses let me clean those really quick so
when I originally launched total CMS it only supported markdown in plain text
okay if you remember that I'm sure some of you are probably still around and uh
I know what I'm talking about I I'm not a huge fan of style text uh engines mostly because they really mess
things up okay I mean they they generate some really horrible
um styles and code and just makes things really bad
and so I resisted and I resisted and I resisted to put in a style text editor into total CMS
and uh if any of you guys have been around for a while um John Hawkins aka the Hipster Weaver
right hipsterweaver.com I wonder if that site's even still live anymore um but hipster Weaver he was one of the
first ever to make Foundation project files okay and
he was a huge proponent of style text he was like I need style text
my customers cannot handle markdown it is too much for them
and so I finally broke down and implemented
um style text okay now a term an industry-wide term that you've probably
heard is something called wysiwyg right what you see is what you get it's the
acronym wysiwyg okay so uh we didn't call it style text it was wysiwyg he needed a wysiwyg editor and um so
hipster Weaver needed a wysiwyg editor and if you can't see it hip wig right so
um we can all thank John Hawkins hipster weaver himself for the style text engine
that is inside total CMS and uh it is now called hip wig
so there's a little bit of history for you a little fun history on why it is
called hip wig okay hipster Reaver and wizzywyg mashed together we get hip wig
okay there we go good good to be back on the web stuff
thank you very much PC assist macassist cool can we get all tags and pictures you can
yes I'll uh remind me uh Lucio and uh we
will uh I'll show you how to do that okay um so let's Dive In
and I had to reboot right before the live stream which is why I joined a few
minutes late I think I was a few minutes late um so let's uh let's get rap we were
launched
oh that's Fernando hey Fernando
okay so uh We've launched Stacks here and let's go ahead and
okay um I already actually I have to say oh hey a little Pat on my back I actually I
actually did some preparation for today's live stream this morning to make sure that kind of went a little smooth
and I didn't go for like two hours long because I had to pre-make some things just to make sure and pre-test some
things to make sure it uh I didn't fumble too much and uh yeah so I'm I'm a little bit more prepared for
today's live stream than not going completely off the cuff although I'm sure I will get off on tangents because
that's just what I do okay um so here I just have a simple I'm using
Foundation six um here but uh it's really nothing fancy and just some containers right um this
is extremely simple okay so um we are going to be showing you
some cool tips if you are using Foundation six though um on how you can kind of Leverage that
uh for uh your total CMS sites okay um but first off uh so obviously I have
a CMS core and an admin core on here um in admin core oh shoot
um by default here let me let me revert some of this to the default because I was playing around this morning and I
think all of this is off by default so we're just going to turn all of that off okay
turn all of this bad boys off okay and that's there we go okay so now we're on
the default settings so um if you weren't aware inside of admin
core so um admin core is a stack that has to go on all of your admin pages
and um inside admin core let's just get rid of some of these collapse some of these settings here that we don't need
you'll notice that there is a huge section of settings here that is for
just for hip wig okay so we're going to go through some
of these and uh and kind of talk about what they do for us
okay um and how they affect pip wig and now I do
have to say that this these settings are page wide so everything that you apply inside the admin core stack gets applied
to every single instance of hip wig on your page okay
um so in this example here I just have an admin and a Content um and if we look here this is the admin
Tech stack okay where I set the cmsidb stream right and you set the editor to
be hip wig editor I believe that is actually the default so a hip wig style text is the default editor
um and then you have height and you can Define maximum number of characters right so the default is negative one
which is unlimited it basically disables that setting um but if you wanted to like let's say uh you had a section that was for uh web
page description okay for your meta tags it's it's recommended that a page
description not necessarily go over 160 characters so maybe you you can limit
that let's say you had that was an editable region in your admin area you can actually limit the characters to be
you know a certain number right so you can set it to be 160 let's say or something like that so kind of
interesting there okay um and then down here I have a CMS Tech
stack which um I set the cmsiddb stream and we want to display hip wig because we're using
hip wink on the admin side so on the content side we want to display hip wig
okay um and if you wanted to know this is essentially this is the same macro if
you were using macros okay and you want to Chuck that somewhere that's the macro that you would use
um but I just like using the total CMS Tech stack gets the job done okay
let's get back into the admin core stack
so on here there's a bunch a ton of settings okay at the top
um there's this thing called on Enter key
what does that mean okay um so let's do a quick little example
here okay here is a web page
okay with my hip wig instance and to show you oh uh to show you
something uh let's go ahead and what I'm going to do is I'm going to S run all the way
down here and I'm going to enter I'm going to turn on HTML mode okay so that we have a cool little HTML button here
cool so now I have my little code view button okay and um
let's go ahead and I want to do on Enter key paragraph Okay so let's let's go
ahead and say um this is line one enter this is line
two okay now if I go ahead and click this code View
um FYI I'm aware of this if you hit the HTML button in preview it gives you a
little error um it still works and it only happens in preview so
um low priority bug okay um so anyway um here we have if we notice each line
is its own paragraph what this little code view does is it actually shows you the code that
actually gets saved now if you didn't know this all word processing units like Pages
Microsoft Word and style text editors like this guess what they generate
they generate HTML okay so in the CMS when you're using
style text or hip wig okay all it is is it's creating HTML for you
and this little button here allows you to peek under the curtain okay to see exactly what's getting created and this
Capital H is bothering me so we're going to fix that okay you can actually modify the HTML and go back and it fixes it
cool right so um if you notice on Enter key it adds a new paragraph and that's exactly what it
does here we have a new paragraph okay but let's go ahead and change that to be line break
so if I go and let's refresh this and I'm going to do line one
line two all right now let's look at this if you look here instead of paragraphs
it adds BR tags okay
99 of the time you want paragraph I I have to admit I even forget why I added
this setting someone needed it um I can't think of a great use case for this unless you know you do not want
paragraphs okay so I'm going to recommend unless you know you don't want paragraphs just stick with paragraphs
because that's a better way to go okay so there we go um toolbar you can either say it's
inline or static um so if we set that by default it's static which means it's it's here right
and if we set it to inline let's go ahead and refresh that
okay um essentially what that does is is it uh it removes the the toolbar okay and then
we can we can still use this quick insert which we'll go into a little bit and actually have to fix this quick insert thing in my bobber okay
um I like the static toolbar I think it's better a quick insert you can enable and disable it now if you notice
by default in Foundation six it kind of gets cut off and that's because
um I have this container we're just going to go ahead and set that to be visible for overflow visible
and voila there we go now we have a little quick insert doodad and we can quickly
add various items without having to have a toolbar option up here okay which is
kind of slick we can customize though too we'll get to that in a little bit okay
um head back to admin core
um okay um by default it will remove all script and style tags
so um if some of you are smart or your clients are kind of clever and they go
into code View and they paste in some JavaScript or some script or style tags
in here um it by default all of that will get
removed okay it'll get stripped okay we don't want I don't know if someone's trying to
hack or protecting your clients from themselves or you from yourself maybe or something like that where you don't want
them injecting anything that they want okay onto the page so um I recommend
having this on unless you really trust um whoever is doing the editing okay
um and then at that point you can you can uncheck that okay but just let you know by default scripting style tags so
like maybe an embed from somewhere gets stripped out and it will get removed
okay so we'll get it'll be gone when you save okay just let you know that
these next things um have to do with um uploading of images and files okay so
um in a little bit we'll show you how you can upload images and files essentially
um these are the gal the CMS Gallery ID and the depot CMS Depot ID where those
files will get stored now this is pretty cool because it let's say
um you have multiple hip week editors and you're uploading files what's kind
of cool is all those files will actually get uploaded to the same Depot and then like maybe you can create a view that
shows all files across all your blog posts or something like that right same
thing for images it'll it'll throw every image that you upload into hip wig into a single Gallery okay so it's kind of
cool thing okay um and then this allows you to say you know compression and just like other
normal Gallery stuff so how big will the thumbnails be created and all that jazz what you know and also the image Max
okay so how large will the image get Scaled down to to make sure that no one's uploading 5000 pixel images right
foreign why is it uh Fernando asked why is it important to remove styles
sorry guys I have a little bit of a congestion problem today so um if you uh hear me taking a quick
break really quick so it's important to remove Styles
um if you don't want your customer making pink text on a purple background okay like
um you know your customers stopping your customers from hurting themselves like if you want to design a site
same thing with JavaScript right you don't want to put allowing them to put errant JavaScript on the page because yeah it's their site but you want to
protect the site maybe they're going to break the page especially with JavaScript but even Styles like you know they can add styles that are going to
gonna completely mess up potentially their website right and or if they have
a syntax error syntax errors and CSS are more forgivable than syntax errors in
JavaScript but um yeah it's mostly just to protect them from themselves um but again if you trust your client
um you can go ahead and uncheck that okay um so there we go
is there a short way to enable all features of hip wig um there is not a short way I'm
basically just turning everything on here um so I mean that would take you 30 seconds maybe
um so yeah so the rest of these settings have all to do with the toolbar
okay and there's some interesting settings that allow us to kind of do some layout okay of the toolbar
so you'll notice by default uh we have um this top row is all done so that normal things bold italic underline and
linking okay um and then you'll notice that this device there's these dividers what do
those do so I'm going to turn on some stuff we're actually going to turn on pretty much everything here let's go ahead and turn on a vertical divider
here and I'm going to choose embedly image video and file and then I'm going to do a horizontal divider
and then we're going to turn on all this other stuff we're going to turn it all and then we'll show you what it what it all does and again a vertical divider
and then we'll do save undo redo clear we're just going to turn on everything
there we go and we'll even turn on character counter so there we go we turn on everything now okay and we'll do
vertical divider there all right let's go ahead and preview that
so here we go now I have um my editor and we have if you notice we have a double toolbar right so it's
not just one it's double right and that's what causes that break in the in
the editor in the toolbar is the is the horizontal line okay so if I were to add let's say a
horizontal line here then we'll have three levels right we'll have these and
then you know these I I don't think that really makes sense there but there we go we're out of we'll change that back to Vertical okay so it allows you to add
whenever you add a horizontal divider that's going to put that all the following controls on a new line
okay um and then the vertical just adds that vertical spacing um in there to kind of create sets of controls which is nice
so let's go through some of these a lot of these I think are going to be very apparent to you okay such as bold
italics so let's just get in some text in here so we have lorem ipsum I can select you know text and do bold italic
you can also do things like command B command I
um command U for underline okay that's kind of like the universal standard for
bold italic and underline okay um I wonder if command K does link no it
doesn't I know nope it doesn't that's that's browser one okay so yeah command B command I command U will do bold
underline uh italic okay um linking obviously that allows us to
go ahead and select and we can say insert link we can type in our URLs okay and you can say open a new tab or not
okay um and then we have embed URL now what
is that what does an embed URL do so what this does is this enables embedly
which is a third-party service and in order for this to work there's actually a little bit of extra work you
need to do okay and um so you can't just enable the toolbar option what this does
is you go to CMS core and if you want to display it on the content side you actually have to turn on embedly support
on the content side the reason I require this is because this actually loads a third-party script from embedly okay
that will then process and do all these embeds okay so um let's go ahead and
show you what that does actually um and uh I think there's I'm actually going to publish this really quick
oh good only three files this time nice all right
oh did I turn on embedly I did okay um so I can do here so let's just um I'm
going to go ahead and add in some more mipsum and then I'm going to add in um
do I have a link to a tweet in my
hi I have a link to a tweet done by the earthquakes okay which is my local
soccer team so I'm gonna put that in there and if I save this oh wait hold on oops oops I can't just put in the link I
gotta go ahead and click embed URL and then I can paste that URL in and I can say insert
okay and uh we got this let's go ahead and save that
there we go so this creates a nice little embed um and if you want this you have to
enable that inside CMS core as well the one caveat is especially those in like
gdpr countries that are worried about that stuff is loading that it does load
from a third-party provider it loads it from embedly okay so you may or may not
want to use that okay there we go okay
um and we'll just delete that now
foreign
there it's kind of gone interesting
reload the page oh I did delete it okay cool um I'm gonna turn I'm going to turn in
bedley off just because I don't want it to be annoying okay
if I put in a URL or something like that I guess I'm not going to click on that button but it's fine all right um let's
just keep going down um you can go ahead again you can also do a lot of this stuff from Quick insert as well
okay um so let's go ahead and insert an image um now if you notice here I I have an
existing image and that's because it uploads it to a centralized Gallery right so I already have an image so I
can actually go ahead and say insert this image and it'll insert that image pretty cool right now there's a lot of
image options in here when you click on an image you can you know do image alignment you can adjust the size you
can make sure that it's it's maybe a static sized image um you can make it you can style things
you can add like a shadow or a border so if I add a border there we go it has a little border
um we can do display inline which if you're having a large image like this doesn't really make sense but if I do
like display inline and we change the size to be like 250 pixels
there we go and then what inline means is I can then type text and the image is in line with my text
probably not something most people are going to want but let's go ahead and turn that off let's do break text
and we'll delete that update there we go okay now someone
earlier asked about alt tags so in here you can go ahead and add your alt tag
okay so just click again I clicked on my image and this little tool tip came down here you can add links
and you can add alt text okay which is probably the two most things that people are looking for okay so there we go then
you can add your you know this is my ALT text okay and you can say update okay and if
we look if you want to verify let's go ahead and go into code View and uh oh the embedly stuff is still in
there let's just go ahead and delete that
I have some errand things all right um so if we look at this image here uh
and there's the alt tag this is my ALT text there we go pretty cool right all right let's go
back into code View and uh so yeah so there's images okay
you can play around with some of these Styles um and ALT tag I think alt text and then linking is probably get you know what
people are going to want to use the most there okey dokey
um next is video so in here you can paste in a YouTube or a vimeo video and it will place the
embed there for you okay so um here let's go ahead and try that
delete the image so if I do here let's do it from the quick insert quick insert video uh paste in my video I have
YouTube click ok and there is the YouTube embed from
today's live stream right the one we're on right now okay so there's there's video okay and next is file and file you
can drag and drop any file you want um and it will insert it as a link so let's just go ahead and uh
let's do a visit file uh or I have a CSV file just chunk that
in there there it goes I have my uh I have it creates a little link with this
little paper clip and I did it in line um there we go so kind of nice to just
creates this little download link and that file is uploaded into the depot into the total CMS
okay perfect so that's pretty simple right you can upload images video and files directly into your style text okay
um let's go ahead and start looking at some of these other cool formatting options that we have here
let's just go ahead and delete that
uh okay so now I'm kind of restarted from from scratch here let's put in some Laura mips some text
um so in here in the format if you notice we can actually format some text right
so let's say I wanted a heading in here okay and I wanted this
to be H1 you can do that right I can change that
to be H2 H3 okay and there we go and this creates an H3 obviously okay now um
you are somewhat limited I'll show you how you can modify this menu in a little bit okay obviously we have alignment so
if I wanted this heading to be aligned centered there we go right or aligned right or line Justified so on and so
forth we have font size so if we wanted to let's say I I wanted to make uh this
paragraph slightly larger we can make it 18 right so there we go
okay um and then you can change colors so if I go ahead and select this we have text colors so if I wanted to be let's say
um white or gray and I want to go to change the background and I want that on black
there we go you can do something like that again that doesn't create a block it just changes the background of the
text okay we'll get into some more advanced stuff in a little bit but there we go uh
there is undo and redo right so there's a little bit of logic there you can undo stuff okay
there we go keeps going you can redo so that's kind of obvious save was obviously I think that does it's pretty
obvious it saves um and then one thing I did Skip is some of the bullet stuff so you can do ordered lists bullet lists and then you
can change the indentation of those okay um next is you can do quotes you know this is my
quote okay and you can go ahead and quote that increase it there we go so you can do
kind of like you know kind of like email quoting where it's it's you know indented
uh you can add horizontal lines go ahead and hit that that's a horizontal line
and you can insert tables and this is a pretty cool thing right so you can actually go ahead and create a pretty
large table if you're using Foundation six it actually kind of makes that table responsive for you
um large tables you can get a little weird on small devices because you're trying to get you know lots of
potentially lots of data in a small view tables are are a tough thing okay but it is nice it provides a nice little editor
and for each individual cell you can have individual style options as well pretty cool there
and we've already talked about the code View right so um yeah pretty nice there
all right so that does it kind of more the the basics of of hip wig okay we covered all the basics let's go ahead
and start diving into some more uh advanced stuff so the basics of turning on all these
menu bar items um is pretty easy you just turn these buttons on and off okay
um but there are some Pro settings down here um first off I'm going to show the pro settings for format color and text size
okay and that is these format um text size and color toolbar options
we can customize those right so if we look at here um
we can do you can we can add our own right so basically you do the tag and
then what the label is so like if you notice here I don't have a H5 okay so
what I'm going to do here is I'm going to do a comma and I'm going to do H5
colon and then you can do um heading five
quotes okay so now now if I preview this
you'll see here that we have heading 5. okay and that will put that will cause
that to be an H5 tag okay so basically again if you look at the if you look at the
um the layout here it's the key if you're aware it's the kind of key value Pairs
and the common delimited list so it's your tag Name colon and then in quotes
the label that it's going to be inside that menu okay so I wanted heading 5 to be an H5
tag so I do H5 colon heading five okay and if you don't want them to be able to
put in H1 on the page guess what you just delete that right and then they won't be able to put
in H1 um colors this is just a huge grid of
hex colors all right so you just provide a comma delimited list of hex values for text
colors and background colors and that will allow you to customize this grid here
so if you want to limit your the colors that your customers can actually put or you want to you know you create a color
scheme for your customer and you only want them to be able to use those colors you can put the handful of colors that
they're able to use here and then font sizes you know um you can
limit the font size choices that they have so basically you know here it's pretty simple you just put a comma delimited
list of numbers that you want them to be able to size things to
if you limit H1 can you still add it in HTML mode yes in HTML mode you can do
whatever you want there are no limits okay so just by this format menu here
just removes it from here right so um here let's go ahead and preview that
so I no longer have H1 in here but if if I have HTML mode right I can go into
HTML mode and add whatever I want there there's no limitations
if you're in HTML mode you can do whatever you want so if you yeah it
you have to be able to trust your customer if you want to turn HTML mode on for them
okay okay
um next up so that that has to do with the pro settings for those three sort of things or I allow you to customize those
menus next we'll notice there are two more there is for the toolbar
and if you notice when you click the pro toolbar all of those buttons are removed they're all removed and that's because
you can now Define a comma delimited list of things now here I added everything in
here so you can you can customize this menu to be what you want okay
um you'll notice that there is a little vertical pipe for a horizontal for a vertical divider and you use a dash to
create a horizontal divider inside there so again inside this list I have all
possible options so just basically take this edit it probably in a in a text editor somewhere because this is kind of
a difficult thing to see it's I know it's very tiny but go ahead and you can you can edit and Define this list and
you can customize the order in which they are if you don't like the order that I did it with the buttons okay you
can have a completely custom order just by using the toolbar buttons here okay next is quick insert
um this allows you to uh control what menu items are in the quick insert like
for example if you didn't want embedly there you can you can easily remove that and then it won't be shown there or if
you don't want if you don't want them to be able to add a table you can remove table from that list okay so then it it allows you if you
only want image and video then there you go you can only add image and video
okay so that allows you to customize and again that quick insert button is this this guy right here
so it allows you to customize what tools are in there
okay um that does with all the settings so let's go ahead and do some cool stuff now
let me take a quick Swig here of my drink
okay um
so we're going to be spending a lot of today now kind of Dipping into HTML mode
okay because it really allows us to do some pretty slick stuff
and um so first off I'm gonna go I'm gonna I want to use the example of that I talked
about at the very beginning where I wanted to add a button right um so I don't know let's do like a
subscribe button okay and let's say um I I want this to be a I'm going to go
ahead and I'm going to make this a link I'm going to insert a link and um I'm just gonna put any random
Link in here okay we insert okay now that that's a link right and
that can link out to maybe a page or something it could be whatever you want okay
but how do I make that look like a button okay and this gets into
um kind of your theme or framework that you're using Okay
um so here I am using Foundation and Foundation has a bunch of classes that allow me to do some cool stuff
so I can do is I'm going to drop into code view here and as we notice right here
this isn't this is the link okay that is is our button oh wait no wait where's our link
oh this has all kinds of I disabled the embed stuff let's go
ahead and uh hold on let me go ahead and save that let's go ahead and save this now all right
all right so now uh there we go um remember I disabled embedly on the
page so it wasn't displaying it but it was code was still there okay sorry about that
um so now I have this paragraph and then I have this this link okay this subscribe
link right here maybe I can make this a little bit bigger for you guys hopefully maybe maybe that's a little bit nicer if I
make the text a little bit bigger a little bit bigger okay
so in here if I wanted what if I wanted to turn this link into a button
pretty simple to do we just do class equals okay I know we're getting the
code here guys but we just do button okay class equals button that's all I'm
gonna do let's go ahead and let's switch back out of code view voila look at that
have a button pretty crazy right let's go ahead and save that
and just to show you uh I'm gonna go ahead and refresh this page and if you look down here at my content
area there we go here's my text and my cool button
right now there's a bunch of other stuff we could do okay
um there's other utility classes that we can add to buttons and and all kinds of stuff right I I can do like button I can
add like radius I can add like um alert
okay and if we do that there we go I have my alert color and it added rounded
corners
oh my pretty face is blocking the button no it's not oh maybe down here oh oh at the bottom
there we go so there we go let's go ahead and save
that and if we reload the page um just kind of show you the content area there it is down here
okay content and our cool button and all we did is added
um add a class pretty what is my face pretty Scott is that what you're asking I think my face is beautiful
[Laughter] um
so yeah pretty slick right um we can add all kinds of other button classes to this now how do we know about
all this stuff like like okay how do I know that adding a button class to this
um just worked okay and um I'm gonna go into some stuff specific to Foundation
okay um so let's dive into some of that okay
well before I actually dive into the foundation site um
a you can use the if you go to the classes um utility classes okay there's a stack
called classes in Foundation six there's a bunch of classes so here look here's a shadow class let's say I wanted to add a
shadow to that button okay all I have to do is add shadow
there we go I have a shadow right and guess what you can create your own classes with swatches
right because if you have control of this page you don't you're not limited to just the classes that Foundation has
you're only limited by your imagination because you can create your own classes
right let's do a quick example here let's do like um
now let's create like a font color swatch and we'll call this um
ugly text okay and ugly text is going to be uh
we'll just make it red yeah there we go right so it's going to be that color
okay so whenever I add ugly text to anything um it's going to get that color
right right oh I have to publish this R okay let's publish it really quick
all right let's uh reload the page so we get our new classes okay so now uh
remember I created a Swatch called ugly text let's just go into code view here
and I'm going to add it to this paragraph so I'm going to add class equals
um ugly Dash text
that could be voila there we go and any swatches that I apply to ugly
text get applied to there right so right this isn't something that you know
this is definitely again this is an advanced tip okay this is for um you know definitely something that
you know your average mom and pop probably aren't this is probably going to break their brains okay
um and maybe in the future we'll be able to create some things in in style text engine that will maybe allow you to do
apply classes to things okay maybe um I I think that would be something really cool it's on my list of I think
that would be awesome to have but um for right now if you want to add classes to things you just drop into
HTML mode and you can just add your little hearts to your heart's content
okay um let's show a few more examples uh let's go ahead and so again all this
classes all the utility classes or any Swatch you ever create you can add those
okay um let's look there's another stack that I don't think many people look at it's something called Snippets
okay and um it gives you little Snippets that you can add
okay so for example I think a cool one actually is this uh this attribution
okay so I'm going to go ahead and just just copy this right there okay let's go in here I'm going to go
into code View now in the middle of this paragraph I'm just going to paste this in there okay
and we're gonna get out and if you notice here what it did is out of this little JRR with and it's
underlined and if I hover over it um it gives us a question mark and the tool tip it has a little tool tip that
kind of has like the definition of that right so it's kind of a nice little thing okay
um and but there's there's more that we can do there's some other ones uh if we look at we can do like if we want to
like accent some words in our text we can use these tags these kbd okay so um let's go ahead and look at
that so I can go ahead and uh Let's do let's go into code View
we can do um kbd go there
and we need closing tags kbd okay we can get out and there we go that
has this little code view there okay now something like this you could probably actually do maybe a paragraph format for
that you know set it an ABD tag for that format and voila um could be something you could do there
right but yeah these Snippets are cool little things a lot of them are kind of code related there's also tool tips so
if you wanted like a full-blown tool tip here let's do this and I copy that right there
um also maybe a good thing is you can have like maybe a little a little tutorial where people can copy paste
maybe you open up a little lightbox that has you know these little Snippets that you can copy and paste yourself okay so
like if I wanted um a snippet or a tooltip right there let's just paste that in there okay go
out and uh oops I don't even remember where the hell I put that where was it
it was after expector
oh uh I don't think it does it inside hip wig um or let's save
now save and refresh there it goes
so it's kind of a fancier version of this one right um so it's obviously a lot fancier and
it gives you a nice little thing here doohickey there um they don't show up inside hip wig that's just because of the way order of
operations with JavaScript happens but it will always show up um here in your published content okay so pretty cool
there okay okay let's start taking things to
right like what other what other things can we do okay um so I want to show off actually hold
on um I I was gonna have to open up Discord really quick
all right then people send me some Ur oh here I'm going to show uh let's go to madeforestax.com
if you missed it made for stacks.com is out online Stacks repository for
um all Stacks add-ons okay that's been my okay
over here over here all right um so I'm gonna go to devs okay and if
you didn't know um two weeks ago I did a live stream this is all built with total CMS okay
let's go ahead and look at Stacks base camp Mr Fancy Pants Chris Powers is here
and check out his Fancy Pants developer page you know all the other developers
including myself okay we just have plain boring text right there's op boring yeah
I only have like two three sentences right I just have like boring plain text but no Mr fancy pants here okay he he's
like I know the hip wig I Can Go Fancy and he did all kinds of stuff in here
look at that right so you know he built this entire layout with YouTube embeds and a three column layout I mean check
this out right being a show-off cool stuff good job Chris right so just
show you that you know I just gave him a hip wig instance and he went all out and created a nice nicer layout right to
sell himself we should get a private lesson from Chris there you go okay
I see there's a competition let's see it uh I got I gotta check to Josh oh Josh
let me down come on Josh it let me down man let me down
Chris is showing you up okay um next example actually is from Josh
um Stacks Weaver he created a site Josh I didn't ask if I could share this so sorry
um I'm doing it anyway um he built this website uh powered by total CMS
and see this little color collage over here um that has like colors and little
images and stuff like that well guess what that's a hip wig instance
right he did this in Hip wig okay basically uploaded images and uh used actually
used Foundation uh column code uh to create these columns
and it works beautifully right pretty cool so this this area
again where with all these like swatches over here that is the hip wig instance
right and he did that with let's go ahead and here let's take a peek under the hood
we're going to take a peek under Josh's hood here oh man that didn't that didn't come out well Lord I apologize all right let's go
ahead and let's inspect one of these bad boys here
all right so here is every single image
okay and if actually if we expand one of them we'll see that it actually uploads the
image and it's uploaded to the hipwood gallery so he uploads this little image okay it also has a little text
underneath it for the for the um caption right and all he does is he
makes sure he wraps it inside of this little div okay grid X sell small medium three so
what this says is on on small it's four columns on medium it's three right
pretty cool right now how did Josh learn this syntax
okay um so there's a couple ways um Josh probably went to the foundation
website and um Foundation Stacks use something called the XY grid this is get dot
Foundation it is the website for the foundation framework there's a lot of videos from these cool
cats here um that used to be the maintainers I am now the maintainer of this framework
um but Kevin and uh uh some great guys uh were involved here okay and basically
go to docs site docs and that takes you to Foundation for sites and then the
menu over here on the left gets you to everything so we go to General XY Grid in this example
okay and uh you can kind of learn the syntax here it's it's not too difficult right
essentially it's just you have this grid X and then inside each of those you have
cell and then medium six large four right if you've used the stacks it's not
all that dissimilar right so if we go to this two column look I have small 12
medium Auto there I could do medium four large four right or something like that
right so essentially I mean these Stacks have kind of gone through some of this right these Stacks all it does is
correlate to these classes not rocket science guys okay I I know
you guys think I'm a mad genius or something like that but uh it's not I mean I've done some mad
genius stuff but this this thing in particular is just hey it's just creating some columns it's just
mimicking this HTML layout okay and Josh did it himself all within
hip wig
[Laughter] s
I'm not a genius Irwin oh man I I said if in this case I'm not a genius in this
case okay I'm not um so there we go uh that that allows us
to create really opens up a lot okay and we can kind of peruse through a lot of this if you're using Foundation
um again we're using the XY grid okay uh none of these other grids these Legacy ones don't work I don't include those
um controls uh here's if you wanted to see some of the other stuff you could do with buttons okay
um so you can kind of look at some of the buttons size so here's sizing if I wanted that button to be a tiny button or a small button or an expanded button
right we can do that so let's go ahead and uh we edit this code
okay I want to add um I want to make it a small button there we go now it's a small button
okay so a lot of these classes are just fully documented they're again open source
okay um there's the colors that we can do you can do a custom color if you want with your own custom Swatch
okay um if you want to add something like a button group um this isn't too hard it's just some
links okay with some classes okay you can create a button group like
that pretty cool
um I would probably you could do full-blown things like sliders okay
um uh well I was I was thinking more of a slider like uh a different slider like
the content slider but there's sliders um I don't know about doing I mean you
you could use any of this stuff in Hip wig like you can create a full-blown menu I'm not sure I know the use case to
that um it's possible but uh I don't know um yeah you could do that though you
could create a menu editor at that here actually for fun I was not planning on doing this here actually let's let's do
something here I'm gonna create I'm gonna add a bullet list okay we're gonna do
um page one or here let's do this I'm going to do home I have this should work but I
I don't know okay so I I have a simple bullet list
right here okay we're gonna go into code View and all I'm gonna do is add a class
equals
menu that's all I'm gonna do
I'm curious I'm gonna see
oh those need to be links huh um so I'm gonna go here I'm going to add
a link to that I'm just gonna be lazy we're just gonna put in that
and as I start adding links you'll see that we're actually getting
getting a menu
there we go look at that there's a menu simple menu but it's a menu
okay and I'm curious if I hit enter here does it
and then if I add oh I I gotta see this insert link put in the oops
let's check that out check that out I I never even and the
code is immaculate the code is perfect
okay Erwin that is genius right there that's that's pretty genius so there we go I turned hip wig into a
menu editor how slick is that okay and uh so yeah menus
um you can even do something you could probably even do something like a drop down menu if you really really it's all
that is is just putting drop down in it um pretty crazy pretty crazy and all
that all that was done just by adding this simple class of menu to a bullet list
pretty crazy okay um we won't go through all the other menu stuff what's oh oh I wanted to show
off here's something called a call out all right this this will be very useful
okay watch this um so we could if we just wrap anything
in something called a div class call out okay um this this is cool you'll like this
[Music] um here I'm just going to Let's I need to clean up a little bit here
I'm just going to delete everything all right let's say I have Lauren ipsum here I have a couple
okay some text all right let's say um in between these two texts
um I wanted to um I want to have a special something
special right so let's do um heading and then more text
so let's say I wanted uh let's do this as a heading three okay let's say I wanted this bit of text to be like
something special I wanted to stand out a little bit okay so what I'm going to do is I'm going to go into code view
okay what I'm going to do is I'm going to paste in um that and then below it I'm going to
close it out okay and actually I'm going to put in a
secondary class in there just because I know I'm going to want it and voila
check that out right it adds like a little call out directly
um inside of our content super useful okay
um and that's similar to if you didn't already know there is a call out stack okay call out Boop
there you go call out stack okay pretty slick stuff
um so call out I think that's a that's a huge winner that's a that's a huge winner I think that's great because I
think these call outs if you have a long post and you want to like you know have a little call out for a little side note
thing or something like that that's great okay oh that's a good one
um let's see what are the other ones I wanted to make sure we we did the call out was something I definitely wanted to
make sure we used um there's other things like labels okay
and badges so um yeah if you just wanted like this little label right here see this little
label right here it's just that syntax right there okay it's exactly like the little
um all the stacks in here there's what I think it's in text right yeah we have badge and we have label okay
um so you can add labels you can add badges they're very similar badges are just like one character little things
okay um and yeah it's just a simple class
okay to some text you can do all of that inside hip wig
okay um I think I've I think I've
kind of got the gist right you guys can peruse around here another thing you can do is like if you wanted to know the the
code for this label like I want to use this inside hip wig right well guess what you just preview this page okay you
build it out here's my label up here okay right click on it inspect element
okay and guess what there's the html4 right there I can just right click and say copy HTML and there we go okay so um
yeah I think this this site is is is a good reference um and it gives you more options so you
know know the coloring and all the classes and stuff right um but uh yeah hopefully I see someone
Martin says that even for a non-coder he learned so much today so thank you Martin I I'm happy about that okay
hopefully I didn't break your brains too much I tried to keep this pretty simple
um it's just it's just adding some classes to things now I wanted to show one more kind of
cool thing um before we close out the day and I'll peruse to see if I missed any questions okay
um a common thing that we uh tend to want okay is hold on let me clean up this
page a little bit I added a bunch of junk that we're not going to want here okay
let's say I have a blog post and in the middle of my blog post I want to put a a
subscribe form a subscription form to um my newsletter okay now you could drop
into HTML here and paste in some code for a subscribe form but that's a lot
okay that that really is quite a bit so would it wouldn't it be great if I
could like design a subscribe form and then inject that
into my blog post okay so I can do is I'm going to take this out of this pen stack okay
and um the magic here is actually an old stack called Houdini okay which was
originally built to like put Stacks content in the sidebar of traditional
themes okay but we're going to use it today to inject content inside of our blog posts
okay so in here I have content and basically I want to inject this stack
content in the middle of my text how can I do that
okay so I've designed this little call out okay it actually uses a call out
stack and some text and then it uses a form and then I have a little inline form okay now Houdini um allows us to
have a destination of a custom div and I set the div ID to be subscribe CTA
and if you look down at the bottom it gives us a little code snippet that we need to inject anywhere on the page
and it will move this content right there for us
okay so what I'm going to do is I'm going to take this content
I'm going to take this snippet and put it in the middle of my post content or
my CMS text content and so I'm going to do is I'm going to publish this page to make sure that Houdini is there because
it was set to not publish before
foreign
let's go and reload this page all right uh so we scroll down
we will notice that my subscribe form is down on the bottom because the little div that I told it to
um move the content to doesn't exist which is kind of good because maybe you can like default it to the bottom of the
page but if a blog post has it in the middle Houdini will then move it there pretty cool idea right
all right so let's go ahead and do that so I'm going to go ahead and um uh let's go ahead and actually I'm gonna I'm
gonna start let's start from scratch here all right let's just control a delete okay and um let's just do some more some
text okay um
one more okay let's say
um I have this Long blog post content okay I even have like some
let's even put like a I have no idea what this image that was here from but let's go ahead and pick
that image that was there this had been from Davide right no no this is strings
it's not from Davide he's a trumpet he's the brass okay so um
let's say in the middle of this content I want to add a subscribe form
so what we're gonna do is we're going to drop down into code View okay and right here right after this
paragraph I want to inject um that subscribe form
so let's go ahead and let's move this over so we can see our um little snippet here so I'm going to
do um div ID equals
subscribe Dash CTA
okay just like that
oh am I gone what happened guys am I Frozen
uh well I'll continue this um I am recording locally um so I'm going to go ahead and exit
code View okay looks like maybe the stream stopped right and let's go ahead and save this
content and then let's reload the page
and we'll notice in my content I have the image I have my content the Subscribe form and the other content
right so let's if I change
it am I back guys is everything okay
I have no errors on my stream on this side so I'm not sure what happened it's
choppy okay um
the size of the form no so the size of the form um it's just it's whatever I built okay
so I I built this form out um using Stacks okay in this case I'm
using Foundation Stacks or the foundation form um and I I set the one column to not go
full width I said shrink to content that's why the Subscribe form is smaller
um I didn't I didn't think it looked good all the way wide right so um I decided to style it like that
and um yeah and then Houdini just moved it all Houdini does is move it right so
once I put that um that snippet inside code View
okay so inside code view all I did is I put this little snippet in there hip wig does add a br tag in there
um but it doesn't really affect anything okay
um so yeah so all I did is add that little div um and uh yeah hip wig it doesn't add it
inside of hip wig but on the live page as we see down here I have the Subscribe form in the middle of my text content
okay
well it looks like towards the end um some of the stream uh got slightly messed up
um I'm sorry um I'll go and review uh the Youtube and um if I need to I will upload uh the my
local recording I always do a backup recording locally just in case um so there we go
um well next up I just want to say if you are using something like Foundry
um that or a bootstrap based theme um you can basically go to the bootstrap
documentation and do the same exact things that I did for foundation but use the classes that
bootstrap uses okay so um there is that um so yeah um I'm I'm not a fan of
bootstrap um I've been I've Loved foundation for years um obviously especially now that I I own
it and I'm the maintainer of it um but I I have always loved Foundation more than than bootstrap okay so um yeah
but you can you can use the same exact Concepts that I showed you today from Foundation you can use it with bootstrap
so yep there we go cool I uh want to thank everybody I hope
uh hope you enjoyed uh today some people said the stream was good some people said it was choppy towards the end
um it could be a YouTube problem I'll review the stream afterwards and again replace it with my local backup um if
there were any issues so cool I hope you enjoyed today and uh see you over on the Weaver space Community oh I have one
more special thing for everybody okay should I should I show this okay I have
something special I will show it because I actually am if you want in on helping to test this
okay um I do need some testers okay
um let me go ahead and load something in my browser then I will show you guys so for the for those of you that stuck
around I got something special for you guys give me one second
something a little something something I've been working on um I was working on it for
um total CMS 3 um but I figured I would
get it at least a simple simplified version of it
um available for total cms1 okay and so let me go ahead and share this
uh there we go all right hopefully you guys are seeing my browser again okay I don't need rapid
Weaver whoops so for any of you out there that uh use
zapier okay um I have created a total CMS zapier
connection what does that mean Joe okay what that means
um is that you can actually create blog posts
um through zapier pretty cool now there is some limitations
um it doesn't support images I'll probably the image support is like a lot of work I'm gonna save that for version
three um but yeah so we can create new blog posts from zapier
now you might be asking well Joe why would I want to do that here's a simple use case and here's a use case that that
made me maybe backport it okay um Martin if the other another Martin uh
that is uh um that posted yesterday on the community that he wanted to go uh oh
wait where is it oh here it is
he wanted to have a client post things to Instagram and he wanted them to be
populated into uh her website okay so what this does
um here's a here's a test um zap that goes ahead and whenever a
new post is made in Instagram um it'll actually create a post inside
total CMS so it creates a new blog in total CMS now I told you it doesn't support images
so what I do is um Instagram gives us the URL of the image on Instagram right so I just
basically pop that in the media field and um yeah so I created a integration between
total CMS and zapier I'm currently zapier will not allow me
to publish this publicly until I have enough people using it
therefore if you feel like this is something that you would like to play around with
um please message me or email support and I will give you a private invite
link um so that you can test out this zapier integration with total CMS
okay um oh Martin that was you sweet
okay um so cool that is either I I didn't know you were here Martin worrying so
yeah um there we go I I created a test what this does again it doesn't load it
doesn't download the image into total CMS but at least creates the post
um I put the caption in the summary field the URL to the image on Instagram in the media field and then I did the ID
of the post as the permalink right um so there we go it
kind of works right um it only does one image so if they're posting like 12 images to Instagram and
only does like I think it's the first one um so it's something okay
um and uh there we go so uh I have a zapier integration uh for that now uh
and again if anyone wants to test this out go ahead and uh shoot me an email
and I will give you the private uh invite link for zapier and once zapier
sees that enough people are using it um they'll approve it for public consumption basically okay so
um yeah go ahead and do that can can you make the zapier integration
also for make like there's okay I'm sure I'm gonna I'm
probably now I open up a can of worms and everyone uses some other different service um zapier is the biggest one so I did it
for them first um and uh maybe eventually I can do it for other services I know some people
use integrately as well um maybe you'll do it for that and I've never even heard of make so I guess
there's another one for make um so maybe um right now I've done it for zapier they're the biggest
um they're what I use um so there's that okay
um I'm not saying I won't ever create one but for right now what we'll get zapier out and let's get that working
okay so cool everybody um yeah integromat that was what I was thinking not integrately integromat that
was the one I was thinking I know Davide uses that so um I should have bought that on that
when it was on appsumo idiot okay anyway um cool thank you very much everybody I
think we're gonna call it a day um Tony has another vote for make okay
I'll look at make I've never even heard of it okay cool um sweet we'll see you on the community
and uh talk to you soon hopefully we'll see you on Friday at the hangout take care everyone ciao bye