Although there are thou­sands of Word­Press themes out in the wild, we will be ini­tially mak­ing avail­able only a small col­lec­tion of “curated” themes. These themes will have a small amount of Prince­ton Uni­ver­sity brand­ing. Most will be min­i­mal­ist, with neu­tral col­ors, and some will have con­fig­urable options. As the ser­vice grows, so will our theme offerings.

How­ever, site own­ers some­times want to devi­ate from the default appear­ance of the themes, or they might (for some inex­plic­a­ble rea­son) want to elim­i­nate all traces of orange and black. Sites in our Roxen CMS envi­ron­ment have the custom.css file, and we wanted to offer a sim­i­lar option with WordPress.

For­tu­nately, Automat­tic, the com­mer­cial entity behind WordPress.com, cre­ated a plu­gin that pro­vides this fea­ture. Site admins will find an “Edit CSS” menu under the Appear­ance sec­tion in the left nav­i­ga­tion of wp-admin.

This site, at blogs.princeton.edu, is an exam­ple of the default “Twenty Eleven — PU” theme. The main page uses a blank page with Twenty Eleven’s “Show­case” page tem­plate. Under Appear­ance, I set the color scheme to Light, changed the link color to #fa7f00 (faz­foo). I used the Resize Header set­ting so that I could use a shorter header image. Under the Header sec­tion, I set the Dis­play Text to “No” (which hides the blog title, but keeps it acces­si­ble for assis­tive devices). I uploaded my 1000 x 210 pixel ban­ner image and saved.

Then I set a dark gray back­ground color and a back­ground image with a sub­tle bokeh effect, set­ting it to Cen­ter, No Repeat, and Fixed. I had to add some cus­tom CSS in the Edit CSS sec­tion to make the back­ground stick to the bottom.

body { background-position:center bottom; }

One annoy­ing bug with the Edit CSS option — you will lose any changes the first time you click “Save Stylesheet.” And if you delete every­thing, it reverts back to the Wel­come text. So make a small change with valid CSS. Save. Make the change again. Then save. Then con­tinue as you nor­mally would.

Also, the plug does a pretty good job of val­i­dat­ing and rewrit­ing invalid CSS. It also gives it con­sis­tent for­mat­ting. Unfor­tu­nately, it strips out CSS com­ments, and it does not under­stand some newer CSS3 fea­tures like background-size or media queries.

I did not have to write much cus­tom CSS, mostly pro­gres­sive enhance­ments. Peruse my gen­er­ated CSS file for inspiration.