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

Adding Content to Your Site - DLC Theme

Click here for additional Drupal documentation

Articles in this Guide:

On this page:

In the previous section you followed along while Jack, the Content Manager creating our example website, customized the layout of his Lab’s site. Now, he will add the content. Jack has already planned out the content which you can view in the KB Article Getting Started Guide – Site Components. Find it at this web address - http://kb.mit.edu/confluence/x/jRdBCQ.

Modifying Existing Content

Your Drupal Cloud website comes with areas containing placeholder content on the Home page, the About page, and the Contact page. To modify this content, log into your website and click the Edit tab in the main content area. The image below shows this tab on the Home page.

click the edit tab

Adding Graphics

Jack is going to use a large image as the only content for the home page. Adding images is a process with several steps which includes first uploading your graphic image to your website and then selecting it for insertion. There are many clicks and pop-up windows to go through. The first step is to click the Edit tab to go into edit mode. Below are the steps you must take to insert an image file.

To get started, you should make sure that you are using the Full HTML text format. Then, place your cursor where you want to add your graphic, and click the Add Image icon. If you do not see this icon, you are probably using the Filtered HTML or Plain Text format. The image shows you where you can select the Full HTML text format.

add image

Note: It is best to resize and prepare your image completely outside of Drupal in your favorite image processing program. You can upload you first image to determine the size you need but be sure to size the image outside then upload the final version.

The Image Properties window will open. Click Browse Server to locate an image on your computer.

add image

Select the images folder to be certain the image will upload to that folder.

Then click Upload.

add image

Then click Choose file, locate your graphics file, select it and click Open. Now you can click Upload to upload your file.

add image

?

After the upload it will be included in the list at the right. The graphics file is uploaded and ready to be inserted. Select the image name and click Insert file.

add image

You're returned to the Image Properties screen where you can make adjustments before the graphic is inserted. Be sure to add Alternative text to your graphic to help those using screen readers when accessing your website. In this example Alt text like “Lab Homepage graphic” could be used.

Click OK and then Save.

add image

This is how your graphic image will look.

add image

?

Modifying the About page

Next Jack will modify the About page. While in Edit mode, he copies the text for the About page from the .rtf file or plain text file and pastes it into the HTML editor. Then he clicks Save.

If you will be cutting and pasting your content from a Word document, it is recommended that you save your file in the Rich Text Format with a .rtf file extension. Otherwise, the text formatting from your document will be pasted into your website. You can also paste text into a plain text editor (Notepad or TextEdit) to strip away any formatting before pasting. It is a best practice to style text using your theme’s settings and avoid the Style, Font, Size and color settings on the format toolbar.

paste text

The text on the About page stretches to the right edge of the page. There is nothing in the sidebar region on the right to prevent that from happening.

text spans page width

You can avoid that situation by selecting Persistent sidebars in the Appearance settings screen for the DLC theme.

set persistent sidebars

dlc settings tab

On the DLC theme Appearance page, scroll to the Toggle Display area and choose Persistent Sidebars.

Your page will hold a blank area for sidebars on the left and right even if there is no content.

persistent sidebars

persistent sidebars

Adding Pages

Jack needs two new pages for the website. He wants a page to list events and one to list research interests for the Lab faculty. He will need to add links to them on the site’s main menu.

To do this, he starts at the Admin Menu and clicks on Content, and then clicks on the link labeled + Add content. The image below highlights these steps.

add content

On the Add Content screen, he clicks on Basic Page as shown here.

choose basic type

On the Create Basic page screen, Jack enters “Events” for the Title. He will enter the content in a moment but first he clicks the option Provide a menu link for the page and then clicks the Save button. The next image highlights these steps.

click add menu link

There is now a link to the new Events page on the main menu. The image shows the result of adding this page.

events link in menu

Jack adds content to the Events page from a previously created text file.

finished events page

?

Using Tables to Position Content

For the content of the Research page, Jack would like to have images of faculty members with a research summary for each person. Tables are a simple means for accomplishing this design. Jack begins just as he did when he created the Events page, by creating a new Basic page..

To add a table Jack checks to make sure he has selected the Full HTML text format. Then he clicks the table icon in the toolbar. There are many options for Table Properties. Jack adds 5 rows with 2 columns per row. He also increases the width to 600 pixels and changes the border width to 0, which eliminates the border completely. Then he clicks OK.

table properties

?
Jack adds his images into each the table cells on the left and the text content on the right in the manner described earlier.

paste image

paste text into table

Before saving, Jack remembers to click the box to Provide a menu link so that Drupal will automatically create the menu link to the Research page.

When Jack saves and views the page, he notices that the images are not displayed in the proper width. He goes back into the edit mode for the Research page. He right-clicks, or Command-clicks on any of the table cells with an image. A pop-up menu appears. He clicks Cell, then Cell Properties.

cell properties

In the Cell Properties box Jack sets the cell width to 100 pixels – the appropriate width for the size of his headshot images. He only needs to do this for one table cell to change the width of the entire column.

enter cell width

After saving he sees that his images fit nicely within the table.

finished researchpage

Adding News Items

News items are useful for summarizing and linking to actual articles on the internet. Adding a news item is very similar to adding a page. From the Admin menu click on Content, then + Add content. Select News for the type.

new content news type

Jack adds a Title, sets a date, adds a URL to the original news article online and adds a text description. He then clicks Save. Jack adds several more news articles.

add content for news item

Remember, News entries can be accessed from the Main menu or the blocks in the Sidebar second region on the right.

access news here

The News page looks like this.

access news here

And an individual news item looks like this. Note the link to the original article.

access news here

?

Customizing the Main Menu

Since Jack will not be using the Blogs feature or Contact page, he needs to remove them from the main menu. He also wants to rearrange the link to the Research page. To do this, he will click Structure, then Menus from the Admin menu. Then he will click list links as highlighted in the image below. Doing so, he will be able to enable or disable links, delete them, and move them.

click structure then menus

click list links

This image shows how to remove the Blog and Contact links and move the link to the Research page. Jack will deselect the Enabled option beside Blog and Contact and drag and drop the Research link to its correct position.

edit menu links

The image below shows the final results Jack gets after completing all of these steps. He’s added all of the content and is now ready to put the finishing touches on the Lab’s site by making some stylistic changes.

finished adding content

Click here for additional Drupal documentation

IS&T Contributions

Documentation and information provided by IS&T staff members


Last Modified:

April 26, 2016

Get Help

Request help
from the Help Desk
Report a security incident
to the Security Team
Labels:
drupal drupal Delete
getting getting Delete
started started Delete
dlc dlc Delete
theme theme Delete
add add Delete
content content Delete
c-drupal-cloud c-drupal-cloud 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