Configuring Your Drupal Site Layout - Adaptive Theme

Click here for additional Drupal documentation

Articles in this Guide:

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

On this page:

Configuring Your Site’s Layout

In the first article in this Getting Started Guide, you read about the structure of a Drupal Cloud website and the default MIT Adaptive theme. In this article, you will see how a Postdoc, Louise Torres, begins to customize her newly created Drupal Cloud website by changing the location of some blocks of content and by deleting others.

Like many applications, you can complete the same tasks in different ways in Drupal. You can modify your site’s layout by moving or removing blocks. You can access the options for a block directly from the current page. Or, you can click Structure, then Blocks in the Admin menu.

Louise, our Postdoc building her personal website, will complete the following changes.

• Change to the MIT Adaptive Theme
• Remove the Recent News block from home page.
• Change title of “Recent Blogs” to “Recent Blog Posts”.
• Remove the Drupal logo from the footer.
• Move the main menu from the Sidebar first region to the Menu bar region.
• Move Touchstone login link to the footer region.

Changing to the MIT Adaptive Theme

Louise must select the MIT Adaptive theme as her underlying theme before she can begin to modify it. When she is logged in to her site, there is an Administrative menu at the top of her screen. Louise clicks the Appearance tab and locates the picture of the MIT Adaptive theme. It may be far down on the page in the disabled section. She then clicks Set default or Enable and set default depending on what's on the screen. Louise closes the Appearance screen by clicking the X at the top right. MIT Adaptive is now the theme being used by her site.

Working with Blocks Directly on the Page

Since News content is very similar to Blog content, our Postdoc decides that she does not need both on her website. She decides to include a blog on her site and needs to remove the Recent News block from the second sidebar region on her home page. To remove it, she will hover over the block and click the gear icon that appears. She will then click the option Configure block as shown in the image below.

After clicking “Configure block,” she is taken to an overlay screen with a form that contains several settings for that block. Here, she could change the title or select the pages on which the block is displayed. Since she wants to remove it from her home page, she changes the region from “Sidebar second” to “None” and clicks the “Save block” button at the bottom of the screen. Do not close the overlay screen without clicking this button, otherwise your changes will not be saved. The image below shows this overlay screen and the Region Settings area where you can move or remove the selected block.

She follows the same steps to change the title of the Blogs block from “Recent Blogs” to “Recent Blog Posts,” and to remove the Drupal logo from the footer. These steps are captured in the images below.

Changing the title of a block.

Removing the Drupal log.

Modifying Blocks via the Admin Menu

You can get a broader picture of the blocks included on your website by navigating to Structure -> Blocks on the Admin menu. The image below shows these steps in Drupal.

On the Blocks screen, you will see all of the blocks included with the MIT Adaptive theme. From here, you can move blocks from one region to another, set the region to “None” to remove them from your layout, or access other configuration settings. After customizing your blocks, click the button labeled “Save blocks” at the bottom of the screen to save your changes.

The images below show the final changes to be made for the layout of our example personal website. Louise wants her menu to be horizontal and located at the top of her web pages. She also wants to move the Touchstone login (Shibboleth authentication) link to the footer so it does not stand out as much on her site. Without these two blocks the first sidebar region will collapse for site visitors who are not logged in. When Louise is logged into her site, the first sidebar will display Content Management (quick links) she can use to build her site.

Louise is now done with configuring her site’s layout. The image below provides a summary of the changes she made. Next, she will work on adding content to her site.

Click here for additional Drupal documentation