Skip over navigation

Change Theme Banner

Before you begin: IMPORTANT NOTE

Below is documentation for changing the site's banner for a THEME site. If your site has a custom design, it is not a theme site. Please contact roxen@princeton.edu for assistance in updating your banner. Below are detailed steps that you can follow to determine that you have a theme site.

This tutorital is intended for clients who feel comfortable working with Photoshop, XSL, and CSS. Should you require our assistance, we are happy to help. Simply e-mail roxen@princeton.edu, and we will work with you to update your banner. This documentation is not a replacement for our Roxen support; it's simply an additional service that we provide.

Step 1: Know your theme name

There are two options to find out which theme you are using. You can either...

A. View the variables.xsl file in your root directory

  • Click “Enter edit mode” at the bottom of your webpage
  • Enter your Username and Password
  • Click the CE Folder at the top right of the screen to enter the CE editor
  • Navigate to your site's root folder (i.e. "/sitename").
  • Locate variables.xsl then click the blue down arrow and select view source.

The line <name="site-theme" select="'yourthemenameishere'" /> shows your active theme name.

or

B. Go to the theme gallery and see which one looks like your site.
Our Theme Gallery is located at http://www.princeton.edu/wds/samples/

Note: Your theme may have customizations which make it look different from one of the samples in the Theme Gallery. If your site does not look like one of the Theme Gallery sites, use option A above.


Step 2: Verify theme name for this documentation

This documentation is intended for the latest free themes available for Roxen users. These themes rely on the most recently released templates for Roxen sites. Verify that the theme name you found in Step 1 matches one of the names below. If your theme is not listed below, contact roxen@princeton.edu for assistance in updating your banner.

  1. fauver (or Fauver - Original)
  2. fauver-brown
  3. fauver-deeppurple
  4. fauver-olive
  5. inventive (or Inventive - Original)
  6. inventive-brightorange
  7. inventive-teal
  8. inventive-warmorange
  9. noor (or Noor - Original)
  10. noor-plum
  11. noor-sienna
  12. tigers (not tigers-v1)
  13. tux (not tux-v1)

If your theme is not listed above, we may need to upgrade your site before you can proceed. Contact roxen@princeton.edu for assistance.


Step 3: Edit your banner in an image editor (Photoshop, etc)

In an image editor such as Adobe Photoshop, size your banner image to the appropriate dimensions listed here. If you need help with Photoshop, please contact The New Media Center. You may find samples of the banner images on https://www-dept-edit.princeton.edu/edit/common/theme_image_templates/

Save your banner image to a file on your local hard disk.

Standard banner sizes for each theme:

  • Fauver (any color variation)
    Home Page: 880px x 210px
    Sub Page: 655px x 160px
     
  • Inventive (any color variation)
    Home Page: 780px x 205px
    Sub Page: 780px x 150px
     
  • Noor (any color variation)
    Home Page & Sub Page: 675px x 150px
     
  • Tigers
    Home Page: 735px x 150px
    Sub Page: 735px x 100px
     
  • Tux
    Home Page & Sub Page: 683px x 111px

Sample files for each theme are located here: https://www-dept-edit.princeton.edu/edit/common/theme_image_templates


Step 4: Upload your banner

  • In CE View, navigate to your “images” folder.
    Note: Click on the folder name, not the folder icon. If you do not already have an images folder you will need to create one. (Our standard location is /sitename/images.)
     
  • Click the gray right arrow in the first column next to “File.”
     
  • Select “Upload New File.”
     
  • Click “Browse,” and find the banner image on your hard drive.
     
  • Click “Next” for the next two web pages, then “OK” for the third.
     
  • Commit your image file by clicking the blue down arrow next to the file name then select “Commit.”
     
  • Enter a log message, then click "OK."

Step 5: Change your CSS

You can change the banner for all pages, only the homepage, a subsection of pages, a specific page, or any combination of the above. 

To edit your CSS file:

  • Click the CE Folder at the top right of the screen to enter the CE editor.
     
  • Find the CSS folder and click on the words, not the folder to access the folder.
     
  • Click the blue down arrow, for the custom.css file, and select “Edit Contents."

The code below demonstrates how to change the banner for all pages or just the homepage. Filepath should be replaced with the path to your file, and imagename should be the name of your file including the extension. In the height declaration, nnn is the height of your image in pixels. If you would like assistance in updating your CSS file, we are happy to help. Send an e-mail to roxen@princeton.edu.

ALL PAGES:

#bannerphoto {
    background-image: url(filepath/imagename);
    height: nnnpx;
}

HOME PAGE:

#home #bannerphoto {
    background-image: url(filepath/imagename);
    height: nnnpx;
}

SECTION PAGES:

#section #bannerphoto {
    background-image: url(filepath/imagename);
    height: nnnpx;

SPECIFIC PAGE:

.specific #bannerphoto {
    background-image: url(filepath/imagename);
    height: nnnpx;
}
 

Technical Note

For non-home pages, the class for the body tag is the folder holding the specific page (e.g. "contact" in "/sitename/about/theteam/contact"). The ID for the body tag is the name of the folder directly under the site name (e.g. "about" in "/sitename/about/theteam/contact"). Thus, all pages under and including "/sitename/about" will have the same ID on the body tag.

If these instructions are cryptic, we are happy to help you. Simply send an e-mail to roxen@princeton.edu.


Step 6: Commit your files

Be sure to “Commit” all of the files that you have worked on while updating your banner. If you have not committed your file you will see a pencil over the document icon in the “You” column.


Step 7: Refresh your browser

To view your changes, return to the Insight Editor. Refresh your browser.