In this session we give an overview and show examples of how to use Netbeans, FileZilla, Firefox and Web Developer to edit CSS.
Rick: Good evening Sean.
Sean: Hi Rick, good evening.
Rick: How are you doing, man?
Sean: Oh not too bad. I’ve been working on the header plugin and that’s another thing but I had a question about the Netbeans as well.
Rick: Okay so hit me with your question.
Sean: Okay now from looking at the videos, I gather that if you want to make a change on your site, you take Netbeans and put it in the Netbeans and maybe preview it or do something with Netbeans before you paste into your code. Is that correct?
Rick: No. Netbeans is… think of Netbeans as a sophisticated, special type of processor. It’s more than that but just think of it that way. Netbeans is the tool that you use to type the code and theoretically, it has… there is a way in which it can… you can use it for previewing but that’s beyond your skill level at this point. At the moment, all you’re using it for is just as a word processor so that you can type your code in and like a word processor with a spellchecker, it checks your code as you type and can tell you whether or not you’re making a mistake. And that’s the main purpose for Netbeans is it’s a text editor. But it’s a very smart text editor and so, it uses different colors for different things to help you figure out what’s going on where.
And if you’ve made an error, for example, let’s introduce an error in the middle of that code right there. Oh actually, that kind of error is not going to be found. But if we say, forget to put our closing semi-colon there, it’s telling us we’ve got an error with a little red squiggly line and that sort of thing under it plus the big, red exclamation point on the side. And then if you look over here, you can see how many of them you have and then just click on this you know, if you’re down here. You can click on this and it’ll take you right back to where the error is.
So it’s a handy little tool that acts like a word processor. However, in order to make the change and get it on your site, you need to use FileZilla or some other FTP program. I strongly recommend FileZilla but you need to upload it to your site and then the… and what it will do is it will overwrite the existing file with your new edited file.
Sean: Okay now, I’ve been trying to work with the background and I didn’t want to put anything on there that would destroy the site. And I have… I don’t… so I have… when I thought I saw you do in the background was uploading it from Netbeans on to FileZilla.
Rick: Well, Netbeans is just an editor. It’s not an uploader, right?
Rick: So what I’m doing is I’m editing it in Netbeans and then I’m using FileZilla to upload it from my computer to my website.
Sean: And you say that in Netbeans, you save the CSS. Whatever changes you make, you save them and then that saving is what you upload to FileZilla.
Rick: You upload using FileZilla.
Sean: Using FileZilla?
Sean: So if you make a mistake…
Rick: You’ve uploaded your mistake.
Sean: And how would you recover from that?
Rick: Well, the first thing is that you only make small changes before you upload. So you make a change, you… so you know, I only write little tiny pieces of code before I upload and test it. And so, you write a little tiny piece of code, you upload it. If it’s not doing what you want, you make a little change in Netbeans. You save it, you upload it again. If it’s not doing what you like, you change it again and upload it. You know, it’s got this undo button so if you did something that was catastrophic, all you’d have to do is hit undo and save it and then reupload it. So… I mean we can… I’ll show you an example of that.
Rick: Let’s see. I just got to rev a site up here.
Sean: What I saw you working with was the background. I wanted to change the background image.
Rick: Sure, well okay. So let’s just pick a site where we can change the background image. So let’s see, what site am I going to use for that? Oh let’s just use Laurraine. Okay so here I am. I’ve connected my local copy of my files to my Laurraine website and the connection’s synchronized so I can just double-click on WP content and it opens up in both places. And then themes and then thesis_182 and then custom and I’m going to be changing this custom CSS file. So now, I come over to my… I come over to Netbeans and I open that CSS file. I have to find it on my computer here. Websites, byob website, tutorial sites, Laurraine, WordPress, WP content, themes, thesis_182, custom and then there’s my custom CSS file. So I open it up and in this custom CSS file, I want to add a background image so I want to type in….
Now, I want to add the background image so it is the entire background of the site. So I’m going to use the body tag for that. So I’m going to just type body .custom and then brackets. And now, I could start off just by saying background color and let’s say, I’m just going to make that background color red. Okay?
Rick: You can see that if I leave that little… if I leave the closing semi-colon off… come on, show me I made an error. It did a moment ago. Well, if I save this, it’s going to show me I’ve made an error. Oh thank you very much for making me a liar. We’ll just go ahead… well, first time, we’ll do it right. So let’s go ahead and upload this to that site. First actually, let’s go to that site.
So www.laurraine… Yeah, okay. It’s not what I want though. I just want to go to… okay, we’ll log in. We’ll go to the site. Okay the site background right now is this grey color, right? Okay so when I upload that file, it’s going to become red. So I have saved that background color as red and I have FileZilla up so I just write… this is the very same file that I’ve changed. Notice it says I changed it on 6/29/2011? But if I refresh this, its view again, now it says I changed it on 9/7 which is today.
Rick: So now, I upload to the site. I definitely want to replace the other one. And now, I come back over here and refresh it. It’s red.
Rick: What you’ve seen me do a lot is I do… I use a system of preview inside of Firefox and I do that using the tool, Web Developer.
Sean: Okay, I have that.
Rick: So if I edit… if I open Web Developer and I come over to the custom CSS file, I can come over here and say… instead of red, I can say blue, right? And now, that automatically changes it to blue. Now, if I refresh the page it goes back to the real color because I didn’t actually make a change here. All I did was I just made a change that affects this browser view.
Rick: Okay so this is not a real change.
Sean: So if you like that red, would you just paste the code from that?
Rick: If I like this red, I just copy that piece and actually, because copying and pasting is problematic, I usually take all of it and just replace all of it. So I come back over here and replace all of it. That way, I’m not inadvertently missing something. I paste it in Netbeans and I save it. Now, I’ve made it red, right? If I come over and look at this… let’s see. Let’s go to Laurraine on this site. Laurraine…now, it’s still red over here because it doesn’t know anything about blue, right? Blue wouldn’t happen until we upload it. But we upload blue and we refresh it, now it’s going to be blue. Actually, I must have not changed it to blue. I didn’t.
Okay yeah, no I made it red. No, let’s change it to blue here and do that again. Blue… now, I like the way the code is and it’s different than I had before. So I just come up here and copy it. And go to Netbeans, paste it, you can see it says blue now. Save it, go to FileZilla and upload it and come back over here my Chrome version of it. Refresh it. Now, it’s going to be blue.
Okay so that’s the first step. Now, if I made a mistake, if I said, “Oh my gosh, that’s not the color of blue I want.” Imagine that this mistake is catastrophic, right? This is absolutely horrible. I did not intend that at all. All I have to do is come back over to Netbeans and hit undo and now it’s back to red, the way I wanted it in the first place. Save the document, open up FileZilla, upload the document back and refresh it and whew! I’ve recovered from my error.
Sean: Got it.
Rick: See? So that’s how you recover from things.
Rick: You only make small changes, right? I never make a whole bunch of changes here. I wouldn’t start changing other stuff too. I would just make this one change until I’m happy with it. Upload it, test it, keep going back and forth until I’m happy with it and move on to the next thing. I don’t you know, you see, I’ve seen a number of times where folks have you know, they just write lots and lots of code and then they save it. And then they upload it and it doesn’t work they want it but they don’t know why because they have all this code. If you write one piece of code and test it and then go on to the next piece of code and test it and go on to the 3rd piece of code and it stops working, you know it’s not the first 2 pieces code. You know it’s the 3rd piece of code, right?
Rick: So that’s why you do it in small steps and why you get the first step right and then you move on to the 2nd step.
Sean: So if you wanted to take a look at what you… you know, like I’m messing with the background. I’ve got about 3 or 4 different images that I’m using. A place to look at them would be Firefox to compare.
Rick: Absolutely, because you can change the styles in Firefox so that you can see what that’d look like in different versions.
Sean: Okay. And then the one that like, I just put in Netbeans and then save it and then upload it with FileZilla.
Rick: Yeah and what I would do actually, first, is I would do one of them. I would put the code in for one of them.
Rick: Because then you can just change that code. So for example, let’s look and see what I’ve got over here under… let’s look under Images for a second.
Sean: Images, yeah.
Rick: No, I don’t have anything there, okay. So I’m going to pick a couple of potential background images here and let’s see, so websites, graphics, backgrounds, icons… let’s see. I want a small background image, not a great, big one.
Sean: That was my former question. What size do you use?
Rick: Well, it depends on what you’re doing. The bigger the image, the heavier the website, right? So you want the images to be as small as possible. However, that either means you need to be able to repeat the image over and over again so it looks good repeating or you know, or you have a great, big image. So for example, if you wanted a big piece of paper like this thing here, this is actually quite a large piece of paper. If you have a piece of paper like this, I will say 1200 pixels wide, now that would be a big file for this site to upload. But it was absolutely critical to the way this site is going to look and critical to your design, you just try to optimize the image as best you could and then use the image. What I’m going to do here is I’m going to use repeating background images instead.
So I’m going to come over, let’s see… let’s go to byobwebsite and look at graphics. And… oh let’s see, yeah blog images. Tutorial graphics, there we go. Okay, backgrounds. What have I got here? Okay so I’ve got 2 different… well, I’ve got this background image. This is the one that I used in one of the tutorials, right? So I’m going to drag… I am going to drag this image… let’s go to custom and images first. I’m going to drag this image into that custom images folder and then while I’m at that, I’m going to come back over here and let’s see if I can find another… find a different one I can use too. Medium icons… okay, let’s just use… how big is paper clips? That’s okay. We’ll use that one anyway. And so I’m going to drag that one over there too.
Okay so now I’ve got 2 different images that I can use as a background image. Actually, I’m going to choose a 3rd background image and that’s this paper background image here too, this parchment background image. Okay so now…
Sean: Use the media…
Rick: What’s that?
Sean: You don’t use the Media Uploader to do that huh?
Rick: No. I use… that’s what custom images is for. It’s for images that are specific to the appearance of the site. I use the Media Library for images that I’m using inside of a blog post but all of the images that I am using… actually using as… for the appearance of the site, those images that can be associated with the theme of the site or the skin of the site. Those images I put on the custom images folder.
Sean: Okay, got you, got you.
Rick: So okay… so anyway, I put those 3 images there and if I want to make sure that I have a copy of them in my other folder, I just download them back here to my local computer too. But anyway, I’ve got those 3 images there and now what I can do is write a background image code. So instead of background color red, say background image and then it’s… where is it? URL…I’m forgetting… oh yeah, okay that is the right code. No, it’s not the right code. How do I put that? Background… oh I don’t have a token for URLs. So then I need to get the place of this image is located so I’ve got it under WP content, themes, thesis_182, custom images. So what I’m going to say is http://www.laurraine.byobtutorial.com/content/themes/thesis_182/images and it still does not like the way I’ve written that syntax which means I forgot the right syntax which happens all the time.
So don’t feel like… and so the way you find the right syntax is to go to W3 Schools and then CSS and then Styling Backgrounds and then scroll down to background image. Oh, I forgot the parentheses around it. So then that is to wrap this in parentheses… that didn’t work. Okay, there we go. Background image URL and I’m going to… well, right now, it’s going to automatically repeat. So let’s just leave it like that and oh, custom images. That’s its location but that’s not actually the name of an image. So we still need the image name too and I’m going to start off with pencil hatch gif and then save it. And then we come over to FileZilla. It did give me a little preview because I have this preview button up and running so it does show me a little preview.
But I come back over to FileZilla and upload it and then come back over to the web and then refresh it. And now, we’re going to see that pencil hatch picture back there unless I’ve got it wrong. No, I got it right.
So there it is, the pencil hatch background is in the background and that covers everything. Now, let’s say I didn’t want it to cover everything. Let’s say I only wanted one horizontal stripe across the top. Well, if that was the case then to this body .custom, I would add background: repeat x. So that means, it’s only going to repeat in the x direction. The x direction is left to right. The y direction is top to bottom.
Rick: If I picked repeat y, you wouldn’t see it because it would be back here behind the background image. If we say repeat y, it’s going to… oh no, look at that. It’s starting off at the left hand side so it doesn’t… so you can see the one stretch on the left hand side. If we said background position top center, now it’s hidden because it’s actually happening right here in the middle. So then we start at the top and just goes down in the middle. If we go back to x, it still goes across the top. It starts here in the middle but goes both directions across the top.
So now, let’s just say that we want to try the other image. So in order to try the other image, we come over here to images and let’s say…let’s use paperclips this time. So I grab that filename, come back over here and instead of pencil hatch gif, I say paperclips jpeg and there it is. Now you can see the paperclips. And if I want to see them all over the place instead of just in the one location, I would just take this out. I’m going to misspell it, that’s what I usually do, is misspell something so that it no longer works correctly. And now, the whole thing is repeating itself over and over and over again, right?
Sean: That gives me a good idea, yeah.
Rick: And so, let’s say that I… let’s go back to this single image then. Let’s look at the parchment version of this. We come back over here again and instead of paperclip, we use parchment distressed.jpg. And so now, we replace paperclips.jpg with this image, parchment distressed, and you can see that it’s got its edges, right? It’s repeating itself too because I haven’t told it not to repeat but it’s starting at the top and in the middle and it’s repeating itself. And if my content column was narrower, we’d see more of the image sticking out. And if it was… if my content was transparent, you’d see all the image back there.
And so, if I’ve got… if I have repeat and then say no repeat, now it’s not going to be repeating. Oh, pardon me. It must be no repeat. Yeah, that’s it. So now, it doesn’t repeat anymore and in fact, you can now see the grey background color. That’s the natural background color here. So you can see that background image is not repeating.
And if we got rid of this background top center background position, now it’s going to go off to the side, see? It goes all the way to the side. So usually, when you’re using a background image, you want to say that it’s going to be a top center because that way, no matter how the browse is sized, the background doesn’t change. And then when you like it, you just copy it, paste it in Netbeans, save it, and upload it.
Sean: Gotcha. Okay, that’s a lot clear. That really helps.