Articles in this Guide:
- Getting Started Guide - Portfolio Site (Adaptive Theme) (this page)
- Configuring Your Drupal Site Layout - Adaptive Theme
- Adding Content to Your Site - Adaptive Theme
- Customizing Your Site's Style - Adaptive Theme
On this page:
In this Getting Started Guide, you can follow along as a personal website is built using the MIT Adaptive Theme. The MIT Adaptive theme allows for easy customization. Whether you are building your own personal website or a simple site for a club or group, this Guide will give you what you need to be up-and-running in a small amount of time without using any HTML or CSS code.
The MIT Adaptive theme is not the default theme so you will need to switch to this theme when you get your site. Instructions are included later in this document.
There are four sections in this Getting Started Guide. Each is a separate article. You can access the other articles from links at the top of each page. You can also download the full PDF version of the text of these articles. Click here for a PDF version of this guide. Click here for the raw Components of the Site if you'd like to build this sample site as you read.
You can click the green button below to request a site which will be created for you within 24 hours. You'll be sent to another web page where you'll need to login using Touchstone to proceed. Then you'll be asked to work through 4 Steps to complete and submit a form.
Don't forget to come back here. You can begin planning your site and reading through this Getting Started Guide while waiting for your site to be ready. When your site is ready, you can use this guide to build a sample site. Then that sample site can easily be turned into your personal customized site using what you learn here.
Below is an image of the form you need to fill out to request your website. You will need to include a desired URL, or address. In this example, the Postdoc requesting a site is named Louise Torres, so she requests the URL ltorres.mit.edu. Next, select “A personal site.” This will enable the MIT Adaptive Default theme for your site. Then, select “A new website” and click on the button labeled “Contact info.” On this second form, you will enter your name and email address and finish the request process by confirming your details. After completing the process, you will receive an email confirming that your request was received, and a second email telling you when your site is ready.
After clicking on the Create a Site button, Step 1 presents you with some helpful advice for getting started with your site. These steps are included here for your convenience.
- Create a site map This is a road map that shows how all your pages connect. It will help you identify gaps you’ll that need to fill.
- Assign someone to start writing your content. Be sure to set a deadline because as soon as your request gets approved, you can start building your site — and you’ll obviously need copy to fill it.
- Gather and organize all your media and artwork. If you want to customize your site with more than just fonts and colors, make sure you have easy access your digital media files, such as logos, photos, illustrations and video.
- For DLCs: Learn about the use of MIT's graphic identity. If you need assistance with branding for your DLC, contact the advisors at Communication Production Services.
In the example given in this Getting Started Guide, the Postdoc building her website has all of her needed content in a document, including her sitemap, graphics, and text. It is a good idea to have some basic content to work with when setting up your site, including the pages you want to include.
Before creating your site, you should have a basic understanding of how content is presented in Drupal using Themes, Regions, and Blocks.
A theme provides a default look and feel for your website that can be customized. You can change text and link colors, fonts, background colors, etc. A theme also provides a default content structure that can be customized. Pages are split into different regions such as a header, sidebars, a main content area, and a footer. Inside these regions are blocks like a main menu or a search bar. You can customize the layout of your site by moving Blocks to different regions. For example, if a theme places the main menu in a left-hand sidebar, you could move it to a right-hand sidebar or the header.
To build this site our Postdoc Louise will need to use the MIT Adaptive theme. Since this theme is not the default theme, she will have to change themes before starting work on her site. Here are the instructions Louise will follow.
1. Click Appearance, then the List tab.
2. Click Set default next to the desired theme.
3. Click Save configuration.
Some themes may need to be enabled before you can use them. Find the theme on the page then click Enable and set default next to the theme you want.
Your initial website will look very similar to the one shown in the image below. The sections that will be modified are highlighted in red. This is the default MIT Adaptive theme which contains a Home page, an About page, a Contact page, a Blog, and a News section.
The second image below shows the customized website we will be building throughout the rest of this Getting Started Guide. Even without using HTML or CSS, you can personalize your website in many ways to make it your own.
It is highly recommended that you use the MIT Adaptive theme and modify it for your personal or group website rather than using another theme. The MIT Adaptive theme is responsive, meaning that it will look good and function properly on large monitors and laptops as well as tablets and smartphones. It also includes the MIT logo by default. The image below illustrates how Drupal Cloud sites built using the MIT Adaptive theme respond to the size of the screen.
The rest of the articles in this Quick Start Guide cover customizing the MIT Adaptive theme. Specifically, you will learn how to:
- Change the region of your main menu.
- Change the location of your Touchstone login link.
- Remove links to the “News” section.
- Remove the Drupal logo in the footer.
- Modify content on an existing page.
- Add a new page.
- Add a blog post.
- Change your color scheme.
- Change your fonts.