Add Logo Image Beside the Navigation Menu in a Thesis Website
http://thesistoolbox.com
So the next thing that we're going to do then is to... we're going to take a logo image and we're going to put it in the header and then beside that, we are going to place a navigation menu and then we'll add to the search bar or search form. And then finally to that, we'll add the Facebook Like and Tweet buttons similar to what we just did with Christian.
So in order to put a logo beside our navigation menu of course, we want these things to be side by side. So I'm going to make my left header area, we're not going to specify a height. We'll just specify a width. Left header area 325 pixels wide and hit save. Now when you're configuring the header area, you have a choice in this area called Thesis defaults. And if you choose to retain the Thesis defaults in this header area, what will happen is it will no longer be widgetized. Now what will happen is the Thesis default stuff will go there instead.
So if we save this again and we'll come back over and look at this and refresh it, you can see we've maintained our 325 pixel width but it's no longer a widgetized area so it gets the name of the blog and the tag line which is the default Thesis behavior. And now all we have is a right header area. If we come over and take a look at our widgets, you see the left header is gone and only the right header area widgets remain.
So you have that ability to retain Thesis default behavior if you wish. We'll come back over here and we're going to remove the Thesis default behavior because we're not going to use Thesis defaults in this side. We're just going to insert our own logo image and we've given it a width. We're not going to mess with the margin and padding or background or text alignment at this point. So we just hit save and then we'll go ahead and add our logo image. Now I'm going to come over to the widgets panel and I'm going to add the logo image using a text widget. So just grab a text widget and drag it over here and then I'm going to use a sandbox page to create the HTML for that text widget. So if I come over to all pages and then go to my sandbox page, let's see, I'm just going to delete all these stuff.
Now I've already put this logo image in my Media Library so all I have to do is select Add Image, come to the Media Library. This is the image I want to add so I hit show. Now I want this image to be the full size so I'll go ahead and do that. I want it to float to the left. I've already given it the title, "Go back to our homepage." And so then what we're going to do is just make sure that the URL here just links to the homepage. Right now, what it does is it links to the image itself. We'll go ahead and delete that. So now, we're just going to link to headerhorizontalwidgets.com or .thesistoolbox.com which is the homepage of the site. This title up here will become the tool tip for our image and then we can add some alternate text and I'm just going to add to the alternate text here. Let's see, tools for customizing your Thesis theme. Now the...actually, not tools. I think I'm going to say plugins.
The reason I'm using this text widget is because the text widget lets me put the image in itself so I can use both the title and the tag line... I'm sorry, the title and the alt text and alt text can be helpful for SEO. And so that's why I've chosen to do it this way. So we just select insert it into post, now I've got all my HTML here that I need to display an image. So I'm going to copy that, come back over to text widget and paste it, hit save, go back over to the page and refresh it. And now, my image is right here. If I hover over that image it says, "Go back to our homepage." If I come over to a different page and click on it, it takes me back to the homepage. So it's a clickable banner with a nice, little title plus it's got a nice little SEO alt text associated with it.