This is part 5 of 6 in a series on Creating a Full Width Header Using BYOB Thesis Plugins. In this session we show how to add an image sprite to the navigation menu using a set of images created in Photoshop. These images represent the current state, hover state, and link states in the menu. Then we insert the image and style the menu with CSS.
Actually, before I do any more styling, let’s just go ahead and add our logo to this. And so, I’m going to go over here to all pages and I have a sandbox page and I’m going to delete this code here. But what I’m going to do is I’m going to add an image and I’m going to select the file. And I’m using, I think I’m using logo 2 for this. Yeah, logo 2. It’s 200 pixels by 200 pixels which is how big I made that space. And I want that image to actually link off to the homepage so I’m going to get rid of the file URL here and it’s just going to link to thesisbyobtutorial.com. The alternative text I’m going to add is going to be “Back to the Thesis Professor Homepage”. Actually, that was my title is what I really want. The alternative text I’m going to say will be “Thesis tutorials from beginning to advanced.” Okay so the reason you put alternative text in there is for SEO purposes. This is the title which will show up when somebody hovers over the image and this is where that will link.
So if I insert that into the post, it has created all of the HTML for me. So now, I’m just going to copy that and I’m going to come over here to Appearance and Widgets. And here’s that left header area… widget area that we created when we installed the Header Widgets plugin. So I’m going to drag a text widget over there and paste that image and link code there and hit save and refresh this. There we go.
So we got our little… if we come over here to the you know, one of other pages and we come back and click on this, it takes us back to the homepage as does that. And if you hover over, it says “Back to the Thesis Professor Homepage.” Okay?
So we got our logo in place and it’s clickable and we’ve got text here that’s also clickable.