Custom Header Images

Overview

If your template allows it, Campus Suite gives you a lot of control over the header graphics that display at the top of all pages on your site, be it a static page, or any of the module pages. One only needs to know how. We try to keep it simple and not require a vast knowledge of programming or HTML logic. These images typically have to be pre-sized and those sizes are dictated by your website theme.

Since each theme is different, you should contact your project manager, or support and ask them the sizes for any given image. Even more easy... right-click on any current image on our website and get info, or properties. In most cases, you can find these dimensions yourself without having to wait for us to respond. Once you know the image dimensions, use the following information to change graphics around your web site.

Department and Page Header Graphics

When you wish to update the page header graphics on a page, keep in mind there are two types of header graphics. The first is a "department graphic." This is a graphic that is uploaded directly to the department via the modify screen in in the administrator dashboard.

To add or modify a department graphic for a specific department, click the wrench icon next to the department on your dashbaord (if you do not see it, your access is not high enough). Once on the department edit screen, scroll down to the "image" mechanism and notice you can select a graphic on your computer. Please note, this graphic must be a pre-sized jpg. If you do not know its dimensions, Innersync can provide them to you. The size is determined by the designer of the template and is different from one design to another. Innersync can provide you with a photoshop layered file that you can use to create and crop your graphics.

Add department image

Once the image is uploaded, this image will display at the top of ALL pages in that department, unless it is overridden by a "page graphic."

Page graphics are images that replace (or override) the department graphic that was uploaded to the department.This allows you to have different header images from one page to another. The method you will use to override a department graphic with a page graphic is to properly name the image based on the page name it's to be shown. Here are the steps:

  1. Make sure the image is sized correctly and saved where you can upload it
  2. Make sure the name of the image is in the form "header-pageName.jpg"
  3. Go to the page where you want to change the header graphic.
  4. Select edit the page
  5. Select the "Insert/Edit Image" icon on the editor

    Note: If you are replacing an already existing header/image, there are two options:
    • First, delete the original image then upload the new one, making sure it is properly named.
    • Second, you can use the replace function. As long as your image format is still .jpg, you do not need to worry about the filename. Campus Suite will rename the file for you to the name you are replacing.
    • Using either option, you will likely need to clear your browser cache because the old version of the image will continue to display until your cache is cleared or expired.
  6. The Insert/Edit Image box where you can browse to add an image will open.
  7. Browse to the image you want to add and select (make sure it is named correctly)
  8. You will be back at the Insert/Edit Image box where you will select cancel at the bottom

For example, look in the URL of your browser for the page you are on. If your page name is named, board-meeting.cfm, then you could upload an image named header-board-meeting.jpg to override the graphic at top. Notice, it's simply adding "header-" to the front of the name and naming the remainder of the file whatever the page is named, in this case "board-meeting" and then save it as a JPG file.

Uploading this file into that page will override the department header graphic. If you need help, just ask us!

Module Header Graphics

These are images that display at the top Campus Suite module pages. Campus Suite will look in the root images directory of the web site. The customer can add and/or overwrite the default/fallback module image or an image for a specific module to change this image. The image needs to be saved as an optimized and pre-sized JPG and the same image will be used throughout that module (ie. News list, News story).

To update or add the module images create your pre-sized image and name it based on the information below, then save it as a .jpg in /root/images/.

  • Faculty - header-faculty.jpg
  • News - header-news.jpg
  • Blog - header-blog.jpg
  • Calendar - header-calendar.jpg
  • FAQ - header-faq.jpg
  • Photo Galleries - header-photo-gallery.jpg
  • To replace the editor view and the fallback (generic) image used for a module, if Campus Suite cannot find one of the above, you will need to create an image named header-module.jpg and place it in /root/images/.