Customizing Koi: 129 Twig & Vine

The past several months, we’ve highlighted a number of sites that use some of the popular free themes available on WordPress.com — Oxygen, Bueno, and Sight to name a few. Visiting a site is a bit like walking into someone’s house, and as you poke around, you’ll notice someone’s personal style and accents. With custom touches, the users we’ve featured so far have truly made these sites their own.

Sue Schlabach warmly opens the door to her online home, 129 Twig & Vine: a stylish, vintage-inspired blog on art and life in central Vermont. She has completely transformed Koi, the playful orange theme you can’t miss in our Theme Showcase. Here is Koi’s out-of-the-box look next to Sue’s site:

Sue, an artist living on a hillside in a rural area, evokes the artisan lifestyle with 129 Twig & Vine‘s paper craft-inspired look and antique touches. She liked the foundation of Koi, but wanted a personalized design that wouldn’t be confused with any other blog. So, she stripped it down, then customized different elements.

A bold, elegant header

Her bold custom header immediately creates a certain mood — the slightly weathered background and decorative font resemble the sign decor for a cozy and rustic place. “I created the green header in Photoshop, with influences from mossy garden signs in French and English gardens,” says Sue.

You can upload your own custom header by going to Appearance » Header in your dashboard. (Remember that each theme is different; if you don’t see this option, your theme doesn’t support the feature. If you’re curious, this list of themes support the use of a custom header.)

A creative and crafty background

Sue’s background is simple and white, but with a crafty twist: at the top, she displays a collage of snipped paper, composed of French letters and documents she bought in France. To start, she scanned the collage, then added the dotted background between the paper strips to customize the look even more. Effectively nostalgic, the bits of paper transport you to a place of slower pace, or even the Victorian past.

You can upload a free custom background image like Sue — head into your dashboard and go to Appearance » Background. (We’ve talked about custom backgrounds over at the Daily Post, in case you’re looking for inspiration.)

Vintage-inspired custom widgets

Much of Sue’s artwork and illustration is vintage-influenced. The antiquarian look for her blog is not only a natural choice, but also personal. For example, the old photograph for the About image at the top of her sidebar is from the 1920s: an image of her great aunt Ruth, on guitar, with one of her friends.

“Here, they’re standing outside my grandmother’s childhood home in the Chesapeake region of Virginia. There are several photos from this particular summer day when my great-grandparents brought the velvet living room settee out on the lawn, and friends joined them to play music and sing. For fairly conservative Mennonites, this seemed like a joyous and exuberant thing to do — not in keeping for the reputation of Mennonites from that time. I like being the descendant of people who would do something like this. My life is centered on living outside in Vermont, during the months that allow it. I have a deep affection for this photograph.”

The other vintage bits in Sue’s sidebar are taken from old postcards, advertisements, labels, and letterpress posters. She likes to use letters from old printing whenever possible, and digitally cuts and rearranges letters to make new words.

Another custom image widget, shown on the right, acts as an “email me” button. You can do the same: in the image widget’s settings, be sure to fill in all the fields, especially the “image URL,” which specifies the location of the image, which you’ll have uploaded to your Media Library.

You must also fill in the “Link URL” field at the bottom — “mailto:” followed by your email address, to ensure messages from your readers will be sent to you.

For more on custom image widgets, see this tutorial in our Widgets series.

Scrapbook-like photographs

If you look closely at the images displayed on Sue’s posts and pages, you’ll notice the corner details of the frames, as if her images are film photographs tucked into scrapbook pages.

Sue made a variety of photo templates in Photoshop for the single images and image montages on her site, which she admits were a little complicated early on.

“I simplified these photo templates and removed a graph paper border that I’d used for the first two years. Each template has a layer mask with the four corners cut off. I paste my photos into the mask, and have layers above that with the cut marks. Under the photo is a shadow in the shape of the mask, but warped slightly on each in the way a natural shadow looks under a photo that’s laying on the table.”

For the oval labels that you see at the corner of images, Sue remodeled a label she’d bought at Vanves Flea Market in Paris, France. “I loved the label edge — it made me think of Bloomsbury artists’ work from the turn-of-the-century. A visit to a Bloomsbury house was influential in kick-starting my creative endeavors,” says Sue.

(If you’re interested in dabbling in Photoshop, you can find resources online, including Adobe’s tutorials. Sue recommends the Photoshop tutorials at Pugly Pixel.)

Further customization with the Custom Design upgrade

With the Custom Design upgrade, you can further tweak color, font, and CSS. Sue’s color palette is simple but effective — the green is bold and prominent. “I love just about every shade of green that exists, so I knew that green would be part of my design. I splashed it everywhere at first: headings, widgets, and the background,” she says.

Eventually, she went with a minimal approach, and now, the green is focused on the header, the dates of the posts, and the sidebar’s widget titles. Her font colors are a mix of brown and green: “I love the two shades together: garden soil and lush leaves.”

In addition, Sue got CSS help from her husband. “He patiently helped me to strip out Koi’s default background, change the fonts and colors of the headings, and adjust the column width for the posts and the sidebar.” To see what you can and can’t do on your own blog, take a peek at the custom CSS support page.

---

Email Newsletter

Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications—please check your spam folder if you don't receive this.

Email Address:

Follow

Join 110.1M other subscribers