<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>violetminded Design</title>
	
	<link>http://www.violetminded.com</link>
	<description>making your website bee-you-tee-full</description>
	<lastBuildDate>Tue, 13 Jul 2010 19:28:01 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/violetminded" /><feedburner:info uri="violetminded" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:emailServiceId>violetminded</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><item>
		<title>A Lesson of Roots</title>
		<link>http://feedproxy.google.com/~r/violetminded/~3/jlNI9OVLNVA/</link>
		<comments>http://www.violetminded.com/freelancing/a-lesson-of-roots/#comments</comments>
		<pubDate>Tue, 13 Jul 2010 19:26:15 +0000</pubDate>
		<dc:creator>Amanda</dc:creator>
				<category><![CDATA[Freelancing]]></category>
		<category><![CDATA[collaboration]]></category>
		<category><![CDATA[creativity]]></category>
		<category><![CDATA[sarah bray]]></category>
		<category><![CDATA[solopreneurship]]></category>

		<guid isPermaLink="false">http://www.violetminded.com/?p=610</guid>
		<description><![CDATA[As Sarah often does, she got me thinking. About roots. Not Roots. Not even Roots. Instead, the roots of the business that I&#8217;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 [...]]]></description>
			<content:encoded><![CDATA[<p></p><p><a href="http://sarahjbray.com/2010/07/diary-of-web-worker-on-being-solopreneur/">As Sarah often does, she got me thinking</a>. About roots. Not <a href="http://canada.roots.com">Roots</a>. Not even <a href="http://www.imdb.com/title/tt0075572/">Roots</a>. Instead, the roots of the business that I&#8217;ve spent close to a year creating and nurturing. Where I came from. What prompted me to <strong>start</strong>? What keeps me going? Where is the road leading me?</p>
<h3>Technology, university, and oil sands</h3>
<p>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&#8217;t really surprise me as he was often in the thick of political arguments and discussions both in and out class. I hadn&#8217;t thought too long and hard about the whole university thing. I figured that I&#8217;d just&#8230; figure it out when I got there.</p>
<p>At first, I thought about writing and journalism.</p>
<p>I scrapped that. I was a good writer but I had no desire to be a starving artist.</p>
<p>Acting?</p>
<p>Again, decent actress. Still starving.</p>
<p>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.</p>
<p>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&#8217;d decided I was going into software and would therefore need exemplary Math grades. Quizzical glances aside, I was decided. It would be software. <strong>I would be a programmer</strong>.</p>
<p>Unfortunately, the software industry wasn&#8217;t all it was cracked up to be. Or, it wasn&#8217;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&#8217;t stand the Corporate Uniform of almost suits.</p>
<p>The oil sands were unkind.</p>
<p>Warehousing was even worse.</p>
<p>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.</p>
<p>After only four months, I went back to unemployment.</p>
<p>No. <strong>Self employment</strong>.</p>
<h3>Identity crisis meets entrepreneurship meets wild chick with a dream</h3>
<p>After my brief stint in career counselling, I was back to my own little world of uncertainty. <a href="http://amandafarough.com/2009/12/best-of-2009-challenge/">Moving back to my old life was hard enough after a summer away</a>. I had to rediscover living with him while trying to determine what it was that I wanted to do. I knew that I couldn&#8217;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.</p>
<p>No cubicle meant no software unless I wanted to freelance. I did like the idea of freelancing but not for software. I&#8217;d done a few projects on rent-a-coder and I wasn&#8217;t really feeling the whole &#8220;rent my services&#8221; consultation bidding process. <a href="http://socialmediasystems.com/blog/why-elance-rent-a-coder-freelancer-and-other-freelancing-sites-are-terrible/">Seemed shady</a>. Freelancing as a code monkey was out.</p>
<p>What else was I good at?</p>
<p>Design.</p>
<p>I actually was a pretty good web designer. I wasn&#8217;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.</p>
<p>It was truly awful.</p>
<p>Creative, yes. Wild, yes. Lacking an identity? Definitely.</p>
<p>But I had an idea and a vision: I wanted to create wildly creative websites for creative professionals that couldn&#8217;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.</p>
<p><strong>I spent months scrambling to find people to work with.</strong></p>
<p><a href="http://www.kellydiels.com">Kelly Diels</a> 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.</p>
<p>I was (and am) an adamant admirer of Ms. Diels. Those words meant everything to me. Absolutely everything.</p>
<p>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.</p>
<h3>Solopreneurship? Collaboration.</h3>
<p><a href="http://www.violetminded.com/design/collaboration-trumps-competition/">Collaboration trumps competition</a>. 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.</p>
<p>I&#8217;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&#8217;ve had an incredible team of friends and family (including my amazing family of clients) that have shoved me along the road. I&#8217;ve had my own bumps. I&#8217;ve fallen on my face a few times since January. I&#8217;ve made a lot of mistakes.</p>
<p>My roots are humble: an inexperienced youngling breaks away from corporate and starts out on her own but isn&#8217;t on her own at all.</p>
<p>It all started in between History and Math class.</p>
<p>It all came to fruition on a rainy day in Vancouver.</p>
<p>It&#8217;s been an altogether wicked, crazy, cool, awesome way to spend my twenty-third year.
<div class="tweetmeme_button" style="float: right; margin-left: 10px; margin-right:10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.violetminded.com%2Ffreelancing%2Fa-lesson-of-roots%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.violetminded.com%2Ffreelancing%2Fa-lesson-of-roots%2F&amp;source=violetzombie&amp;style=normal&amp;service=ow.ly" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/violetminded/~4/jlNI9OVLNVA" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.violetminded.com/freelancing/a-lesson-of-roots/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		<feedburner:origLink>http://www.violetminded.com/freelancing/a-lesson-of-roots/</feedburner:origLink></item>
		<item>
		<title>KiSS Kit for Affiliates</title>
		<link>http://feedproxy.google.com/~r/violetminded/~3/CEaBc4lp7No/</link>
		<comments>http://www.violetminded.com/design/kiss-kit-for-affiliates/#comments</comments>
		<pubDate>Fri, 11 Jun 2010 18:02:55 +0000</pubDate>
		<dc:creator>Amanda</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[affiliate]]></category>
		<category><![CDATA[kiss kit]]></category>

		<guid isPermaLink="false">http://www.violetminded.com/?p=607</guid>
		<description><![CDATA[Launching is hard work, especially if you&#8217;re doing it in a rush. It&#8217;s a rush to get the product finished. A rush to get your product out there. It&#8217;s even a rush to get it marketed in a way that you&#8217;re not tearing your hair out and sobbing in a corner at the end of [...]]]></description>
			<content:encoded><![CDATA[<p></p><p>Launching is hard work, especially if you&#8217;re doing it in a rush. It&#8217;s a rush to get the product finished. A rush to get your product out there. It&#8217;s even a rush to get it marketed in a way that you&#8217;re not tearing your hair out and sobbing in a corner at the end of the day.</p>
<p>And then there&#8217;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.</p>
<p>We&#8217;ve got a solution for you.</p>
<p>We brainstormed and determined that we&#8217;re all in the midst of launching products and wouldn&#8217;t it be nice to have a package for our future affiliates? Wouldn&#8217;t it be that much more convenient to hire a group of professionals to do the leg-work for us?</p>
<p>Nods. Smiles. Understanding.</p>
<h3>The KiSS Kit for Affiliates, brought to you by Kelly Diels, Dave Doolin,  and the violet zombies.</h3>
<p>Those in need of an effective solution (turned around in 48 HOURS!), this is your lucky day. Or week. Or what have you. We&#8217;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.</p>
<p>Wowsa.</p>
<p>Any other time, this sort of thing might cost you $2000 ($250-500 for <a href="http://www.kellydiels.com">Kelly&#8217;s time</a>, $125 for mine, and close to $1600 for a custom plug-in from <a href="http://www.website-in-a-weekend.net">Dave</a>).</p>
<p><strong>For you, we&#8217;re charging $225 USD. </strong></p>
<p><a href="http://www.kellydiels.com/kiss-kit-for-affiliates/">Kelly&#8217;s the real copywriter on this one so she wrote us up a  &#8220;whatchaneedtoknow&#8221; page</a>.</p>
<p>Go forth and affiliate, friends.</p>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 333px; width: 1px; height: 1px; overflow: hidden;">Kelly&#8217;s the real copywriter on this one so she wrote us up a  &#8220;whatchaneedtoknow&#8221; page.</div>
<div class="tweetmeme_button" style="float: right; margin-left: 10px; margin-right:10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.violetminded.com%2Fdesign%2Fkiss-kit-for-affiliates%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.violetminded.com%2Fdesign%2Fkiss-kit-for-affiliates%2F&amp;source=violetzombie&amp;style=normal&amp;service=ow.ly" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/violetminded/~4/CEaBc4lp7No" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.violetminded.com/design/kiss-kit-for-affiliates/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://www.violetminded.com/design/kiss-kit-for-affiliates/</feedburner:origLink></item>
		<item>
		<title>Design o’ the Week: The Launch Coach</title>
		<link>http://feedproxy.google.com/~r/violetminded/~3/mUMxOvSyiJA/</link>
		<comments>http://www.violetminded.com/design/design-o-the-week-the-launch-coach/#comments</comments>
		<pubDate>Sat, 05 Jun 2010 04:57:36 +0000</pubDate>
		<dc:creator>Amanda</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[creativity]]></category>
		<category><![CDATA[design of the week]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://www.violetminded.com/?p=561</guid>
		<description><![CDATA[A few friends turned me onto Dave&#8217;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&#8217; 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 [...]]]></description>
			<content:encoded><![CDATA[<p></p><div id="attachment_562" class="wp-caption alignleft" style="width: 300px">
	<a href="http://www.thelaunchcoach.com"><img class="size-medium wp-image-562" title="launchcoach_screenshot" src="http://www.violetminded.com/wp-content/uploads/2010/06/launchcoach_screenshot-300x152.jpg" alt="" width="300" height="152" /></a>
	<p class="wp-caption-text">Whole lotta kick-ass</p>
</div>
<p>A few friends turned me onto <a href="http://www.thelaunchcoach.com">Dave&#8217;s site</a> a couple months ago. What really hooked me (aside from his content) is the presentation. The layout. The strategic display.</p>
<p><strong>The typography.</strong> By Zeus&#8217; beard: the typography blew me away. Visual hierarchy actually hard at work? A design with more typography than graphics or photos?</p>
<p>Hell to the yes.</p>
<p>Gimme.</p>
<p>Reese of <a href="http://www.designbyreese.com">Designs by Reese</a> 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&#8217;s sites, though.</p>
<p><a href="http://www.designbyreese.com/">Reese</a> doesn&#8217;t get caught up in the hullabaloo that designers sometimes can: more graphics means better design. I&#8217;m a firm believer in content first. The design needs to be beautiful, yes, but the <strong>whole point </strong>of the design is to<strong> highlight the kick-ass content</strong>.</p>
<p><a href="http://www.designbyreese.com/">Reese</a> hit this one out of the park. I look forward to seeing more of her work in the future.
<div class="tweetmeme_button" style="float: right; margin-left: 10px; margin-right:10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.violetminded.com%2Fdesign%2Fdesign-o-the-week-the-launch-coach%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.violetminded.com%2Fdesign%2Fdesign-o-the-week-the-launch-coach%2F&amp;source=violetzombie&amp;style=normal&amp;service=ow.ly" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/violetminded/~4/mUMxOvSyiJA" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.violetminded.com/design/design-o-the-week-the-launch-coach/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		<feedburner:origLink>http://www.violetminded.com/design/design-o-the-week-the-launch-coach/</feedburner:origLink></item>
		<item>
		<title>Great design. Great music. Awesome hair.</title>
		<link>http://feedproxy.google.com/~r/violetminded/~3/UkK7ihs0Cek/</link>
		<comments>http://www.violetminded.com/design/great-design-great-music-awesome-hair/#comments</comments>
		<pubDate>Mon, 24 May 2010 04:10:07 +0000</pubDate>
		<dc:creator>Amanda</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[interactive design]]></category>
		<category><![CDATA[music]]></category>
		<category><![CDATA[robyn]]></category>

		<guid isPermaLink="false">http://www.violetminded.com/?p=553</guid>
		<description><![CDATA[Something new for violetminded: showcasing my favourite interactive and web designs once a week.
I discovered Robyn&#8217;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, [...]]]></description>
			<content:encoded><![CDATA[<p></p><h3>Something new for violetminded: showcasing my favourite interactive and web designs once a week.</h3>
<p>I discovered Robyn&#8217;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 <a href="http://en.wikipedia.org/wiki/Robyn_discography">seeming obscurity until 2005</a>, with the release of <em>Robyn</em>.</p>
<p>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 &amp; pt. 2), her website underwent a serious design change. Instead of the typical website formula of header, navigation, content, and footer, Robyn&#8217;s new site is fully interactive. Each menu can be moved across the interface, minimized, or maximized. Don&#8217;t want to see the blog? Minimize it. Move it somewhere else.</p>
<p>The design is surprisingly minimal, in spite of the intricate navigation. It&#8217;s bold. Seductive. It&#8217;s got <strong>punch</strong>.</p>
<div id="attachment_552" class="wp-caption aligncenter" style="width: 626px">
	<a href="http://www.violetminded.com/wp-content/uploads/2010/05/robynscreenshot.jpg"><img class="size-large wp-image-552" title="robynscreenshot" src="http://www.violetminded.com/wp-content/uploads/2010/05/robynscreenshot-1024x411.jpg" alt="Robyn.com" width="626" height="251" /></a>
	<p class="wp-caption-text">Behold the hotness!</p>
</div>
<p>J&#8217;adore.</p>
<p><a href="http://www.violetminded.com/wp-content/uploads/2010/05/dress.jpg"><img class="alignleft size-medium wp-image-557" title="dress" src="http://www.violetminded.com/wp-content/uploads/2010/05/dress-201x300.jpg" alt="" width="80" height="121" /></a>Did I mention that I borrowed her rockin&#8217; hairstyle?</p>
<p>&#8216;Cause I totally did.</p>
<p>Win on all counts.
<div class="tweetmeme_button" style="float: right; margin-left: 10px; margin-right:10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.violetminded.com%2Fdesign%2Fgreat-design-great-music-awesome-hair%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.violetminded.com%2Fdesign%2Fgreat-design-great-music-awesome-hair%2F&amp;source=violetzombie&amp;style=normal&amp;service=ow.ly" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/violetminded/~4/UkK7ihs0Cek" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.violetminded.com/design/great-design-great-music-awesome-hair/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		<feedburner:origLink>http://www.violetminded.com/design/great-design-great-music-awesome-hair/</feedburner:origLink></item>
		<item>
		<title>Decrypting Thesis CSS: Transparent Navigation</title>
		<link>http://feedproxy.google.com/~r/violetminded/~3/dGwAG7UBNnE/</link>
		<comments>http://www.violetminded.com/thesis/decrypting-thesis-css-transparent-navigation/#comments</comments>
		<pubDate>Sun, 23 May 2010 04:17:18 +0000</pubDate>
		<dc:creator>Amanda</dc:creator>
				<category><![CDATA[Thesis]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[how-to]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.violetminded.com/?p=498</guid>
		<description><![CDATA[It&#8217;s been a while since we talked about Decrypting Thesis&#8217; CSS. Figured that it&#8217;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 [...]]]></description>
			<content:encoded><![CDATA[<p></p><p>It&#8217;s been a while since we talked about Decrypting Thesis&#8217; CSS. Figured that it&#8217;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.</p>
<p>This is the advanced class. Don&#8217;t be skippin&#8217; ahead! Or, if you really want to, I guess we can let that happen. Don&#8217;t forget to bring me an apple next time. Or a shiny.</p>
<ul>
<li><a href="http://www.violetminded.com/thesis/decrypting-thesis-css-header-magic/">Part One: Headers</a></li>
<li><a href="http://www.violetminded.com/thesis/decrypting-thesis-css-navigation-made-simple/">Part Two: Basic Navigation</a></li>
</ul>
<h3>Checklist o’ Essentials</h3>
<p>Before beginning:</p>
<ol>
<li>Open<strong> custom.css</strong> and<strong> custom-functions.php</strong> in your favourite text  editor or HTML <a href="http://en.wikipedia.org/wiki/Integrated_development_environment">IDE</a> (ie., Dreamweaver).</li>
<li>Open your FTP client.</li>
<li>Have a  back-up copy of your<strong> custom.css</strong> and <strong>custom-functions.php</strong> saved on your hard drive. Y’know, in case you make a boo-boo. Hey, it   happens.</li>
</ol>
<h3>Transparent Navigation</h3>
<div id="attachment_546" class="wp-caption alignleft" style="width: 300px">
	<a href="http://www.amandafarough.com"><img class="size-medium wp-image-546" title="transparentnav" src="http://www.violetminded.com/wp-content/uploads/2010/05/transparentnav-300x50.png" alt="" width="300" height="50" /></a>
	<p class="wp-caption-text">Grey Sky Thursday: Transparent Nav, baby</p>
</div>
<p>You&#8217;ve got the solid colour blues, baby. You don&#8217;t want to have a solid colour &#8211; 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:<strong> there&#8217;s something about a well-styled navigation bar that gets a girl hot under the collar</strong>.</p>
<p>Or keyboard. Whichever works.</p>
<p>This is a pretty easy tutorial, as long as you&#8217;ve read the bit on <a href="http://www.violetminded.com/thesis/decrypting-thesis-css-navigation-made-simple/">Basic Navigation Styling</a>.</p>
<p><code>.custom .menu { background:url(images/navbg.png) no-repeat; }</code></p>
<p>First, we&#8217;ve got to set the background image that we want for the navigation. Alternatively, if you have no background image you&#8217;d like to set (if you want the navigation over-top that <a href="http://www.violetminded.com/thesis/decrypting-thesis-css-header-magic/">stylin&#8217; banner</a>), set the background-property to <strong>none</strong>.</p>
<p>Looking good. One problem: all the links are still gray. Shoot. Good thing we can fix that.</p>
<p>Just like when we were changing the colours of the navigation menu in <a href="http://www.violetminded.com/thesis/decrypting-thesis-css-navigation-made-simple/">the last tutorial</a>, we have to set each menu item separately.</p>
<p><code>.custom .menu .tab-1 a:link{ background:none; text-transform:lowercase; color:#063261; border:none;}</code><code> .custom .menu .tab-1 a:visited { background:none; text-transform:lowercase; color:#063261; border:none; }<br />
.custom .menu .tab-1 a:hover { background:none; text-transform:lowercase; color:#229a69; border:none;}</code></p>
<p>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 <strong>none</strong>, you&#8217;re declaring it as transparent.</p>
<p>Poof! Gray is gone!</p>
<p><strong>This technique is excellent for specifying a navigation background or for placing your navigation over your banner. </strong>Please note that some of these techniques haven&#8217;t been tested in Internet Explorer. Remember: all good zombies cross-browser test. Except me. I&#8217;m a bad zombie. Baaaaad zombie.</p>
<h3>More Navigation Tips &#8216;n Tricks in the next Tutorial</h3>
<p>Check your <a href="http://feedburner.google.com/fb/a/mailverify?uri=violetminded&amp;amp;loc=en_US">inboxes</a> and <a href="http://feeds.feedburner.com/violetminded">Readers</a> for  the next installment in the series: Decrypting Thesis CSS: Vertical Navigation. Warning: this&#8217;ll be a tricky one. Trickiest of &#8216;em all. In the meantime, you should <a href="http://www.twitter.com/mandalove">follow me on Twitter</a>.
<div class="tweetmeme_button" style="float: right; margin-left: 10px; margin-right:10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.violetminded.com%2Fthesis%2Fdecrypting-thesis-css-transparent-navigation%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.violetminded.com%2Fthesis%2Fdecrypting-thesis-css-transparent-navigation%2F&amp;source=violetzombie&amp;style=normal&amp;service=ow.ly" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/violetminded/~4/dGwAG7UBNnE" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.violetminded.com/thesis/decrypting-thesis-css-transparent-navigation/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://www.violetminded.com/thesis/decrypting-thesis-css-transparent-navigation/</feedburner:origLink></item>
		<item>
		<title>Grey Sky Thursday</title>
		<link>http://feedproxy.google.com/~r/violetminded/~3/2TTrsQddl2g/</link>
		<comments>http://www.violetminded.com/thesis/grey-sky-thursday/#comments</comments>
		<pubDate>Sat, 22 May 2010 06:08:31 +0000</pubDate>
		<dc:creator>Amanda</dc:creator>
				<category><![CDATA[Thesis]]></category>
		<category><![CDATA[bite sized]]></category>
		<category><![CDATA[grey sky thursday]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://www.violetminded.com/?p=534</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p></p><p>All you violet zombies know that violetminded Design is all about the mixology behind great design and even better designer-client relationships. Yesterday, <a href="http://www.violetminded.com/freelancing/throw-all-caution-to-the-wind-and-dive-in/">I wrote about diving into challenges and projects</a>. No baggage. Just creativity, pure and simple. Excellence begets excellence. Exceptional begets <strong>kick-ass.</strong></p>
<p>The past few months have seen some great times for violetminded. With the help of my team (the Commodore and the Illustrator), we&#8217;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.</p>
<p>Somehow, in the midst of it all, I did some brainstorming.</p>
<p>There had to be a way for me to give some design love to the peeps that I couldn&#8217;t take on or that didn&#8217;t have a lot of scratch to throw my way. I came up with the idea of <strong>Bite Sized Sites</strong>. From Bite Sized, came my first Thesis Skin: <strong>Grey Sky Thursday</strong>. It&#8217;s currently hanging out on my personal site, <a href="http://www.amandafarough.com">Nerdy Vernacular</a> (aka, <a href="http://www.amandafarough.com">AmandaFarough.com</a>). Shiny.</p>
<div id="attachment_537" class="wp-caption alignleft" style="width: 200px">
	<a href="http://www.violetminded.com/wp-content/uploads/2010/05/layoutpreview.png"><img class="size-medium wp-image-537" title="layoutpreview" src="http://www.violetminded.com/wp-content/uploads/2010/05/layoutpreview-200x300.png" alt="" width="200" height="300" /></a>
	<p class="wp-caption-text">The Photoshop Mockup</p>
</div>
<h3>wtf is Grey Sky Thursday?</h3>
<p>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. <strong>Two columns</strong>. Emphasis on content. Attention to detail. Lots of white space. Minimalistic. True violetminded style.</p>
<p>The money is in the footer, with its reaching puffs of colour.</p>
<h3>What&#8217;s included?</h3>
<p>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&#8217;ll be able to  take the files and put them in your custom folder. A couple of clicks and you&#8217;ll be good to go.</p>
<p>Also included is the .psd of the banner so that you can make changes as you&#8217;d like. Nobody likes a cookie cutter theme, even if it&#8217;s skinned. Change the banner text. You will need to install the fonts included in the &#8220;type&#8221; folder (Otari).</p>
<p>Don&#8217;t have Photoshop? Let me know and I&#8217;ll see what I can do to make some tweaks for ya.</p>
<h3>I want this skin! Gimme!</h3>
<p>Whoa cowboy. Not so fast. I ain&#8217;t sellin&#8217; this yet. Good news: I am  looking for a few guinea pigs to test out this most excellent venture. If you&#8217;re interested, post a comment or <a href="http://www.violetminded.com/contact-me">drop me a line on the contact page</a>.</p>
<h3>Want to be notified when this theme&#8217;s available?</h3>
<p>Very soon, my precious zombies, there will be a newsletter. Until then, sign up for the feed. It won&#8217;t bite. Often. Maybe. We can hope.
<div class="tweetmeme_button" style="float: right; margin-left: 10px; margin-right:10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.violetminded.com%2Fthesis%2Fgrey-sky-thursday%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.violetminded.com%2Fthesis%2Fgrey-sky-thursday%2F&amp;source=violetzombie&amp;style=normal&amp;service=ow.ly" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/violetminded/~4/2TTrsQddl2g" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.violetminded.com/thesis/grey-sky-thursday/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://www.violetminded.com/thesis/grey-sky-thursday/</feedburner:origLink></item>
		<item>
		<title>Throw all caution to the wind and dive in.</title>
		<link>http://feedproxy.google.com/~r/violetminded/~3/L6mk9kaTEw8/</link>
		<comments>http://www.violetminded.com/freelancing/throw-all-caution-to-the-wind-and-dive-in/#comments</comments>
		<pubDate>Fri, 21 May 2010 05:55:48 +0000</pubDate>
		<dc:creator>Amanda</dc:creator>
				<category><![CDATA[Freelancing]]></category>
		<category><![CDATA[clients]]></category>
		<category><![CDATA[creativity]]></category>
		<category><![CDATA[giving]]></category>

		<guid isPermaLink="false">http://www.violetminded.com/?p=528</guid>
		<description><![CDATA[I used to spend lots of time weeding through the (seemingly) desolate bounds of the design community only to find disillusioned designers (web, graphic, and logo) griping about how much they hate clients. And, if they don&#8217;t hate their clients, they hate doing work for other people in general. They&#8217;d much rather be artists, working [...]]]></description>
			<content:encoded><![CDATA[<p></p><p>I used to spend lots of time weeding through the (seemingly) desolate bounds of the design community only to find disillusioned designers (web, graphic, and logo) griping about how much they hate clients. And, if they don&#8217;t hate their clients, they hate doing work for other people in general. They&#8217;d much rather be artists, working on their craft and creating interactive artistry on the web  (<a href="http://www.1shoppingcart.com/app/?af=1164992">sounds like someone needs to start a fire</a>).</p>
<p>As much as I understand the need to vent one&#8217;s frustrations to a willing audience, they&#8217;re all forgetting one crucial matter: clients are what makes their business, be they good, bad, or in-between. Without clients, we freelancers would be ultimately screwed. If you&#8217;re not interested in working with clients, then it&#8217;s time to consider creating stand-alone products as a revenue stream. Or, you could do what I do: only work with people who seek you out specifically.</p>
<p>I work with different kinds of people. <a href="http://www.website-in-a-weekend.net">Engineers</a> and tech-centrics. <a href="http://www.kellydiels.com">The writers</a>. Non-profits. Coaches. Photographers. <a href="http://www.bellisblogoffashion.com">Younglings that are just starting out</a>. People that know what they want. People that don&#8217;t. People that want to love their blog but don&#8217;t. People that love to write but don&#8217;t know how to get people to love their content. All kinds o&#8217; people. So what do they have in common?</p>
<h3>They&#8217;re exceptional.</h3>
<p><strong>If you work with exceptional people, your work will be exceptional</strong>. If you really believe in the work you&#8217;re doing, you will find a great and deep satisfaction in the end product, <a href="http://www.drawar.com/articles/on-successful-design-and-designer-feelings/218/" target="_blank">even if it may not be timeless and you may hate it six months later</a>.</p>
<p>Not every exceptional person has a lot of money to throw at a website. Sometimes, all they&#8217;ve got is $500, the ability to love you up, and to recommend your services to all their friends. Non-profits aren&#8217;t in it for the money. They&#8217;re in it for the love. Sounds like squishy BS. I know. But that&#8217;s the beauty of it: it&#8217;s not. When you work with people that love what you do in a real and genuine way, they will give back in ways that will catch you by surprise.</p>
<p>My very first client was <a href="http://www.kellydiels.com">Kelly Diels</a>. She didn&#8217;t have any extra cash to throw at a design. I loved what she did so damn much that I said that I was compelled to design her site. Give her an online identity that she could be proud of. So I did. <a href="http://www.violetminded.com/about-amanda-farough/">Then she wrote me a bio in the form of a love letter</a>.</p>
<p>I sat down with <a href="http://www.whitehottruth.com">Danielle LaPorte</a> in a crowded cafe on Commercial Drive to teach her how to use iMovie a few weeks before she launched <a href="http://www.1shoppingcart.com/app/?af=1164992">Fire Starter Sessions</a>. She wanted to pay me. I wanted her wisdom. <strong>So she gave me a copy of the video-book after it launched, complete with named acknowledgment</strong>. I fell out of my chair that day, wore my coffee, and pretended that I did it on purpose. When I saw my name in FSS, I fell over on the floor. Total accident. Total surprise.</p>
<p><a href="http://www.website-in-a-weekend.net">Dave Doolin</a> gave me $200 to see Lady Gaga in concert. He asked me to redo the typography on his website in return. &#8220;Screw that,&#8221; said I. &#8220;I want you to have a beautiful website.&#8221; So I redesigned it. Took my time. Worked on it when I had time. We launched it last weekend. He interviewed me about being a designer, writer, and gamer. It drops tomorrow. Then he gave me his new eBook, free of charge. He brings me code. Everyone knows how much I love code. Now you all know how much I love Dave.</p>
<p>Every time that someone sends an email about doing a website for them, I send them my quirky design questionnaire. If they dig the tone, they&#8217;ll dig me. If they don&#8217;t, we part and go our merry separate ways. They&#8217;re not pissed off I don&#8217;t get them. I&#8217;m not pissed off that they wasted my time. We&#8217;re happy, chilled out folks that just don&#8217;t see the world the same way.</p>
<h3>I&#8217;m professionally out of my mind. I may or may not be back in five minutes.</h3>
<p>I throw all caution to the wind and dive into each project. I work with exceptional people that allow me to do a little piece of what I love. They trust me. They ask questions. We revise. We iterate. We start fires. They get a website that is <strong>all</strong> them. I create friendships from partnerships and partnerships from client relationships.</p>
<p>Next time you dive into a work project, throw all your personal baggage aside. The client is not the enemy. <a href="http://www.ronnadetrick.com">The client could be your friend</a>. That person with the &#8220;stupid question&#8221; just needs to be educated. If no one gets the value of your design decision, then tell them. Explain away. If they still don&#8217;t get it and refuse to play nice: <strong><a href="http://whitehottruth.com/">no-gotiate your way out</a>.</strong> Let someone else take on the project. Be gracious. Be graceful.</p>
<p><strong>Be kind.</strong></p>
<p>Be generous with your time. Be flexible.</p>
<p>Most important: be yourself. Genuinely. 100%. You.
<div class="tweetmeme_button" style="float: right; margin-left: 10px; margin-right:10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.violetminded.com%2Ffreelancing%2Fthrow-all-caution-to-the-wind-and-dive-in%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.violetminded.com%2Ffreelancing%2Fthrow-all-caution-to-the-wind-and-dive-in%2F&amp;source=violetzombie&amp;style=normal&amp;service=ow.ly" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/violetminded/~4/L6mk9kaTEw8" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.violetminded.com/freelancing/throw-all-caution-to-the-wind-and-dive-in/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		<feedburner:origLink>http://www.violetminded.com/freelancing/throw-all-caution-to-the-wind-and-dive-in/</feedburner:origLink></item>
		<item>
		<title>Full steam ahead! Content ahoy!</title>
		<link>http://feedproxy.google.com/~r/violetminded/~3/3K1LXAode6k/</link>
		<comments>http://www.violetminded.com/freelancing/full-steam-ahead-content-ahoy/#comments</comments>
		<pubDate>Fri, 14 May 2010 03:27:34 +0000</pubDate>
		<dc:creator>Amanda</dc:creator>
				<category><![CDATA[Freelancing]]></category>
		<category><![CDATA[absence]]></category>
		<category><![CDATA[beginnings]]></category>
		<category><![CDATA[creativity]]></category>

		<guid isPermaLink="false">http://www.violetminded.com/?p=519</guid>
		<description><![CDATA[Being an entrepreneur is a lot like tossing a coin in the air. Sometimes, it comes up the way you expect. Other times? Not so much.
Therefore, absence.
But not.
I&#8217;ve been hard at work on new content and products for you. Yes, you. And in the midst of it, I&#8217;ve been developing beautiful (Thesis! Wordpress!) websites for [...]]]></description>
			<content:encoded><![CDATA[<p></p><p>Being an entrepreneur is a lot like tossing a coin in the air. Sometimes, it comes up the way you expect. Other times? Not so much.</p>
<p>Therefore, absence.</p>
<p><strong>But not</strong>.</p>
<p>I&#8217;ve been hard at work on <strong>new content </strong>and <strong>products </strong>for you. Yes, you. And in the midst of it, I&#8217;ve been developing beautiful (Thesis! Wordpress!) websites for all of my amazing clients. Wonderful people like <a href="http://www.kellydiels.com">Kelly Diels</a> (who has paid me in kind for my work with refreshing the copy around here), <a href="http://www.ronnadetrick.com">Ronna Detrick</a>, <a href="http://www.writingroads.com">Julie Roads</a>, <a href="http://www.unabashedlyfemale.com">Julie Daley</a>, <a href="http://www.writingabluestreak.com">Allissa Haines</a>, and the 604 Freelancers for<a href="http://freelancecamp.thenetworkhub.ca"> Freelance Camp Vancouver</a>.</p>
<p>I called heads.</p>
<p>It landed tails.</p>
<p>Full steam ahead!</p>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 44px; width: 1px; height: 1px; overflow: hidden;"><img src="file:///C:/Users/Amanda/AppData/Local/Temp/moz-screenshot.png" alt="" /></div>
<div class="tweetmeme_button" style="float: right; margin-left: 10px; margin-right:10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.violetminded.com%2Ffreelancing%2Ffull-steam-ahead-content-ahoy%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.violetminded.com%2Ffreelancing%2Ffull-steam-ahead-content-ahoy%2F&amp;source=violetzombie&amp;style=normal&amp;service=ow.ly" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/violetminded/~4/3K1LXAode6k" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.violetminded.com/freelancing/full-steam-ahead-content-ahoy/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://www.violetminded.com/freelancing/full-steam-ahead-content-ahoy/</feedburner:origLink></item>
		<item>
		<title>Decrypting Thesis CSS: Navigation Made Simple</title>
		<link>http://feedproxy.google.com/~r/violetminded/~3/o6fsoit1xxk/</link>
		<comments>http://www.violetminded.com/thesis/decrypting-thesis-css-navigation-made-simple/#comments</comments>
		<pubDate>Thu, 01 Apr 2010 07:09:21 +0000</pubDate>
		<dc:creator>Amanda</dc:creator>
				<category><![CDATA[Thesis]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[how-to]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.violetminded.com/?p=479</guid>
		<description><![CDATA[In the previous installment of Decrypting Thesis CSS, I talked about how to customize your banner using CSS. In this installment, I&#8217;m going to let you in on the secret of customizing your navigation bar (the shiny thing where all your links hang out). Dave Doolin of Website in a Weekend has an excellent tutorial [...]]]></description>
			<content:encoded><![CDATA[<p></p><div id="attachment_489" class="wp-caption alignleft" style="width: 313px">
	<a><img class="size-full wp-image-489" title="thesis-theme_menu" src="http://www.violetminded.com/wp-content/uploads/2010/03/thesis-theme_menu.jpg" alt="" width="313" height="87" /></a>
	<p class="wp-caption-text">Unsexy Thesis Navigation</p>
</div>
<p><a href="http://www.violetminded.com/thesis/decrypting-thesis-css-header-magic/">In the previous installment of Decrypting Thesis CSS</a>, I talked about how to customize your banner using CSS. In this installment, I&#8217;m going to let you in on the secret of customizing your navigation bar (the shiny thing where all your links hang out). Dave Doolin of Website in a Weekend has an <a href="http://website-in-a-weekend.net/extending-wordpress/all-in-one-visual-menu-css/">excellent tutorial on customizing the CSS for any Wordpress navigation</a> (and helpful graphics to boot!). He&#8217;s using Thesis 1.5 on his end but the theory is the same, any way you slice it. I&#8217;d recommend giving that a once over before checking out my tips and tricks.</p>
<h3>Checklist o&#8217; Essentials</h3>
<p>Before beginning:</p>
<ol>
<li>Open<strong> custom.css</strong> and<strong> custom-functions.php</strong> in your favourite text editor or HTML <a href="http://en.wikipedia.org/wiki/Integrated_development_environment">IDE</a> (ie., Dreamweaver).</li>
<li>Open your FTP client.</li>
<li>Have a back-up copy of your<strong> custom.css</strong> and <strong>custom-functions.php</strong> saved on your hard drive. Y&#8217;know, in case you make a boo-boo. Hey, it happens.</li>
<li>And<a href="http://website-in-a-weekend.net/extending-wordpress/all-in-one-visual-menu-css/"> read Dave&#8217;s tutorial</a>. It&#8217;s a great leap-off for what we&#8217;re working on.</li>
</ol>
<h3>Customize the Navigation Colours</h3>
<p>The default of <em>anything </em>is boring, let alone the default navigation settings for Thesis. It&#8217;s so&#8230; <a href="http://en.wikipedia.org/wiki/Pedestrian#Other_uses">pedestrian</a>! Let&#8217;s jazz it up.</p>
<p><code>/* Custom Nav */<br />
.custom .menu { background:#a5d643; border-style:none; border-bottom:none; }</code></p>
<p><a href="http://www.violetminded.com/thesis/decrypting-thesis-css-header-magic/">In the first installment of this series</a>, we talked about the <strong>.custom</strong> selector. Poke poke, Thesis. We&#8217;re working in custom territory here. By setting the background colour of the .menu, you&#8217;ve coloured the container&#8230; but not the links.</p>
<p>Save and upload this change.</p>
<p>See how the tabs are still gray and boring? I&#8217;ve got the remedy.</p>
<p><code>.custom .menu .tab-1 a { background:#a5d643; color:#ffffff; text-transform:lowercase; border:none; letter-spacing:-0.02em; }<br />
.custom .menu .tab-1 a:hover { background:#5f3c76; color:#ffffff; text-transform:lowercase; border:none; letter-spacing:-0.02em; }</code></p>
<p>For, like, half a minute, I was tempted to show you the wall of code that was violetminded&#8217;s menu. Figured that was cruel, like <a href="http://www.youtube.com/watch?v=LHacDYj8KZM">real green dresses</a> or some such nonsense. Onto decoding that madness.</p>
<p>We&#8217;re drilling down a little further in our selector hierarchy by taking a look at .tab-1, which is the first link in the navigation. There are two different lines of code doing similarly different tasks. The first line deals with the anchor (just the link by itself). It changes the <strong>background colour</strong> and the <strong>font colour</strong>, transforms the text to lower-case, <strong>removes the nasty border</strong>, and decreases the letter-spacing.</p>
<p><strong>The letter spacing is non-essential. </strong>It&#8217;s just good typography practice for the typeface I chose for violetminded.</p>
<p>The second line of code deals with the hover state of the anchor. You move your mouse over that link and it dances the funky chicken. Don&#8217;t want the funky chicken? Change the colours around for the background and font. It&#8217;ll disco&#8230; or something.</p>
<p>You&#8217;re likely to have many other links in your navigation. Rinse and repeat as needed.</p>
<p><strong>Caveat: The .tab naming system falls apart when it comes to custom links, subscribe, and home. </strong></p>
<p><code>.custom .menu li a { background:#a5d643; color:#ffffff; text-transform:lowercase; border:none; letter-spacing:-0.02em; }<br />
.custom .menu li a:hover { background:#5f3c76; color:#ffffff; text-transform:lowercase; border:none; letter-spacing:-0.02em; text-decoration:none; }</code></p>
<p>By specifying that you&#8217;re altering a list-item (the <strong>li </strong>selector), you&#8217;ve got your bases covered. The only thing that&#8217;s different from the code above is that, for whatever reason, there&#8217;s a default setting that sets the text-decoration to underline. You can allow that, if that&#8217;s what you want, but<em> be sure to set the text-decoration to underline on all the other tabs</em>. Why, you ask? <strong>Consistency</strong>, answers I.</p>
<p>No mo&#8217; gray! And that, my loves, is a beautiful thing.</p>
<h3>Moving the Navigation Bar Below the Banner</h3>
<p>Having the navigation above the banner isn&#8217;t for everyone. Sometimes, you get the urge to be bold and wild by moving the navigation underneath! Navigate yourself to the <strong>custom-functions.php</strong>.</p>
<p>As much as I respect <a href="http://www.wpdesigner.com">WP Designer</a> and his desire to teach through making you type out code snippets (hey, it got me started on custom Wordpress themes), I&#8217;m a <a href="http://www.youtube.com/watch?v=v4Wy7gRGgeA">code monkey</a>. Through and through. And what did I learn in university and beyond? If you can copy &amp; paste the code, <a href="http://en.wikipedia.org/wiki/Copy_and_paste_programming">it means that you&#8217;ve eliminated the possibility of typing error</a>.</p>
<p>So, do yourself a favour, and copy &amp; paste his snippet into your <strong>custom-functions.php</strong>.</p>
<p><code>//Move nav below header<br />
remove_action('thesis_hook_before_header', 'thesis_nav_menu');<br />
add_action('thesis_hook_after_header', 'thesis_nav_menu');</code></p>
<p>Wild, isn&#8217;t it?</p>
<p><a href="http://diythemes.com/thesis/rtfm/hooks/">These are hooks</a>. <a href="http://thesishooks.com/">Hooks are friends</a>. It&#8217;s how we get around in Thesis. I know what you might be thinking and I thought it too: &#8220;DAMN THAT LOOKS COMPLICATED.&#8221; I told <a href="http://website-in-a-weekend.net">Dave</a> the same thing. Then he helped. Dave&#8217;s a Thesis wunderkind. He told me that once you get the basics under your belt, it&#8217;s actually pretty easy. Seriously. And it was. But I digress. Let&#8217;s break down what that code does.</p>
<p>Assuming you&#8217;ve ran off to read those websites, you&#8217;ll understand what the &#8220;remove_action&#8221; and &#8220;add_action&#8221; are there for. Essentially, by removing the &#8220;thesis_nav_menu&#8221; from before the header and adding it to after the header, you&#8217;re moving its position. In code.</p>
<p><strong>That was all you</strong>. And some sexy code.</p>
<h3>Next up: More Navigation CSS Tips &#8216;n Tricks.</h3>
<p>Check your <a href="http://feedburner.google.com/fb/a/mailverify?uri=violetminded&amp;amp;loc=en_US">inboxes</a> and <a href="http://feeds.feedburner.com/violetminded">Readers</a> for the next installment in the series: Decrypting Thesis CSS: Advanced Navigation Techniques. Need more? <a href="http://www.twitter.com/mandalove">Follow me on Twitter</a>!
<div class="tweetmeme_button" style="float: right; margin-left: 10px; margin-right:10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.violetminded.com%2Fthesis%2Fdecrypting-thesis-css-navigation-made-simple%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.violetminded.com%2Fthesis%2Fdecrypting-thesis-css-navigation-made-simple%2F&amp;source=violetzombie&amp;style=normal&amp;service=ow.ly" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/violetminded/~4/o6fsoit1xxk" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.violetminded.com/thesis/decrypting-thesis-css-navigation-made-simple/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		<feedburner:origLink>http://www.violetminded.com/thesis/decrypting-thesis-css-navigation-made-simple/</feedburner:origLink></item>
		<item>
		<title>Decrypting Thesis CSS: Header Magic</title>
		<link>http://feedproxy.google.com/~r/violetminded/~3/F9Sw3EGgppw/</link>
		<comments>http://www.violetminded.com/thesis/decrypting-thesis-css-header-magic/#comments</comments>
		<pubDate>Mon, 29 Mar 2010 03:30:28 +0000</pubDate>
		<dc:creator>Amanda</dc:creator>
				<category><![CDATA[Thesis]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[how-to]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.violetminded.com/?p=453</guid>
		<description><![CDATA[You&#8217;ve downloaded and installed Thesis on your favourite Wordpress blog. You&#8217;ve heard the pros wax lyrical on its strengths (and it has many), why you needed to adopt this powerhouse immediately if not sooner, and the little tweaks you can do to make your experience all the more lovely. And yet, you&#8217;re still fumbling to [...]]]></description>
			<content:encoded><![CDATA[<p></p><div id="attachment_460" class="wp-caption alignleft" style="width: 273px">
	<img class="size-full wp-image-460" title="thesis-theme" src="http://www.violetminded.com/wp-content/uploads/2010/03/thesis-theme.jpg" alt="" width="273" height="172" />
	<p class="wp-caption-text">Default Thesis. Not sexy yet.</p>
</div>
<p>You&#8217;ve downloaded and installed <a href="http://diythemes.com">Thesis</a> on your favourite Wordpress blog. You&#8217;ve heard the pros wax lyrical on its strengths (and it has many), why you needed to adopt this powerhouse <strong>immediately</strong> if not sooner, and the little tweaks you can do to make your experience all the more lovely. And yet, you&#8217;re still fumbling to make your Thesis themed blog stand out from the crowd.</p>
<p>Your standard Thesis installation looks  something like this: clean and minimalist. I suspect that <a href="http://www.pearsonified.com/">Chris</a> might  have had a tawdry love affair with Georgia at some point in the  development process &#8217;cause that&#8217;s our default typeface. So, hot damn,   what now?</p>
<p>You&#8217;ve gotten your hands dirty in the Thesis Design Options more than once but you&#8217;re unsatisfied with how limited it can sometimes feel. You want to get your hands <strong>really</strong> into the thick of it by customizing the CSS. Leave it to me, folks. I&#8217;m going to attempt to tame the wild waves of Thesis CSS.</p>
<p>Before gettin&#8217; down with the CSS Decryption, you&#8217;ve gotta have a bit of background in Cascading Style Sheets. Basic stuff: selectors, properties, and the like. First timer? Don&#8217;t worry, I&#8217;ve got you covered. Check out the recommended before going forward. For everyone else, press on!</p>
<h3>Recommended Reading for the CSS Neophyte</h3>
<p><a href="http://www.w3schools.com/css/">W3 Schools &#8211; CSS School</a></p>
<p><a href="http://css.maxdesign.com.au/selectutorial/">Selectutorial from MaxDesign</a></p>
<p><a href="http://line25.com/articles/15-must-read-articles-for-css-beginners">Line 25 &#8211; Must Read Articles for the CSS Beginner</a></p>
<p><a href="http://www.hongkiat.com/blog/20-useful-css-tips-for-beginners/">Hongkiat &#8211; 20 Useful CSS Tips for Beginners</a></p>
<h3>Starting at the Top: Banner Customization</h3>
<p>Let&#8217;s start with the most important part of any website: the banner (<a href="http://en.wikipedia.org/wiki/Masthead">masthead</a>, for those of us with a love of the publishing industry). As long as you&#8217;ve gotten yourself some sort of (well-designed) graphical banner, we&#8217;re set.  Locate that tasty little tidbit known as custom.css and open it up in any sort of plain text editor (even the Thesis code editor works, sorta).</p>
<p>Check out that COMMENT SECTION. Beautiful.</p>
<p>I digress.</p>
<p><strong>A note before we get started</strong>: go into the Thesis Options in your Wordress Admin and turn on the &#8220;<strong>Use Custom Stylesheets</strong>&#8221; option. If you don&#8217;t, it won&#8217;t recognize our<strong> .custom</strong> selector. Using the<strong> .custom</strong> selector pokes Thesis and lets it know that there are custom changes being made outside of the original design options.</p>
<p>Let&#8217;s code, baby.</p>
<p><code>/* Bitchin' banner */<br />
.custom #header #logo a { display: block; background: url('images/intro.jpg') no-repeat; outline: none; border: none; width:1000px; height:365px; }</code></p>
<p>Let&#8217;s break that bitchin&#8217; banner code down a little bit. There are quite a few selectors hanging out in that line of <a href="http://www.dustindiaz.com/css-shorthand/">shorthand CSS</a>.</p>
<p><strong>.custom</strong> &#8211; remember, that&#8217;s how Thesis knows we&#8217;re making custom changes.<br />
<strong>#header</strong> &#8211; this is the container that holds together the logo, RSS, and tagline.<br />
<strong>#logo a </strong>- we want our banner to link back to our homepage. By editing the anchor selector, we&#8217;ve ensured that the background image we&#8217;re using is clickable.</p>
<p>Be sure to upload your banner to Thesis&#8217; custom/images folder.</p>
<p>But wait. Your blog title and tagline are still kicking around. Let&#8217;s fix that.</p>
<p><code>/* This line gets rid of the site title &amp; tagline by casting them out to far left field */<br />
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }</code></p>
<p>This snippet will send the text flying off to Never Never Land for both your <strong>#logo</strong> and <strong>#tagline</strong>.</p>
<p><code>/* This line collapses the vertical space of the tagline so that there isn't unnecessary white space after the header image */<br />
.custom #header #tagline { height: 0; }</code></p>
<p><a href="http://blogs.techrepublic.com.com/10things/?p=262">Cowboy coder</a>, baby. That&#8217;s how I roll. This snippet will shrink the whitespace created by the tagline so that everything will look sparkly and fancy.</p>
<p>High-five! You now have a graphical banner!</p>
<h3>So, what now?</h3>
<p>If you enjoyed this article, give it a retweet, share it on Stumble, or <a href="http://www.violetminded.com/feed">subscribe</a> to get all the fresh violet content. Can&#8217;t wait for all that jazz? <a href="http://www.twitter.com/mandalove">Follow me on Twitter</a>.</p>
<p><strong>Coming attractions on violetminded</strong>: the &#8220;very violet newsletter&#8221;. It&#8217;ll be magical. Just you wait.
<div class="tweetmeme_button" style="float: right; margin-left: 10px; margin-right:10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.violetminded.com%2Fthesis%2Fdecrypting-thesis-css-header-magic%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.violetminded.com%2Fthesis%2Fdecrypting-thesis-css-header-magic%2F&amp;source=violetzombie&amp;style=normal&amp;service=ow.ly" height="61" width="50" /><br />
			</a>
		</div>
<img src="http://feeds.feedburner.com/~r/violetminded/~4/F9Sw3EGgppw" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.violetminded.com/thesis/decrypting-thesis-css-header-magic/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		<feedburner:origLink>http://www.violetminded.com/thesis/decrypting-thesis-css-header-magic/</feedburner:origLink></item>
	</channel>
</rss>
