Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
As a Drupal administrator, you'd have several levels of control over the theme that affects the general appearance of your site. In fact, you can do quite a lot with the six themes that are built into Drupal. Some of the things you can change, include the information shown at the top of every screen besides logo, the shortcut icon that's in the browser's address bar and whether member icons are included in posts and comments. The first thing that we're going to do is we're going to change to a completely different theme and you'll notice some very big changes when that happens. First of all, you may remember that blocks are actually theme per theme. So, all of the blocks that you've in this right hand corner are going to disappear.
Let's do it now by going to Administer and Themes and then down to the theme we're going to use. Right now we're in Garland, but I think I want to change to Bluemarine. It seems appropriate for underwater realty. So, we click on Enabled to turn it on and then we click on Default, which makes that the one that shows up for everybody. Scroll down to the bottom and Save Configuration. Bang! Just as I said, the right hand column is disappeared because all of those blocks are gone. Also, you'll notice that the text up here which used to be very big Where damp basements are a feature, not a bug has actually become small and onto the next line. But basically, all of the content has stayed in the same place, we have this sticky story up here at the top, the poll that we had and so forth, all of the stories are there. If we go to the forum, we see that the forum poster is still there. They may look a little different, but the content is exactly the same.
I want to return this to somewhat the same functionality as we had previously. So, I'm going to go to Administer and Blocks and now, you'll notice that Bluemarine is underlined. That's the theme that we're in right now where as before we were in Garland. If we want to see what blocks we were using in Garland, we'd just click on here and it will change the screen temporarily, so we can see exactly what it looks like with the blocks in place. We could then make a list here if we wanted to. Well. What order were they in, where did they appear and so forth, but we're not going to do that. We're just going to switch back to Bluemarine and we're going to rebuild the site as we want it. We'll scroll down and take a look at all of the different blocks that are available to us. Let's put our Active forum topics up in the left sidebar towards the top.
So, we move that popup that way and as you can see, it popped it up into the place where it's going to go. Go back down to all of these disabled blocks and decide what else do we want. We still have recent comments on the right side bar. Recent blog posts as well on the right sidebar and we've decided we're no longer running that promotion we were running before. So, we'll leave that disabled. We'll put the poll in the right side bar as well and then News from Google at the bottom there. If we scroll up here, we can rearrange exactly where those blocks appear by grabbing these icons and dragging them as we like. I'm going to put the News at the bottom and make sure that the poll is at the top, because I like the way it looks. We'll move the Active forum topics down below our navigation menu.
Again, I'm just playing around here; you can setup the site however you want. We'll scroll down to the bottom and Save Blocks. There, now we'll go back to our homepage, I like the way that looks. We'll keep it that way. But there's much more that we can do within the theme itself, to find out, we click on Administer and Themes once again. Now remember, we're in the Bluemarine theme. So, I'll click on configure next to that theme. From here, there are many changes that we can make. One of them is we could put user pictures in posts.
You may remember from the Profile settings that individual users are allowed to upload pictures of themselves if we permitted them to as we did. Let's put that in posts and in comments. Now, this search box is not available. First we're going to go down and save this and then I'm going to make that search box available by turning on the Search module. So, we click Save configuration, Administer and back to Modules. As we scroll down we'll see, indeed, there's a Search module that we can turn on and save. But you'll notice, it still hasn't showed up in this theme and I'll go to the front page to see you can see that.
It doesn't show up anywhere on that page because we've to make it appear in the theme, again we go Administer and Themes and configure Bluemarine which is our current default theme. Now, we can click on the search box and make it available. Scrolling down further, we're going to add a couple of things. One of them is the default logo up here, this is actually the Drupal default logo and much as I love it, it's not appropriate for our site. The same goes with this little thing in the address bar, which is known as the shortcut icon. I've prepared two icons, which will fit in those places, and you'll find them if you're a subscriber to lynda.com as a premium member or if you receive this course on a disk in the Exercise Files. Scrolling down to the bottom, we're first going to change the custom logo. We'll choose a file by clicking on Choose file. In our case, it's in Chapter11, in the first video and it's called 11_01-logo.jpg, click on that and then click Choose.
We also want to make sure we don't use the default logo since we're uploading this one. So far with added user pictures to posts and comments, we've added a search box and we've changed the default logo. That's a lot to do at once, so let's save the configuration and see how that looks. Aha! There's our new logo and there's our box. One more thing we're going to do is to change that little shortcut icon, so it's no longer what's called the Drupalicon. Instead it will be something that we like. So, we'll scroll down and do the same thing for the shortcut icon settings.
Again, we choose a file and it's in 11_ 01-shortcut.jpg. This file should be 16 pixelsx16 pixels and while it doesn't look like much here, you'll see when it shrunk down, it looks very much like our logo. We click on Choose, remember to take off the default shortcut icon and Save Configuration and there it is, it echoes our main logo. What about that other setting we made which allows people to show their user pictures in posts? Well, first of all let's go back to the main page and see where such a thing would go. Here we have a post by admin, here is one by fishyjoe, here is another one by admin. We've a lot of posts on this site by admin. So, in some admin, I'm going to upload my picture so that we'll see it next to all of those posts. To do so, I'd go to my own accounts and edit it and scroll down to the bottom where we have a place where we can upload a picture.
Choose the file and once again in our Exercise Files, we've something called Admin icon. Yes, that is me. Sad I know. We'll choose it and save it. Now, let's go back to the front page and we'll see my picture next to all of my posts, it looks good. Now, there is one feature on some themes, which isn't available on this one, but I'm going to show it to you. If we go back up to the top of the page and go to Administer and then back down to Themes, let's choose the Minnelli theme.
The Minnelli theme has an unusual feature which is based on some programming called farbtastic that lets you change colors. Scroll down, Save Configuration and let's take a look at the configuration options for Minnelli by clicking on Configure. If you see this color wheel, we can actually change the color set that appears. This one is called Cold Day and it has all sorts of blues, there is a sort of green theme here. Let's leave the green one on, just to see what it looks like. Scroll down to the bottom and Save Configuration. There we have it. As we go through the site, you'll see that everything has changed, the colors of the links and so forth based on that theme. However, since we didn't upload our special icon here or move the blocks over, everything else has been removed. I'm going to go back to Administer and Themes and switch back to Bluemarine, just so we can get back to where we were.
Scroll down to the bottom and save configuration. Finally, we will take a look at what it looks like in our friend fishyjoe's account. He's logged in the Firefox browser. Click on the icon to bring us back to the homepage, boom! He sees it pretty much the way we do. Finally, let's say you want to make changes that will affect all of the themes on your site, so that people can move from one theme to the other and still see for example this slogan, Where damp basements are a feature. We'll go back to our Administrative interface, go to Administer and Themes once again and click on Configure. You'll notice we've Bluemarine, Garland, Minnelli, the three themes we turned on, but we also have this Global Settings.
If we wanted user pictures in post to appear in every theme including themes we add later, we'd check this here and that would apply to every new theme that's added to our system. We're not going to do that, so we'll just scroll down to the bottom and say Save Configuration again. On second thought, I don't like having my picture on every post; it's a little too repetitive. So, we can go back at anytime and make any changes we want by going to Administer, Themes to whichever one is the default, in this case Bluemarine and let's remove that in posts, but we'll keep it in comments.
Scroll to the bottom again and save configuration. Back to the homepage and there we go. Finally, when you're done messing around with the configuration, I'd like to encourage you to look once again at your site and see if it looks as good as you really wanted. When I look at this site for example, I see it's not perfect, but I know I can make it better with just one or two small changes. The one change I can make very easily is to get rid of this dark blue block in here. You might remember, this is the mission statement and we can just take that out of this theme by going to Administer, Themes, Bluemarine, Configure and remove the mission statement.
Scroll down to the bottom and say Save Configuration. Now, that's something that only shows up on the homepage. So, we'll go back to the homepage here and good, it's gone. I rather like that better because then the most important thing in the page is this title up at the top which is what we really want to say to somebody. Let's go and take a look at how it looks on fishyjoe's account. Once again, we switch to Firefox, click on the logo and it's gone, good. I want to show you one other thing. We've been switching back and forth between Safari and Firefox for a while and if you switch back and forth, you'll notice that they look very slightly different. You see it especially in the type, look at the type Welcome to your new home as I switch. It grows in shrinks and the layout sort of grows in shrinks as well.
Your site will look slightly different depending on several factors. For one, which browser you're using, for another, the computer you're using, whether it's a Mac or PC or some other platform, third, the resolution of the monitor. So, I'd recommend that everybody take a good look at their site on several different monitors in several different computer configurations and several different browsers. The options you've to change a theme through its configuration windows really only scratch the surface. For more profound changes, you can change a theme's graphics or Style Sheets or just download a whole new theme. But as you can see you can do a lot with the themes that are built into Drupal.
Get unlimited access to all courses for just $25/month.Become a member