Home > Articles > Web Development > Content Management Systems

  • Print
  • + Share This
This chapter is from the book

Customizing Your Site's Design

Blue is nice. The Drupal mascot, Druplicon, is great. But the default theme says something about Drupal, not about you. Let's start by making your site reflect you. With a few quick changes to your site, you can turn the default theme into one that reflects who you are. Customizing the design of your site will be covered in much greater detail in Chapter 15.

Adjusting the Colors

You may want to adjust the main colors of your Web site. Use the following steps to recolor the default theme, Bartik. (I suppose I could insert screen shots here, but this is a black-and-white book and . . . well . . . you'd just get the same thing but in two shades of gray. It seems like a waste of ink, so I ask you to use your imagination instead.)

  1. From the administrative toolbar, click Appearance.
  2. For the theme labeled "default theme," click the link Settings.
  3. Adjust each of the colors according to your needs. Several color sets are available for you to pick from. These color sets are high-contrast and accessible to all Web site visitors.
  4. When you are happy with the preview, scroll to the bottom of the configuration screen and click "Save configuration."

Your site has been magically recolored. I promise.

Adding a Site Logo

The default logo is the Drupal mascot, Druplicon. To replace this icon with your own image, complete the subsequent steps. Your new logo will not be resized by Drupal, so make sure it's the right size before you upload the image.

  1. From the Administrative toolbar, click Appearance. For the theme labeled "Bartik 7.0 (default theme)," click the link Settings.
  2. Scroll down to the section titled Logo Image Settings. Deselect the check box "Use the default logo." A new configuration screen will appear.
  3. To upload an image from your computer, click the button Browse. You will be prompted to locate an image from your computer to upload. Select the image and click Open. (The text may differ slightly for different Web browsers.)
  4. Scroll to the bottom of the configuration screen and click "Save configuration settings."

Your new logo will now appear in the top left of the page.

  • + Share This
  • 🔖 Save To Your Account