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
- Uploading a file into the content area
- Uploading an image into the content area
- Aligning an image to the right or left
- Adding spacing around an image
- Using the display options for images
- Inserting a horizontal rule for spacing
Menus
Home Page
Content Overview
Site Preferences
- Editing the site name and slogan
- Adjusting the site colors
- Adjusting the theme settings
- Uploading an image into the site header
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.
Creating a new page
Fill out the title field and body:
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:
Once you have created a few profiles you will want to create a new "Page" to list all of the profiles:
Once you have created the new "Page" content, click on the "customize this page" button:
Click on the plus symbol in the content area:
Select "Profiles List" from the "Profiles" tab in the pop-up window:
Here, you can select which fields to display for each profile:
Click "finish" when you are done customizing the display.
And click "save" to save your changes:
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:
Click on the gear and select the "order view" link:
This will take you to a page where you can drag and drop each profile above or below another profile:
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.
Uploading a file into the content area
Click on the media icon that features the icon of stacked images in the last row of the editor:
Here you can upload a file. Or you can click on the "Library" tab to view the files in your media library.
Once you select the file to place in the contact area, click on the "submit" button.
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:
Delete any text outside of your new text that you want to use in the link:
Uploading an image into the content area
Click on the media icon that features the icon of stacked images in the last row of the editor:
Here you can upload a file or image. Or you can click on the "Library" tab to view the files in your media library.
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:
Here you can adjust the Image Properties. Add HSpace or VSpace to add padding around your image.
Adding spacing around an image
Double click on your image to adjust the 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:
Click "OK" and you will see that your image has more spacing around the edges:
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:
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:
The image will appear auto-cropped at 200 pixels wide:
And the image will link to a full size version:
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:
Place your cursor after the text and image and click on the "Insert Horizontal Line" button in the editor:
This will insert a horizontal line onto the page:
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:
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:
The page will automatically appear as a link in the sidebar of the parent and child pages:
Adjusting your site name and slogan
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:
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".
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.
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.
Content overview
To view all of the content pages on your site, click on the "Find Content" button in the top menu.
Editing the home page
Click on the "customize this page" button at the bottom of the page:
Scroll down to the main content region and click on the plus symbol:
Choose the "New custom content" link in the sidebar of the popup window:
Fill out the custom fields and click "Finish":
Click on the "Save" button at the bottom of the screen when you are finished:
After saving, you might need to refresh the page to get the slideshow to appear.
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:
Then click on the trash icon located above the slideshow:
Press "ok" to delete the slideshow. Then save the layout using the bottom "save" button.
Creating a link
Highlight the text that you want to link and click on the link button in the editor:
The first option that appears is an auto-populate field that will link to other pages on your site:
The second "link type" option is a URL. You can paste in a URL into this field:
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:
The last "link type" option is for E-mail. You can add the e-mail information in the provided fields:
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:
Give the anchor a name:
Press "ok" and you will see that the anchor has been added:
Creating a table
To create a table, click on the table icon in the editor:
Specify the number of rows and columns and click "ok":
After you click "ok" you will see the table in the editor:
Edit content in full-screen mode
Click on the maximize icon in the text editor: