We have setup your new site and have installed the Franklin Faculty theme. This site come 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.
The URL to manage your site should have been sent to you in an email. Please refer to that e-mail to get the link to your site.
The URL to manage your site is your web site url appended with /user.
Your user name is your MyID and your password is your 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.
We have placed a temporary header at the top of your page as a placeholder. It consists of an icon image and two lines of text. You will need to replace this information with your own.
Replacing or Removing the Icon
You do not need to use an icon in your header. You have a choice of removing it altogether or replacing it with an icon of your choosing.
The recommended size for an icon 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 icon, click “Appearance” from the Drupal Administration menu, then click “Settings” next to the 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.
If you want to remove the icon, simply backspace out the name of the current logo in the “Path to custom logo” field, and then click “Save Configuration.” When the icon 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 icon, 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 icon 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.” 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.
You can choose from 12 primary color schemes for your site. You can also select from 12 colors for the background and secondary color palettes.
Once you are logged into your site, click the “Appearance” from the menu at the top.
This will open a page with your available themes. The active theme is called Franklin Faculty Theme. Click the “Settings” Option next to that theme. See Image below
At the top of the Settings screen you will see the Color Picker area. (see screen below)
Clicking on a color scheme in the primary color scheme picker will set the default secondary and background color scheme to the default color for that theme. However you can manually choose a different color for each of the secondary and background color scheme choices.
Make sure to click “Save Configuration” to save your changes.
The contact information panel is located on the right hand column of your site. It is set with dummy information now. You will need to update that with your own information. To edit this information, put your mouse in the grey box area of the Contact Information panel on any page of your site. You will see a little “gear” icon. Click the gear, then click “Configure Block”. See Image below.
Once you click Configure Block, a window will come up and you can edit the information in that block in the “Block Body” section. The “Block Body” section is the only area you need to change. Then click “Save Block”
The most popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders 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 sliders in your homepage. We have preloaded the site with five sliders. You could delete the sliders we pre-loaded but it would be easier to simple replace the images and text of the existing sliders. If you don’t want five, you can delete the spots you don’t need.
Editing Existing Sliders
Sliders are simply pages specified as the content type “Slide”. Click on “Find Content”. See image below.
You will see a list of pages in your site. You will see five pages called Slide 1 through Slide 5. Those are the slide images you can change.
Click the “edit” link next to one of the sliders.
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.
Changing the Slider 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 and description for general visibility and screen readers. See the image below. 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 over the slide. Make sure to update the Title and Body text for the any slides you change the photos for so the messaging is relevant to the photo you upload.
Adding New Sliders
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 Body field, click browse to find an image on your local computer, and click Upload. Make sure to save the page. The slider will now show up in the slideshow rotation.
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 to a Page
There are several steps to adding an image to a page. Please follow these steps outlined below.
Step 1 Deciding where you want the image to go
When you are in the “editing” mode for a page, place your mouse cursor where you want an image inserted.
Step 2 Opening the file browser
Click the icon that looks like a picture frame. See image below
Step 3 Adding an image 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 on your computer that you want to upload
Clicking “upload” will bring up a box where you browse to find the image on your computer. See image below:
Click Browse and find the image on your computer. 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 you just uploaded
After you upload the file browser will show you the image you uploaded in the file list highlighted Blue, and the preview of the image you uploaded. To insert that image into your page, click the “Insert File” button at the top. See image below.
Step 6 Save your page with image
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
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. See image below.
Then make sure to save the page with the newly inserted image. Click the “save” button at the bottom of the page.
Video Tutorial for Adding an Image to a Page
If you would prefer to watch a video of adding an image, here is a link to a video tutorial - https://www.youtube.com/watch?v=Kg4ZVNHAHGo
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 Figure 10. 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 it belongs under. 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.