everybody here how's it going everybody
excellent doing something completely different today we here oh we got oh we got 20
okay cool I don't see anyone in the chat everyone just let me know in the chat audio and visuals are
good first time I've used my uh my setup since or I used wirecast since the
summit so I just want to make sure everything's
good oh there we go Mr Cole excellent now the chat's coming through okay slight delay sorry about that okay
um so today um I'm I'm I'm not going to be in in Stacks maybe at all uh to be
honest with you um so I know all I I'm willing to bet most
of you have probably attended the summit so you probably saw um excuse me um a
lot of what total cms3 is coming
um and uh man let me drink some water
here so I've been working uh pretty hard uh this week on total CS 3 last week was
kind of a catch-up week didn't make too much progress tons of progress before the summit
though um and so I am trying to get uh a beta out to um pre-sale users
by the end of this month okay and um pre-sale users are those that joined in
at the summit and got access to that um I might have a uh another pre-sale after
that um you know when when I get maybe closer to launch have some more things maybe open it up a little bit wider to
the public but um yeah if you're at the summit you got access to the pre-sale and um those
of you that are in there will be able to help me um shape the future of total CS
3 okay um okay with that said I decided today that uh actually you can
all thank Chris Powers for this I was like do I do I do a live stream today I I really got to make some progress on
total CS 3 so I can get it out this month and Chris was like dude I want to watch you do it and I was like what like
I I'll be honest I haven't I haven't done like the live stream like coding things I don't think I've ever done it I
don't know have I um most because I mean it's just a lot of me just I
mean I'm fumbling through the stuff as well it's like you know it's like oh what do I do this and then then and then
stuff messes up and and it could take me hours to get anything useful or it could
just be minutes and it's like boom I nailed it um it just depends on how the dice rolls that day um so we'll see how
this goes um and if you guys like it let me know maybe we can do more of this um
but yeah again I'm not going to be doing much in Stacks so if you're here to like learn what total cms3 is you might get a
glimpse of it here or there but this is me just building out HTML and CSS and um
seeing a bunch of that stuff so um I'll I'll try to talk through it as much as I can to kind of let you guys know maybe
what I'm doing and why I'm doing it but um we're just trying to build some stuff here okay get it out the door without
further Ado if you have any questions um go ahead and shoot them into the into
the chat I'll H I'll be happy to uh answer what I can um and yeah enjoy um
okay so let's uh let's go ahead and uh share my screen
um so here let's let's revisit uh what the current image
uploader is right uh so here's a current image uploader um for total CMS and we
can go ahead and you know take an image and upload it and voila right we got a
cool image upload uh when you hover over it um well a what you did see is uh this
is all running local so that upload was like insanely fast right but uh there was you know obviously a progress bar
that came up here I'm sure you guys have you know all experienced that and whether or not it succeeds or fails
you'll get a little you know green check mark or a red X there um ultimately I I
really like the look and feel the design like everything about the existing total
CMS image uploader I like okay um so all in all
I'm going to pretty much keep it the same but there are some things I need to
add or change and hey if if you would like to see some of these things change
um right now let me know in chat okay and um so yeah uh when you hover over this
you'll notice that there is what I'm what I call the action bar right um at the top and it allows you to do various
things all right you can um you can go ahead and click on this this allows you to upload or modify the alt tag for an
image so that's one thing um this is going to get a major overhaul because um
in total CS 3 we have access to a buttload and that's a very technical
term a buttload of more data uh for every single image okay uh we don't have access to just alt tag information or
description right but we all we all have access to all the exif data we have access to um modifying the focal point
point of an image all kinds of really cool stuff tags um you know is it
featured or not um eventually probably not in in earlier betas but maybe later
down the road I want to add ratings I think that would be really cool so you can rate an image um so yeah uh this This little
light box is going to have a major overhaul okay um then we have uh this uh
the copy paths and I like this as well but um this is again also very different
in total cms3 and because uh you've probably seen
uh total CS 3 has a complete like Dynamic image generation right um so I I
think having some sort of Link builder for an image would be useful um but
that's much more complex than what this is this is just a straight up here's the
URL to a particular image right it's it's not like a URL building tool um so
I'm I'm unsure how I do think clicking on this and having some sort of uh you
know URL building tool for an image would be useful um but man that that's quite complex so
I don't know we we'll see I I do like this idea I don't want to necessarily get rid of it but it again total seus 3
is a complete different Beast so this is going to have to change um now if this were a gallery
image there was there would also be a featured image thing where you can just click the star and it will set it to be featured um I'm probably going to add
that to image as well just so if you wanted to add the featured flag on an image you can um just really quick it
doesn't hurt having it there um so I'll probably add that um as well um it's
there again for gallery images um I just hide it um it's the same exact HTML I
just hide it on an image versus a gallery uh and then obviously over here you click and that's the delete button
okay so um yeah pretty simple elegant interface and like I said we're going to
be keeping a majority of this interface I mean every the style I like the Border
um I like uh this action bar now there's some things I also need like these use Font awesome icons we're going to use
we're going to SVG ify it I already started some of that work last night um so you'll see some of that um in terms
of you know finding the svgs and all that jazz um but we're going to be primarily at at the beginning just focus
seen on this uh action bar um and then the next thing I want to
work on is this uh little light box form for editing the data uh if I can make
any sort of progress on this during the during this live stream I'm going to call that a win okay um I'm pretty
confident we can get this action bar done um that's not rocket science but then
hooking it up to a light box and then starting designing uh a form
um for this is going to be good now so uh yeah without further Ado let's
Jump On In um here is what I currently have okay this is this is total cms3 and
this is a total cms3 form page okay I got a bunch of more forms but we're only going to be focusing on this image
upload uh doohickey right here what other things do I have oh look I was uh searching up some stuff earlier
today uh let's quit that okay
and uh yeah we'll quit that too all
right excellent let's go ahead and uh yeah man I I reduced the screen
resolution and uh it's kind of made my screen a little Pixy but it's all good it helps you guys I guess
okay um okay so what we're doing is uh one of my doing
okay so here is the uh this is the actual page okay um and
uh for those Of You' been around or seen some of this this is some of the mustache that uh creates or the mustache
The Twig that creates uh this form page right so this doohickey right there that
creates the um the actual form
uh element the image upload element on the page okay and this is just a way of adding a bunch of other ones again I'm
not going to try I'm going to try my best not to like re-explain everything about total CMS 3 during this so um if
you don't understand all of it okay um you'll learn more as the feature goes on okay um so yeah this is it uh form.
image and we're going to bring in the image CMS ID okay and uh if we want to
look at that data right here uh we'll see that that's the image that's stored and this is all the image
data that we have access to and that we ultimately want to be able to edit okay
so we have the alt tag information we have exif information which is you know all the data from the actual image okay
aperture ISO shutter speed cameras All That Jazz okay focal length um so yeah
that's all of the information about the image uh whether or not it's featured uh told you we're we're going to store the
focal point which is default is going to be 50/50 which is right in the middle but we can customize and Define that
focal point uh which is going to be really cool um the width and height of the image that's not really data you're
going to edit that's just a matter of fact that's just readon this is the width and height of the image okay um
the link I let you store a URL like let's say you wanted the the use case for that is let's say you add this image
to a slider and you want that image to always link like to be related to a URL
right so um I thought it would be nice to just be able to give you the ability to add a URL okay um so you can store a
link with an image um MIM uh MIM type that's probably
going to be a read only thing that's not something you can change that's just the original um images MIM type okay not
even sure if that's useful to store I don't know whatever um here's the original file name that was
uploaded um here is the color palette which is quite interesting um so I
analyze an image and I store all the color information about that and um not
quite sure how we're going to leverage that data but I like storing that data so we can access that somehow okay um
the size the image again that's a read only thing it's not something you're going to be able to edit um tags upload
date and another readon attribute but it's it's nice to have there so we know um what date this image was uploaded
which is which is cool right um let's go ahead and uh start
working on that so that's a little bit of background on what the image is the data stored inside the CMS data
folder okay uh that's how the form's added to the page I don't think we're going to be able to have to access that
anymore just close that all right
um so this is the actual going to be the um HTML that actually generates uh the
form so this this we're going to be able to tweak and edit this and this we're
going to be working on this quite a bit okay um this is all twig by the way okay
so uh twig mashed up with HTML so
uh I'm not going to dive into all the aspects and explain everything here or else it'll it would take me the entire
live stream okay so um yeah so right now we're going to be focusing on this
here's the action bar okay um if you notice there is the edit
button which is like editing the image info um on the original version that was like the edit uh the alt tag information
but we're going to edit everything that we saw there okay uh we have the ability
to oh get the links right so um there's going to be another button um for links
which uh will that like the URL building tool okay like the image paths thing
then there is going to be a featured button a star just turn on and off kind of a toggle there's going to be that
trash button right over the a delete button and then um this doesn't make
sense on the normal image but uh I kind of I reuse this HTML for both image and
gallery and so gallery has the ability to have that little drag tool okay um
I'm sure if you've used total CMS you know that you can kind of reorder the images in the gallery by dragging them
around um so yeah uh we're g to have that move thing which will be hidden for
images okay um but while I'm designing this I'm just going to add it in there because I know I'm going to need this
for a gallery and I'd like to be able to reuse this bit of code no matter if it's gallery or image it's just the same bit
of HTML okay I just hide and show things based on whether or not it's an image or a gallery
form um then uh so below that we we display the image okay um this is the
special sauce from Total CS 3 that brings in that image okay for us um and
and we just Define some width and height so it dynamically creates a preview for us um and then here's the progress
indicators and then here is the little success and um error messages uh which
these particular ones are actually um font awesom we're going have
to replace those when we get to that bit because we want to use svgs all right
so inside action bar so we have our uh an action bar and in there we have all
these classes have an edit Class A Links Class A featured Class Trash class and a
and a move class okay um so let's go
ahead and look at action bar um so this is my uh CSS for action
bar now I I this is the the code that was used actually from the previous version
so we're going to be tweaking and modifying this um I like to always start from something since I'm utilizing the
existing stuff I'm just want to make it better right so we're just going to use the existing thing and make all that
better uh for example um these are actually instead of links I'm now migrating those into buttons so we're
just going to change that to button okay [Music]
uh and this needs to be button and then move
okay now this is image field so I'm just going to change some
classes that I know that I modified image bar image I don't remember what that is so I guess we'll
we'll keep that like it is for now I don't remember what that CSS was all right
um a lot of screen flashing hold on I wonder if one
second you're getting a lot of screen
flashing here I'm curious if we do hold on
oh boy fun times
all right is that any better um yeah I was I yeah I flipped between
the big image of me I was just trying to debug I was removing the my little self video I was wondering if maybe um that
was causing the screen flickering um curious in the screen flickering um does it happen when it is
just when I screen share um I've had this feedback before so it would be nice to be able to nail that down um or does
it also happen it's worse now oh um it's worse now it is
worse okay now constant oh boy fun times
um
I'm going to try something else here right um
now it's constant okay I'm going to turn off I'm going to go back to my native screen
resolution let's see here if I make this where is it 2560
by the heck
let's quit
that oh there it is all right uh one second let me go now
I have to tweak this
oh I'm going to go back to my camera shot hold on please hold hold on while I
try to reconfigure this a little bit nothing like trying to troubleshoot
a live stream during a live stream that's always fun
Place layer screen
capture let's just create a new screen capture of
monitor okay let's go back now
all how's that
um okay
um okay you know what I'm going to I'm going to continue as as this is right
now hopefully this is going to fix things okay um um so yeah um it's better
cool okay excellent um I did have to this means everything is going to be a little smaller for you guys especially
when I view the browser I can make my uh my vs code uh slightly larger though um
although why is it vs code like so pixelated now one second let me let me quit vs code and start it back up again
that was crazy it was like insanely pixelated
that's very
strange oh there we
go now everything's sharp I don't know what that did we're going to going to quit this little app
maybe I need to stop using this little quick resolution switcher
okay um there there
okay oh there everything is looking at least it looks better for me hopefully it looks better for you all right
um okay um now I need to rebuild here so you can guys can like see watch me build
my stuff I just use this little terminal command terminal is a requirement when
you're a developer nowadays um let's see I like having my little code blocks all in line so we're
going to be a of renal here a of retentive and organize all my code here
cuz yeah that is a requirement oops but we don't want that hold on second
there we go save
that I like having all the little things lined up I am just all for that I like
clean beautiful looking code all right let's rebuild and uh let's refresh all
right uh well I didn't really do anything um I don't remember what I did now oh I changed this to be buttons all
right okay so um another thing that I did last night we T I talked about how I want to use my
own svgs okay um so uh just really quick I'll show you
the app that I'm using um I use an app called nucleo there are a tons of SG Services out there I think nucleo is
pretty cool though um and all these icons that I'm going to be using um in
total CS are from nucleo okay and of course it's taking its sweet time to
launch oh and it launched over on my other display okay there we go um so in
nucleo um I I just I tend to search just nucleo uh at least for this um and we
can search for I don't know um trash right and um I use 32 pixel icons so
there's there's all a bunch of trash icons that you can then utilize right you can do it in uh you know varying on
colors okay I think I picked this particular one
um to use for total CS 3 okay so this little trash icon now um if you're
curious uh I am going to be applying there's different ways of applying svgs
um what I did is here um I'm I did copy data Ur okay um and what that does is
that gives you a little bit of CSS um so I'm going to be applying these as a CSS
background instead of um an SVG tag on the page just a different way of doing things um
you lose a little bit of control doing it via CSS this way um you don't you can't like style the icons as well with
CSS but um yeah there's some benefits as well not having the SVG in the HTML um
so and I don't necessarily need to style these I just once they're the color I need them I don't need to tweak them
with CSS so I think we're going to be I think we should be good with this approach so all right um so so uh let's
do uh icon edit okay um okay so these are 32 pixels by the way and let's go
back to my action bar
and um I'm going to make them
um with uh let's make them 32 pixels for now we can tweak this oops what the heck
just happened there
that's a annoyance right 32 pixels and a we'll
make them a height of 32 pixels as well um we need to give it a raw height
um and uh we also want appearance none CU we don't want them to
look like a button okay
and and just for fun let's just I'm going to do um and do
edit um we're going to do a background image um and then we're going to do icon
edit okay we'll play with the edit icon first and this should do it I think
right okay let's rebuild
refresh here okay um so there we go um it did it
did work it's a little large I don't know we'll see um but there's something we need to do we need to make sure that we get this the border is none right so
um we need to go ahead and do uh border uh
none rebuild build refresh all right now if you notice
there's a background color but that's okay okay now
uh I do is let's I'm going to permanently make this for development
what I'm going to do is I'm going to make it so that this this I action bar is always displayed okay um just so that
it is all always there uh we're just going to do display block uh bang
important okay just so that it's always there um while we're testing
here and why didn't that work action
bar did I not re did I not rebuild maybe I didn't
rebuild what I'm going
crazy action bar display block bang important
WTF right there bang display block oh I think it's set to opacity oh and it's
not display Block it's opacity the uh we're going to do
opacity one
okay because it's always there it's just hidden or there we go okay so now it's
always there so now we're always you know one thing with this page is Bo bothering me you know I'm going to go
ahead and one second I'm going because if you notice when I refresh that page there's something I need to fix that for
some reason um all that is something's causing the page
to scroll when I refresh so we're just going to ax everything on the page except for boom except for the image
perfect excellent now I don't have to worry about that scroll that was bugging me all right all right so now we can
start looking at these buttons here okay so the edit button um actually
it's not a it's not a bad size obviously they're all centered um I do want some of them on the left and the trash button
on the right to kind of separate those two functions out right the ones that are going to be on the left are going to be the ones that are like um you know
these are editing you know enhancing and I want trash to be way far from those so
they're very separated functions because trash is always obviously a very destructive thing okay um but for fun
let's go ahead and uh that link or that icon actually worked out great one thing let's look at the uh
here we'll make this uh the text a little bit bigger for you guys in here
um if you look at the computer I think there's a background color being applied to there is a background color being
applied so I'm going to make background um color oh it's cuz I'm applying a
background color um interesting do we like that or
not I don't think we like it I'm going to ditch that
we don't like it oh oh wait the action bar I want a
background color it's the buttons I don't want a background color on hold on one second the yeah so am I applying a
background color here I don't think so I'm not what's applying that
background color let's see so in the inspector we can go down here and oh it's the browser applying a background
color so um right so we're going to override that for buttons we want to
have uh background color transparent
cool there we go and refresh there we go okay so now I
have um and there's also pointer we need to
have the pointer there I wondering if that's weird normally buttons should have cursor pointer by default cursor
default interesting H right well we want obviously we want to be able to have the
cursor pointer so that people know hey this is a clickable thing what the heck is that um so we want to
have cursor pointer okay uh there we go let's uh
rebuild refresh there we go so now now I know when I'm hovering over this bad boy that
it's clickable I should be able ble to click that okay even though most people probably know now if you notice there
are by default it's kind of an um there's a slight opacity when you hover over it becomes solid I kind of like
that okay that way it gives you a little bit of of an effect when you hover over that particular button okay um and I'm
not going to add any JavaScript yet to open it but eventually when we We'll add some actions that will when you click on
this it'll open up a light box with that other stuff okay so let's go ahead and fill out the other buttons uh the other
icons um so here I did um well first off let's
ah what did I do I moved to a different file fat fingered something all
right I just I like my organization so that's uh there now I don't what would
be nice is those svgs actually something I want to test here um okay so I have
the colors defined in the SVG okay so
let's for example let's go ahead and let's look at Icon edit which is this line right here okay um now when I
copied it out of nucleo um it has this fill color and all
the icons have the same fill it's all this this color here so what I'm going to do is I'm actually going to copy that
and I'm going to do a global search and replace um because instead of that I
want to test something out and I want to use something there's a keyword in svgs where you can say current color I think
that's the syntax off the top of my head I believe that's correct okay and so by
using current color um it should use the current text color for whatever that
image or whatever that element is applied whatever the current scope of the color the text color
should apply so let's test that I want to test that so we're going to do that
and uh I I know that works for svgs I don't
I've never I don't think I've ever tested it for a background SVG so that's uh quite interesting so if we refresh
that and here just for as a test let's go ahead and I'm going to make um the current color
uh let's just do red okay um Red's a good color if you ever
need to test something like make it red and it's very red so that's always a good thing uh we
rebuild refresh here damn it darn it I
mean that didn't do what I expected I was really hoping that would
work that's odd like the it
uh wonder if there's a so that's fill color wonder if there's a stroke
fill current color path are there any style tags or
something fill path
okay yeah I'm going to let's let's do some Googling because I think I would really like this to work um so we're
going to do background um or do
SVG current color let's just hey just make sure I got that right current color and
svgs nice current yesterday looked blah blah blah
change fill and also I want to make sure
actually he I have the current color oh no I added it to the button
H oh on here uh I don't think that's going to it's going to matter it should only matter but we'll change that to Red
too or here let's do uh green so that hover is completely different color
color
right I Phil's current color doesn't have any demos
Here My Links of the color fill
color yeah right cascading fill
color yeah I think this is see this is going to be one of those things where if it was an SVG on the page that would
work but because I'm using it as a data URI um in the CSS it's not um yeah let's
do um what is that data
URI yeah background image
there it's current color in background image SVG oops that's not what I wanted just
accept all Cookie thank you very much yes this guy's trying to do exactly what I
want it doesn't work as you expect because using URL makes the SVG be
treated as if it were an external resource oh interesting even if it's not
exactly the case there's no way to use CSS current color within your SVG when it's a background
image you should instead use a mask with background color to update the color
what is there a special fill mask that I can use fill black oops
ah one reason why I hate sideways Scrolls in browsers sometimes webkit
mask background color webkit mask what okay I got to test that that's actually
quite cool so instead of background instead of a background image
we're going to use webkit mask and then set the background color to be a color that's kind of cool let's give
that a shot all right so um that's a new one I did not Lear I did not know that
one before so instead of we do webkit das mask
wait is that that's what he did right webkit mask first off also let's see can I
use webkit Das
mask oh that's mask repeat does not work in Firefox darn it
might not be able to do this this is a website website called
can I use where you can like put in various web Technologies and it tells you what browsers support that right so
um I we wanted to use this webkit mask
which oh wait Firefox supports hold on where is
the webkit mask box image width image slice image source blah blah blah
position mask attachment mask composite
hm well wonder if you just search is it is there just a a
mask CSS
masks this is something new to me CSS
mask mask URL all right let's see if I can just use
mask Let's test that okay so we're going to mask that and then we're going to instead of color we're going to use
background color so um background color
red okay and uh here let's use background color um background- color
green okay so on Hover it should turn green
let's see um drum roll
where here it is om mg that's really really cool I
really like that okay love that and it turns green
sweet dude that's a score okay now I do want to make sure um it works in Firefox
so I'm just going to quickly launch Firefox which I don't use very often so it's probably going to like want to update and all and it just restarted so
that it can update right Firefox and let's just go ahead and test
this and it works score that is very
cool that is very cool I like it a
lot right loving it all right and uh just for I just want
to go to can I use mask again and that has
97% I'm safe normally you know I I try to you can see the the how many browsers
globally support it and if it's in the upper 90s I feel very comfortable using
something right so um yeah unprefixed is 87% so I guess maybe if I want wanted to
be completely nice uh I would use um something like this I would
do um you copy and paste that and you would do Dash
web web kit Das mask with the with that and then the mask and then that would
cover 98% almost of everything CU yeah a
lot of Edge and O Edge recogniz and supports web kit blah blah blah so yeah
uh Ms blah blah blah okay yeah we're good I'm good with that so a lot of
these older browsers here that have this required a prefix okay uh this web kit prefix but
then everything that's green fully supports just the mask property okay that's cool um that might uh might have
to make it itself into a Swatch um at some point okay um for foundation 6
users um we go all right so now we got that so now we're going to go ahead and oh yeah I don't want red anymore um
let's do like um background color uh all
right and I don't need background color there over opacity 1 opacity 8 right now
let's go ahead and do the rest of our um things okay so I had um dot on what was
it we have edit links featured trash and move right so we have um featured
oops and icon star is that what I
used I used featured right now it does have H not sure how I'm going to handle
that cuz uh depending on if something is featured or not featured um it's going
to be starred or empty a filled in star or an unfilled in Star um so not 100%
sure how what I'm going to do is for right now I'm just going to just to be able to test featured and not featured
I'm just going to do
this okay and uh let's see we need a trash
links and right uh oh move okay so now we're just
going to do um
trash trash
um links and
move okay so there we go got all that saved with my IC icons let's
build oops that's not what I wanted there we go and
refresh voila oops something happened here
links did I not do oh icon links was it not icon links icon
link uh is it link or links it's links okay um I guess I'll just change the we'll
change that here just icon link since it is a
link okay
rebuild all right there we go so now we're getting our icons in there now sweet and now we need the little
organization okay so um I need my trash bin over over here and I need all the
rest of them over here okay um now in the old in the old instance I use these
little things left left left left right um right but what we're going to do is
we're going to ditch
that okay oops it's not what I wanted okay
um like everything lined up and pretty okay um what we're going to do is we're
going to use something called Flex box on this and so we're going to make this display
Flex okay um I don't need text line centered
[Music] [Applause] adding opacity
yes uh yeah that's
fine
okay all right so we're going to make that display flex and what that should do
is all right that that makes them all align to the left okay um but what I
want to do is I want to take this right this last one and we're going to Chuck it over here okay and
[Music] um I always I have this little cool little cheat sheet which actually is uh
if if you guys weren't aware those cool posters over there um are like CSS cheat
sheets for CSS grid and flexbox okay um and uh but I have digital versions that
we can just open up quickly here uh oops I had them in this folder or did
I have them here ah they're here X Box oh yeah right and so it just kind of
reminds me of all the various things and how to do it right so um uh justify
content Flex end so but I want to align just an
item align
self all right you know what we're going to do save time we're going to we're going to pop out
GPT and just be like um
in in flexbox actually you know what I have
well we'll use GPT because I know a lot of you guys GPT a lot of times I've been using um I have access to GitHub
co-pilot okay and um GitHub copilot is like GPT built
into um vs code sweet okay but we'll use gbt since
I know a lot of you have access to that so um in flexbox I have a a row of
buttons and I want the last button
to um be aligned to the right
let's see if it says and chat gbd is thinking man slow
today what the
heck oh interesting so you just use margin left Auto
what let's test it margin left Auto right so on my trash button
um I'm going to make that one margin
left Auto let's try that what I thought there
was a going to be a cooler I bet you in CSS grid probably has a has a snazzier way of doing it I hate using margin Auto
for things it just doesn't seem intuitive but that freaking does it look at
that voila check that out he now I don't know the
size of the buttons I they do seem a little bulky to me I don't know you what do you you guys
think think they're they seem they seem a little bulky let's tweak it the size a little bit maybe we'll make it
um uh 24 pixels let's
see oh need to rebuild
oh but H that
sucks what if you do oh but you're doing a mask because all of those are 32 darn it
that's annoying another thing another annoyance for um okay wonder if I
omit here I just going to test one of these instead of going ahead and changing all of them I wonder if I just remove the width and height into this
and I wonder if it will just work let's
see oh that works all right we're removing the width and the height on all of those bad boys right we're just going
to do this we're just going to uh I need do on all of them
delete delete oh this one is 64 64 let's remove
that too nice I like deleting code all right
one thing I want to do is on this background color I'm actually going to um instead of current color which I know
doesn't obviously work we're just going to set that to be black on
everything okay I like that
all right let's rebuild now yes yeah I think that that size just
feels right right feels
better maybe we can get fancier with the hover animation I don't
know maybe a little bloop when it hovers over it or something um okay I'm digging it
I think it's simple right oh I want to test
the uh the not featured just for fun I'm going to add in a featured and not
featured um I don't know exactly how I'm going to control that yet but I want to
make sure that both um both Styles exist oh oh I didn't save oh I need to
rebuild the templates okay any yeah so when something is not
featured it'll show like this and you click it it'll turn solid um once that action is successful
and then that will it'll be a marker that that particular image is featured yeah uh and then we click on
this it'll open up a light box that will have some sort of Link Builder um and
then we click on this and that'll open up the light box for um everything
else I noticed when I
oh interesting you know I you might not be able to see it but when you click on any
of these buttons in here it makes the outline of the image
very interesting I'll have to I'll have to analyze
that oh I think I know why if it has something focused that is
on okay that is on form group let me just quickly go ahead and find
that code I think it's in
here sometimes that is annoying
not uh image dash dash field
all right I think that'll fix
that oh that did not fix it darn
it I assume it's because of this hold on second
Focus no I think it's when these when these buttons are focused
there we
go has Focus box Shadow form group has
Focus okay
wasn't this code let's remove that it is form group ah here has Focus
okay so when the form group has Focus but I don't want it to
be an on an image field okay so this is
only
so when a form group uh has Type range ah okay I
already right let's do this has
um oh wait no shoot because the form group is in the image field so if it has
a total preview
has action bar yes that should do it doaction
bar oops there we
go so now when I click on this button there we get no no box shadow score
Okay small little things you just keep tweaking them okay um I'm quite happy
with that um now you might be wondering up here is the is the like the field label and then
down here is like the field help text those are all customizable um things um so yeah let's go ahead and
turn on our off I'm going to turn off that that featured button since uh or the not featured button okay
um oh and I want to I just want to test this move one actually so I'm going to go back into this action
bar and I had I'm hiding it for an image field but I'm going to go ahead and
disable that for right now just so I can see
it oh and good thing because it it does not work okay so that needs to be down
here
uh because move now the move
is actually should be outside of the action bar
because if it's position absolute action bar itself is position
absolute so that's going to make it yeah so that needs to be outside of the
action bar because I want uh I want that this move button um to actually be down
here okay so that when we click on it it we can drag and drop something
and I think it makes better sense having on the bottom not inside the action bar
I don't know what you guys think in the chat uh action bar icons are too close
together I I can agree with that they they are a little close together um move should it be in the in the top here
where you can move something around or on the bottom previous versions add it at the
bottom H bottom and outlined yeah well let's
let's move it to the bottom and that's how I had it before four and uh let's let's start
there actually the though the icon itself just flat out doesn't work right so icon move so we need to look at
that uh I thought I did icon oh icon bars yeah it's icon
bars okay um here we're going to we're going to
take that out of the action bar and oh it's still in the action bar though I think it needs to be
outside uh and we need a uh background color um let's set it to
White let's see what that
does and whoa that did not work
oh um
shoot h
needs to be outside but then we need all new stuff
right might have to rethink some of our class architecture but it's all good let's just go with it for right now
we'll just copy some of
these oh here I had background color transparent but then I set the back color to be a color that doesn't make sense I just remove
that oh but yeah all let's just do that move
that into here since that is a
button and none of this is actually inside the action
bar it's outside the action bar right
yeah it's outside the action bar all right let's try
this where is
it there it is oh it's down here
okay
um opacity is 60% position absolute bottom zero oh
sizing it doesn't have a size um with
um 24 pixels and this one maybe we'll make this one a little bit larger
32 and a height of
32 oh need to rebuild there it
goes yeah maybe make sense to only show it when we hover over the but over this so
it's not it doesn't show when you hover over it shows and you can grab it and move obviously the grab and move doesn't
work but I just again wanted to show and maybe it should be a little bit up from the bottom just like a little bit right
instead of bottom zero maybe if we did like bottom 10 pixels something like that so it's a little bit up
yeah maybe what if we did like even bigger what if we did like a 48 pixels
48 pixels that's that's quite
large yeah we'll stick with 32 I'll move it up from the bottom a little bit so that we have a bottom maybe 10 pixels
and while we're here um let's see the grand PBA himself said
I should increase this margin to 10 pixels between the buttons actually you
know what we're since we're using fleux box here let's do uh let's do uh
Gap uh Gap uh 10 pixels I should do
it that work
yeah it worked let's see if I did 20 pixels though that's too
much 16 ah it seems too much [Music]
too 12 which is half half the size of the icons that kind of makes sense right
12 is half the size of the icons but I I don't necessarily like the um this edit being all the way to
the right I like a little bit of well that that could be uh fixed by padding
so we could just up the padding here to 16 May oh wait no that was
10 and just make make that 10 as well
yeah okay so we're going to do that we're going to do gap of 12 pixels and then um here I'm going to do
12 pixels as well actually let's just do 12 pixels all the way around so it's just padding
of 12 right let's play with
that there I like that right so remember I made these icons 24 pixels I made the
Gap in between them 12 pixels which is half the size of the icons themselves
which I think makes it look nice and then I made the same padding all the way around so it's kind of an All Uniform to
layout they all kind of have the same size right um now if we wanted to be
cool what we could do this is we could do something like this we could do um Das Dash
icon um size let's do like action icon size
uh 12 pixels or no 24 pixels right okay and then um and then
in here we could do uh
VAR Das Das action icon
size right um and then over here we could do
um Cal action icon size ided
two and same thing on
here okay this's some fancy Dancy CSS here uh and this should all work right
so I set my I set a variable which is action icon size to 24 I then uh
calculate my padding and my Gap based on that size
um and then I set my widths and my Heights all there as well right so let's go ahead and save
that and vo that worked right it looks the
same but it's all using variables now so I could just set that icon bar size um
with one thing now move is is managed independently but it's kind of outside
and I think I made that a little bit bigger anyway so um yeah there we go let's turn off the uh the always visible
um doohi where' I put that right here there we go and let's turn on Hover
for move right so um well uh let's
do um this is going to be when I hover over
total preview right so um we'll do uh this is going to
be opacity
Z okay and then when we did uh total Dash
field uh or total preview sorry total preview um
hover move opacity one I don't want opacity one actually I'm going to make it
0.6 so that has a little bit of style to
it all right let's do that
rebuild bresh and we hover over over we have our nice toolbar okay um I might still try
to stylize these a little bit more but all in all I like it and and we also
show and hide our our oh we need a transition on that
100% uh let's just do the same
transition there we go and uh uh we'll just trust that that's going to
work but let's just verify hover over it we got a nice move
okay we got our icons and uh I know for image I don't
want the move so I'm going to turn back on the display
none and voila there we go look at that yeah none of these work yet but
functions there we go uh let me see if there's any other questions uh I know I've got I've gone
way over an hour already um so yeah didn't get quite as far as maybe as I
had thought but um it was quite successful just you kind of you guys can kind of see how things are built in the
and you know and
whatnot there's some chitchat I can see where the near future you can indicate the icons telling the voice chat blah
blah blah blah blah uh you're Frozen I'm not okay he froze me
out move on Hover now uh oh yeah well yeah we move I I hid move because we're
uh we're now on an image okay um hey guys I'm going to I'm going to call it quits now uh did you guys like that I
don't know um you know I I accomplished something that I wanted to do and anyways and uh you guys got to
watch me do it um did did you find that interesting maybe we could do this semi-
regularly if you know um you know there are definitely days I have to admit where it's like I know I I have some
stuff I have to do but it's like oh man I have to do a live stream and um is this an interesting alternative um times
when you know something like this is better than not having a live stream um because yeah there are times that
I definitely need to get something done and um yeah if you guys can watch me do it um and I can teach you guys something
cool then uh yeah I'm all for it um so um yeah thank you very much for
watching me struggle through this I didn't struggle too bad but um yeah I
have say it was wasn't a fail I I mean I didn't get as much done as I I thought I thought maybe I'd get up to the ability
to open up the the modal at least um and so yeah I'm actually going to be testing
something actually when I go to the model for editing the content I can try something completely new I've never done
before I've never used um there's a new um HTML modal element um that now has
pretty wide support and um yeah I haven't used it yet in in anything so I mean it's at 92%
support across all browsers so I think I'm going to use it um and uh yeah I'm I'm I'm intrigued to do that it's like a
basically like a a native browser based uh light box um it's very Bare Bones
right obviously you need to do a lot of styling but there's less JavaScript because it just it you hook it up to
your button and it opens it up right so um yeah mened that I'm really trying to move towards um less JavaScript
especially for total CS I want to I want to try to use as little JavaScript as possible even with that though there's
still a just a lot of JavaScript on the admin panel I mean a lot of it is like the style text thing um I guess here
really quick for those that um that were at the summit just let you know I uh I
did fix style text so style text can now save um so yeah I'm really excited for
those that you didn't attend the summit this was the little demo that I built for the summit and I showed off uh
custom admin stuff and um like here if we go ahead and I can load in a I think
uh there we go you know I can load in a c cust element we can you know change
the colors of things um yeah and I fixed style text actually wasn't even a bug
I'm not okay I'm not even going to go into it I'm not exactly sure where the bug was it was a publishing glitch basically um and uh yeah there was
actually no bug I spent like 3 or 4 hours realizing it was a publishing glitch when it I thought it was a actual
bug in the CMS so but it's all fixed now so I'm super stoked about that um and
yeah I'm really excited about total CS 3 um I'm working I'm working hard uh to
try to get a beta out for early users um by the end of the month um and yeah hope
you guys enjoy that um all right it was educational it was interesting um especially your input and help on uh
cool uh Scott I'm not exactly Mr Anderson not 100% sure I saw a lot of
messages from you about GPT and whatnot if if you have any further questions go ahead and on the ask on the community or
if it's related to this live stream ask in the post about this live stream and
I'll be happy to answer any questions you got okay um so sweet I thank you
very much everybody have a wonderful rest of your week hopefully I'll see you on Friday um and hopefully by Friday I
should have more of this image admin uploader done and uh if you join us
maybe you can get a sneak peek of that so cool thank you very much everyone have a great great rest of your week and
uh I'll see you soon take care bye