We have setup your new site and have installed the Franklin Open Theme. This site is pre-loaded with some dummy information. There are several areas you will want to update in addition to creating your own pages and removing the dummy pages. This document will walk you step-by-step through the process. We are not able to offer you hands-on direct support. There will be links in this document for you to reference if you need more help.
Important notice regarding data backup and recovery
Franklin OIT takes a nightly snapshot of the entire Faculty and Research Lab server in its entirety in the case of catastrophic drive failures. These backup copies are only meant to be used for system wide recovery. Franklin OIT is not able to restore content from a single faculty or research lab site.
Before you make significant changes to your site, we recommend you save down a copy of your site locally for reference purposes in the case that you delete or alter content accidentally. You will be able to view your site offline with the local copy to find material you may have deleted or altered before the change. You will have to manually copy and paste the previous content on your live site but at least that provides a small safety net for you.
For directions on how to make a local copy of your site, please view our instructions.
Step 1: Logging in to Your New Site
To manage your site append /user to your URL.
Your user name is your MyID (the same as your Athena ID) and your password is the password you use with your MyID.
As a logged in user on your site, you will see an administration menu at the top of your site. You can use this menu to Add Content or Find Existing content.
Once you are logged into your site, you will see tabs that say View and Edit in the content area on any editable page. Click the Edit Tab on any page you wish to edit, and you will have the ability to edit the content on that page. Make sure to click "Save" to save any changes you make. There are more specific instructions about how to edit pages later in this document.
The remainder of this document will tell you how to customize your new site and provide instructions on each step.
Step 2: Updating the Header of the site
We have placed a temporary header at the top of your page as a placeholder. It consists of an logo image and two lines of text, the site name and the slogan. You will need to replace this information with your own.
Replacing or Removing the Logo
You do not need to use an logo in your header. You have a choice of removing it altogether or replacing it with an logo of your choosing.
The recommended size for an logo is 102 pixels wide by 84 pixels high. We recommend using a png, gif or jpg file.
To access the area where you change the logo, click "Appearance" from the Drupal Administration menu,
then click "Settings" next to the Franklin Open (Skeleton) Theme.
Scroll down on the settings screen about ¾ of the way down the page until you come to a "Logo Image Settings" section. See Image below.
This is the section of the Appearance page that let you toggle display elements on and off, upload images to use as a logo, and upload an image to use as a shortcut icon (usually a very, very small GIF file).
If you want to remove the logo, simply backspace out the name of the current logo in the "Path to custom logo" field, and then click "Save Configuration." When the logo is removed the text will move all the way over to the left. You can go back to your homepage and reload the page to see the change. Changing the text is handled in a different area of the site and will be detailed in the next section.
If you want to replace the logo, click the Browse button under Upload Logo image. Find the image you want to use from your hard drive and choose it, then click "Save Configuration". You should now have your own logo on the site. You can go back to your homepage and reload the page to see the change.
Changing the header text
Click "Configuration" from the Drupal administration menu.
Then click "Site Information."
The section at the very top of this next page called Site Details is where you will edit the text for your header. Replace the text under Site Name with your name, name of your project, or name of your lab or whatever you want the first line of the header to say. Replace the text under Slogan with your Department name or Affiliation or whatever you want the second line of your header to say. You can leave e-mail address as is, or change to your own e-mail address. This field isn't really used in this particular site configuration.
Make sure to click "Save Configuration" at the bottom of the page. There is no need to change any other settings on this page. You can go back to your homepage and reload the page to see the change.
Step 3: Update Slideshow Images on Homepage
The most popular web design trend over last couple of years is a sliding horizontal panels also known as Slideshows or Carousels. It's a very effective method to increase the web site usability and engage the user with imagery or targeted messaging.
Your new web site comes with the ability to have Slideshows in your homepage. We have preloaded the site with five Slides. You may unpublish the slides we pre-loaded but it would be easier to simple replace the images and text of the existing slides. If you don't want five, you can unpublish the slides you don't need.
Editing an Existing Slideshow
Slides are simply pages specified as the content type "Slide". Click on "Find Content". See image below.
You will see a list of all existing pages in the site. You will see five pages called Slide 1 through Slide 5. They may not all be grouped together. Those are the slide images you can change.
Click the "edit" link next to one of the slides.
Change the Image
Scroll down to the area for Image. See image below.
Remove the existing image by clicking the "Remove" button. The "Remove" button will be replaced with a "Browse" button. Click browse, find the image you want to use, and then click "Upload". Make sure to click "Save" at the bottom of the screen after you upload. In the "Alternate text" box you ought to add a description of your slide for use by screen readers.
Changing the Slide Text
For accessibility purposes, there are a couple of other things you need to pay attention to. You need to properly label your slide with a title for general visibility and screen readers. We created this image composite to show how the Title of the slide and the Body content you enter for each slide will show up in the overlay on the slide. Make sure to update the Title, Alternate text and Body text (when applicable) for any slides where you have changed the photos.
Adding a New Slides
To add a new slide, click "Add Content" from the Drupal menu. See Image below.
Then choose "Slide" as the content you want to add.
Fill in the Title field, the Alternate text, the Body field (if necessary), click browse to find an image on your local computer, and click Upload. Make sure to save the page. The slide will now show up in the slideshow rotation provided you don't already have five published. The rotation is limited to five published slides, feel free to unpublish unwanted slides.
Step 4: Manage Site Pages
We have pre-loaded your site with several dummy pages that seem to be the most popular pages on faculty web sites. You can delete these pages and add new ones, or you can use them as is, and just edit the content on the pages.
Editing an Existing Page
You can edit the content on any page by viewing the page within your browser as if you were a regular user, and clicking the "Edit" tab. See Image below.
You can also click "Find Content" from the Drupal menu. Just look for the page you want to edit in the pages list on the Find Content page.
After you make the changes to the page that you want, click Save.
Add A New Page
To add a new page, click "Add Content" from the Drupal menu. See Image below.
Then choose whether you want to add a Basic Page, a News Article, or a Slide for the slideshow.
Just enter the information in the appropriate fields and save.
This tutorial will walk you through adding a new Basic page if you need additional assistance:
Adding Images or Documents to a Page
There are several steps to adding an image or a document to a page. Please follow these steps outlined below.
Step 1 Deciding where you want the image or document link to go
When you are in the "editing" mode for a page, place your mouse cursor where you want an image or document link inserted.
Step 2 Opening the (IMCE) file browser
Click the button that looks like a picture frame. See image below
Step 3 Adding an image or document to the file browser
A file browser pop up will open. Click the "upload" option in the file browser. See image below:
Step 4 Finding the image or document on your computer that you want to upload
Clicking "upload" will bring up a box where you browse to find the image or document on your computer. See image below:
Click Browse and find the image/document on your computer. If you are uploading an image, I recommend choose the checkbox for "large" to have the system automatically create a smaller size image for your page. 180x180 is a pretty good size for an image embedded in a web site. If your original image is exactly the size you want it, you do not need to check any of the thumbnail options.
Next click "upload".
Step 5 Inserting the image or document you just uploaded
After you upload the file, the file browser will show you the image/document you uploaded in the file list highlighted Blue, and if its an image, the preview of the image you uploaded. To insert that image or document into your page, click the "Insert File" button at the top. See image below. An image upload will show the image but a document upload will just show a linked filename. You may want to change the text that is seen on the page from the file name to a more common sense phrase or word.
Step 6 Save your page with image or document
Then you will be taken back to your edit screen and you will see the image placed in the page where you had placed your mouse cursor. See image below:
Step 7 Add Alternative Text Tag if you uploaded an image
New laws require you make your Website accessible. One aspect of creating an accessible site is to label all images with descriptive text that screen readers will read to visually impaired users. To add an alt tag to your image, "right-click" on the image while you are still in the "edit" view of your page. Then choose "image properties". See image below
Then on the Image Properties pop up, enter a description of the image as if you were describing it to a friend that wasn't looking at it. Please note the other properties that you may set for images.
Then make sure to save the page with the newly inserted image. Click the "Save" button at the bottom of the page.
Step 5: The News page
This page is a list of the content type called "article." To add content to this list, make sure you are logged in, then go to "add content" and select "article." When you save the content, it will appear here. If you want to edit content listed here, click on the title of the content and then click on the "edit" tab.
Step 6: Organizing the Menu Structure
When you create a Basic page, there is a section at the bottom of each page where you have to enable the page to show in a menu. See Image below.
The checkbox for "Provide a menu link" is not checked by default, because sometimes you may want to add a page that doesn't show up in the navigation.
If you click that checkbox you will be presented with a screen that looks like the one above. The Menu Link Title will automatically be set to whatever you have entered in the Title field in the main content area.
You will also need to choose the parent item. If you are trying to create a top level page leave it as <Main menu>. That will place the page name in the top navigation bar, assuming you don't have too many pages listed already. There is a limit to the number of pages you can have in the top level bar. If you want it to be under an existing page, choose the page in the pull down menu next to "Parent item." This new page will then be listed in the left hand navigation panel when you navigate to the page you placed it under, or any other page under that same parent.
Step 7: Dealing with Blocks (and Regions)
Working with Blocks Created by a View
Several items displayed on your website are in Blocks which are created by a View. The easiest way to move or remove these items is to edit the Blocks on your site. As an example, let's go through the process of turning off the Slide Show on the front page.
First, use your mouse to hover over the upper left corner of the Slide Show on the front page:
Now you will see the configuration window for the Block. There are two things to note, the Region settings and the Pages section:
In the pull-down menu for "Region settings" choose "None." This will remove the Slide Show from view without deleting it (deleting content is a bad thing to do: unpublish or remove from display is better). The same method will also let you change the Region in which the Block is displayed.
If you still want a Block to be seen would rather restrict the display to certain pages, the "Show block on specific pages" is where you may control that. Please note the instructions under the box.
Working with Regular Blocks
There is a very quick way to edit the contents of a Block which is not created by a View (Blocks created by Views start with "View:" when seen on the Block list or when you open the Block configuration).
First, use your mouse to hover over the upper left corner of the Block (e.g. Franklin College logo):
Click on the "Configure block" that appears under the cog:
Now you will see the configuration window for the Block. There are three things to note, the Block body, Region settings and Pages.
Block body (content)
This is where you may change, add or remove text and image content using CKEditor.
This is where you may change the Region a Block is displayed in. Choose "None" to keep a Block from being displayed.
Pages (where the block is displayed)
If you still want a Block to be seen, this section allows you to set which pages on your site a Block is displayed on.
This generalized diagram displays the relative location of the Regions available in this theme. The Region names are in bold. Several elements of the site (names are in parentheses) are in the Region in which they appear.
Drupal 7 - Working with Basic Pages (links, images, pdfs) (Franklin OIT Self Service Website)