The FSFE Blog Theme — A name, a first version. Presenting: Pome 1.0

So, after a lot of work, quite some testing, and a request to name the theme, I’m finally at a first release. The theme is called Pome, after the genus of fruit to which apples and pears belong. It’s a theme which is loosely based on the FSFE visual style, but remains its own thing. The theme has several options to which I’d like to explain in some more detail:

Social Media Profiles

The Pome theme provides social media settings for all your profiles.
The Pome theme provides social media settings for all your profiles.

In the WordPress back-end under Settings > Social Media you will find a page which allows you to add all kinds of social media profiles to you blog. These are used in the header to display a small icon and a link to your profile.

The Pome theme provides your social media profiles in the header of the page, for easy access wherever a visitor to your blog might be!
The Pome theme provides your social media profiles in the header of the page, for easy access wherever a visitor to your blog might be!

The social media settings will be expanded in later versions to allow for custom profiles. For now, I’ve included dozens of popular sites, with a special focus on open source communities, but if you’re still missing one, please drop me a line and I’ll add it to the options!

At the front of the website these link show up in the header of the page, to allow for an easy, quick way to link your other networks and social media profiles.

Of course the displayed example has a lot of profiles displayed, which usually will not be the case, but as a web designer you always need to test for the most extreme cases.

Social Media Sharing

The Pome theme sports easy social media sharing of your content out of the box!
The Pome theme sports easy social media sharing of your content out of the box!

Every post is automatically provided with the means to share it across most popular social media platforms. Included are a short url, description, an image and, when necessary, tags. The platforms that are supported right now are: Twitter, Facebook, LinkedIN, Reddit, Google bookmarks, Delicious, Digg, Stumbleupon, Technorati and Yahoo! Of course, there are so many of these platforms out there, I probably forgot to include one. But for that you can use such great plugins as Sociable.

Again, if you have any suggestions on what platforms I should add, please let me know!

Clean Typography

The main deal of building this theme is to provide a clear way to present the content written by FSFE-bloggers. Therefor the typography of the theme is of prime importance to its success.

In this case I’ve chosen a sans serif approach with the best possible font used on each platform. The CSS font stack looks like this:

1
2
3
4
body, select, input, textarea {
    color: #333;
    font: 14px/1.33em "Helvetica Neue", Helvetica, "Arial TT", Arial, sans-serif;
}

On the to-do list is adding the Liberation Sans font families, for users of the GNU/Linux operating system. These fonts are available in most graphical desktop default installs of modern distributions, and provide a visually coherent match with the theme.

Header and Favorite Icon

The Pome them has a header which provides a standard link back to fhe FSFE Fellowship.
The Pome them has a header which provides a standard link back to fhe FSFE Fellowship.

The header might not look like it, but it took me quite some time. Since both the title text and the description text are editable by the blog’s author, this can deliver extremely varied results. For instance, a really long title with a short description, or vice versa. It should all look good, or at least acceptable. An added difficulty was adding the Fellowship Link to the text, and having that nicely aligned even though the title spanned multiple lines. I expect this in the future to provide more issues, but I’ll tackle them as we come across those :)

The Pome favicon, left is before correction, right is, well, right!
The Pome favicon, left is before correction, right is, well, right!

Both the header link and the favicon are based on a re-designed 16 pixel plussy logo icon. The original FSFE Fellowship favicon was way out of colour range compared to the other visual on the site, something I’ve corrected now.

Comments

Since we’re still in a situation where Free Software needs discussion to convince, I’ve paid special attention to the comments section of the Pome theme. As you can see, the comments span the entire width of the theme, taking up an important visual place in the entirety of the site.

The Pome theme provides clear, spacious comments, which provide advanced functionality on hovering.
The Pome theme provides clear, spacious comments, which provide advanced functionality on hovering.

When a user hovers over the comment, advanced functionality is revealed which allows direct permanent linking, replying to a comment in thread style, and (when you are logged in with the correct priviliges) an edit link for editing the comment.

See it in action!

So, in conclusion I believe this is a great first version, but there’s a lot of room for improvement. To check out a running version of the theme, you can visit my test-blog at: http://blogs-test.fsfe.org/marklindhout

Suggestions, rants and raves

If you have suggestions, or if you feel like helping the development of this theme, feel free to drop me a line. Check out the sidebar for info on that.