My dearest zombie horde,

It’s been a while since we’ve had a real chat outside of Thesis tutorials. In fact, I don’t think we’ve ever had a heart to heart. I feel like I’ve gotta spill my guts to you before my brains are gobbled up. This is a hard decision for me. Indeed, this is one of the hardest decisions I’ve had to make in a good long time. Unfortunately, it’s also a long-time coming.

violetminded Design is coming up on one-year-old and in our first year together, we’ve created many shinies and with those shinies, we’ve created spaces and sites that are reflections of their owners. The family of clients that violetminded has built up over the past year have been amazing, insightful, and brilliant in their careers (no matter what they do or what they sell). I wouldn’t trade you for the whole world on a string.

As violetminded reaches this critical milestone, we’re going to be taking  a step back from accepting new clients and new projects for the next month or so.

We’re not done.

We’re not gone.

No apologies. No sadness. No regrets. No good-byes.

violetminded Design just needs to take a huge step back in order to leap forward.

Everybody knows that the default Thesis look is… minimalistic and boring. The grey. The white. The boring navigation menu. No colour to be seen anywhere. You might like that about Thesis so you can skip the colour section…

I’ve put together five tips to make Thesis look its best. It’ll be like slipping a fabulously tailored suit on your significant other when all they’ve worn is jeans and t-shirts. Mmm mmm.

Customize The Header

When your header is boring, the rest of your site seems boring. Even the content seems boring. We don’t want that. We want people to come to your Thesis powered site and be wowed by its awesometacularness! So, y’know, change that header out.

All it takes it a couple of lines of code and a little bit of design know-how to pull this one off.

Thankfully, the first installment of Decrypting Thesis CSS is about sprucing up your header (and other kinds of header magic).

(PS. If your design know-how is equivalent to that of a porcupine, you know where to find me.)

Spruce Up the Typography

While everybody loves Georgia, it gets old to see it on site after site after site. Yes, Georgia is gorgeous typeface. Yes, I use it in my own designs. But, like everything else default, it’s got to go.

There are two ways to spruce up the typography in Thesis.

The first way uses the Design Options in the Thesis menu. Choose the typeface that you’d like to use in the Body and Content Area. All of the fonts used in the menu are lovely in their own capacity so if you know nothing about typography, then choose the one that you think suits your site best.

For you advanced Thesis users, you can go in the back door (see what I did there?). By setting the value in custom.css, you’ve allowed yourself to use typefaces that aren’t listed in the Thesis options. If you’re interested in getting really fancy, then you should take advantage of the CSS-3 @font-face. Mezzoblue has an excellent tutorial about how to utilize @font-face for your web designs.

If you’re not into @font-face, then you should definitely change the font-stack in the .custom .body. For some examples of appropriate font-stacks, check out SitePoint.

Pick Your Palette

Now that you’ve gotten yourself a slick header, you need to make the rest of your site match. Mismatching and horribad colour schemes are the way to the Dark Side.

“Fear is the path to the dark side. Fear leads to anger. Anger leads to hate. Hate leads to suffering. Suffering leads to terrible colour choices.” — Amanda Speaking Through Yoda

If you’ve got experience with colour, then choose a palette that has at least four colours (six is best). If you’ve never really worked with a colour wheel, putting colours together can be kind of daunting. So, my suggestion is that you use a tool like Color Schemer. Drift through their colour schemes until you find one that really matches your header.

Now it’s time to put it into action.

Again, like with the typography, there are two ways you can colour your site up. You can do it through the Design Options in the Thesis menu or through custom.css. It’s easiest to do it through the Design Options, and if I learned nothing else from my time in university, it’s that if you can cut corners (and it still works), do it. I know. Shining pinnacle of university educated youth. (wink)

Go through and use this palette to add some pizazz to your default colours. Play with the colours of the links. Play with the colours for your entry headers. Just play, play, play until you find the magic combination that makes the palette dance off the monitor… y’know, in a good way.

Change the Colour of The Navigation Bar

Don’t underestimate the power of a few good colours. Once you’ve got your colour palette together (and have applied it to the rest of your site), it’s time to apply to your navigation bar. This grey doesn’t know how to make a statement. It’s up to you to make it snazzy.

There are a whole host of tutorials on making your navigation bar pretty but if you just want to change the colour, I suggest that you start with the very first navigation tutorial from Decrypting Thesis CSS. It’s called “Navigation Made Simple”. Go forth and make it shine.

Prettify Your Sidebar Headers

.custom .sidebar_list .widget h3 { font-variant: normal; padding:10px; color:#26807e;  letter-spacing:-0.015em; }

I don’t really care for the small-caps on the sidebar; font-variant sets that back to normal, capital case. The default letter-spacing is quite wide so tightening it up a bit is definitely a good idea. If you want to get really fancy, you can add a border to the bottom of the header (dotted looks best).

.custom .sidebar_list .widget h3 { font-variant: normal; padding:10px; color:#26807e;  letter-spacing:-0.015em; border-bottom: 1px dotted #ccc; }

.….….….….….….…..

Customizing Thesis doesn’t have to be a long and drawn out process if you don’t want it to be. All it takes a little bit of design know-how, patience with learning the code, and a vision of what you want it to look like. Don’t be afraid to experiment. Definitely don’t be afraid of the code.

You can make Thesis bee–you–tee-full.

Thesis Teasers are unwieldy little brutes. Unwieldy, two column, completely unreasonable brutes.

On the surface.

In this edition of Decrypting Thesis CSS, we’re going to look at customizing Thesis Teasers. So far, we’ve covered Headers and Navigation with Parts One through Four.

• Part One: Headers
• Part Two: Basic Navigation
• Part Three: Transparent Navigation
• Part Four: Vertical Navigation

Checklist o’ Essentials

Before beginning:

1. Open custom.css and custom-functions.php in your favourite text editor or HTML IDE (ie., Dreamweaver).
2. Open your FTP client.
3. Have a back-up copy of your custom.css and custom-functions.php saved on your hard drive. Y’know, in case you make a boo-boo. Hey, it happens.

Thesis Teasers

With the release of Thesis 1.7, they sorta moved the display options for the home page to the Page Options menu. Home Page Display controls how many teasers are on the front page. If you set the “Featured Posts” option to display 10 posts (the WordPress default), there will be no teasers. Consequently, if set the “Featured Posts” to 1, there will be 9 teasers. So, y’know, if you were missing that… that’s where they moved it.

.….….….….….….…..

I had this dilemma not long ago when I was coding up a client’s design: how do I get the teasers to display in one column instead of in two? The two column “magazine style” just wasn’t working for me (or the design, for that matter). And so: displaying Thesis Teasers in a single column.

Strangely, a lot easier than you’d think. It’s all in the CSS, baby.

.custom .teaser { width: 100%; margin-top: 15px; padding-top: 15px; text-align: justify; }
.custom .teasers_box { padding-top: 0; padding-bottom:0; border-top: 0;  }

What this’ll do is make sure that the teasers will be the full width of the content column instead of being split. You can set the text-align to left, if you’d like, but I liked the justify. But I do love me some ragged edging.

.….….….….….….…..

Thesis Teasers make for a sexy magazine theme, if you knew how to use thumbnails. Thumbnails are really easy, believe me, especially if you’ve been futzing with the navigation.

If you add a new post (or edit one, for that matter), there are a bunch of collapsible menus underneath the editor (SEO, Thumbnails, and JavaScript Libraries). While I do recommend that you fill out the SEO Details for each post (and so does Dave), it’s not nearly as essential to a magazine styled Thesis Theme as thumbnails are.

Process is simple: upload a picture into your media library, copy and paste the URL into the thumbnail image URL, enter the alt text (which will be used in case the image can’t be loaded), and set where you want the image to appear. I would recommend the default setting of above post; it’s lined up with the entry-title that way and usually lines up with the bottom of the teaser. Rinse and repeat for all entries that you wish to have a thumbnail for.

The thumbnails don’t come out to play until the teasers so you won’t see them on the featured posts.

.….….….….….….…..

And there we have it: a general understanding of how the Thesis Teasers work, as well as how to style and customize them.

This tutorial is being revised, yo. Come back later. :]

xo,

The Violet Zombies

As Sarah often does, she got me thinking. About roots. Not Roots. Not even Roots. Instead, the roots of the business that I’ve spent close to a year creating and nurturing. Where I came from. What prompted me to start? What keeps me going? Where is the road leading me?

Technology, university, and oil sands

I was seventeen when I decided I wanted to be a software developer. It happened somewhere between History and Math 12. On our way to class, my then-boyfriend brought up that he wanted to major in political science once he got to university. It didn’t really surprise me as he was often in the thick of political arguments and discussions both in and out class. I hadn’t thought too long and hard about the whole university thing. I figured that I’d just… figure it out when I got there.

At first, I thought about writing and journalism.

I scrapped that. I was a good writer but I had no desire to be a starving artist.

Acting?

Again, decent actress. Still starving.

Code? I did like code. I thought back to the times I sat with my dad as he learned Turbo Pascal. I certainly enjoyed Visual Basic in our Information Technology class.

I was onto something. I told him that I wanted to go into computer science. He was the non-reactive sort and merely raised his eyebrow at me as we walked into Math class. I told the rest of our friends that I’d decided I was going into software and would therefore need exemplary Math grades. Quizzical glances aside, I was decided. It would be software. I would be a programmer.

Unfortunately, the software industry wasn’t all it was cracked up to be. Or, it wasn’t all I thought it would be. Instead of being part of a highly collaborative, intensely creative team, I was often paired with lacklustre students whose talents ran more towards surfing the internet than the shell scripting tasks we were assigned. Often the only female, I stuck out. Often the only one with wild fashion, I stuck out more. I hated polo shirts. I hated khakis. I couldn’t stand the Corporate Uniform of almost suits.

The oil sands were unkind.

Warehousing was even worse.

And so it was that in 2008, I was fired from my first job out of university. I let myself be devastated for longer than I should have. I re-enrolled in school. I took courses in interactive design, some of which were interesting but most of which were pretentious and irritating. I left after one semester. I struggled. I took a job in career counselling. I thrived there, helping people realize their dreams and goals in a hard economy; aiding with skills development and brainstorming for their futures.

After only four months, I went back to unemployment.

No. Self employment.

Identity crisis meets entrepreneurship meets wild chick with a dream

After my brief stint in career counselling, I was back to my own little world of uncertainty. Moving back to my old life was hard enough after a summer away. I had to rediscover living with him while trying to determine what it was that I wanted to do. I knew that I couldn’t handle another job in a cubicle. I did my time there. I paid my dues from eighteen to twenty-one. Three years felt like an eternity.

No cubicle meant no software unless I wanted to freelance. I did like the idea of freelancing but not for software. I’d done a few projects on rent-a-coder and I wasn’t really feeling the whole “rent my services” consultation bidding process. Seemed shady. Freelancing as a code monkey was out.

What else was I good at?

Design.

I actually was a pretty good web designer. I wasn’t stellar but I knew that I could produce some beautiful websites if I practiced and worked hard. On September 15, 2009, violetminded Design debuted its first design.

It was truly awful.

Creative, yes. Wild, yes. Lacking an identity? Definitely.

But I had an idea and a vision: I wanted to create wildly creative websites for creative professionals that couldn’t otherwise afford a huge design studio to put their dreams together. I loved the idea of being able to help people with their web dreams. So I threw myself into it, face first.

I spent months scrambling to find people to work with.

Kelly Diels was my first real client. Her contribution to the growth of my business is, to say the very least, is invaluable. Without Kelly, I would probably be where I was in October 2009: struggling to figure out what I was supposed to do with my life. She told me I was a genius and that I had real talent.

I was (and am) an adamant admirer of Ms. Diels. Those words meant everything to me. Absolutely everything.

On January 1, 2010, she put money in my PayPal as a promise for the New Year: we were going to do great things and we were going to do them together.

Solopreneurship? Collaboration.

Collaboration trumps competition. I wrote the piece after having a conversation with Sarah Bray about her business, which is fairly similar to mine. Instead of backing into the corner and baring my teeth at her, I sought her out. She is a shiny, brilliant woman with a shiny, brilliant business. I sort of attached myself to her shine.

I’ve been taught (and humbled) that no one makes it on their own. You need a team of people in your life and business that push you and help you to see beyond yourself and your goals. I’ve had an incredible team of friends and family (including my amazing family of clients) that have shoved me along the road. I’ve had my own bumps. I’ve fallen on my face a few times since January. I’ve made a lot of mistakes.

My roots are humble: an inexperienced youngling breaks away from corporate and starts out on her own but isn’t on her own at all.

It all started in between History and Math class.

It all came to fruition on a rainy day in Vancouver.

It’s been an altogether wicked, crazy, cool, awesome way to spend my twenty-third year.

Launching is hard work, especially if you’re doing it in a rush. It’s a rush to get the product finished. A rush to get your product out there. It’s even a rush to get it marketed in a way that you’re not tearing your hair out and sobbing in a corner at the end of the day.

And then there’s the question of affiliates. You know you need them. But who has time to deal with hiring a graphic designer, a copywriter, and possibly a developer to make sure that your affiliates are happy? Answer: not you.

We’ve got a solution for you.

We brainstormed and determined that we’re all in the midst of launching products and wouldn’t it be nice to have a package for our future affiliates? Wouldn’t it be that much more convenient to hire a group of professionals to do the leg-work for us?

Nods. Smiles. Understanding.

The KiSS Kit for Affiliates, brought to you by Kelly Diels, Dave Doolin, and the violet zombies.

Those in need of an effective solution (turned around in 48 HOURS!), this is your lucky day. Or week. Or what have you. We’ve taken the guesswork out. You get hot graphic badges for your affiliates (from me). You get a page of copy explaining your affiliate program to your potential affiliates (from Kelly). And a super-easy, holy-hot-damn-this-rocks plugin from Dave Doolin that allows you to drag, drop, and widget up your affiliate badges.

Wowsa.

Any other time, this sort of thing might cost you $2000 ($250–500 for Kelly’s time, $125 for mine, and close to $1600 for a custom plug-in from Dave).

For you, we’re charging $225 USD.

Kelly’s the real copywriter on this one so she wrote us up a “whatchaneedtoknow” page.

Go forth and affiliate, friends.

Whole lotta kick-ass

A few friends turned me onto Dave’s site a couple months ago. What really hooked me (aside from his content) is the presentation. The layout. The strategic display.

The typography. By Zeus’ beard: the typography blew me away. Visual hierarchy actually hard at work? A design with more typography than graphics or photos?

Hell to the yes.

Gimme.

Reese of Designs by Reese has had her typophile hands in many of the websites that I credit with some of the best designs in niches like coaching, lifestyle design, online business, and online strategy. Usually, these kinds of sites are stodgy. Boring. Blech. Not Reese’s sites, though.

Reese doesn’t get caught up in the hullabaloo that designers sometimes can: more graphics means better design. I’m a firm believer in content first. The design needs to be beautiful, yes, but the whole point of the design is to highlight the kick-ass content.

Reese hit this one out of the park. I look forward to seeing more of her work in the future.

Something new for violetminded: showcasing my favourite interactive and web designs once a week.

I discovered Robyn’s music a little over ten years ago at a school dance. This Swedish pixie swept through the Top 40 lists in North America and then disappeared into seeming obscurity until 2005, with the release of Robyn.

Her style is whimsical, a little industrial chic, and a whole lot of sass. With the release of her latest album(s), Body Talk (pt. 1 & pt. 2), her website underwent a serious design change. Instead of the typical website formula of header, navigation, content, and footer, Robyn’s new site is fully interactive. Each menu can be moved across the interface, minimized, or maximized. Don’t want to see the blog? Minimize it. Move it somewhere else.

The design is surprisingly minimal, in spite of the intricate navigation. It’s bold. Seductive. It’s got punch.

Behold the hotness!

J’adore.

Did I mention that I borrowed her rockin’ hairstyle?

‘Cause I totally did.

Win on all counts.

It’s been a while since we talked about Decrypting Thesis’ CSS. Figured that it’s high time we finished up our discussion on beautiful and customized navigation. The last navigation article talked about how to simply and easily customize your navigation to be above or below the header, as well as customizing it to be fully coloured.

This is the advanced class. Don’t be skippin’ ahead! Or, if you really want to, I guess we can let that happen. Don’t forget to bring me an apple next time. Or a shiny.

• Part One: Headers
• Part Two: Basic Navigation

Checklist o’ Essentials

Before beginning:

1. Open custom.css and custom-functions.php in your favourite text editor or HTML IDE (ie., Dreamweaver).
2. Open your FTP client.
3. Have a back-up copy of your custom.css and custom-functions.php saved on your hard drive. Y’know, in case you make a boo-boo. Hey, it happens.

Transparent Navigation

Grey Sky Thursday: Transparent Nav, baby

You’ve got the solid colour blues, baby. You don’t want to have a solid colour — you want to have a beautiful background image that will make you weep, just by looking at it. Okay, well, maybe not so powerful but still: there’s something about a well-styled navigation bar that gets a girl hot under the collar.

Or keyboard. Whichever works.

This is a pretty easy tutorial, as long as you’ve read the bit on Basic Navigation Styling.

.custom .menu { background:url(images/navbg.png) no-repeat; }

First, we’ve got to set the background image that we want for the navigation. Alternatively, if you have no background image you’d like to set (if you want the navigation over-top that stylin’ banner), set the background-property to none.

Looking good. One problem: all the links are still gray. Shoot. Good thing we can fix that.

Just like when we were changing the colours of the navigation menu in the last tutorial, we have to set each menu item separately.

.custom .menu .tab-1 a:link{ background:none; text-transform:lowercase; color:#063261; border:none;} .custom .menu .tab-1 a:visited { background:none; text-transform:lowercase; color:#063261; border:none; }
.custom .menu .tab-1 a:hover { background:none; text-transform:lowercase; color:#229a69; border:none;}

Each tab will need to be set in the same manner, with a set of three declarations: one for the normal state, one for the hover state, and one for the visited state. By setting the background-property to none, you’re declaring it as transparent.

Poof! Gray is gone!

This technique is excellent for specifying a navigation background or for placing your navigation over your banner. Please note that some of these techniques haven’t been tested in Internet Explorer. Remember: all good zombies cross-browser test. Except me. I’m a bad zombie. Baaaaad zombie.

More Navigation Tips ‘n Tricks in the next Tutorial

Check your inboxes and Readers for the next installment in the series: Decrypting Thesis CSS: Vertical Navigation. Warning: this’ll be a tricky one. Trickiest of ‘em all. In the meantime, you should follow me on Twitter.

All you violet zombies know that violetminded Design is all about the mixology behind great design and even better designer-client relationships. Yesterday, I wrote about diving into challenges and projects. No baggage. Just creativity, pure and simple. Excellence begets excellence. Exceptional begets kick-ass.

The past few months have seen some great times for violetminded. With the help of my team (the Commodore and the Illustrator), we’ve produced websites and identities that made our clients (and new friends) dance with joy. Then we danced. The zombies sorta lolled around. Lazy punks.

Somehow, in the midst of it all, I did some brainstorming.

There had to be a way for me to give some design love to the peeps that I couldn’t take on or that didn’t have a lot of scratch to throw my way. I came up with the idea of Bite Sized Sites. From Bite Sized, came my first Thesis Skin: Grey Sky Thursday. It’s currently hanging out on my personal site, Nerdy Vernacular (aka, AmandaFarough.com). Shiny.

The Photoshop Mockup

wtf is Grey Sky Thursday?

It was a rainy day in Vancouver (surprise?) when I came up with the design concept behind this skin. I wanted to create a soft palette that was cloudy, moody, and feminine without being overly girly. The result was splashes of colour (blues, teals, purples, pinks, and even green) that looks a lot like a watercolour painting. Two columns. Emphasis on content. Attention to detail. Lots of white space. Minimalistic. True violetminded style.

The money is in the footer, with its reaching puffs of colour.

What’s included?

Included in the theme is the means to duplicate the design and site options. As long as you have a copy of Thesis 1.6+, you’ll be able to take the files and put them in your custom folder. A couple of clicks and you’ll be good to go.

Also included is the .psd of the banner so that you can make changes as you’d like. Nobody likes a cookie cutter theme, even if it’s skinned. Change the banner text. You will need to install the fonts included in the “type” folder (Otari).

Don’t have Photoshop? Let me know and I’ll see what I can do to make some tweaks for ya.

I want this skin! Gimme!

Whoa cowboy. Not so fast. I ain’t sellin’ this yet. Good news: I am looking for a few guinea pigs to test out this most excellent venture. If you’re interested, post a comment or drop me a line on the contact page.

Want to be notified when this theme’s available?

Very soon, my precious zombies, there will be a newsletter. Until then, sign up for the feed. It won’t bite. Often. Maybe. We can hope.