Styling WordPress Support Forum in Firefox

Kaf's Article on customizing WordPress Support Forum. WordPress support forums. As is. Above you find the WordPress support forums circa today (click images for full screenshots). One bugaboo for some of us about the main page is the plain, straightfoward, single column layout. Not a lot of organization of the relevant bits. WordPress support forums. […]

Kaf's Article on customizing WordPress Support Forum.

wp.org support forums WordPress support forums. As is.

Above you find the WordPress support forums circa today (click images for full screenshots). One bugaboo for some of us about the main page is the plain, straightfoward, single column layout. Not a lot of organization of the relevant bits.

wp.org support forums WordPress support forums. More of the same.

To get to the meat of the forums you have to scroll down a bit. Unless you have one of the big ass monitors and open everything full screen (Yes on 1 for me, No on 2). As for that splash of pink (or whatever) used to highlight “sticky” posts at the top and within each forum: Pretty…

wp.org support forums - enhancedWordPress support forums, Kaf style.

Now there you go! That’s how I visit the WordPress support forums every day. The profile/logout is available but out of the way (matches placement of the account links in WordPress’ admin pages), Views or those tag-related helper links are still obvious but not taking up expensive page real estate, and Hot Tags, though slightly demoted, are still above the fold and in easy reach. Some may not find the switch to purple fo the stickies any more pleasant, but I think it fits in better with the existing color scheme.

So, how do? Anyone can get this version of WordPress’ support forums just by using Firefox, the URL id Firefox extension, and some custom css to modify the behavior of the forums. The URL id extension lets you apply stylesheet rules to the body element of any site. It does this by turning the domain (wordpress.org) into a css reference id (#wordpress-org), which then through Firefox’s user stylesheet (userContent.css) can be given any style property you’d like. You can’t add new id and class declarations, but just about anything already on a page is fair game.

Pretty damn cool, huh? The entire web as your plaything. Here’s the userContent.css I’m using for WordPress:

display userContent-wp.css | download userContent-wp.css

Just grab this, rename it userContent.css, and drop it in the chrome directory for your Firefox profile. If you already have a userContent.css, just copy what’s in mine into yours. Instructions for placing userContent.css can be found here.

Have fun with it, and let me know if you come up with even better versions of the support forums. Hey, we’ll start a screenshot gallery!