Skip over navigation

Change Your Theme

Without modification, Roxen sites are designed to be compatible between multiple themes. In other words, you can change your site's theme without changing the content. The Roxen system also allows you to preview a new theme for your site without committing the change.

What is a Modification?

For this page, a modification is defined as any change to your custom.css file, any change to your cms-common.xsl file in the root of your site, or the addition of any cms-common.xsl file in a subfolder on your site.

Not all modifications will render a site incompatible with other themes. However, some modifications, especially CSS ones, will work better with your current theme than a new one. Our suggestion is to follow the instructions below but do not commit your change before previewing and testing your site with the new theme.

If you would like our assistance in assessing your site, contact us at roxen@princeton.edu.

Step 1: Determine your site's templates

The current themes are designed to work with the latest version of the core templates. Some sites use an older version of the templates, which simply means that those sites can't use the current themes.

As an aside, a template is the set of programming rules that create the HTML markup for your site. A theme is the styling of the HTML after it has been created. As a result, there are many sites within Roxen that use the same templates. However, those sites can look vastly different because they apply different themes to the template-generated pages.

Below are steps to verify the templates version that your site is using:

  • 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") if you aren't already there.
  • Locate cms-common.xsl then click the blue down arrow and select "View Source."
  • Look for the following line:

<xsl:import href="/templates/page-elements-v2.xsl" />

If you do not see this line, and if you would like to use the latest themes, contact roxen@princeton.edu for assistance in upgrading your site.


Step 2: Change your theme name

After you have determined that your site is using the V2 templates, it's time to change your theme.

  • Navigate to your site's root folder (i.e. "/sitename") if you aren't already there.
  • Locate variables.xsl then click the blue down arrow and select "Edit contents."

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

Your theme name should be included in the list below. If it is not listed below, you have a custom design for your site. We highly recommend that you do not use themes if you have a custom designed site.

If your theme name is listed below, you can then change it to any of the following options. Keep the single quotes inside of the double quotes. You can preview these themes at www.princeton.edu/wds/samples.

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

Step 3: Test!

After you have chosen the theme you'd like to try, save variables.xsl, and return to the Insight Editor. Preview as many pages as you can before committing the file. Below is a suggested, but not exhaustive, checklist of items to preview on your site.

  1. Are the colors appropriate or acceptable? If not, you may have styles specific to your site in your /sitename/css/custom.css or other CSS file that is overwriting the theme's styles.
  2. Are the banners for each page the correct size? Sizes for banners are not the same across all themes. If you need to update your banners, check out our Changing a Theme Banner documentation.
  3. Is the site logo the correct size and color? The logos can vary from theme to theme. If you need to update your logo, check out our Changing a Theme Logo documentation.
  4. Is the layout of your site breaking? You may have custom XSL templates that the theme was not built to accomodate.

If you find your site to look acceptable, and if your site's stakeholders have approved the new theme, commit variables.xsl. Your new design is now visible for everyone who has access to your edit site, and if you have a live site, it will show the new theme!


Step 4: Contact us

If you encounter any problems, send us an e-mail at roxen@princeton.edu. This documentation is a service that we provide, but it is not intended to be a replacement for our support. We are happy to help you assess your site's needs.