Customizing Your Drupal Site's Style - DLC Theme

Click here for additional Drupal documentation

Articles in this Guide:

• Getting Started Guide - Lab Site (DLC Theme)
• Configuring Your Drupal Site Layout - DLC Theme
• Adding Content to Your Site - DLC Theme
• Customizing Your Site's Style - DLC Theme (this page)

On this page:

So far, you’ve seen the steps that our Content Manager Jack took to customize the Darcy Lab’s site structure and add content. In this section, you will learn how to change your site name, logo, and color scheme, making the MIT DLC Theme reflective of your own style preferences.

Changing Your Site Name

The first style element that Jack will customize is the site name found at the top of the Home page. By default, the site name is the custom URL you entered when requesting your site. In this example, the URL is http://darcylab.mit.edu, and the site name at the top of the page is “darcylab.” Jack will change it to “The Darcy Lab” so that it will make more sense to visitors. The image below shows the area that will be customized in this section.

To change the name of his site, Jack opens the Admin Menu and clicks Configuration. On the Configuration screen, he clicks on the link labeled Site Information in the System category. The image below shows these navigation steps.

In the Site Details area, Jack types in The Darcy Lab in the field labeled Site name and saves the configuration. The image below shows where to enter this new site name.

Changing Your Logo

Now that the site name is updated, Jack will add a logo to personalize the site. This task and others that modify the look and feel of the MIT DLC theme, are performed by navigating to the Appearance tab in the Admin menu and clicking on the link labeled Settings for that theme. The image below shows how to get to the Settings area.

To replace the default logo with a logo for the Lab, Jack scrolls down the bottom of the page and clicks on Logo Image Settings to expand the area. He unchecks Use the default logo box, then clicks Choose File to upload the new logo. Finally, he clicks the Save configuration button. The image below shows the steps for replacing the logo.

Changing a Theme’s Color Scheme

The Lab’s site is looking pretty good now, but there is one more change to make. Jack would like to have a different color scheme. The MIT DLC theme has several built-in color schemes to choose from.

He goes back into the theme’s Settings which are found under the Appearance tab and finds the drop-down list labeled Styles. Here are several pre-created color sets to choose from. He decides to go with the very simple style named “Slate” and then clicks the button labeled Save configuration at the bottom. The next image shows the Style drop-down menu on the Appearance screen.

Tip: Feel free to experiment with different color Styles. You can select one, save it, view your site, and go back into your theme’s settings to select another one.

With this last change made, Jack is done customizing his Lab’s website. Without having to use any HTML or CSS code, he was able to modify the DLC default website so that it had the layout, content, and style that the Lab needed. The image below shows the final results of all of Jack’s work on the website.

Click here for additional Drupal documentation