Tiger Theme

Who Gets the Tiger Theme?

Tiger is designed for academic departments, centers, and programs and administrative offices. Basic Princeton visual brand elements are incorporated into the theme for these sites. 

Configuring Your Theme

WDS currently offers the Tiger theme for all academic and administrative sites — for departments, centers, programs, and offices. This theme is designed to be configurable to satisfy different design goals. Visit this Starter Kit sample for a theme preview.

Note that you may also engage with WDS to develop a custom theme for your site at a cost. If you site already has a custom theme developed, it is not meant to be configured after the site has launched. Customers should contact WDS if they need changes made to a custom theme.

Tiger is the base theme for our Princeton websites. Configure style options to modify the look, feel, and some functionality of your instance of the Tiger theme.

By default, colors in the Tiger theme are limited to Princeton Orange, black, white and shades of gray, inline with University branding guidelines. Colors can be adjusted or added using CSS Injector.

Configure Appearance Settings

From the Admin toolbar, Manage » Appearance » Settings » Tiger

Page Element Display

Used to enable or disable certain elements from displaying globally across your site.

  • Shortcut icon: Toggles the browser tab icon (favicon) on or off. This should be left on. By default the Princeton shield is used as the icon. WDS may develop a custom icon to use instead.
  • Logo: Toggle the header logo on or off. If toggled on, you can upload our own logo and use the one provided by default, which is just the Princeton shield. The logo will be displayed to the left of your site name (if output).
  • Site name: Controls the display of your site name in the header. Some sites use only a logo instead of displaying the site name text.
  • Site subname: If your site has a subname defined in the basic site settings page, you can control how it is displayed here.
  • Main Menu
  • Utility Menu
  • Breadcrumb

Logo Image

If the Logo checkbox is checked in the Page Element Display section above, additional options are presented for controlling the logo. All themes have a default logo that is available, but you can provide your own by unchecking Use the logo supplied by the theme.

Upload a logo using the file browser. You can control the size custom logos by choosing Custom for the Logo sizing method field, and providing a custom height of the logo in pixels (the width will automatically adjust).

Base Customization Settings

Design

Choose between three different font pairings:

Montserrat & Roboto

Heading 2

Heading 2 - smaller

Heading 3

Heading 3 - smaller

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur risus ex, id elementum metus pharetra vel. Fusce non arcu in lectus aliquet eleifend. Proin venenatis, neque vitae iaculis rhoncus, purus est dapibus augue.

Montserrat and Roboto

Sofia Pro & Abril

Heading 2

Heading 2 - smaller

Heading 3

Heading 3 - smaller

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur risus ex, id elementum metus pharetra vel. Fusce non arcu in lectus aliquet eleifend. Proin venenatis, neque vitae iaculis rhoncus, purus est dapibus augue.

Sofia Pro and Abril

Kepler & Libre Franklin

Heading 2

Heading 2 - smaller 

Heading 3

Heading 3 - smaller

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur risus ex, id elementum metus pharetra vel. Fusce non arcu in lectus aliquet eleifend. Proin venenatis, neque vitae iaculis rhoncus, purus est dapibus augue.

Kepler and Libre Franklin

Header

Control settings related to the page header, including the color variant (either dark or light), search field (choose to use a full-width search field or not), and to use an alternative Princeton University logo. The alt logo is much smaller (includes only the shield) and is recommended if your site logo or title already includes the word "Princeton" in it.

Menu

There are several options available for controlling the orientation and functionality of the main menu.

  • Standard dropdown (max 2 levels)
  • Standard dropdown, with additional sub-nav for level 2 items (max 2 levels)
  • Mega-menu dropdown
  • None

If the mega-menu is selected, an additional option is exposed that allows you to control if there should be 3 or 4 columns of links in each menu.

The main menu can also be be configured to be "sticky". When enabled, the header and main menu navigation shrink and lock to the top of the browser window—over the content—as the site visitor scrolls down the page.

Sidebar Menu

When checked, the main menu will be displayed in the left sidebar. You can then choose which menu level should be displayed here, from 1 to 4. For example, if level 2 is chosen, and you are viewing a level 1 (top level) menu item, its children will be displayed.

This option can be combined with the main menu header configuration. A common scenario is showing levels 1-2 in the header menu, and levels 3-4 in the sidebar menu.

Jump Link Menu

Control the default orientation of jump link menus that appear on your site. This default can be overridden on a page-by-page basis.

Not all pages support jump link menus. Pages that support them will have a checkbox under the menu options on the page edit form.

General

Column and section spacing

These options allow you to control the spacing between, above, and below columns in page layouts. Usually the default options are suitable for most sites. You can override these defaults in each section's settings form.

Note that the controls for section spacing may be hidden until the checkbox "Enable control of section spacing" is checked. This may be unchecked on your site because it has a custom theme or CSS injector rules defined that may cause compatibility issues. You can enable this feature if you are confident it will not cause issues.

Back to Top Button

When enabled, a small button will appear on the bottom right corner when scrolling down on long pages. When clicked, the visitor will be brought back to the top of the page.

Theme Colors

Neutrals

  • Neutral 100
    #121212
  • Neutral 90
    #1d1d1d
  • Neutral 85
    #333333
  • Neutral 80
    #414141
  • Neutral 60
    #717171
  • Neutral 40
    #a0a0a0
  • Neutral 20
    #d0d0d0
  • Neutral 10
    #eeeeee
  • Neutral 05
    #f7f7f7

Bright Highlights

  • Bright
    #e77500
  • Bright Light
    #f8efeb

Body

  • Neutral 100
    #121212