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:

Before-After Koi

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.

Header

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.)

custom background

Vintage-inspired custom widgets

About widgetMuch 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.”

Email linkThe 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.

Link URL

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

Scrapbook-like photographs

ImageIf 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.”

oval labelFor 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.


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.

Join 16,994,858 other followers

Cheri Lucas Rowlands

12 Comments

Comments are closed.

  1. Mike Carroll

    Very informative post, excellent blog as an example. In one way, though, it makes choosing a theme harder, because Sue’s looks so different from the demo. Or maybe choosing a theme doesn’t matter so much, as long as it’s customizable? Food for thought.

    Like

    • Cheri Lucas Rowlands

      Or maybe choosing a theme doesn’t matter so much, as long as it’s customizable?

      I actually thought the same thing when I was putting this post together — you can keep the “bones” of a theme but strip it down so much that it ends up being totally transformed…which means, yes, perhaps it doesn’t matter so much what the theme is, as long as you’re aware of the various ways (many of them free) you can tweak it.

      And indeed — there are many options out there, and sometimes this can be paralyzing. Which to choose?

      Like

  2. Aliyaaaa

    A clever and personal way of making a free template into your own. Great job!

    Like

  3. Flossie

    It’s really helpful to have these posts, showing how to be creative with your themes. This is a lovely example!

    Like

  4. sohoryan

    Why not just design your own from scratch? Or is that option not available?

    Like

    • Cheri Lucas Rowlands

      When you sign up for a new site on WordPress.com, you’re asked to pick a theme. (Some themes are more minimal than others, and they certainly feel like a clean slate!) For those who want to completely design from scratch and have some of that knowledge to do so, they can consider self-hosting, too: http://wordpress.org/

      Like

  5. wordcoaster

    Every time a new theme comes out, I hope that it’s the PERFECT one for my blog. However, perhaps I should just follow Sue’s example and put a new outfit on the theme I already have (which just so happens to be Koi). I only wish I was better at photoshop; there’s no way my design would look anything close to as good as Sue’s does. :)

    Like

  6. Audrey

    I would love to see where a theme has been changed using only free changes, and then what more could be done with the purchased upgrade.

    Like

    • Cheri Lucas Rowlands

      Thanks for the comment — for this and another recent post (Customizing Sight), the last sections dedicated to the Custom Design upgrade mention what tweaks are paid.

      We’ll also be starting a series of posts on CSS over at the Daily Post in a few weeks, so check back there/follow that blog if you’re interested in learning a bit more what you can/can’t do with custom CSS (which requires the upgrade).

      For future Customizing posts, we’ll continue to make it clear what tweaks are free, and what are paid.

      Like

  7. kognitions

    Love this! It’s fun to personalize but when you are not really sure how to really go about it you feel a bit out of your depth. Your blog is really a terrific help, thanks!

    Like

  8. snoopys@snoopysdogblog

    It’s hard to believe the two examples are the same theme! It’s great to see just how much you can customize it – 129 Twig & Vine looks really interesting, will have to stop by!

    Hope you’re having a fun day,
    Your pal Snoopy :)

    Like

Follow

Get every new post delivered to your Inbox.

Join 16,994,858 other followers

%d bloggers like this: