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

Customizing Your Site's Style - Adaptive Theme

Click here for additional Drupal documentation

Articles in this Guide:

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.

default site name

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.

access site information

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.

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

appearance settings tab

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.

logo settings

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.

change the color scheme

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.

change font

change size

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.

finished site

Click here for additional Drupal documentation

IS&T Contributions

Documentation and information provided by IS&T staff members


Last Modified:

May 05, 2016

Get Help

Request help
from the Help Desk
Report a security incident
to the Security Team
Labels:
c-drupal-get-started c-drupal-get-started Delete
get get Delete
getting getting Delete
started started Delete
customize customize Delete
customizing customizing Delete
font font Delete
logo logo Delete
color color Delete
scheme scheme Delete
size size Delete
site site Delete
name name Delete
sitename sitename 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