Who doesn't love "Before and After" home improvement shots? It's always amazing to see how just a couple of changes, like a coat of paint or a quick do-it-yourself project, can transform a living space dramatically. It's no different when it comes to WordPress.com blog themes, in which a little customization can go a long way.

Today let's take a look at Beau and Arrow Events, a wedding inspiration blog run by Ellen and Kate, two San Diego-based event planners. You'd never know that this chic blogazine is running on Comet, one of our sparest themes.

comet_ba

Here's how the bloggers behind Beau and Arrow Events transformed grayscale Comet into cursive and gold elegance. It's nothing any intrepid blogger couldn't try at home!

A cohesive color scheme

bandaLike any well-planned wedding, Beau and Arrow Events picked a handful of theme colors and stuck to them. In this case, blush and gold accents temper plain black and white.

The bloggers opted for a busy backdrop with a pink-and-white arrow pattern, but keep it from commandeering the design by not repeating it anywhere else. In fact, the backdrop is the only space pink appears in the color scheme. Elsewhere, like on container borders and links, the bloggers chose gold as their sole accent. The effect is a perfectly balanced duochrome.

To learn more about personalizing your blog with custom colors, view the tutorial.

Typefaces that brim with personality

On Beau and Arrow Events, the bloggers made bold font choices that hold their own with their featured wedding photography. You'll notice that their custom header image isn't a logo at all, but a medley of complementary fonts. The effect is an elegant, feminine vibe that caters perfectly to the blog's wedding-planning audience. To continue this theme throughout the page, Ellen and Kate chose flirty Fertigo Pro Script for headers, and the classic serif Skolar for a readable body text. A smaller, caps-lock version of Fertigo creates notice-me sidebar titles.

If you're interested in reading more about how you can personalize your blog with custom typefaces, yes, there's a tutorial for that, too!

Custom bullet points enhance the sidebar

bulletsEllen and Kate maintain consistency in their design by carrying over the ampersand in their custom header image to the bullet points on the sidebar. They're able to do this by setting a custom image in place of the regular black dot for bullet points that typically mark unordered lists.

You can dive into your CSS to have more control and customize your site the way you want — to make a variety of tweaks, such as setting a custom image for an unordered list, like Ellen and Kate do here. In order to edit the CSS, they use the $30 Custom Design Upgrade and a small ampersand image.

Here's how to make your own custom bullets:CSS

  • Create and upload a small image, which we'll call custom.jpg, to your Media Library.
  • In the Customizer, navigate to the CSS button on the lower right side.
  • Now, you'll want to roll up your sleeves and do a little coding! In CSS lingo, "ul" is how we refer to an unordered, or bulleted, list. To change the icon that shows up as the bullet, we'll want to specify a "list-style-image" property that affects that "ul." Finally, we'll need to specify a URL where this image lives. Since it's in your Media Library, it lives at custom.jpg.
  • Now we need to put the above information into syntax browsers can read. It's OK if you don't understand exactly why it's worded this way, just know that it's the same information we outlined above. Add a line that looks like this anywhere in the Customizer editing window:

ul { list-style-image: url('custom.jpg'); }

  • Save and refresh, et voila! — you should see a heart, star, or whichever custom image you picked in place of the ordinary bullet point.

You can do much more with custom CSS to make these types of design tweaks — for more, check out our support page on custom CSS.