Part 1 – Add the Background Image
In this session, we add the background image that we are going to use for social networking links. We’ll create an unordered list for the links that we’ll place in a text widget.
Video Transcript
Rick: Okay so next we have another guest and that is Lesli. I’ve been working with Lesli here last week. You’re going to see Lesli’s site and some videos here in… I don’t know. Next week some time, those videos should show up. But I used her site to demonstrate how to use the Header Layouts Widget Plugin as well as a couple other things. And anyway, she has something that she wants to do where we are going to use an unordered list and a text widget to create links to her social networking sites that uses a background image so that it looks kind of cool. And you know, a somewhat different version of this can be found… oh no, I’m sorry, not on my forum… can be found on my blog with my social networking buttons. I use a… I’m using it horizontally and what we’re going to build is vertical but that’s what this is here you know, these little buttons represent… if you click on one, they go to the different social networking sites. And that same thing is… we’re going to do the same thing only it’s going to be vertical. And I’m going to unmute her microphone right now. Good morning, Lesli.
Lesli: Good morning, Rick.
Rick: How are you doing?
Lesli: I’m great. How are you doing today?
Rick: I’m doing very well. Okay so let’s go ahead and let’s go over to your site which I believe was Beautifully Coastal.
Lesli: It is.
Rick: Okay and so we are putting this in the default widget one here, is that correct?
Lesli: That is correct. And I uploaded your artwork because I want to put a contact button on there too so I know that you… you know, took all my… before but it’s a new image.
Rick: Okay let’s see…
Lesli: I uploaded it into my media file.
Rick: That’s okay. I’m just looking at… I’m trying to find the login information you sent me.
Lesli: Can I send you an email with what it is?
Rick: How about just put it in the chat window for me?
Lesli: Okay, if I can figure that out. Oh, enter a question? Right there?
Rick: Yeah.
Lesli: To the best of my recollection, that’s what it was.
Rick: Okay so that was the…yeah, it looks like it’s working. Okay, there we go. So in terms of the Media Library, we are now looking at this one here.
Lesli: Yes.
Rick: Socialsprite with contact 3?
Lesli: Yeah.
Rick: And because we’re using this as a background image you know, alt text and description and all that kind of stuff you know, that’s going to show up here.
Lesli: Okay.
Rick: But that shouldn’t… I mean, those are good things to put in images that are not background images. It doesn’t work for images that aren’t background images.
Lesli: Good to know.
Rick: Okay so we’re going to start it off then let’s go to Appearance and Widgets. And this is in sidebar 1 and we’re going to create a text widget. And actually, I want to start coding this in my code editor because I want to make sure I’m not making any errors here. Okay and so the first thing we’re going to do… this is the… the first thing to say about this is this is an unordered list. And actually, we may as well just look at the image again for a second here. If we edit the image, here’s our image so we’re going to have a you know, a subscribe and a Facebook, Twitter… what was this one? What was the P?
Lesli: Pinterest. Oh it means Pinterest, yeah.
Rick: And this is the…
Lesli: Yeah, email.
Rick: This is the email and then this is what?
Lesli: The contact.
Rick: Okay and where is this link going to go if they click on it?
Lesli: I don’t have that one yet, Rick.
Rick: Okay.
Lesli: Actually, I’m going to… I was thinking I was going to use a plugin, like a contact kind of plugin unless you have a better suggestion.
Rick: You know, I don’t think I threw these things away but I cannot find the file that you emailed me with your links in it either.
Lesli: I’ll send it to you again.
Rick: Okay. I don’t see how I would have thrown it away but when I search for your name, I don’t get the email.
Lesli: My name is Lesli. I don’t know if that matters.
Rick: Oh, maybe that is it. Lesli… undoubtedly, it does matter, yeah. Although that didn’t show up anyway.
Lesli: I’ve got it. I’ll send it to you right now.
Rick: Okay. So anyway, we’re going to have this list. The image is 130 by 330. Okay so there are social links.