Customizing Your Site's Style - Adaptive Theme

Click here for additional Drupal documentation

Articles in this Guide:

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

On this page:

So far, you’ve seen the steps that our Postdoc Louise took to customize her Drupal Cloud site’s structure and add content. Now comes the fun part! In this article, you will learn how easy it is to take your site from the plain vanilla MIT Adaptive Theme to something that reflects your own style preferences.

Changing Your Site Name

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

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

In the Site Details area, Louise types in “Louise Torres” in the field labeled Site name and saves her configuration. The image below shows where to enter this new site name.

Changing Your Logo

Now that her site name is updated, Louise will replace the default Drupal Cloud logo with a picture to personalize her site. This task, as well as many others that modify the look and feel of the MIT Adaptive 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 her own, Louise scrolls down the the bottom of the page and clicks on Logo Image Settings to expand the area. She unchecks Use the default logo box, then clicks Choose File to upload her picture. Finally, she clicks the Save configuration button. The image below shows the steps for replacing the logo.

Changing a Theme’s Color Scheme

Louise’s site is looking pretty good now, but there are a couple more changes she would like to make. First, she would like her site to have a little more color. She decides to change the color scheme of the site to her favorite color, green. The MIT Adaptive theme has several built-in color schemes to choose from.

She goes back into the theme’s Settings which are found under the Appearance tab and scrolls down to the section labeled Color Scheme. Here, she could customize her own color scheme by setting colors for elements such as page background, text, and links. Instead, she clicks the drop-down menu beside the label Color set. Here are several pre-created color sets to choose from. She decides to go with the color “Green 2” and clicks the button labeled Save Configuration at the bottom. The next image shows the Color set area on the Appearance screen.

Tip: Feel free to experiment with different color sets. You can select one, save it, view your site, and go back into your theme’s settings to select another one. You can customize your colors using the color wheel. Click to select the colored box next to the element, for example Link. Then click a color in the outer circle. Finally, refine that color by clicking in the inner square.

After selecting the Color set she wants, Louise clicks the button labeled Save Configuration at the bottom.

Changing a Site’s Fonts

The final stylistic change Louise will make to her site is to change the fonts. She finds the text a little hard to read, so she will change the font face and increase the size. To begin, as she did in the previous two steps, she will click on the Appearance tab in the Admin menu and click on the link to the settings for her theme.

Louise will click on the tab labeled Fonts to change all of the site fonts to Open Sans, a popular Google Font. She will then navigate to the Font Size tab to increase it to the largest size. She will leave the Site Name the default size. The images below show how to complete these steps.

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

Click here for additional Drupal documentation