My WordPress Website Needs A New Logo

I’ve written a fair amount about developing my Minimatica themed WordPress website, GregAitkenheadPhotography (if you’re building your own website, don’t forget to check out the Unofficial Users Guide).  Like many photographers, I find that the Minimatica theme works great for my portfolio–its easy to set up (once you get used to a few quirks), it has a great slider for showcasing photography, and its minimal style keeps visitors focused on the art work, not on ads.

One of the issues I wanted to fix, but didn’t feel like I had the tools to tackle, was the website’s flat header title.  I didn’t want to clutter up the front page with an image or a banner, but I also wasn’t happy with the ultra minimal logo or the default font.  Luckily, I found a free Tuts+ Premium video tutorial called 30 Days To Learn HTML and CSS by Jeffrey Way.  Day 19′s episode, The Basics of Typography, gave me all of the information I needed to add flare to my website’s text logo in the form of a new open source Google web font and a drop shadow effect.

Here’s how I did it:

1. I hadn’t yet created a child theme for my portfolio site, so that was the first thing I wanted to accomplish (for more information on creating child themes, see this post).  I was a little worried about some of the website’s style elements moving around, so I started by updating all of my pluggins and backing up my website (There are lots of ways to back up your website–I use a plugin called “Backup To Dropbox” for incremental backups, and the FTP client Cyberduck for downloading my website’s home folder to my computer).  Then I followed the instructions found here, replacing the code’s variables like theme name and theme URI (yes, that’s “URI,” not “URL”) with my own.
2. Then–install link to Google web font right below the opening head tag in header.php–I went with Microma, with sans-serif as a backup.
3. Style.css: add for header

   #header h1 a {
   	font-size: 80%;
   	font-family: 'Michroma', sans-serif;
   	letter spacing: -20px;
   	text-shadow: 5px 10px 10px #C0C0C0
   }

   change for navbar

   .nav ul li a {
   	display:inline-block;
   	padding:5px 0;
   	color:#252525;
   	font-family: 'Michroma', sans-serif;
   	letter spacing: -15px;
   	font-size: 75%;
   	text-shadow: 5px 5px 8px #C0C0C0
   }

 

Here’s the finished product.

I liked the Google web font and the way the drop-shadow turned out, but in the end I realized that I probably liked tinkering with my site’s CSS more than I the effect–and went back to the minimal looking san’s serif font.