Access Keys:
Skip to content (Access Key - 0)

Customizing Your Drupal Site's Style - DLC Theme

Click here for additional Drupal documentation

Articles in this Guide:

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.

original name to be changed

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.

original name to be changed

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.

new 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.

change logo

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.

change 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.

choose new color style

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.

final site is done

Click here for additional Drupal documentation

IS&T Contributions

Documentation and information provided by IS&T staff members


Last Modified:

April 26, 2016

Get Help

Request help
from the Help Desk
Report a security incident
to the Security Team
Labels:
drupal drupal Delete
getting getting Delete
started started Delete
dlc dlc Delete
theme theme Delete
style style Delete
c-drupal-cloud c-drupal-cloud Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.
Feedback
This product/service is:
Easy to use
Average
Difficult to use

This article is:
Helpful
Inaccurate
Obsolete
Adaptavist Theme Builder (4.2.3) Powered by Atlassian Confluence 3.5.13, the Enterprise Wiki