TheStyle is a premium magazine-style theme, great for news sites and sites with multiple contributors (as well as blogs). Thanks to a modular layout and innovative background animation, it can go from sleek modernity to an engaging tangle with a click.
These five sites and blogs perfectly illustrate the potential of TheStyle – maybe one of them will speak to you, or you’ll get a flash of inspiration for customizing your own theme!
TheStyle has two features that set it apart from the rest of the pack: a customizable block layout that lets you select the sizes and layout of the posts on the home page, and animation that activates when readers select a post. Hover over any post and all the others automatically fade, allowing the background to shine through:
As you can see, it looks great with no background or customization at all: sharp, bold, graphic. With a few simple changes, though, TheStyles’s crisp grid transforms completely (and since it’s responsive, it looks just as good on a phone as a desktop computer).
First, we’ll take some baby steps — let’s add a custom header and modify the layout very slightly like the authors of NeuWrite San Diego, a collaborative science blog from professors at the University of California at San Diego. Custom headers and layout options are free theme options, no additional upgrades needed:
With this layout, no one post has precedence. Rather than starting with a double-width post, each post is the same size — great for a group of writers publishing frequently and in conversation with one another. A simple header graphic gives the site a personal feeling but keeps the focus on the theme’s bold typography.
Now, let’s stick to the standard version of the theme but add a custom background image and a sidebar with some widgets, like Footballosophy, the online home of a British comedy writer penning a book about Texas A&M football:
More importantly, check out what the page looks like when you hover over a post:
Subtle animations fade out the other posts, highlighting the one you’re interested in and letting the entire background image show through — an incredibly custom feel using a simple photo. Custom backgrounds are also a free theme option, so upload a few different photos to try, change your photos with the season, or use your logo as the background.
Of course, if you venture into the world of custom design, the possibilities open up even further. A background image along with some custom colors and fonts creates a site even a huge entity like the US National Institutes of Health could love — after all, Circulating Now, its blog on medical history, uses TheStyle:
The blog’s designers replaced the default bold white title font with a softer typeface in deep red. It stands out but doesn’t compete with their intricate background image. They’ve also opted for a layout featuring fewer posts, giving each a different visual weight.
(We especially love how the background images changes and streamlines as you scroll down the page — click through to take a look!)
If these layouts are too orderly for you and TheStyle’s clean grid is cramping your style, there’s no need to give each post the same space on the home page. Behold the controlled chaos of Femborg:
Femborg is a collection of pieces on feminism curated from across WordPress.com. The layout creates the sense of a collection of blocks, all different but fitting neatly together to create a unified whole — an apt visual metaphor for the site. The powerful background image doesn’t hurt, either! Custom colors echo the tones of the background image, creating an underlying cohesion.
We also love how the blog owners have personalized their widgets, renaming them to reinforce the blog’s concept. The blogroll becomes “Assimilated,” categories are the “Zeitgeist,” and their Twitter feed is a “Stream of Consciousness.”
Of course, there’s no need to use a background at all — a super-minimal approach works just as well for All the Write Notes, where 15 writers share their love of all things music:
The white background allows the header to pop and creates an experience more like reading a magazine — which is exactly what this site is.
Using some custom CSS (part of the Custom Design upgrade), they’ve altered the appearance of widgets, giving them a gray background to distinguish them from posts, unify them, and give the page an anchor. They’ve also used custom colors to add some pop to post titles.
TheStyle gives you lots of layout options and harnesses the power of images to great effect. Coupled with other customizing options, both free and paid, you’ve got the power to build a site that shows off a variety of great content and focuses your readers’ attention exactly where you want it.
Filed under: Customization, Design, Themes
