Build Your Own Business Website header image

Bee Crafty Theme Quickstart Guide – Part 8 – Add a Pinterest Button to Bee Crafty

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we show how to create Pinterest and Google+ buttons for the Bee Crafty theme social links menu. We demonstrate how to create the images, how to upload them and how to write the custom CSS that will make them display.

Member: And you know, something you mentioned you were going to cover is how to make the Pinterest button for that navigation menu.

Rick: Yes. Are you ready to do that?

Member: I am.

Rick: Okay so do you have Photoshop?

Member: I have Elements… Photoshop Elements.

Rick: Okay, Elements will do this job as well.

Member: Okay.

Get the Icon

Rick: What I’m going to do is open up one of the icons from the file. These icons are not in the PSD files so I actually have to get it from the website itself or from the child theme. Well actually, I can just show you how to do it easily here. You can easily just come over and right click on that, inspect the element and find that… now it isn’t showing up like I thought it would. Crazy. Oh, here it is.

That image is 16 by 16 pixels. Let’s just download this. Save link as and we’ll save in the Downloads as facebook 16 png. I’m going to open it up to use as a template, and facebook 16, wasn’t it? I just changed the date.

Member: There it is.

Pinterest Icon

Rick: I was staring right at it. So we’re going to use this as a sample, as a base and now I’m going to search the web for a Pinterest icon. And let’s look at Pinterest goodies. This is not the one you really want to use though, is it? You really want a little… something like this.

Member: Right, that one there.

Rick: Actually, that is the one, isn’t it? It looks like it’s 16 by 16. So save image as, I’m going to change it to Pinterest button and let’s just open it up in Photoshop just to make sure. Yeah, it is 16 by 16 so that will work just fine.

Google+ Icon

While we’re at it, let’s just do the same thing for Google+. We’re going to look at this and what do I want? I want icon. That’s 256 by 256. What I really want is 16 by 16, not 15. Let’s save that image as Google Plus. Oh, that was a png. Jpeg’s a crappy choice for that because it’s only 2 colors. It’s going to save it as a jpg unless I… oh no, that’s not right. Okay, perfect. Google Plus png, that’s what I want. And then we’re going to open it up in Photoshop. Image size, we’re going to take it down to 16 by 16 and file, save for web and devices and Google Plus png.

Upload Icon Files in the Media Library

The next part of this is to go back to our website. Go to the Media Library. Add new, select files. So the first file is going to be that Pinterest file and then the next one is going to be the Google + file. Now I want to copy that file location and then come over here to edit themes.

Add Pinterest and Google+ to the Menu

And again, I’m going to search for Twitter and let’s see, subnav. Okay so this is what we’re looking for here. I’m just going to copy that Skype version of it, come all the way back down to the custom, paste it, except this will be Pinterest and then we’re going to call it menu pinterest. And then the background image URL is going to be this one here and I think we can leave the rest of it alone.

We’ll do the same thing. Copy that and we’ll do the same thing for our Google +, menu google and then our Google+ URL and then update this file.

Now we can come back to our menus and under our social networking menu, we can… do you already have a Pinterest site up?

Member: Yes, I do.

Rick: What’s the URL?

Member: I don’t remember.

Rick: Okay.

Member: I have it somewhere. I don’t know how to do that from the home screen thing for your demo.

Rick: That is in the… the chat window?

Member: Here it is, okay.

Rick: While you’re doing that, I’m going to add the Google +.

Member: Okay, go ahead. Okay, it says

Rick: Okay and then let’s see… the class will be menu-pinterest and the Google + one is going to be…

Member: I don’t remember my Google +.

Rick: That’s okay. I don’t have a Pinterest one but I do have a Google +. That’s not what I’m trying to get to though, my mistake. Let’s see…

Member: The Google + is probably my Gmail, right?

Rick: It could be. If you just go to your Google + page, you can get your thing from up here once you’re there.

Member: Okay.

Rick: So we add to menu and then it’s going to be menu-google. Save it and we don’t quite have enough movement to the left so we need a little bit more padding in those. Margin… I would say that we need 18 pixels, try that. Actually, I don’t think that’s going to do it either. No, what we need though is padding.

Margin left and then let’s say padding left: 16 px. Now, I don’t know why those other ones work like that but… so then we update this file and refresh it. Maybe we don’t quite need 16 but you get the point. And then click on those, it takes you over there and so we still end up with the social networking buttons that we want without really having to do too much.

0 Comments… add one
0 comments… add one

Leave a Comment