Skip over navigation

Change Theme Logo

Before you begin: IMPORTANT NOTE

Below is documentation for changing the site's logo 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 logo.

The steps below are intended for clients who feel comfortable working with Photoshop and XSL. 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 logo. 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 logo in an image editor (Photoshop, etc.)

In an image editor such as Adobe Photoshop, size your banner image to the appropriate dimensions listed in the chart below. Please make sure to save your banner_logo in PNG format and optimize it for the Web by using a feature such as Adobe Photoshop's "Save For Web". The banner_logo template uses a sans-serif typeface such as Helvetica or ITC Franklin Gothic.

Save your logo with this file name: banner_logo.png

Save your logo as a 24-bit PNG with transparency.

If you have a existing identity with a set typeface please apply it to the banner_logo template. If you need help with Adobe Photoshop please contact The New Media Center at http://www.princeton.edu/nmc.

Standard logo sizes for each theme:

  • Fauver (any color variation)
    700px x 42px*
     
  • Inventive (any color variation)
    800px x 56px*
     
  • Noor (any color variation)
    160px x 150px*
     
  • Tigers
    210px x 140px*
     
  • Tux
    275px x 100px

(*—This theme supports a banner logo up to the pixel width indicated. However, for optimization purposes, we suggest that you crop your image to only the width necessary to display the logo text of your site. None of the themes support widths greater than the ones indicated.)

The Photoshop document templates for the banner logos are below:

You can also browse all of the sample files for the various themes.


Step 4: Uploading your logo

Upload banner_logo.png to your website's root folder (see note* below) using these steps:

  • In the Content Editor, click "File - Upload New File..."
  • Click "Browse," and find banner_logo.png on your harddrive.
  • Click "Next" for the new two screens, then "OK" for the third.

Step 5: Commit your files

Be sure to “Commit” the file banner_logo.png. If you have not committed your file you will see a pencil over over the document icon in the “You” column.

Step 6: View your changes

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

*NOTE: Your Website's Root Folder

If you access your site's file structure using the "CE" button from your homepage, you need to take an additional step to get to your root folder.

Roxen, by default, takes you to the "index.xml" file in your file structure. Your breadcrumb will say "/yoursitename/index.xml." For example, on this site, the breadcrumb would say "/roxen/index.xml."

To access the your site's root folder, click on your site name in the breadcrumb. Now you can upload your banner logo to the root folder.