Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Configuring your theme

From: Drupal 6 Essential Training

Video: Configuring your theme

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.

Configuring your theme

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.

Show transcript

This video is part of

Image for Drupal 6 Essential Training
Drupal 6 Essential Training

66 video lessons · 31393 viewers

Tom Geller
Author

 
Expand all | Collapse all
  1. 4m 38s
    1. Welcome
      50s
    2. Using the example files
      3m 48s
  2. 28m 55s
    1. Drupal is a CMS
      7m 43s
    2. Choosing Drupal
      5m 32s
    3. Checking Drupal's requirements
      4m 26s
    4. Understanding the inner workings of Drupal
      4m 35s
    5. Meeting the Drupal community
      6m 39s
  3. 11m 28s
    1. Learning key terms in Drupal
      5m 20s
    2. Touring Drupal's interface
      6m 8s
  4. 34m 35s
    1. Installing WAMP and Drupal on Windows
      9m 41s
    2. Installing MAMP
      4m 34s
    3. Setting up the database on a Mac
      2m 2s
    4. Downloading and installing Drupal on a Mac
      6m 37s
    5. Troubleshooting installation problems
      3m 49s
    6. Automating updates with cron
      7m 52s
  5. 25m 37s
    1. Setting up clean URLs
      5m 52s
    2. Backing up your Drupal site
      3m 31s
    3. Restoring your Drupal site from backup
      4m 19s
    4. Wiping your Drupal installation clean
      2m 7s
    5. Updating Drupal
      9m 48s
  6. 15m 37s
    1. Using the Administration menu
      6m 21s
    2. Setting site information
      4m 50s
    3. Setting the theme
      4m 26s
  7. 35m 8s
    1. Understanding security and permissions
      7m 2s
    2. Controlling site access with user management
      3m 39s
    3. Creating users
      7m 58s
    4. Setting user profiles
      9m 40s
    5. Creating contact forms
      6m 49s
  8. 19m 19s
    1. Creating your site's basic info pages
      7m 13s
    2. Understanding page layout
      5m 40s
    3. Creating a flexible layout with blocks
      6m 26s
  9. 15m 35s
    1. Monitoring performance
      4m 52s
    2. Recovering from disasters
      7m 37s
    3. Improving administration skills
      3m 6s
  10. 41m 3s
    1. Understanding nodes
      6m 50s
    2. Creating basic content: Stories and pages
      7m 9s
    3. Enabling other content types
      9m 22s
    4. Adding blogs
      3m 49s
    5. Adding forums
      6m 56s
    6. Adding polls
      6m 57s
  11. 34m 50s
    1. Exploring content categories
      7m 45s
    2. Exchanging content via RSS
      9m 47s
    3. Using input filters
      7m 41s
    4. Managing comments
      9m 37s
  12. 38m 5s
    1. Configuring your theme
      11m 27s
    2. Changing your theme's graphics
      4m 59s
    3. Finding and installing a new theme
      8m 56s
    4. Understanding Cascading Style Sheets (CSS)
      5m 56s
    5. Deciphering CSS files
      6m 47s
  13. 22m 41s
    1. Finding modules
      6m 53s
    2. Unpacking and installing modules
      6m 30s
    3. Configuring modules
      3m 50s
    4. Implementing complex modules
      5m 28s
  14. 32m 12s
    1. Ensuring automated updates with poormanscron
      3m 11s
    2. Defining custom content types with CCK
      12m 54s
    3. Stopping spam using a CAPTCHA
      10m 43s
    4. Using a WYSIWYG text editor
      5m 24s
  15. 22m 18s
    1. Getting around with multilevel menus
      7m 26s
    2. Building custom menus
      5m 42s
    3. Creating easy-to-navigate books
      9m 10s
  16. 20m 19s
    1. Changing page templates with PHP
      8m 15s
    2. Using PHP in content
      5m 20s
    3. Implementing PHP snippets
      6m 44s
  17. 10m 15s
    1. Launching your site
      5m 52s
    2. Joining the Drupal community
      4m 23s
  18. 14s
    1. Goodbye
      14s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Drupal 6 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.