Build Your Own Business Website header image

Bee Crafty Theme Quickstart Guide – Part 3 – Customizing the Header

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.

The Bee Crafty Theme allows for a couple of different header configurations.  We discuss those configurations and demonstrate how to use them.  We discuss the built in header areas and demonstrate how to add a custom header image.  We look at the PSD file that comes with the child theme and discuss how to create a custom header image.  Finally, we look at the various widgets that are intended to be placed in the header.

The next thing to take a look at is customizing your header for the Bee Crafty Child Theme. Now here’s the header as it sits right now and obviously, it doesn’t really look that great. And in fact, the text is really too small to be useful. So the underlying assumption here is that you’re going to create your own header and insert that header here.

Create the Header Image

You set your header settings in Appearance and Header. You may have found yourself looking on the Genesis forums for their tutorials. And they’ve got this tutorial on how to set the header image, but it’s obviously an old tutorial that was for a previous version of Bee Crafty and has nothing to do with what you do now. And so if you looked at that and were confused by it, don’t sweat it. That would be anybody’s natural reaction.

Your best bet is to create a header image that is exactly 960 by 180 pixels which is what this is. So this has a whole bunch of transparent image area and then it’s got this blue paintbrush-y like bit going across that and that’s what this image is. What we’re going to do is choose an image or choose a file. I’ve created an image to do this in. Let’s take a look at that image first. So here’s the image that I created.

Example Image

One of the ways in which the header works is if you use a widget area, you have about 500 pixels of width of the header that are not going to conflict with any kind of widget that’s set over here. So what I did was I created an image that’s 960 pixels, 180 pixels tall and then I put a line at 500 pixels and said this is the area of my graphic. And my graphic is only going to cover up that space and no more and that’s what this image looks like here.

Upload or Choose an Image

So we go over to Pictures and open up header.png, upload it. And if you already have an image in the Media Library, you could choose an image by selecting this instead, the choose image. You could come over here and pick an image. But I don’t so I’m not going to.

Show Header Text Setting

Now notice that there’s some text that is overlaying the top of this. If you come down here, you’ll see there’s the show header text. We’re just going to unset that so we don’t show the header text and hit save changes.

Review the Changes

Come back over and refresh this page. And now we have a header image here. Notice how when I’m hovering over this section of it, it’s clickable and when I move over here, it isn’t. That’s because the way these things work is that it takes this 500 pixels area and makes an entire space clickable. And then this space over here is reserved, like I said, for those widgets.

Adding an Image without a Widget

You could choose not use widgets in this area and you could have an image that would span the whole distance and that would be fine as well. You can also tackle using an image that’s not the right size.

When the Image Isn’t the Right Size

And so we’re going to come over here and do this again. We’re going to choose another image and this time, I’m just going to choose this image and upload it. Now when you choose an image that’s not the right size, in WordPress 3.4, you have this opportunity to crop it. So now you could just crop it down to the right size or you could skip cropping and publish the image as is. And if you do that, what it’s going to do is leave the image unscaled, push it to the far left and then cut it off 180 pixels. And that’s what happens here.

This was a transparent image so it didn’t have a background. It had a transparent background. It was… I don’t know, 300 some odd pixels tall and so because it’s more than 180 pixels tall, when you uploaded the image, it cut it off at 180 and pushed it off to the left and left the rest of this stuff vacant. You still end up with this space as being clickable. So you could actually just do something like this.

Now the chances are, this isn’t really what you want that to look like and you can actually change this height with code. We’re going to talk about that today but that’s what you’d have to resort to. If you want more or less than 180 pixels then you’re going to have to use code to accomplish that.

Downloading PSD files for the Theme

To create a header, you can do it like I just demonstrated here but you can also download the PSD files for this theme. And when you download the PSD files for the theme, inside the PSD files….I’ve downloaded the PSD files here.

So Bee Crafty PSD has a header image, header PSD. That looks just like this and you could, in fact, use this as a basis for adding a little logo overlay and adding some text similar to that Bee Crafty. Or you can use this to perhaps change the color in this or change the brush stroke or do whatever you want to do.

This is the mechanism for you to change this header to reflect what you might want the header to look like and still use exactly the same kind of configuration. So that is in header PSD and it’s available to you in the Bee Crafty PSD files.

Switch To Our First Header

What I want to do though is go back to using the other header, the one that I created that’s the right size. So I’m going to select that and that is the image. Right now, this was selected but I’m going to select this one as the image and hit save changes, come back over and refresh this and we’ll have this header reconfigured.

Using Widgets

Now this header is also designed to take widgets. And when you are using the widget area, what happens is you end up with these 2 different divisions in the header. You have the title area which is that 500 pixels that I was talking about and you have a widget area that’s 390 pixels. And inside of that widget area, it is given the space of 365 by 96 pixels which means that not every widget is actually going to fit in that space. It’s really intended for you to use one of three widgets.

Search Widget

Let’s take a look at widgets and in header right, one of the widgets it’s intended to use is the Search widget. And you don’t have to do anything but include that like this, come back over and refresh your page and you’ll see that the Search widget has been inserted. It’s got the little Search icon. It’s got a “Search our site.” You can just start filling it out and away you go.

Twitter Widget

Instead of the Search widget, you could use the Twitter widget, latest tweets and I’ll enter my Twitter username, byobwebsite. Let’s just show 2 of them. Let’s see, Follow Me. Include the Twitter link. I don’t post to Twitter that often so I’m going to change it to 2 hours. And let’s give it a title, Latest Tweets and hit save.

Let’s come back over and take a look at it and there we have latest tweets. Notice how that Search widget went away even though the Search widget’s still here? That’s because there’s no room for more than this Latest Tweets. And in fact, it probably can only show one latest tweet, now that I say that. And so anything that there’s not room for just automatically gets hidden.

And let’s see what happens if we take out Latest Tweets. If we take this out entirely, refresh it, yeah. You’ve got the possibility of this little Twitter widget as something that can fit in there.

RSS Subscribe Widget

The last one that I think works in there or was intended to work in there is the E News and Updates. Keep up to date and then you can put your FeedBurner in. Put your FeedBurner information in there and refresh this and you have this little RSS thing that you can use or they can put their email address in and then subscribe to the site via FeedBurner. You could probably do the same kind of thing with any web form. So you have that ability to do this.

Additional Widgets for the Header

Those are really the 3 widgets that were designed to go here. But it seems to me that there are a couple of other widgets that will work. For example, you probably could get away with using the author box or the user profile. So more about Rick or get to know Rick. And then you can select a gravatar to use here and you could add some custom text, add some custom bio text. And then choose your About Me page and maybe show the author archive link and hit save. And so you could have a little introduction about yourself here instead.

And then one final widget that I think works is a text widget. Now a text widget doesn’t work as well as you might like it to. But you could have some kind of heading text or you could put a Google Adsense ad in here if you wanted to. You could put some kind of a javascript that doesn’t really take up very much space. As long as it fits in this 365 pixel by 96 pixel space you could put it inside the text widget. So those are the main things that you can accomplish in here.

No Menu Widget Available

If you’re familiar with Genesis, you may notice that something is actually missing. And the thing that’s missing is the menu widget. Bee Crafty removes the menu widget and why it does that, I have absolutely no idea. A typical Genesis child theme like Agency or Prose will have this little space up here that allows you to put a menu in. And Be Crafty, not only doesn’t suggest you do that but they actively delete the menu widget and I’m not sure why they do that. But it’s just not there anymore.

0 Comments… add one
0 comments… add one

Leave a Comment