Lab Website Drupal Guide

NOTE: The following guide was designed for websites built in the Drupal 7 platform on campus. This platform has been replaced on campus with the new Drupal 9 platform, which provides updated branding, features, service, and security, as well as an updated user experience. For guides and helpful instructions on the new Drupal 9 platform, please refer to the Drupal 9 SiteNow documentation.

Creating Content

Files & Images

Menus

Home Page

Content Overview

Site Preferences

Text Editor

Creating content

Click on the "Add content" link in the upper left corner.  Here you can choose to create an Announcement, Featured Slide, Page, or Profile.

Announcement:  use this content type to promote a news, event, or publication on your website. 
Featured Slide: use this content type to create a slideshow on your website.
Page: use this page for most of the content on your website. 
Profile: use this content type to create profile pages for the people in your lab. 

Add Content

 

Creating a new page

Fill out the title field and body:

Lab Website Guide

 

Creating a "Profile"

Click on the "Add content" link in the upper left corner.  Here you can choose the Profile content type.  Fill out the fields that you want to use and save the page:

Create a profile

Once you have created a few profiles you will want to create a new "Page" to list all of the profiles:

Create a new page

Once you have created the new "Page" content, click on the "customize this page" button:

customize this page

Click on the plus symbol in the content area:

add content

Select "Profiles List" from the "Profiles" tab in the pop-up window:

pop-up window

Here, you can select which fields to display for each profile:

configure fields

Click "finish" when you are done customizing the display.

content in place

And click "save" to save your changes:

Save button

Once the page is saved, you can organize the display by clicking on the gear icon that you will see when you hover over the page:

gear icon

Click on the gear and select the "order view" link:

Order view

This will take you to a page where you can drag and drop each profile above or below another profile:

order the display

When you are finished click on the "save" button in the lower left-hand corner.

 

Creating a "Featured Slide"

Select the "Featured Slide" content type and upload an image.  Once you click "save" the image will appear on the home page slideshow.

Featured Slide

 

 

Uploading a file into the content area

media icon

Click on the media icon that features the icon of stacked images in the last row of the editor:

 

lab website guide

Here you can upload a file.  Or you can click on the "Library" tab to view the files in your media library.

lab website guide

Once you select the file to place in the contact area, click on the "submit" button.

File submit

Once the file has been placed into the content area, you may change the text of the file by highlighting some text in the middle of the link and adding your new text:

Highlight Text

Delete any text outside of your new text that you want to use in the link:

Final Link Text

 

 

Uploading an image into the content area

media icon

Click on the media icon that features the icon of stacked images in the last row of the editor:

 

lab website guide

Here you can upload a file or image.  Or you can click on the "Library" tab to view the files in your media library.

lab website guide

 

Aligning an image to the left or right

Once the image is inserted into the page, double-click on the image to adjust the alignment and padding settings:

lab website guide

Here you can adjust the Image Properties.  Add HSpace or VSpace to add padding around your image.

lab website guide

 

Adding spacing around an image

Double click on your image to adjust the image properties:

Image properties

Here you can set the Alignment to the right or left and add some padding to the top or bottom of the image with HSpace and VSpace.  

You can adjust the spacing further by clicking on the Advanced tab to adjust the margin and padding around the image located in the Style field:

image properties

Click "OK" and you will see that your image has more spacing around the edges:

Final product

 

Using the display options for images

The "Default" display option for placing your image in the content area will display the image without any modifications:

Default display option

If you use the "Teaser" display option, your image will appear cropped at a width of 200 pixels and will link to the original image size:

Teaser image style

The image will appear auto-cropped at 200 pixels wide:

Thumbnail photo

And the image will link to a full size version:

Full size image

Inserting a horizontal rule for extra spacing

On a page with a lot of images, the editor and published view will look different.  To make the editor view and the published page view look consistent try inserting a horizontal line between areas of text and images:

Editor view

Place your cursor after the text and image and click on the "Insert Horizontal Line" button in the editor: 

horizontal line

This will insert a horizontal line onto the page:

Editor view with horizontal line

 

 

Adding the page to the menu

In the "Menu settings" tab at the bottom of the page you can check "provide a menu link" to attach your page to the main menu:

lab website guide

 

Attaching a child page to the main menu

If you would like to include a page as a child page of a main menu item, add your new page to the parent item in the menu settings:

Child Page

The page will automatically appear as a link in the sidebar of the parent and child pages:

sidebar example

 

Adjusting your site name and slogan

site name

To adjust the site name and slogan that appear in the header of each webpage, click on the "Site Information" link in the top toolbar:

lab website guide

 

Adjust the color of your theme

There are a few color options for the theme.  There is the "Default" setting which is black and white.  There is a "Black and Gold" setting which has a white background with black and gold accents.  And finally, there is a "Black & Gold Reversed" setting which features white text on a black background with black and gold accents.   To adjust this setting click on the "Theme Settings" link in the top toolbar and scroll down to "Color Settings".

lab website guide

 

Uploading an image to the site header

To upload an image to the header of your website click on the "Theme Settings" link in the top toolbar and scroll down to the "Main header image file settings."  Here you can choose a file and then click "save" at the bottom of the edit screen to upload the image. 

lab website guide

 

Display settings

In the "Toggle Display" area at the top of the theme settings there are a few checkboxes to alter the appearance of your website's header.

lab website guide

 

Content overview

To view all of the content pages on your site, click on the "Find Content" button in the top menu.

content list

 

Editing the home page

Click on the "customize this page" button at the bottom of the page:

Home Page

 

Scroll down to the main content region and click on the plus symbol:

panel regions

 

Choose the "New custom content" link in the sidebar of the popup window:

custom content

 

Fill out the custom fields and click "Finish":

add custom content

 

Click on the "Save" button at the bottom of the screen when you are finished:

custom content in panels

 

After saving, you might need to refresh the page to get the slideshow to appear.

final product

 

Removing the home page slideshow

Go to the home page of your site and click on the "customize this page" button at the bottom of the page:

customize this page button

Then click on the trash icon located above the slideshow:

Trash icon

Press "ok" to delete the slideshow.  Then save the layout using the bottom "save" button.

Remove warning

 

 

Creating a link

Highlight the text that you want to link and click on the link button in the editor:

Link

The first option that appears is an auto-populate field that will link to other pages on your site:

Internal path link

The second "link type" option is a URL.  You can paste in a URL into this field:

Link path

The third "link type" option is to link to anchor in the text.   If you have created an anchor it will appear in the "select an anchor" list:

Anchor link type

The last "link type" option is for E-mail.  You can add the e-mail information in the provided fields:

Email link

Creating an anchor

To create an anchor, place your cursor next to the area of text where you want the anchor located and click on the flag icon in the text editor:

Anchor flag

Give the anchor a name:

Anchor popup window

Press "ok" and you will see that the anchor has been added:

Anchor in editor example

 

Creating a table

To create a table, click on the table icon in the editor:

table icon

Specify the number of rows and columns and click "ok":

Table popup window

After you click "ok" you will see the table in the editor:

Table in editor view

 

Edit content in full-screen mode

Click on the maximize icon in the text editor:

Maximize icon