Lessons

Lesson Info

How to Add SVG & Forms to Your Site

Going to talk a little bit about spg and how we can add that to our sights because s fugees really important on bill gettinto looking at a little bit of ah former creating a form so spg let me go to the one of the sites here you'll have on your list css tricks has what's called using spg this is a great just take a look at it what spg is how it works spg a lot of us no is that's scalable vector graphic so it's vector on the web if we create an spg file we can either create you can use like illustrator if you want and you can create an spg file it could be a dot spg an actual file called sug or it could be spg code because it's just xml thiss other code you can paste in your pages or work within your pages so a couple ways you can work with us spg is awesome because it looks great on all displays its scaleable it's almost like if you ever work an illustrator and you look at vector stuff an illustrator we call that infinitely scalable because it is because you can take it blow it up on t...

he side of a bus or you can put it this big and it looks the scene looks beautiful and thats what s veggies all about? Let me show you example here I'm gonna crack open illustrator and if you have illustrator, you can follow I've got the spg file you can also just use if you want to wordpress by default doesn't let you work with spg files, meaning it doesn't let you load them via the media upload or the media loader. Okay, but there's kind of a way around that if you go into the advanced files and you go to images, you're going to see that we've got the the viva logo like let's say the orange, it'll state or file I've already saved that is s fiji if you don't have illustrators, so you can use that if you want, but I'm going to open up this logo if you got illustrator, go for it and you can see that this is just vector information. This is taxed that I actually converted, the pass is called, okay, so this is something that you know if you want to use fonts and spg, you've got to be careful that's, why I tend to, like converted to pass because then it'll work everywhere. Sometimes you need to text, so so what I want to do is an illustrator. I make my design get the size I want, just using the tools using the same thing you wouldn't illustrator we can go up to file we can go up to save as for instance and just using the save as men you let me move this up a little bit we could see it you're going to see that we have the ability to create spg compressed or spg spg compressed is a little bit further along it's a little different because it's actually compresses the code and stuff like that we ten most of us tend to use spg because most things support it so if I choose spg I'm gonna put this out of my desktop just so I have it it's gonna call it dot s fiji I'll save it there's a lot of options in here we can work with a lot of things we can do you don't really have to mess with a lot of this okay that's the beauty part about this the one thing you really want to when you first launched this you're going to see more options I already had it there, so if you click more options, you're going to see something called responsive this basically the spg has the width and height built into it, so whatever you're ill stare file was size wise that's what it's going to be on the web it will allow it to those scales smaller and still look beautiful if you turn on responsive it's going to take the width and height out of the code and make it so that it's a cz biggest whatever it's inside of or small is whatever's inside of okay see you gotta be careful ok because they make it too big it's going to be you know huge so I'm actually gonna make sure that it's just the size I want all right you can always go smaller you decide what you need for your design to turn it on or off I'm gonna click okay and once I get that you're going to see this is now a spg you can actually add it spg any illustrator that you've created just pretty cool let me close that up a typically if I go in to my sight right now and I decide that I want to add something like media and I want to choose an spg file okay if I go to add media he'll say I'm in my page I mean about us and what I'd like to do is like the ad the local out here the spg file that I'm working on I'm gonna go up here and say let's ok let's add some media click add media and it's like all right let's go upload a file I'm gonna grab the spg file I created click sounds like files I'm going back to my desktop out here and you got to say ok viva logo as fiji I'll open it up take a look and you're going to see that this file is not permitted okay with a lot of us are using spg and I know if you guys take a look over, you're going to see for security reasons and there are things to think about but a lot of issues spg we dio because spg is infinitely scalable it's vector it's beautiful, crisp, clean doesn't matter what the vice iran, etcetera hi dp ivers is not it works and looks great. The fact that it is an spg file means that it's xml which in some cases there have been security issues and things around that and that's one of the reasons why wordpress doesn't ally to do it through the media up loader okay, but there are ways around this. All right, of course. So let me cancel this if if you go out and you go, let me show you this go into that that bonus files folder and you're going to see the ad spg folder. I actually have what's called spg support dot php. Okay, you're going to find this all over the web. If you do a search for wordpress, spg or something similar there's going to be this type of code hanging out there? Okay, if I open this up, you can open this little file up in your text editor, you can open it dreamweaver if you want you're going to see that this stuff right here if you take this and you copy it and paste it into your functions file, you can then upload spg and use it through word press ok, like I said there's a reason why they're saying that, you know, it causes security issues things like that you do have to be careful, but as faras spg, a lot of us are using it so I'm going to take all this stuff right here and copy it. I'm not going to cut it, I'm gonna copy it. Let me go out to the w p admin to make sure you're still up there. Obviously, if you go to your editor for appearance, I'm gonna click on appearance out of there now. It's okay, I'll leave. This page is fine. What we're gonna do is we're gonna put this into our functions file so if you have a child team installed, you obviously got to go to the child team click on theme functions I'm gonna tell you right now I know that this was not in my thoughts and my theme, okay, it wasn't part of this, so if you have a theme something's already have this in there, you could try to upload spg through the media, upload and see if it works depending on the theme you have already if I go into the functions file here and I get towards the end down at the bottom here and I go ahead and paste that stuff, let me go and paste it there we go and I go and update my file my functions file let me pull this down going out date there we go if I go back to one of my pages that code right there what that actually did if you take a look if you were to take a look at it it's actually setting up it's called a mime type it's essentially saying that if you're an admin you khun allow spg files to be uploaded they're to be put into the media a plodder it's also saying right here this is kind of cool in the past if you uploaded then that's fiji file you couldn't even see the the icon okay? You're the thumbnail of it this is telling it to show that in one view so we could at least see it in one so I'm going to say let's update this already did it I'm gonna go back over to a page for instance and then scroll down I'll goto like home something like that or contact us or about and go where I want to put it I'm actually going to put this right here let's say so create a little space I'm gonna add media and you're going to see that what I could do then is I can go ahead and upload, so go to upload try it again basically that's what we're doing here even local orange spg going open it now we can do it. Okay, take a look now you are going to see that it's not going to show a thumbnail there it's only going to show in a certain view and I believe it's in list view it'll show how many insert this in the page you're going to see that it's got a link to the file etcetera? We could give it to that I'll just insert it, get it in there there's one issue here that happens all the time okay? Just because you can upload it doesn't mean it's going to show up that's one of the problems you need to go to the text over here on the right take a look at it and if you scroll down you're going to see okay here's the spg file right here there's all the code for it by default what's happening is it's actually putting in a width and height a one it's the size of a crumb okay, so what we need to do is we need to get rid of that or type in new numbers or something maybe bigger etcetera wants to get rid of the witness right if I go back to visual scroll down, you're going to see it ok now because it's only that big because in illustrator I didn't turn on that responsive check mark when we saved it so it's saying it's that big butt if they were to be rather large and then being a column in a column got smaller it would scale smaller too so it just can't get any bigger than it is an illustrator that's it that's spg that's working with it that's one of the great things we can do, we can use this for icons, all kinds of stuff once you upload we can then import them it could put them in different places and just get it to work it's just pretty cool if I go out to the page now and take a look, I'll go back to home and refresh school down they're nous so you can see so the spg great something you're going to use all the time once you get it to bill to use that there's not really much we have to do as far as responsive because it is just responsive by nature that's one of the things to think about now one thing that just quickly mentioned if you do care about old browsers like I'ii seven and even I'ii ate a lot of us have already dropped support for those spg files will fail you're going to get some kind of black box or it's not going to show up in that case, you're gonna have to do it's called a fall back on what I would do is if you need if you concern yourself about those, you need either use an spg plugin where you need to look at what's called modernizer. Okay, what I actually did was I included a little bit of code in that bonus folder of called spg modernizer. If you look at modernizer yuk, unload modernizer as a script to java script file, and if you put this little bit of code in the bottom of your page in the footer, usually it'll actually use what's called a fallback. It'll fall back to a ping file, so you just make up the same image as a ping, and it'll just swap it out on browsers that don't use as friends. You can't use effigy, okay? I don't want to go through that process because a lot of us have kind of dropped supportive if you haven't, if you can't, then it's kind of a pain, so okay, one of the last things we're going to do here, we kind of did the smooth scroll link a little bit earlier, but I want to show you a form I've gotta take a look at a form this is actually gonna be pretty quick, because honestly, back in the day when we created forms, the forms weren't responsive, they were hard to deal with, and you had to set up a lot to get him to work. Now we've got all kinds of services and solutions we can work with if you ever heard of wu fu dot com well for dot coms, a great resource to bill to go out and generate a form, get the code that give you the code, and you just pasted in your page and you've got the form to work it's amazing that you're paying monthly ok, and that's also going to give you a lot of bells and whistles and things you could do if you want to keep it on the cheap, and you want to get this done really quickly without having to do a lot of back and stuff. What we're gonna do is we're gonna use a plug in, okay? So I'm gonna go to plug ins here and you'll see that I'm gonna go toe add new and if you go to popular, this is kind of crazy, but we goto popular right here. You actually going to see that one of the more popular ones is called contact form seven just take a look at how many downloads there have been. Just to let you know, forms are a bit tricky, okay? They really I've had to create forms left and right, and I don't like him alright, they're just hard to deal with. This is a relatively simple plug in that lets you just generate a form it e mails the data that's one of the things that it does okay, so many install it, get it out there and activate it. And once we do that you're going to see on the left over here, it creates this on its own category called contact. We can now start to create forms this this planet has been developed and a lot of thought a lot of time has gone into this thing. If I got a contact forms and take a look, one of the things you're going to find is this this particular form, this is not the only game in town there's, actually a bunch that a lot of people use. This one has been around for a long time, and I've donated in the past, but if you really feel comfortable doing it to plug ins, I would just to kind of keep them going. If you look in here going to see that we can create a whole bunch of forms we want to. And the whole idea is that we just set it up. Who it goes to what it does, what it says and you take a little short code and pasted in your page and you got the form so they start you with one called contact form one. If I click on that to edit it, you'll see that up here at the top it says, copy this code and paste it into your post page or wherever you want the form to show up. This is what's really cool. You put this in a lot of different places. You can even put it in a widget called a text widget down here. This is the form you're going to see it set up a certain way it's using p tags and it actually has these little things right here. These are the actual fields that are going to show up on their written in such a way for us to create our own fields. Let's suppose that we want like an address field or something different. You can come right here to the right, click on generate tag and pick one you could say, hey, let's, do something like let's do telephone number okay, I need to grab somebody's number all the settings are right there we could just go in and start the odd, you know, edit these out if we want to make it required required it this this actually uses javascript to dictator or to find out if you filled it out correctly it's going to do a form submission for you and check for you we can do things like add our own classes you can add values if you want like, you know you guys have seen things like this where it's like, you know, add your tell in this format or something to that effect you can able to call default value we could do that now they're going to have to clear that and then what we do is we take this code and we just copied over here, so usually when I wind up doing, you're going to see these little paragraphs with just some texts and stuff I'll just like wherever I wanted to go all copy this right here so copy and then just clear a little space and paste one I'm just pasting another one here paste it will space and this right here is what we have to replace, so what I'll do is come in here and said copy this code, just copy it come right here this is the one we're replacing right and I will paste it in there so it's just inside of a p tag basically paste it right there and we've got ourselves our form. Okay, what we can do now, once we get this set up, you can then tell it who? The email you could put in multiple email addresses if you want to. You can say it's from a certain person you khun set of all kinds of options if you want to. This is actually the message body. This is what's going to show up or come back to the person that you e mail and what what we need to do here is we need to make sure that they see the field names. So if you look right here, you're going to see up to the top this telephone number it says, put this code into the male fields. You're going to take this code right here and click on and select it. Hopefully, copy that and this goes down here. So I'll say, um, telephone and I'll just type in, like, telephone and then paste that little short code, that little snippet and the form is gonna automatically grab the content they typed in there and in the e mail, it sends it's going to put it in the body. Which is really great. So you can do that for all of these different things that you've got up here, you're going to see that all you need to do is basically grab like tell for forty your subject, you know, whatever you happen to have, and you can put those down there in the body to see what what the date is there's a lot of other settings don't need to go there, you can kind of take a look and see what you want down here. There are actually messages that appear like if they didn't fill it out, right, you can change the messages here, and once I saved this additional settings, I'll go and save this. I just grabbed this code right here copy it from a colleague's added it later, too. I'll go to a page like let's say my contact page, contact us and I'll get in here and you can see that I've got some stuff out here, I'll put it right below the email, maybe, and I'll paste it in there. There we go, that's pretty much it, so you're not going to see it right now, but if I update, go out to my page and go to the contact us page and scroll down, you'll see there it is right there there's the form so I can now start to fill this out. It is responsive. All the fields are fitting the right area. They usually work pretty well it's going to work on a mobile device you got all this stuff set up and you're done. You just need to kind of test it out and see that it's going the right person if you want to, you can go in and do things like this. They were very smart about this plug in. If you want to change the colors, the sizing, all these different things with this plug in, we can go in and let's, say, go to one of the fields and if I once again go to my, uh my developer tools, I'll inspect element here, go to the developer tools you're going to see that it actually gives you the css here that it's showing now let me scroll down a little bit and find it and put style where the problem is some of the plug ins is they actually used the same name. So when we go in here and take a look content teams creative live okay, that's all the same. Basically. Okay, so what we can do is we can go in, find the the css it's applied to that and let's suppose you want to change like the background color I kind of scroll down here and say okay, well, where is the border there's the border right there there's the color of the text etcetera and there's the background color right there, I can just make a change if I want to and just see what it's gonna look like that looks like something okay, you do what you want, you can then just take this style, copy it in tears, your theme style for your child make the changes and you've got yourself an override what's really great about this form is that they actually the style sheet for the form is loaded really early, okay, they usually let it really early, which is really smart think you're pretty cool so you can override it really simply so once you get the form out there, you're going to get the data is going to send it to you in the form of an email, then we're all so that's kind of the idea, so working with forms you just gotta pick the right one, you gotta pick what you need. Most of the forms are going to be responsive these days that are just going to say they're going to kind of do their thing and do what they need to do some forms will actually allow you to hide form fields depending on if they're on a mobile device or not and that's getting a little bit further along. You could even go into your css if you want and create what's called a media query like I talked about before and you could say a media created at this size, maybe a small mobile device hide these fields. A lot of times we'll find our mobile device that you know, a desktop. Rather, we have a really big form, but on the mobile as it shrinks down, we kind of parrot down a little bit it's not always the case. Sometimes you need all the data you're going to get, but a lot of times we'll go in and just say, hey, you know what, let's, just capture what we need on a mobile device because you've ever filled out a form on a device like this and it's got six thousand fields on it. You're about to lose your mind, okay, so it's something that we can think about, too. The last thing I was going to kind of just hit was talking about the smooth scroll plug in. We already kind of went through that a little bit and just we install that in a previous class, but I want to I want to just show you that really quick when we work with our pages, justus a nicety. Okay you're going to see that we can go in and install a little link that allows you to click and go back up to the top and do it smoothly okay there's a great little plug in it we can use that I use a lot and if I go to plug ins here could add new I could go to what's called sits other smooth scroll or smooth scroll up there we go and you'll see there it is right there there's a lot of these out there if you want to do it yourself you confined the jade the java script it's usually based on j query you can put all the stuff in there yourself where you can stick with a plug in okay it's your call but smooth scroll up you're going to see is used a lot we could go on and we could install if you want to and get it to work if I go out and take a look I've already installed this so you guys can install it activate it like I said I've already got that in there if I go to the settings out here and take a look I'm pretty sure it's in settings you'll see smooth scroll up there we go okay now I can set up some different things I want I can tell things like position do I want to show on the home page? Are we showing on mobile devices just some different settings weaken set here and if I go out there and say let's ok let's say the changes on this and take a look come in order when I pages out here and school down we're going to see that that should be showing up on the right out there we may have a constant kind of conflict with another plug and it looks like you guys gonna find that in this case can you see that it's not actually showing up out here I only go to about us scroll down a little bit it should actually be showing up like right down here ok we saw in the previous class you got to trust me but this is a case where if you install plug in you tell what to do and it should be good to go there may be something else going on behind the scenes that we don't realize this could be what's called a conflict okay as faras plug ins or concerned so one of the things that we want to do and this is the last thing elsewhere you guys before we kind of move on that should work okay if everything is set the way it should work if we go to the developer tools and we just take a quick look you're going to see right here when I go out and I make sure that you know what let me do this actually real quick make sure that I hit safes to save changes make sure that it's actually active you guys I I'm kind of jumping in here and saying it's it's in there smooth scroll up okay I'm gonna deactivate it and I'm gonna activate it again real quick this is stuff you're going teo you know I guarantee you you're going to do stuff like this I've already saved it when we go on just take a look and see if I've got it to go here now it'll work I know it's not quite doing it there that's fine what we can do is we can see if there's some kind of interference let me just do this real quick I guarantee it's gonna work if you ever a plug in that's having an issue you can't quite figure out why it's not working it should work out of the box kind of thing a couple things you could try and do you can actually deactivate and reactivate sometimes I don't kick it fans if you deactivate you can also do this you can delete it and then reinstall it I've had to do that before sometimes when it unpacks it does its thing it doesn't quite work something happens so I can say let let's delete the files let me just quickly try it again so add new and I'll go to smooth school up and you could see it right over here now I'm uninstall it again I'm still real quick again, it's taking a couple seconds here and I'll activate the plug in and then go take a look at it. You shouldn't have to do anything else is not going to show up on the home page by default, but if I go to something like about us and refresh let's, take a look and see if you get it. Yeah, still having some kind of issue with my page here? So when we go to contact us because this is a dead and it always happens with the dead simple plug ins, it's just not working, so let me go over to the settings just make sure I've got something set up here smooth scroll up position is showdown home page, back to top. Yeah, it should be doing it. So in that case, I got to be perfectly honest unless you're willing to dig into the actual files for the plug in and take a look and see if maybe you could figure out why. One of the last resorts here, like I was going to show you before is to go over to the developer tools themselves. Any browser you can get this, the developer tools like I've been showing you and one of the first things I'm going to take a look at. Is right over here. We're going to steal the show is called the drawer if you guys ever see a red number up here and it says like one or two or something like that, that means there is a big problem at the page and if I click on drawer it's going to show me that when things fire is something wrong, it's a lot of times I'll scroll up and down, see what's going on and if anything is actually wrong, it'll show here. Okay. In this case, I got nothing wrong. So you know what I might do go pick another plugging it worked before for some reason it's not working now, it might be because local things were getting tired, my machines getting tired. I'm not sure but for you guys that are doing this, if you install that, I can guarantee it's gonna work. Okay? That's let's think this thing is real there with things that we kind of deal with all the time. So as far as smooth scroll up that's a great plug in there are others out there. You can try different plug ins, just activated, take a look at it, it should work, um and you can go in and add it that if you want to do different things, like I said, for setting so this was this is a lot of stuff. I'm trying to kind of pack in here and just show you guys where word presses going and you know, just just kind of the nature of things right now and where things are at things, they're still in flux. With all the response of design and everything else that we have out there. We're all still trying to figure it out. Nobody's got it nailed, so we're trying to use, like hodgepodge solutions that may or may not work ok, and with plug ins that we try and put in, sometimes they conflict. Sometimes they won't work for us. This is why we try different solutions. If you guys have pure java script you want to put in there, you want to try and get that in your pages. You can try that, you can try plug, etcetera, but hopefully a lot of this stuff is something that's you need and you wanted to take a look at and I really appreciate your coming and thanks for being here.