Skip to main content Skip to navigation
Web Communication Styling around the WSU Spine with custom CSS

Styling around the WSU Spine with custom CSS

The WSU Spine was built to provide a consistent brand framework for use throughout the University. It exists in sort of a balancing act trying to allow great flexibility while maintaining a familiar look and feel for visitors to WSU web properties.

The Spine is structured as such:

Screen Shot 2015-06-05 at 5.46.58 PM

The primary site navigation and brand elements are inserted as part of the #spine container. All content appears in the main element.

It is important to keep this page structure in mind when styling a page through CSS. The Spine provides default styles for many different elements to establish the initial consistent look and feel. It also relies on some of these styles to properly display a consistent experience in the Spine area itself.

Screen Shot 2015-06-05 at 6.00.36 PM

If you look at anchor (a) elements specifically, you’ll see a few default styles in the Spine. The above two are pulled directly from spine.css. All anchors are set by default to have no text decoration and to be crimson. Anchors inside the #spine container are set to be gray, but they retain the other default property applied to all anchors on the page of text-decoration: none.

A common custom style here is to add underlines or other properties with the intent of changing the anchor elements in the page content. When dealing with general elements such as anchor, some specificity is required to make sure only the intended styles are modified.

Screen Shot 2015-06-05 at 5.58.06 PM

Prefixing the rule with main applies the intended style and leaves the #spine container as is. Not prefixing the container causes the Spine to lose its default display properties with unintended consequences.

If you’re targeting a specific page, let’s say this current post, you can still use main in addition to other body classes.

Screen Shot 2015-06-05 at 6.07.53 PM

Anchors in the Spine will remain without underline, those in the main content area will have an underline, and those in the main content area of single pages will have a dashed underline and a lighter font.

Being aware of the Spine structure and targeting elements with the appropriate specificity will go a long way in maintaining the consistent look and feel that visitors expect. We’ll also continue working to provide more explicit defaults for crucial parts of the Spine to help prevent accidental overrides.

If you’d like to dive any deeper on this or have thoughts to share, we meet weekly on Friday mornings for open lab where this discussion would be perfect. 🙂

Web/Video accessibility slides

Presentation Slides

Round Robin presentation – Web, Video, Online Course Content

We will come back and have a more formal writeup about the presentation soon, but didn’t want to wait to post the presentation and video notes.

Video notes:

In Marketing our goal is to deliver a message to an audience

We spend hours crafting that message—but what if our audience cannot receive the message we are sending, or can’t understand it in the form we’ve sent it?

This can happen when our viewer has a disability…


6% of the U.S. population is considered visually impaired=21,000,000 people

Everything from blurred vision to color blindness to full blindness

Mandated by FCC in 2010—a portion of all programming must be accessible programming.

All PBS programming must be accessible to people with both visual and audio disabilities


Hunger Games with audio description:

Audio descriptive services can run between 40.00-60.00 a finished minute to produce


20.00-50.00/hr for an ASL provider, plus recording and editing costs.


13% of the U.S. population is considered hearing impaired=30,000,000 people

One of the fastest growing issues—Know why?

Aging population

Hearing loss due to damage from ear buds

TRANSCRIPTION—a word-for-word translation of audio content into a text file. Available for downloading prior to watching the video


Closed captioning software: Mac/Windows


Individual user 1200.00

to institutional user 15,000.00

10.00-15.00 per finished minute of video, plus a setup fee—usually 50.00-100.00

Version 2.01 of the Media Access Generator (MAGpie)– free, do-it-yourself captioning, subtitling and audio-description software for digital multimedia developed by the CPB/WGBH National Center for Accessible Media (NCAM)– is now available to download at

Placement—Lower thirds or bug

Rae Photo

Key points to remember about CC:

Use one or two lines of text.

Caption the exact wording of speakers, including slang and grammatical errors.

Caption sound effects that contribute to the understanding of the content.

Synchronize captions with the aural content.

Use a simple sans-serif font, such as Helvetica, and proportional spacing.

Ensure high contrast between the text and background.

Use both uppercase and lowercase letters.

Open Captioning vs. Closed Captioning—Open is always on-screen, Closed can be turned on/off by the viewer and requires either built in technology in the monitor or a separate break out box.

The key with any of this is start early—all these steps take time and cost money—they need to be considered in the pre-production and/or idea phase of any project.

WSU Spine 1.2.4 Released

The latest version of the WSU Spine framework has been released as 1.2.4.

As always, if you are using a manual build of the WSU Spine, we recommend updating as soon as possible.

To automatically receive the benefits of bug fixes like this, we recommend using the latest version of the Spine from the centrally hosted server. A full explanation of the hosted repository is in the project’s readme file.

Please visit the WSU Spine release page for a list of all changes made in this release. Thanks!

Spine Parent Theme 0.20.1 Released

Version 0.20.1 of the Spine Parent Theme has been released and deployed to the WSUWP Platform. This is actually the 7th release since the last announcement of 0.19.0. Many of the changes were quickly made during the development of the new WSU home page and are minor. I’ll include those as well!

  • Fix a non-working featured image meta box. (0.19.1)
  • Fix a misspelled filter for BU Navigation controlling the “Overview” text in the Spine. (0.19.2)
  • Fix an issue in which duplicate HTML titles were displayed (0.19.3)
  • Add the ability to assign section labels to page builder sections to aid with organization of sections that do not have column titles. (0.19.4)
  • Fix the Twitter account used when sharing via Twitter. Previously, the configured account would not have appeared. (0.19.4)
  • Apply mobile unfloat to large images so that text wraps properly. (0.19.4)
  • Add awareness of an individual article’s image status with has-background-image, has-featured-image, and has-thumbnail-image classes at the article level. (0.19.4)
  • Adjust main header styling when bookmark style is in use. (0.19.4)
  • Allow for use of parts/footers.php inside main by child themes. (0.19.5)
  • Navigation menus other than site and offsite will retain all custom classes. Previously, we would strip everything except for those expected by the Spine. (0.20.0)
  • Site and path classes are now applied to body to help maintain common styles throughout multiple sites. Path is the root path of the site, not the current path being viewed in a site. (0.20.1)
  • All singular page views now have single applied as a class to body. All not singular views have not-single applied. (0.20.1)
  • Add proper current and dogeared classes when BU Navigation is active. (0.20.1)
  • Add a customizer option for future support of “open by default” search behavior in the Spine. (0.20.1)
  • Hide Open Sans details when off. Show when on. (0.20.1)
  • Update signature link to HTTPS for (0.20.1)

One other very interesting feature that was added in 0.20.0 is the ability to assign background images to sections. While it will be excellent in the future for various uses, it is currently in early stages and you’ll need custom Javascript to take advantage of this near term. As an example, we’re using this on the WSU Home page to handle the delayed loading of the fixed backgrounds as you scroll through the page. An option is also available to add a separate mobile background so that bandwidth can be limited. As this feature is expanded, we’ll talk more about the possibilities.

Your help requested proofing list of your schools, departments, programs, centers, offices, units

WSU UComm Web Team needs your help and expertise for about 3-5 minutes, please.

Attached is a link (see below) to a rough-draft list of schools, departments, programs, offices and units at WSU. The WSU Ucomm team is trying to create a list that is as current and complete as possible, so that these items can be incorporated into WSU’s universal analytics program, which is about to come online shortly.

Despite many searches, we know there are a number of items missing, so we are asking you to help us catch those that apply to your area.

REQUEST: Please take a few minutes to review this list, to add, delete or edit items that have been overlooked, and/or misnamed. Just insert your corrections, save the document, and email it as an attachment to

Please note, we have intentionally deleted that tags that go with these names, like “office of” or “school of” or “center for.” (The names of Campuses, Colleges, and Extension units are a separate list.)

The MS Word Tracking program has been turned on, so, your edits will appear in color, allowing us to identify and include them.

Thank you in advance for your time and help!

Here’s the link to the file on Dropbox

Google Analytics naming and structure

google analytics logo

Just a quick heads up regarding Google Analytics.

University Communications is making some minor changes in the naming structure of central  Google Analytics accounts and a few other accounts that we help manage. This will NOT affect any of the data, it will just look slightly different.

For example, the preferred format for college account names will be the name followed by “– College”.   E.g.   “Arts and Sciences – College” or “Voiland – College.”

We’re trying to create a consistent format, so the new universal analytics will work smoothly with the accounts and data, and so the accounts will be grouped and named in a logical order/format.

There has not been a consistent account/property structure in the past, so it’s currently a bit chaotic.  Some are named using only urls, some use “WSU College of XXXX”, some “College of XXX”, some just the abbreviated college name, or acronym.

A full description with all the details will be presented next couple weeks, after the details are fully tested. Meanwhile, we just wanted everyone to know there might be some minor changes to central communication account names, and not to be alarmed.

If you manage your own college or campus Google Analytics accounts, we’re hopeful that you will choose follow the preferred naming and organization structure in the future, so we can employ a consistent format universitywide.

Thanks in advance for your help. Have a great week.

Open Lab Recap – February 20, 2015

This is a recap of topics covered in our weekly open lab, held every Friday morning from 9:30am-11:30am in ITB2025.

We talked about the Overview link automatically created in the Spine navigation when a section label is itself a link to a page. There is a way to change the actual text of “Overview” by setting the title attribute in the WordPress menu management screen. You can also add a generic link to the menu with “#” as the URL. This will create a section label without automatically generating an Overview link. The behavior of this is something that should be better documented on this site. We’ll work on getting something up in the near future.

External links in the Spine navigation and general content have Google Analytics campaign data attached to them. Not every URL accepts this parameters nicely. We need to look at whether external links should have campaign data to begin with. This will be tracked under issue #20 on the WSUWP Analytics repository.

Links marked to open in a new tab do not always respect that setting, even when using cmd-click to open the link. It appears this is an issue with the scripting we’re using for Google Analytics and it will be fixed in a future release under issue #225 on the WSU Spine repository.

It would be great if you could convert one layout to another on the fly in the page builder. At the moment an entire new section must be added and content copy/pasted to the new area. This will be tracked under issue #177 on the Spine Parent Theme repository.

The Carson College of Business home page was having some issues when we tried using the new Duplicate and Merge Posts plugin. I’ll be taking a closer look at that to find any bugs. Also, proper styles should applied to category specific calendar pages.

There should be a way to exclude labs from the landing page until they are ready. Most of this will take care of itself when we have a better landing page that shows off recent posts from all the labs that are active instead of links to the labs themselves. This will be tracked under issue #2 and issue #3 on the repository.

The WSUWP Content Syndicate plugin can pull in posts from other sites using the WordPress JSON API, but not yet with RSS. We should have a shortcode that will pull in an RSS Feed and display it as well.

The last modified date seems to be 8 hours off in the list table for posts and pages. This will be tracked under issue #22 on the WSUWP Admin repository.

Previewing a page builder page that contains an iframe does not work in Safari. It does work fine in Chrome. This is tracked under issue #154 on the Spine Parent Theme repository.

We also talked about text not wrapping properly around left aligned images. We’re working on exploring that a bit in issue #178 on the Spine Parent Theme repository.

Beyond bugs… 🙂 I also showed a brief example of the new interface that we’re working on to assign Active Directory editor groups to pages and posts. This work is coming along nicely and a first release will be available soon.

Releases: WSUWP Platform 1.2.0, WordPress 4.1.1

WordPress 4.1.1 was released today and the WSUWP Platform was immediately updated to match. There are no big changes in WordPress as this is only a maintenance release. 4.2 is slated for April.

While we have deployed several versions of the platform into production over the last couple months, this is the first official release in a bit. What follows here is the full release information from the open source project on GitHub.

This is the eighth production release of the WSUWP Platform. There have been 10 deployments to the WSU production environment since the last release. The official tag of this release is 1.2.0.

A full changelog is available. Here are some notes:


  • Updates to WordPress 4.1, then 4.1.1.
  • Upload limit is now 200MB, added .eps as an allowed filetype.
  • Initial steps at an enhanced “My Networks” screen.
  • Make new site creation a bit more friendly.


  • Resolve PHP errors where a screen type was being checked before we knew a screen was there.
  • Clear domain/path request cache on new site creation.
  • Allow the extended network option to be set when editing a network.
  • Display the correct value for extended network in some cases.
  • Avoid using Batcache for WP Document Revisions

New Plugin: Duplicate and Merge Posts

One of the most requested features for the WSUWP Platform has been the ability to work on a draft of an existing post over time without saved changes overwriting the original until it was ready. There are several options out there for WordPress that meet various workflow requirements, but it was the Duplicate and Merge Posts plugin that seemed to fit the average workflow the best—and it works.

As of today, you’ll see this plugin in your dashboard available for activation. Once activated, any saved posts or pages will have an option to Duplicate and Edit the item.

Duplicate and Edit
Duplicate and Edit

Clicking this button will create a copy of the post or page with “[Duplicated]” in front of the title. A new series of options will then be available in the Publish box for Go to original post, View Side-by-side difference, Merge back to Original Post, and Save as New Post. You can probably imagine what each one of these does, though we’ll have expanded documentation up shortly.

Screen Shot 2015-02-13 at 3.28.24 PM

Merging back to the original post is key. This overwrites the original post or page with the content of the duplicated item. An entirely new home page can be built out in secret and then merged back in when you are ready to launch.

If you go to Settings -> Duplicate & Merge in the dashboard, you’ll see options to restrict the capability for duplicating and merging posts to certain roles. In the future we’ll enable the ability to submit items for review, we just need to figure out the right workflows for that.

We’re excited about this plugin as it solves one of the key questions we’ve been asked since starting our effort to bring everyone to WordPress. It is a new addition, so please let us know if you see anything that looks like a bug or if there’s a feature you’d like to see.

Spine Parent Theme 0.19.0 Released

Version 0.19.0 of the Spine Parent Theme has been released and deployed to the WSUWP Platform. This release makes major modifications to the page builder interface to resolve some of the issues we’ve seen since our December release of 0.17.0.

  • Revert builder interface to align with upstream Make 1.3.2
  • Consolidate single admin template into the columns admin template.
  • Improve the old interface a bit to match some nicer parts while retaining the TinyMCE behavior we expect.

Now that the interface has returned to something less buggy, we’ll be focusing on incremental improvements to some key portions. As always, stop by Open Lab in ITB 2025 on Friday morning from 9:30am to 11:30am to get the earliest previews of these elements as they are being developed.