Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
It's sort of odd that we've gone this far in the course without changing the main logo, isn't it? Fortunately, the setting isn't that hard to make; you just have to find it. This video shows you how to do that, and also suggests an alternate way to display your logo that I think works better in many cases. Along with the logo, we'll add a custom favicon to appear up here near your browser bar. One thing I have to mention before we start though: as with all graphics on the web, you'll need to use an image-processing program to size your logo before you put it on the site.
There are dozens of lynda.com videos that will help you with that, such as Photoshop for the Web. But let's get to it. In the exercise files, you'll find a graphic named logo-final.gif. I'll show how you how to implement it. You go up to Appearance. Then when the Theme Builder opens, you click Brand and Logo. You then Browse for it. I happened to have put it on my Desktop, so that's easy enough to find. And Open it.
You'll notice that it's warning that you have to enable a block, and it offers to do that for you. I'll go ahead and say sure, go ahead and do that. As long as we're here, I'll also upload a custom favicon, or a shortcut icon. We have one named hills-favicon.jpg. If you don't know what a favicon is, it will be clear after we upload this one. Again, I go to Logo and Browse, and there it is. Open and wait a moment. Now, you saw it change down here, but you also saw it change up here in the browser bar.
The location of the favicon varies from browser to browser, but it's usually somewhere up here near the address. It's a nice little visual reminder to people that they're on your site. The one thing to remember as you design your favicon is that they're only 16- or 32-pixels square, so you have to keep them extremely simple. In designing this site, I originally used our full Explore California logo, this big one here, but it just became unreadable mush when reduced. So instead I used the simple evocative graphic instead, right up here.
Now you know the quick way of adding a logo. But to be honest, I don't like the way it looks, and we can see that in full when I close out the Theme Builder like this. Oops! It's reminding me that I have to save my changes, so I'll go back and save. I can then close out the Theme Builder. The problem I have with putting a logo up here is it makes it impossible to smoosh down all that white space up here at the top. So I'm going to apply some design judgment to move that logo over to the side.
What I'll do is simply move the logo from that header region, or what's actually the site logo region, into the sidebar A region. If you're not sure what that means, watch the video on working with nlocks. I'll also get rid of our site's name as it appears here, since it's really redundant with the graphic. First, we'll start with the block. Go up to Structure and Blocks. You can see your block regions by clicking here, on Demonstrate block regions. And it gives you a sense of where exactly that site logo is. It's somewhere up here in one of these regions.
I'll exit that though, and do a search on this page. There it is, in the header. Instead, I'm going to put it in sidebar A. Scroll down a little bit. Yup, it shows up at the top there. Scroll to the bottom and Save blocks. Let's see what that looks like. Ah, it worked. But there is something strange when you arrange blocks: sometimes it doesn't stay quite in the same order as you expect.
So I'll go back up, and I'll bring it up to the very top, and save again. This is a small bug that I've discovered in Drupal Gardens. Close out the overlay, and there it is. That didn't completely solve the problem. We'll still have to change some styles later, in the video "Changing element spacing and borders." But at least we've cleared out the space up here by moving that logo out of the way.
Now let's get rid of the site name and slogan. For that, once again, we go up to Structure and Blocks, and there's our slogan. I'm going to move it into No area, and then do the same with the site name--move it to None. Scroll down to the bottom, save, and then take a look at it. That's a lot more like the way I want it. Now, you'll note that the site name still shows up here in the Title bar.
You saw a little more about how the site title and slogan work in the video "Configuring the site." Watch that video again if you want some more details. But overall, that was pretty easy, wasn't it? The technical part of adding a logo is as simple as it can be, really. But this video marks the start of us delving more into how the site is designed. That is, we're using the Theme Builder as just one tool in Drupal Gardens' box. While theming changes are the most immediately visible changes you can make, blocks, simple views, rotating banners, and other site aspects all work together to get your site's message across.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.