Michael T Ganschow Green: Alright Hello pre recorded people welcome to another session of JRC 175 today is going to be relatively quick one we're going to make our form look pretty with the magic of styling and we're going to learn at this late date in the Semester we're going to learn.
Michael T Ganschow Green: A new type of select.
Michael T Ganschow Green: done done.
Michael T Ganschow Green: Yes, indeed we're going to learn a new type of selector one moment.
Michael T Ganschow Green: Pardon me class I just didn't want to Jeff and you with my nose welling there alright so let's.
Michael T Ganschow Green: let's start making our form look pretty weird my were aware oh i'm, not even in the right desktop what am I doing what am I doing any more heather I don't know.
Michael T Ganschow Green: let's put us in the right desktop here there we go there's the right desktop there might even be a dream Weaver around here, somewhere, it is.
Michael T Ganschow Green: we're going to fire up a form.
Michael T Ganschow Green: That is doesn't really have a lot going for it at the moment but we'll have some more things going for it in just a second let's do some screen sharing here.
Michael T Ganschow Green: So everybody can see the pre recorded people can see heather can see everybody can see that we have a form so where we left off.
Michael T Ganschow Green: where we left off was this.
Michael T Ganschow Green: thing that we created.
Michael T Ganschow Green: Last class, it is.
Michael T Ganschow Green: It sure is we'll just put it that way it it it it sure, is it sure is so we're going to make it a little better, I suppose, depending on your point of view.
Michael T Ganschow Green: But we're not going to style a too pretty because that's you guys's job so.
Michael T Ganschow Green: By the way, i'd like to congratulate everybody i'm your project for designs have been quite good.
Michael T Ganschow Green: At least the ones i've seen so far i've been doing a little critiquing here and there, and dribs and drabs, as I always suggest to you guys rather than doing.
Michael T Ganschow Green: 20 critiques at once do a couple of nights so i'm actually listening to my own advice, rather than going insane this weekend and doing a couple of nights and seeing how many I can chip away.
Michael T Ganschow Green: So again, if you have not gone and giving your two cents on project for i'd recommend please doing that for your fellow students.
Michael T Ganschow Green: Just as simple as this and don't forget, if you would like to to add some arts, to the art pile so that people can use them for their artwork galleries, for their projects because someone has contributed here but looks like only one person this semester was brave enough to contribute.
Michael T Ganschow Green: Tragic alright so let's get us a dream Weaver going, so we need to make this form look pretty because you know right now that's not the right screen my goal, this might be the right screen there it is.
Michael T Ganschow Green: In the form, right now, might be described as handsome or striking, but in a pretty so we got to make it look pretty with some CSS now.
Michael T Ganschow Green: One of the magic styling forms, is that the actual form tag the tag that contains the form, along with being a data collector and a sender to.
Michael T Ganschow Green: script or a sender to emails or whatever you got it set up doing is also functions as a layout tag visually so you can essentially style the form tag like you can style the div tag or a header or footer or whatever.
Michael T Ganschow Green: You can build some really nice things using a form tag now i'm not going to do any of that this thing's gonna look but ugly here because it's my form tag but nevertheless we're going to well we'll make it work.
Michael T Ganschow Green: So so so so so let's tag style sheet on this thing, so that we can actually make it look pretty high level back to making her feel that file, yes, thank you browse we're going to shove, this right in our.
Michael T Ganschow Green: CSS folder and we're going to save it as we're going to save it as form improver.
Michael T Ganschow Green: You can save.
Michael T Ganschow Green: Your CSS files whatever you would like, if you're working along with me.
Michael T Ganschow Green: Alright, so let's see here artist forum improver CSS look at that there's geez ready to style and there's form improver CSS right there will do save all so that everybody's all set so First things first is, I am going to do.
Michael T Ganschow Green: A little cleaning here real quick using a nice little.
Michael T Ganschow Green: selector and I saw a compound selector actually hdmi body bracket G let's do.
Michael T Ganschow Green: margin zero padding zero.
Michael T Ganschow Green: And text align.
Michael T Ganschow Green: Center when you send it nah what we're going to leave the text align left actually and this one i'm just gonna put a background color and background color.
Michael T Ganschow Green: Now you guys all froze up every time I asked you about colors so.
Michael T Ganschow Green: i'm going to select another color I think you'll do poorly would which is kind of this parchment colors or background color yep there it is.
Michael T Ganschow Green: kind of a kind of a Milky like like you've put a lot of cream in this cup of coffee we use that color so this nice creamed coffee background color I think.
Michael T Ganschow Green: So one thing that i've been getting emails on over the weeks and I think i've gotten a good critical mass of them, so I might as well cover this just.
Michael T Ganschow Green: Just because I can, and because I got a CSS open, and this is really terrible and i'm gonna regret showing you guys this this feature I just know it, but i've gotten a lot of emails about a lot of well Kansas messages emails things like that about.
Michael T Ganschow Green: ordering here we go so.
Michael T Ganschow Green: Quite a number of you have asked me about the cursor property.
Michael T Ganschow Green: OK so.
Michael T Ganschow Green: The cursor property is pretty much what it says on the tin whatever tag you apply it to this case it would apply to my tags will do it for the whole website whatever tag you apply it to you can insert custom cursor's and there's a whole bunch of these things.
Michael T Ganschow Green: they're going to basically like you know when you get a grab hand to resize things when you get you know the the the loading wheel, the I mean.
Michael T Ganschow Green: The cursor pointer is the little hand that makes links, so if you want to fake out people and make them think it's links to set the whole thing as a pointer maybe even make you thing look like it's locked up.
Michael T Ganschow Green: there's all kinds of resources there's inserts there's zoom's there's God, you can also, by the way, where is it where is it.
Michael T Ganschow Green: it's somewhere in here where is.
Michael T Ganschow Green: There it is cursor URL yes, you, you can insert images in as your cursor's.
Michael T Ganschow Green: In search images the educators, this will only end well, so I am going to just for fun and just to demonstrate and just to make everybody gets super frustrated when they open this thing from the class files.
Michael T Ganschow Green: I am going to make it a cursor progress, what is a cursor progress oh it's only this annoying old thing for actually good at Brown.
Michael T Ganschow Green: hey go, so the whole my whole web page is just never going to stop loading it's just loading loading loading loading loading loading loading loading loading loading loading notice the only place where it stops is when you actually get to the form elements and the.
Michael T Ganschow Green: inputs, that you can click on input that you can click on and insert things here.
Michael T Ganschow Green: can't wash away the loading wheel it's loading for you.
Michael T Ganschow Green: So maybe never speak of cursor again there i've covered it happy now alright so because you guys can do some.
Michael T Ganschow Green: This is custom cursor's This is where you can really mess with it i'm.
Michael T Ganschow Green: Know alright so i'm going to use the form kind of as a container whereas like a main or something.
Michael T Ganschow Green: And so i'm going to start on my form tag a little bit here so that we can kind of get some some phormium going here so we're going to go form i'll make it like decently sized not a huge or anything I think i'm going to go.
Michael T Ganschow Green: With.
Michael T Ganschow Green: 100 pixels maybe.
Michael T Ganschow Green: We maybe some margin, maybe margin 25 pixels off the top auto submit centers so I put a little bottom on it yeah, I think, so I think i'll put a little bottom on it 10 pixels there we go.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: Answer live padding why the hell not it's padded up.
Michael T Ganschow Green: Maybe 20 pixels of padding give or take.
Michael T Ganschow Green: See we'll see what this looks like a stick a background color on it see if this is good enough.
Michael T Ganschow Green: Should I yeah Dr a border on it to why not border.
Michael T Ganschow Green: You know.
Michael T Ganschow Green: Two pixels one picking one pixel dotted.
Michael T Ganschow Green: colored what was what makes a color alright let's get one pixel dotted and we're going to put.
Michael T Ganschow Green: A lovely violet.
Michael T Ganschow Green: right around it just a lovely dotted violet and you know what you know what you guys, you know what.
Michael T Ganschow Green: groundless corners to.
Michael T Ganschow Green: What a radius 25 pixels see that's two rounds nice big ones 800 sure I don't think it will be to round up in there, then i'm going to give it back to what am I thinking background color.
Michael T Ganschow Green: See, we got in the pale purple shall we.
Michael T Ganschow Green: Take any booze, we can see what is form and what his background sleep blue salmon red powder blue plumber plumber see in a second forgot any others let's see here Doo Doo Doo Doo Doo Doo Doo Doo Doo Doo.
Michael T Ganschow Green: let's go light steel blue yeah that's terrible excellent and i'm.
Michael T Ganschow Green: You know what.
Michael T Ganschow Green: About a box shadow on this thing to.
Michael T Ganschow Green: box shadow.
Michael T Ganschow Green: Maybe something like eight pixels eight pixels.
Michael T Ganschow Green: want to go, maybe 12 pixels blur.
Michael T Ganschow Green: Maybe we'll give it a night we'll give it a couple of pixels a spread maybe two and let's see what color should I go should I go orange and orange, why not gonna suck suck.
Michael T Ganschow Green: I can narrow that up just a little bit just a little bit just a little bit so let's tighten that up just a bit.
Michael T Ganschow Green: quite so much.
Michael T Ganschow Green: bits and bobs they're going to go six and we're gonna go 6am going to go eight.
Michael T Ganschow Green: And we're going to save him yeah it's got a glow and then in.
Michael T Ganschow Green: Like a covering like it's hovering very cool so we've got our our our forum hovering nicely i'm gonna have to more padding to it, I don't think there's enough padding here so i'm gonna come back to my forum and i'm gonna go yeah man it didn't it didn't end up 20 pixels let's go 25.
Michael T Ganschow Green: see what that looks like.
Michael T Ganschow Green: yeah looks good alright cool 25 pixels of padding So there we go our first our first step in a larger world our our first first thought here.
Michael T Ganschow Green: I tend to make our labels look pretty I think we need to labeling to labeling.
Michael T Ganschow Green: styling here limit our labels look.
Michael T Ganschow Green: I don't know we'll see what we do with our labels, shall we so the style our labels is very simple we're going to go label.
Michael T Ganschow Green: Oh, I know what i'm going to do with the labels i'm gonna make them Nice and wide because i'm gonna push the late i'm going to make all the labels a uniform with and that will push over all of the.
Michael T Ganschow Green: All of the input, so that they'll.
Michael T Ganschow Green: they'll establish themselves on the line so i'm First things first is i'm going to put a display block on my label, so that I can edit it as a.
Michael T Ganschow Green: layout tag and then i'm gonna put a width.
Michael T Ganschow Green: Of 300 pixels on it.
Michael T Ganschow Green: And then i'm going to float on the text left in a room yeah no excuse me i'm not following up, excuse me i'm gonna send all the text to the right and i'm gonna float the labels left so that they don't kick the they're.
Michael T Ganschow Green: There their inputs Downs we're going to go float left.
Michael T Ganschow Green: And text align right.
Michael T Ganschow Green: And de de de de de de should I give them a little bit of margin on the right side of the text is not like butted right up against those things so we're going to go right up against the inputs so i'm gonna go margin we'll just do right only margin, this time, a lot of you have asked.
Michael T Ganschow Green: Is it okay to just call out a single Cardinal direction and margin or padding yes it is it's either padding dash whatever edge laptop bottom left right or margin top bottom left right, so we say you're good so let's go 10 pixels of right margin.
Michael T Ganschow Green: wouldn't want to put for the for the for the family let's go font family, so we can tell if they're styling and not what family.
Michael T Ganschow Green: we're going to go just go gotham yeah I think so i'm pretty basic today feeling feeling basic Stewart color, I think, maybe it's continue on this purple's theme see what we can do to make it classy, though.
Michael T Ganschow Green: boop boop boop boop violent but that's not gonna be visible enough let's do sleep blue it's not actually bluth Monica blue purple but what I was really a.
Michael T Ganschow Green: No we're not gonna make a bold see we got here.
Michael T Ganschow Green: So look at that form organization beginning look at that look at that line up right there chica chica chica chica chica chica chica excellent cool beans cool beans alright so.
Michael T Ganschow Green: Now i'm going to do an overall input style because right now, you see how my text boxes up here see how these text boxes appear I was pointing at my screen like you guys can see me pointing at my screen these.
Michael T Ganschow Green: This is what it's come to i'm pointing at my screen that you guys can see these text boxes, right here, see are crammed together.
Michael T Ganschow Green: I think it'll space in between so i'm going to throw a 10 pixel bottom margin on these guys and see what this looks like just kind of see kind of see what we got here so.
Michael T Ganschow Green: let's do that so grab a little just a just a little quickie general input style since really it's mostly the text boxes that are crammed up together, but this will open everybody up a little bit too so we're going to go input style bracket tautology.
Michael T Ganschow Green: margin bottom.
Michael T Ganschow Green: Chen pixels say but see that's enough oh yeah I cleared amount nicely look at that very good, very good, very good, very good cool cool cool cool cool.
Michael T Ganschow Green: Alright, so now we tighten them up a little bit I might turn them up just a little bit let's do five pixels maybe maybe five pixels alright so we're going to go refresh and um let's.
Michael T Ganschow Green: Well okay so here's the problem we've run into.
Michael T Ganschow Green: We can do a lot of styling on that input tag that I just created this got the margin bottom on it, but the problem is like.
Michael T Ganschow Green: Three quarters of the stuff in your input tangent our buttons or input tags are.
Michael T Ganschow Green: You know these guys are all input tags, I mean these buttons are input tags Okay, so you know there's just there's just a lot of nutty stuff going on here Okay, so what I need to do.
Michael T Ganschow Green: Is I need to style only my text boxes um I just saw a quick bit of bad news for everybody here exclude your pre recorded people.
Michael T Ganschow Green: You can't really style radio buttons per se or checkboxes i'm sorry to be the bearer of bad news that pretty much dependent on whatever the browser will show now there is a way to do it.
Michael T Ganschow Green: um what you're talking about and to 75, which is a complex set of jquery that eliminates these guys and puts graphics in their place, which is a little bit a little bit of pain and a little bit more than I really want to be going over with you guys this late in the Semester.
Michael T Ganschow Green: So you know this is kind of really the finishing touch and then we're going to play with seo and hosting and.
Michael T Ganschow Green: And, and how to terrify yourself with Google analytics for the rest of the Semester before we have a final open lab and then, and then I wave goodbye to a screen so.
Michael T Ganschow Green: let's let's dial up each of these text boxes here now, the nice thing is once I get one going I can get the others going as well.
Michael T Ganschow Green: But I have to use a really weird selector to do it, a selector that i've only briefly mentioned a couple of times throughout the Semester time it's called an attribute selector okay so it's basically.
Michael T Ganschow Green: It works like any other really like any other tag selector essentially and then it goes through your document and it looks for every instance of a particular.
Michael T Ganschow Green: attribute and it applies it, or rather every instance of a tag with that attribute on it and it applies that so.
Michael T Ganschow Green: Here comes an attribute selector and these things are really weird looking so everybody put on your big boy pants here, because this is going to get this is going to get strange Okay, here we go.
Michael T Ganschow Green: Alright, so let's.
Michael T Ganschow Green: let's dial up our text box.
Michael T Ganschow Green: The blind into the wind alright So here we go attributes selector so First things first when you're writing an attribute selector.
Michael T Ganschow Green: Is you need to put in the tag that within whose attribute or within.
Michael T Ganschow Green: The put the tag to have the attribute you wanna you want to find on it, so in this case, we want to style generic text boxes that's our your name up at the top first so.
Michael T Ganschow Green: First things first it's an input we take a look at our code chaka chaka there's her name right there it's an input with a bunch of different.
Michael T Ganschow Green: attributes on here, so we can pick any one of these attributes to as the style to everything from required to placeholder to type to whatever.
Michael T Ganschow Green: In our case we're going to use type because we want to style these things by kind Okay, so I know when i'm not zoomed in i'm not zoomed in.
Michael T Ganschow Green: Look at this, let me zoom in so you guys can see my my coding in fact i'm going to zoom in just a little bit further do do so so i'm coding in my input here.
Michael T Ganschow Green: So I need to put in a attributes selector here, so what i'm going to do is i'm going to put in a hard bracket so these curlicue guys here are technically soft brackets.
Michael T Ganschow Green: I need to put in a hard one that's the one that's like a where it's like a hard see so i'm going to with no space no space so type in the tank I want to do, and then no space, right up against it very similar to how.
Michael T Ganschow Green: You have no space on your on your pseudo class guys your colon whatever you want no space on this hard bracket and attributes so we're going to put in a set of heart brackets after our tag and then in it we're gonna put a specific attribute we're looking for like say type.
Michael T Ganschow Green: equals quotation mark text.
Michael T Ganschow Green: input type text racket ology now we can style that your name field at the top of my form with some good old fashioned CSS sussing here So here we go.
Michael T Ganschow Green: New screen share give me the big what people see it move alright so desktop here we go okay joker's let's dial it up, shall we so.
Michael T Ganschow Green: let's go with.
Michael T Ganschow Green: 300 pixels and I can always tell if this is taking, because I can come back yeah look at that it's taking fresh air, it is like that it's taking excellent okay so.
Michael T Ganschow Green: I input type text with 300 pixels so that it's the same width as my other guys I might.
Michael T Ganschow Green: shrink my overall form down a little bit when we're done with this, but thing on it's getting a little bit here um so with 300 pixels.
Michael T Ganschow Green: we're going to give it a bit of padding from the internal contents will go padding maybe five pixels all the way around again you guys can mess around with your settings all you want a oh let's put a border on order.
Michael T Ganschow Green: let's go my border come on main form.
Michael T Ganschow Green: Oh copy paste that so i'm gonna go border one pixel solid.
Michael T Ganschow Green: And what hey i'll grab the same purple i'm using up in my dotted border, why not there, we go so nice dotted whole thing just, you know as you do, border radius border radius on it to border radius.
Michael T Ganschow Green: pixel go.
Michael T Ganschow Green: Then.
Michael T Ganschow Green: I would look.
Michael T Ganschow Green: Fresh.
Michael T Ganschow Green: Look at that thing.
Michael T Ganschow Green: That is just that is just a Platonic ideal of a form right there.
Michael T Ganschow Green: Okay, all right here we go so let's go What else do I want to do that input, should I.
Michael T Ganschow Green: shepherd a shadow only the shadow knows all right let's do that so let's do.
Michael T Ganschow Green: You know what no i'm gonna wait and put a shadow a wider world, but the shadow okay cool alright so let's add a special font family just for fun z's so we're gonna go fund family.
Michael T Ganschow Green: What do we got here in the on the mains I don't want to feed if I you know what we can impact.
Michael T Ganschow Green: Just make people hate, it will do color.
Michael T Ganschow Green: let's do for the color we're going to do by.
Michael T Ganschow Green: Shooting like that alright so.
Michael T Ganschow Green: there's our input type text.
Michael T Ganschow Green: I think I might have I.
Michael T Ganschow Green: Think I might have the border oh yeah the border change color and rollover so i'm gonna make a shooter client style for this guy to roll over i'm gonna go oops.
Michael T Ganschow Green: You know what i'm just going to copy this guy input.
Michael T Ganschow Green: text colon hover on we're mixing and matching now the streams are crossing we gotta we gotta we got an attribute selective of the theater class style attached to it, this is.
Michael T Ganschow Green: A not quite but almost as much of a crazy selector as the one that makes the hamburgers you disappear disappear So here we go i'm gonna make a border change color border one pixel.
Michael T Ganschow Green: Solid.
Michael T Ganschow Green: Next color wouldn't make it turn purple right so let's make it mix let's make it turn into kind of a kind of a warm honey color if we go.
Michael T Ganschow Green: There we go when we want a mouse rolls over it, why not.
Michael T Ganschow Green: Oh yeah look at that look at that look at that impact look at that impact hmm very nice very cool very cool Okay, so I want to do one of the look at the rollover to yeah like a rollover rollover now one thing you may notice, though, is that.
Michael T Ganschow Green: There are some subtle changes that are applied by various browsers.
Michael T Ganschow Green: When you roll over the top of it when you interact with it and that state is called a focus so i'm going to do another pseudo class style for focus to modify this thing up just a little bit.
Michael T Ganschow Green: So i'm going to go, you know what will describe that because I don't want to type it because i'm lazy and you know what there's only one of you here, so I think you can keep up the other so we're going to go Colin focus.
Michael T Ganschow Green: Why are we doing focus, because I want to make a change when it's clicked on and being interacted with I wanted to have a background color that is really obvious that it's being interacted with so we're going to go background color black.
Michael T Ganschow Green: And color with the type bright screaming white air you go to you will know, aside from the browser zone highlight, you will know, in any old browser on this form.
Michael T Ganschow Green: When you when you're interacting with it look at that look at that how this forms awful I love it alright, so now we have a style ooh look at it roll over and then, when I click on it boom, it is.
Michael T Ganschow Green: Beautiful just beautiful.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: let's add this to the others just for fun z's i'm going to add all of this to the others, and then then we're gonna have some fun with our text area, maybe make it Nice and.
Michael T Ganschow Green: Nice and tall we're gonna hide yeah let's do that alright so i'm in order to stay on the rest of these guys I need to do attribute selectors that call out the attributes.
Michael T Ganschow Green: that are already there, so all these guys are inputs, with different attributes on them so i'm going to take my input type text here.
Michael T Ganschow Green: And i'm going to grab my three input type text styles and i'm going to copy them why am I going to copy them because I want my next couple to look identical, so the next guy is an email, so instead of input type text we're going to put input type email.
Michael T Ganschow Green: do that for each of these email.
Michael T Ganschow Green: email.
Michael T Ganschow Green: and open the thing up in the browser to Ching with that email is now styled.
Michael T Ganschow Green: Alright, so now we do a phone number it's phone number time so time to do that let's do let's do some phone number action.
Michael T Ganschow Green: So we've got.
Michael T Ganschow Green: we've got all kinds of things so let's do let's copy this again.
Michael T Ganschow Green: copy.
Michael T Ganschow Green: And as we can see in our source code here our phone is an input types tell so i'm going to come here ah alright i'm going to go to these guys here and i'm going to say ciao tex towel when an alum Michael i'll tell tell for cello phone tablo phone mcc mcc mcc mcc.
Michael T Ganschow Green: Telephone there we go i'm going to test drive it in my browser like that big old phone there there we go.
Michael T Ganschow Green: yeah um.
Michael T Ganschow Green: Alright, so now we get to style our text area i'm just going to continue this on over why, because I can.
Michael T Ganschow Green: First boom.
Michael T Ganschow Green: i'm gonna go.
Michael T Ganschow Green: i'm gonna go style this text area i'm going to do it the easiest way possible i'm gonna do my styles and i'm going to switch the.
Michael T Ganschow Green: The selector out for text area and it'll pop right in and then we'll add in a height on the main selector so it gets Nice and in big and Doo Doo Doo Doo Doo Doo alright so nice and in begin So here we go.
Michael T Ganschow Green: let's do that so we're going to copy all these guys for another time copy and we're going to come down here boop boop boop boop and we're gonna go text area.
Michael T Ganschow Green: text area is I want this listen, I want the spleen venting area to be every bit as pretty as the other areas.
Michael T Ganschow Green: All right, getting their needs some hyped up definitely need some height, though definitely definitely dafoe needs might.
Michael T Ganschow Green: know what i'm going to shrink my main form, while i'm out of here I haven't just too big, I keep looking at it in the browser what else, am I gonna nice 650 so nice.
Michael T Ganschow Green: That luckily my aesthetic sense was getting a little tweaking with this yeah 650 looks good I might even shrink it a little further later alright so.
Michael T Ganschow Green: let's go back down here to text area makes your text area is all set so i'm gonna come up here to my width right here i'm going to add a height to this thing going to go height.
Michael T Ganschow Green: I don't think it'd be good height for one of these boxes, maybe like half is tall is is why maybe something like 150 oh.
Michael T Ganschow Green: I can do a 300 bucks 300 bucks now and 50 looks pretty good like that yeah i'm venting.
Michael T Ganschow Green: Like a volcano exclamation point there look at that and underwater volcanoes mm hmm alright so pretty good Okay, so I gotta style these guys these weird little titles here because I.
Michael T Ganschow Green: want to Center them if you make them kind of big and fat maybe bold me yeah.
Michael T Ganschow Green: let's do that so what's my style on those Dudes on here the paragraph tags okay I paragraph them excellent so we're gonna make a paragraph tag.
Michael T Ganschow Green: Brock technology around that display block a display block.
Michael T Ganschow Green: Alright that'll give them full width of the form because I want to do text align Center.
Michael T Ganschow Green: Just the Nice and Center they would go I think they are cool beans i'm going to grab all the fun information off of my very first off of my label i'm going to make them gotham and slate blue but i'm going to size them and make them both so we're going to go gotham slate blue.
Michael T Ganschow Green: bop and then we're going to go.
Michael T Ganschow Green: font size thanks big like two m's alright sounds good and font way.
Michael T Ganschow Green: Bold go, we are, it is we bowled fresh fresh ah yeah yes, yes, yes, yes, this is good, this is good.
Michael T Ganschow Green: This is good.
Michael T Ganschow Green: Alright, you know what they need a little shadow I can you know I really do you guys, I really do so we're gonna go text.
Michael T Ganschow Green: shadow.
Michael T Ganschow Green: Within little teeny one maybe like two maybe two more pixels maybe like four pixels making.
Michael T Ganschow Green: Sure, it looks maybe.
Michael T Ganschow Green: Like that that are terrible excellent beautiful perfect perfect perfect perfect Oh, I think i'm I shrink it a little bit some of these are little long they're double lining.
Michael T Ganschow Green: and some are not double lining so you know what you know what we're gonna do 1.75 ends that small enough to keep them from double lining it's find out yay just small enough to keep them from double lining excellent cool cool cool cool all right.
Michael T Ganschow Green: let's take the margin off these things to know what I had my tell you what my own margin so first of all I started margin zero see this looks like.
Michael T Ganschow Green: tight, I will need to top margin.
Michael T Ganschow Green: And a little bit just just to just to actually you know top margin might do it top margin might be enough so we're going to go margin 02 we're going to go margin 10 zero 10pm.
Michael T Ganschow Green: Zero px zero px one px on top and bottom margin, maybe.
Michael T Ganschow Green: that's enough.
Michael T Ganschow Green: let's go further Moscow bigger we're gonna have a 2015.
Michael T Ganschow Green: Look at that here we go, so now they're all Nice and grouped excellent so we're gonna form look pretty so we kind of see what we're doing you know kind of see.
Michael T Ganschow Green: What works, you know all this glows maybe put some shadows on these guys when they get rolled over I don't know man your form, you can stick shadows on them, if you want.
Michael T Ganschow Green: You know what i'm going to stick a shadow on these guys i'm gonna go to the overstate what the heck what the heck i'm making an executive decision right now to MOD these guys we're going to go focus we're gonna put a.
Michael T Ganschow Green: we're gonna put a little shadow on here we're going to go a box shadow.
Michael T Ganschow Green: And we're going to go a little teeny one maybe like a like a big was a form or in the form one is six pixels so let's go to pixels to PICs pixels three pixels line.
Michael T Ganschow Green: hey go just a way more time than that we need more line than that three pixels go four pixels four pixels five pixels six pixels line.
Michael T Ganschow Green: Yes, that is an appropriate amount of shadow excellent Okay, so when each of these kids i'm going to copy and paste that in each of my in each of my focuses here we go.
Michael T Ganschow Green: So we're going to get some shadow in every one of our focuses here, all of them, each and every once we are going to.
Michael T Ganschow Green: are going to focus each and every one even a text area, why not listen text areas deserve love to so we're going to click on this.
Michael T Ganschow Green: refresh Hello go yeah look at that Nice green layer green green great yeah that's what i'm talking about cool.
Michael T Ganschow Green: Alright, so there's those guys blessings really got to do our buttons down here, and these little menus right here so once more, I am slightly the bearer of bad news that some of the.
Michael T Ganschow Green: Some of the.
Michael T Ganschow Green: Some of the selects can be styled in terms of moved, but not necessarily styled in terms of appearance so we're going to my code here so.
Michael T Ganschow Green: You know if I just do a regular select it's going to hit both of these Dudes so are the graphic software and the phantoms are both going to get selected so.
Michael T Ganschow Green: let's see here let's go.
Michael T Ganschow Green: let's go hang on a SEC i've got a thought here let's go my multiple.
Michael T Ganschow Green: Multiple is okay so let's go.
Michael T Ganschow Green: let's play let's play.
Michael T Ganschow Green: let's play all right.
Michael T Ganschow Green: let's go to.
Michael T Ganschow Green: let's do this, this one first so look at this guy and ID.
Michael T Ganschow Green: Of fandom So why am I, putting ideas on these all of a sudden, well, I want to style them slightly differently this guy here this selectable.
Michael T Ganschow Green: We can click on things you can style these guys a fair amount, the drop downs, you can move them but, and you can play with their width and things like that, but appearance wise you can't really style those much at all so i'm going to go.
Michael T Ganschow Green: ID equals soft software.
Michael T Ganschow Green: Alright, so i'm gonna come in here and i'm going to start off styling our fandom one first just to kind of.
Michael T Ganschow Green: Just to kind of get the.
Michael T Ganschow Green: rhythm we're going to go fandom.
Michael T Ganschow Green: Like a tautology let's go should I just go let's go.
Michael T Ganschow Green: let's go display.
Michael T Ganschow Green: block.
Michael T Ganschow Green: width.
Michael T Ganschow Green: 300 pixels and see what that does.
Michael T Ganschow Green: Okay, hang on a second, so I think md limbs want to make sure ID software oh oh hang on a minute where did it go want to make sure phantoms with an ass Michael was like why isn't it styling because you didn't get the ID right you again alright so let's go.
Michael T Ganschow Green: let's see yeah that's Nice and wide alright cool let's see if I can move it over we'll move it over really quickly so.
Michael T Ganschow Green: And then nice 300 pixel width on it, but I need to add some margin to it sort of kick over.
Michael T Ganschow Green: I can either Center it.
Michael T Ganschow Green: Put a margin of auto auto Center it or i'm kicking over so it's on the same margin, as my other Dudes so i'm going to do that i'm gonna stick a margin left on it.
Michael T Ganschow Green: That is equal to 300 pixels, which is the width of my labels plus another 10 pixels to cover the margin so i'm going to go margin left 310 pixels.
Michael T Ganschow Green: Ensure enough look at that he's on the line with the others Mike Center and later, maybe, maybe not look at that he's perfectly scalable.
Michael T Ganschow Green: All right, i'll leave in that way, for now, if you want to change yours up on your form feel free to send those guys with an auto auto or whatever it's up to you.
Michael T Ganschow Green: Alright, so let's do some coloring on these guys, because you can actually color style these Dudes a little bit so i'm gonna go i'm gonna give this guy a background color background, so you can see that their style a little color.
Michael T Ganschow Green: shirt you see what I want to feel what see what i'm gonna do here with our purple food with what's going on in the light so it's obvious that it's there but it's not em gee I forgotten my alphabet you guys let's do.
Michael T Ganschow Green: She likes like cyan background, whether it be visible to like coral that'll be visible enough see here.
Michael T Ganschow Green: That visible enough that's visible enough look at that and ice coral yeah so you can do that sure sure sure why not, why not look at that thing there, it is very nice.
Michael T Ganschow Green: let's see the only do anything else.
Michael T Ganschow Green: Oh, I could change the type.
Michael T Ganschow Green: of change the type to color like.
Michael T Ganschow Green: There we go.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: There we go.
Michael T Ganschow Green: And we go look at that action alright cool.
Michael T Ganschow Green: And I think i'm going to bring down our lovely hover state and our overstate here to let's go grab one of these have version, one of these focuses.
Michael T Ganschow Green: Go bang phantoms bang bang phantoms.
Michael T Ganschow Green: Sure we'll put on the hover right there Bam and the focus right there.
Michael T Ganschow Green: There it is and then we'll take the white color out so it just gets a weird box shadow and it's clicked on yes Bam there it is.
Michael T Ganschow Green: Right at home sweet Okay, so now, the last couple of things we need to do is, we need to do a little bit of styling on the drop down menu here let's see how much chrome is willing to show for us, shall we let's see how much you're willing to show so we're gonna go.
Michael T Ganschow Green: That guy is his ID is software so we're gonna go hashtag software, I want to grab some stuff from phantoms up here so that was so because, why not, while we're here so i'm going to grab a display block.
Michael T Ganschow Green: Big margin left copy.
Michael T Ganschow Green: This should make Nice and fat and make them kind of sit over, like the other one, yes, no see.
Michael T Ganschow Green: yep see so he's Nice and big i'm also going to give him a background color we're just going to see just give him like a match set of styles with this other guy here and let's see what happens so if I come up here and I just grabbed background color light coral.
Michael T Ganschow Green: down here boop this see how much of that takes some browsers will show styling and these kind of dropped down some will not find out fresh.
Michael T Ganschow Green: hey chrome is starting to display colors on drop Downs excellent some do and some don't though so be aware that that some do and some don't and i'm going to add all the rollover and and focus stuff to this guy and we'll see what we got going on here so let's go grab these two.
Michael T Ganschow Green: And we're going to add something for these Dudes software.
Michael T Ganschow Green: stuff software.
Michael T Ganschow Green: Soft wings.
Michael T Ganschow Green: Go.
Michael T Ganschow Green: see what this looks like shall we see what this looks like.
Michael T Ganschow Green: see what this looks like a fresh.
Michael T Ganschow Green: rollover and I click yeah yeah it is it's being interacted with.
Michael T Ganschow Green: There it is, and I click yep there's that guy there's good good good good alright sweet.
Michael T Ganschow Green: Well i'm.
Michael T Ganschow Green: One last thing.
Michael T Ganschow Green: I had a little bit of a failure, a little bit of a brain fart a little bit of a forget last lecture so I missed something that needs to be in here in order to style these buttons correctly.
Michael T Ganschow Green: And I have been I have been a bad i've been.
Michael T Ganschow Green: i've been about i'm sorry.
Michael T Ganschow Green: So what did I forget well, I want to Center these buttons.
Michael T Ganschow Green: And you do, that I need to wrap them in some sort of container right now, they don't have a container they're just kind of hanging out being buttons all on their own look at that.
Michael T Ganschow Green: piece out of you guys to be asked questions, what happens so I need to add in a real quick little div tag to continue students so i'm gonna.
Michael T Ganschow Green: sing a class of.
Michael T Ganschow Green: All right, fine here we go button wrangler.
Michael T Ganschow Green: button wrangler alright so that's going to be a little container for our buttons now, the reason why I have to do this in order to send these buttons so I can do this.
Michael T Ganschow Green: One wrangler lack of technology display FLEX love me some FLEX box and then a little bit of justify content Center touching there we go, so now these these guys should be nicely centered are they they are excellent OK cool so.
Michael T Ganschow Green: let's do some let's style these buttons well, I think I might do them and little space between them and then we're done we got a form that's Nice and.
Michael T Ganschow Green: Pretty.
Michael T Ganschow Green: gorgeous right, I mean just just just an aspirational form.
Michael T Ganschow Green: Pretty okay so let's make these buttons pretty.
Michael T Ganschow Green: Like legit so.
Michael T Ganschow Green: This is another input style input.
Michael T Ganschow Green: Yes, yes cry at me I know hard bracket know that soft bracket hard bracket type equals quotation marks submit make sure none of that's capitalized on the button, it is not types met alright so.
Michael T Ganschow Green: let's do this bracket ology now then let's do some button things.
Michael T Ganschow Green: I think i'm going to kind of let the text size this button so i'm going to put in some padding.
Michael T Ganschow Green: will do just a little bit of top and bottom padding like 10 pixels on it and then some big left and right padding let's do let's do 35 pixels of left and right padding.
Michael T Ganschow Green: And let's do.
Michael T Ganschow Green: background color background.
Michael T Ganschow Green: color.
Michael T Ganschow Green: purple there it is purple.
Michael T Ganschow Green: purple and color for the text yellow.
Michael T Ganschow Green: See how that's working showing.
Michael T Ganschow Green: US what's that look at that look at that look that been looked at been Okay, I think about needs border, I think I need some rounded edges and I think we might need a little bit of.
Michael T Ganschow Green: A little bit of margin so input type Smith.
Michael T Ganschow Green: border.
Michael T Ganschow Green: One pixel.
Michael T Ganschow Green: Solid yellow.
Michael T Ganschow Green: Border radius.
Michael T Ganschow Green: Five pixels.
Michael T Ganschow Green: That too much.
nope not too much okay.
Michael T Ganschow Green: that's why.
Michael T Ganschow Green: that's why you're not applying Michael because you need to have a good day here we go now it's applying alright cool so I we can.
Michael T Ganschow Green: jack up that border radius just a little bit too when we go there, we go and.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: let's go what else don't want to put on there, and a nice border that's important right, you know what you know what I think we need to enlarge the final little bit to let me know font size.
Michael T Ganschow Green: 1.25 m's font weight.
Michael T Ganschow Green: gold.
Michael T Ganschow Green: And I know what we need, I know I know I know we're gonna put a cursor.
Michael T Ganschow Green: pointer.
Michael T Ganschow Green: Oh snap dog pulling her pointer.
Michael T Ganschow Green: And if I go over the top, oh yeah yeah pointer.
Michael T Ganschow Green: And I think.
Michael T Ganschow Green: Just a little bit of margin.
Michael T Ganschow Green: margin.
Michael T Ganschow Green: Right.
Michael T Ganschow Green: 10 pixels.
Michael T Ganschow Green: pixels it's good alright so we're gonna go know some saving here SAVE I think we'll do a little bit of hovering and a little bit of clicking.
Michael T Ganschow Green: I think i'm going to flip my background color and my type in my border commerce afford the hover states.
Michael T Ganschow Green: And then we'll do black and white, for the active so oh hi.
Hello.
Michael T Ganschow Green: TIM Smith.
Michael T Ganschow Green: colon, however.
Michael T Ganschow Green: Oh, Michael no spacing know spacing he's so we got colon hover.
Michael T Ganschow Green: Just the borders.
Michael T Ganschow Green: Just the borders know sizing.
Michael T Ganschow Green: Know sizing.
Michael T Ganschow Green: And we're going to go comments.
Michael T Ganschow Green: ya know.
Michael T Ganschow Green: color purple.
Michael T Ganschow Green: color yellow.
Michael T Ganschow Green: purple.
Michael T Ganschow Green: and go see Bob Bob Fred.
Michael T Ganschow Green: hey yes, you know we go.
Michael T Ganschow Green: Then, for a clicked on links, and these are links.
Michael T Ganschow Green: and not other behave like links, rather than form objects i'm going to do an active we're going to go.
Michael T Ganschow Green: background color black.
Michael T Ganschow Green: white.
Michael T Ganschow Green: box.
Michael T Ganschow Green: A little black they're gonna pop my email program open that'll be lovely yes, yes, thank you for the boot appreciate that alright So there we go alright, so now we're going to apply these to the reset button and then I think a form is styled if you believe that I know right.
Michael T Ganschow Green: we're gonna go reset.
Michael T Ganschow Green: Yes, we can treat these a little I actually do maybe the types of little big maybe we should just leave it at one him, oh no oh no we're going to shrink our buttons down you guys, I think we should leave it.
Michael T Ganschow Green: looks better 1am.
Michael T Ganschow Green: I go.
Michael T Ganschow Green: i'm gonna take the.
Michael T Ganschow Green: margin right off of the reset to we don't need that we don't need that in here i'm going to shrink that margin right five.
Michael T Ganschow Green: yeah we're looking at better, much better yeah we go look at those buttons so Questions i'm styling forums.
Michael T Ganschow Green: Questions i'm cursor's.
Michael T Ganschow Green: questions on attribute selector.
Michael T Ganschow Green: well.
Michael T Ganschow Green: I do declare, I believe that concludes our broadcast day.
Michael T Ganschow Green: So i'm going to spend the next hour and a half doing critiques on the forum and answering questions for anyone who has any questions I believe there's only one anyone here, and I suspect, she does have some questions for you pre recording to people i'm going to pause the recording.
Michael T Ganschow Green: And if something interesting happens, and I want to record it and add it to posterity I will but offer a preliminary bye bye to you guys and I will see you Tuesday later.