We have setup your new site and have installed the Franklin College Branded theme. This site comes 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.
- Step-by-step guide
- Step 1: Logging in to Your New Site
- Step 2: Create and Upload your header image
- Step 3: Select Your Theme Colors
- Step 4: Update Contact and Department Information
- Step 5: Update Slideshow Images on Homepage
- Step 6: Manage Site Pages
- Editing an Existing Page
- Add A New Page
- Adding Images or Documents to a Page
- Step 1 Deciding where you want the image or document link to go
- Step 3 Adding an image or document to the file browser
- Step 4 Finding the image or document on your computer that you want to upload
- Step 5 Inserting the image or document you just uploaded
- Step 6 Save your page with image or document
- Step 7 Add Alternative Text Tag if you uploaded an image
- Step 7: The News page
- Step 8: Organizing the Menu Structure
- Step 9: Dealing with Blocks (and Regions)
- Related articles
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: Create and Upload your header image
We have placed a temporary header image at the top of your page as a placeholder. You will need to replace this image with your own (note: this image is a .png with a transparent background).
The size for the header image is 552 pixels wide x 92 pixels high. You will need to create an image in those dimensions.
There are no real graphical design standards for the header â?? just use your best judgment. The only standard is the size requirement of 552x92 pixels. You will need to use a .gif, .jpg, or .png file type when producing your image.
Creating an Image
There is a web site, http://www.bannerfans.com, which will allow you to create a simple text banner. It is a free service. We cannot offer you any training on how to use it. It is fairly straightforward.
Alternatively, if you have any graphics programs you are welcome to create it on your own computer.
Once you have created an image, and saved it to your computer, you can replace the existing image with your own through the following process.
Uploading your image
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
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.
Click the Browse button under Upload Logo image. Find the image you just created and Choose it, then click "Save configuration". You should now have your own header image on the site. If you so choose, you may disable the header image by unchecking the box under "Toggle Display." Remember to click "Save configuration" to commit your change.
Step 3: Select Your Theme Colors
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 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.
Step 4: Update Contact and Department Information
Your Contact Information Panel
The contact information panel is located on the right hand column (Sidebar second is the region name) of your site. It is set with placeholder information. 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 "cog or gear" icon. Click the cog/gear, then click "Configure block". See Images 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"
Your Departmental Settings (including the "Show Your Support" URL)
The Departmental Settings appear at the bottom of the pages on your site. When you have logged in to your site go to Appearance on the administrative menu across the top.
Next, click on the Settings link by Faculty Theme.
On that page you will see the Color Picker at the top, the next section is Toggle Display. At the bottom of Toggle Display you will see a link to Departmental Settings.
Click on that and you will see the form that provides the information for the bottom of the pages on your site; as well as, the URL for the "Show Your Support" element in the header of your site.
Step 5: 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 Existing Slides
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.
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 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 (see image above) for the any slides you change the photos for so the messaging is relevant to the photo you upload.
Adding 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 Body field, 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.
Step 6: 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 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 7: 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 8: 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 9: 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. Contact Information):
Click on the "Configure block" that appears under the cog/gear:
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.
Page:Drupal 7 - Working with Basic Pages (links, images, pdfs) (Franklin OIT Self Service Website)