Rainier Spine Theme: What is the Rainier Spine Theme?

The Rainier Spine Theme is an additional set of functionality and CSS styles that can be applied to the default WSU Spine design. The Rainier Spine Theme is intended to provide a better starting point for creating sites using the WSU Spine. 

Main Features

The main features of the Rainier Spine Theme include an updated site header, bold banner images for pages, clean content areas, and a site-wide footer.

Site Header

The Rainier Spine theme has an updated site-wide header. When a banner image is used on a page the header is transparent and sits over the top of the image. If there is no banner image the header renders as a crimson bar at the top of the page.

Page Banners

The Rainier Spine theme features prominent page banners that bleed to the right of the page. The page banners include a title and and optional tagline. All of the styling for the page banners is built into the theme.

Site Content

The Rainier Spine theme includes update CSS for text, content headings, sidebars, and a variety of other common site elements. 

Site Footer

The Rainier Spine theme features a new site-wide footer that can be customized with deep-link style menus and other available widgets.

Rainier Spine Theme: How do I update an existing site to the Rainier Spine Theme?

Selecting the Rainier Spine Theme

1. Login to to the Dashboard for your site and click on "Appearance" in the left menu. ***Note: you must have administrator level permissions to edit the site appearance.
   
   
   
2. Select "Customize" from under the "Appearance" to launch the WP Customizer.
   
   
3. You should see a new Customizer left navigation. Select "Style Options" from the Customizer menu.
   
   
   
4. You should see a drop down labeled "Additional Styling". Select the drop down and switch the value to "Rainier". Your site should reload in the right side window with a preview of how it will look when Rainier is active. ***Note: you can navigate through your site in the right side window to preview how other pages on your site will look with the update.
   
   
   
5. If you are ready to switch to Rainier, go to the top of the Customizer navigation and click "Publish". Please quickly review the "Notes & Issues" section below before switching your site to Rainier.
   
   
   

Notes & Issues

Please review these before switching to Rainier.

• If your site has custom CSS that is modifying the Spine Theme it may cause issues/conflicts with the style for the Rainier theme. Custom CSS could be located in the "Edit CSS" tool under appearance, "Additional CSS" in the Customizer menu, or in some cases it could be added by a child theme.
   OR 
• The page banner in Rainier uses the page title for the primary title. If a page uses the page builder "Header" section with the same title, the page will appear to have duplicate titles. If this happens either remove the header section, adjust the page title, or use the "Alternate Title" field under page settings at the bottom of the editor.
     

Rainier Spine Theme: How do I add and edit page banners?

Adding a Banner to a Page

Page banners can be added to any page by setting the "Featured Image" typically in the right column of the page editor interface.

Changing the Title & Tagline in the Page Banner

By default Rainier uses the page title as the primary title in the banner. To use an alternate title, scroll down to the bottom of the editor and look for the "Page Settings" section. The "Page Settings" section should have fields labeled "Alternate Title" and "Tagline". Adding either an alternate title or tagline in the "Page Settings" will override the default text in the banner.

Rainier Spine Theme: How do I add and edit site footer content?

Adding & Editing The Footer Widgets

This guide uses the WP Widget Admin interface for editing the widget areas; the Customizer also has a widget editing interface which will allow you to preview changes on your live site as you make edits (provide the preview works).

1. To Add & Edit the Rainier Spine Theme footer, login to the dashboard for your site and select "Appearance" in the left navigation.
   
   
   
2. Under "Appearance" you should see an option labeled "Widgets". Select Widgets to launch the WP Widget Admin interface.
   
   
3. In the Widget Admin interface you should see a widget area labeled "Footer Widgets" in the right side editor section. Widgets added to the footer section will display in the site footer.
   

Adding Deep Link Menus

***Note: This guide assumes you have already created a menu in the "Appearances" → "Menus" editor for use in your footer.

To add deep link menus to your footer navigate to the Widget Admin interface (see above). Select the "Navigation Menu" widget on the left and drag it into the "Footer Widgets" on the right. Once you have the Navigation Menu widget in Footer Widgets you should be able to use the widget editor to select a menu to display. By default, menus entered in the footer will span the full with of the footer with each menu item (and child menu items) divided into columns.

Other widgets

Unlike menus (which stretch full width) additional widgets added to the footer will span horizontally across the footer in a column layout.