Custom CSS

Although there are thousands of WordPress themes out in the wild, we will be initially making available only a small collection of "curated" themes. These themes will have a small amount of Princeton University branding. Most will be minimalist, with neutral colors, and some will have configurable options. As the service grows, so will our theme offerings.

However, site owners sometimes want to deviate from the default appearance of the themes, or they might (for some inexplicable reason) want to eliminate all traces of orange and black. Sites in our Roxen CMS environment have the custom.css file, and we wanted to offer a similar option with WordPress.

Fortunately, Automattic, the commercial entity behind WordPress.com, created a plugin that provides this feature. Site admins will find an "Edit CSS" menu under the Appearance section in the left navigation of wp-admin.

This site, at blogs.princeton.edu, is an example of the default "Twenty Eleven - PU" theme. The main page uses a blank page with Twenty Eleven's "Showcase" page template. Under Appearance, I set the color scheme to Light, changed the link color to #fa7f00 (fazfoo). I used the Resize Header setting so that I could use a shorter header image. Under the Header section, I set the Display Text to "No" (which hides the blog title, but keeps it accessible for assistive devices). I uploaded my 1000 x 210 pixel banner image and saved.

Then I set a dark gray background color and a background image with a subtle bokeh effect, setting it to Center, No Repeat, and Fixed. I had to add some custom CSS in the Edit CSS section to make the background stick to the bottom.

body { background-position:center bottom; }

One annoying bug with the Edit CSS option — you will lose any changes the first time you click "Save Stylesheet." And if you delete everything, it reverts back to the Welcome text. So make a small change with valid CSS. Save. Make the change again. Then save. Then continue as you normally would.

Also, the plug does a pretty good job of validating and rewriting invalid CSS. It also gives it consistent formatting. Unfortunately, it strips out CSS comments, and it does not understand some newer CSS3 features like background-size or media queries.

I did not have to write much custom CSS, mostly progressive enhancements. Peruse my generated CSS file for inspiration.