Long time, no write, eh? The Monk has been busy!

In fact, that’s exactly what I want to talk to you about. No, not the “busy” part, the “Monk” part.

You see, I got out of spiritual healing work for a number of reasons, one of the biggies being that I didn’t like the feeling of charging for spiritually specific work (intuitive work, healing work, business work… sure. No problem. But teaching it? Just didn’t feel right.).

But even though I transitioned to full-time web design, I was still running everything out of MonkAtWork.com, and that just kinda bugged me. I would’ve preferred to have a different home for the web work, and leave the spiritual stuff here.

At the same time, as I worked with a number of clients, I began to realize a few things about the way my clients and I were approaching the design process, including what made a big difference in people’s success levels with their new sites (and, of course, what didn’t). I wanted to rectify those pitfalls, make it better/cheaper/faster/easier for folks, and do it in a way that really played to my strengths, and the strengths of WordPress (my platform of choice).

Long story short: I have a new home for my “web design” services, and it’s going to blow your doors off. Enter: Bright Coconut.

What’s the big diff?

Well, I’m great with WordPress, great with teaching WordPress and webstuff to people (hence, WebFit), but compared to some of the geniuses out there, I’m no graphics pro (that’s what happens when you major in Literature instead of Design…). And I believe that if you’re doing a bunch of custom design work, you should be a designer.

As much as I know solid design, I don’t do design in that create-unique-artwork-from-scratch way… and I didn’t want to let my lack of graphics cred keep my clients—who’ve appreciated my educational/teaching background—from having beautiful sites. I mean, I’m a form-follows-function guy when it comes down to it, but if you don’t have to choose, why should you?

So, at Bright Coconut, I’m thinking of myself more as a “web educator” than a “web designer”, if you get my drift. When you see what I’ve got going on over there, you’ll see what I mean.

The evolution of WebFit

WebFit has been received really well, and still, there were elements about it I knew I wanted to shift. I wanted to make room for different people’s learning speeds, and not have to make people wait months for the next round of classes to begin.

I did a LOT of brainstorming, a LOT of strategic planning, and a LOT of looking at all of this from multiple angles (yes, three planets in Virgo and a double Grand Trine in Air come in handy from time to time), and came up with what I think is going to be a slam dunk. I ran the idea past a few folks, and they all loved it, too.

In a nutshell, I’ve made WebFit into a video-tutorial-based course, along with personal support and exclusive resources, and I even did something unheard of in business these days: I made it less expensive, and gave you more. True!

So, when you check out Bright Coconut, be sure to check out The Solution as well, and you’ll see how WebFit has evolved.

Where does that leave the Monk?

The Monk, and all of his posts and comments and such, have been moved here.

I still use my tools, and I still believe in the value of living “monkishly”, especially when it comes to one’s work life… and yet it’s much like when people get really interested in a new hobby: they devour every book, turn over every rock they can, looking for more juicy stuff… because that’s what they’re into. It’s their thing.

And yet, if they truly grow, there comes a point where their passion mellows. It’s not as all-consuming anymore, because the new hobby isn’t new anymore; it has integrated itself into their lives.

True, some passions never fade, and they become (a)vocations. PD was mine for a good 15 years or more. But, it’s not anymore, and I want to be fully up-front about that. I’ll still leave these posts here, though, since I still get notes from time-to-time from people who stumble upon them and get value from them. Just don’t expect much new stuff unless I get inspired, ‘kay?

Where does that leave you?

Feel free to take advantage of the posts I have here; there’s some good stuff you can benefit from, if I say so myself.

And if you need a website, or want to get “WebFit” and learn all about how to master your own WordPress-based site, then come join me at Bright Coconut! (And if you’re a Twitter nut, I’ve got both my personal twitter account and a Bright-Coconut-specific twitter account as well.)

Image by Vanlal.

© Adam for Adam Kayce, 2009. | Permalink | 3 comments

Au contraire this time, my friends. Jean-Baptiste rocked the house with this one. I was already using one of his tricks, I immediately put three of them into practice while reading the article, and two more are on my to-do list now done. It only took me about ten minutes, tops.

But I’m a code-happy kinda guy.

I realize that what I can do in three minutes might take you thirty, at least, just because you’re doing other things during your day besides coding, and I, on the other hand, do a lot of it.

So, because Twitter and blogging are getting to be so much more widespread these days, I thought I’d break down “Tip #5: Create a ‘Send to Twitter’ Button” for you, in case you’ve got a more complicated installation than just adding a link. If your theme uses images along with your links, as one of my client’s sites does, then just adding the code is going to break your visual layout, and make you look like a hack.

We can’t let that happen now, can we?

Send to Twitter, with CSS Image Sprites

A css sprite—because I know that’s your next question—is a really cool way of creating two-in-one rollover images. You see, when you have an image that’s a link, and you want it to change color when you roll over it, you can:

• use two separate images… but that makes your reader’s browsers have to load two images, which slows down your site, or
• use one image file that contains both images, set apart from each other, and use css to get it to work right.

Because of the problem inherent in the two-image method, most worth-their-salt theme designers will use sprites for instances like we’re talking about here. If you look at the code I’m going to describe in just a minute, you’ll know if your theme uses sprites, too, and if you can use this technique, or not.

Now, I’m not going to show you how to create css sprites from scratch, because there are plenty of articles out there that do, and they’re great. And besides, the idea behind this tutorial is that you’re using a WordPress theme that already uses sprites, and you just need to know how to duplicate what your theme’s designer has already done.

That said, let’s get this wagon rolling already!

1. Get into the code

Here’s the original code from Jean-Baptiste:

1

<a href="http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a>

This will produce a simple text link, like this: Share on Twitter, but that’s it. If you want it to match your existing styles, you’re going to have to style it up a bit.

As an example theme, I’m going to use my client’s site. What we’ve got are links that look like this:

If you open up the index.php file, and find the code of the links, you’ll see they all look like something like this:

1

<li class="post_stumble"><a title="Click here to stumbleupon this post" href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title();?>">Stumbleupon</a></li>

(If that’s not something you think you can find on your own, then I highly recommend you grab a brilliant Firefox extension called Firebug. It will allow you to “look beyond the Matrix” and see the code that makes up any element on any website. It rocks. Get it. It’s totally indispensible.)

Now, copy-n-paste the existing code that you see, change the class name, and add in the ‘share on Twitter’ code, so it looks like this:

1

<li class="post_twitter"><a href="http://twitter.com/home?status=Currently reading <?php the_permalink(); ?>" title="Click to send this page to Twitter!" target="_blank">Twitter</a></li>

Duplicate this in the single.php and archive.php, to be sure the Twitter link is on both the blog index, the individual post’s page, and the site’s archives, and you’re all set. (Those three files should be the only place this code is called, unless you have a very pimped out theme… be sure you look through your theme’s files to see if there’s anywhere else this code would be called on, such as category.php, page.php, or search.php…)

2. Create the Image Sprite

Now that you’ve got the structure in place, it’s time to create the sprite image.

Chances are, the existing sprite images are in your theme’s images folder (but you can always double-check by using Firebug and/or combing the css file). Find an existing image, and open it in a photo editing program. I use Fireworks, but there are plenty to choose from.

What you’ll see is that there are two images in one; the ‘resting’ state, and the ‘hover’ state. You’re going to want to match those two styles exactly with your new Twitter images. In this case, I need a greyscale ‘t’ and a full-color ‘t’, so it’s off to Google Image search to grab a Twitter ‘t’, and open it in Fireworks.

Next, shrink down your Twitter image so it’s the same size as the example image you’re using. Duplicate it, and apply whatever style is necessary to make it look like the second image. In my case, I used a command tool to make it greyscale with one click; depending on your image editor, you may need to desaturate it or something else.

Now, align the two images so they’re exactly like the example sprite you pulled from your theme. They should look like this:

Upload your new twitter sprite so it sits alongside the others.

3. CSS Time!

Now open up your theme’s stylesheet, most likely the style.css file.

Duplicate the code used to make the example image you used do its sprite dance (again, use Firebug if you have a hard time finding it), and change the class name and image name to your new twitter class and name.

Here’s the original css:

1
2

.postmetadata li.post_stumble a { display:block; float:left; height:14px; padding-top:2px; background:url(images/bk_stumble.png) bottom left no-repeat; padding-left:20px; }
.postmetadata li.post_stumble a:hover { background:url(images/bk_stumble.png) top left no-repeat; }

And here’s the duplicated css along with the original:

1
2
3
4

.postmetadata li.post_stumble a { display:block; float:left; height:14px; padding-top:2px; background:url(images/bk_stumble.png) bottom left no-repeat; padding-left:20px; }
.postmetadata li.post_stumble a:hover { background:url(images/bk_stumble.png) top left no-repeat; }
.postmetadata li.post_twitter a { display:block; float:left; height:14px; padding-top:2px; background:url(images/bk_twitter.png) bottom left no-repeat; padding-left:20px; }
.postmetadata li.post_twitter a:hover { background:url(images/bk_twitter.png) top left no-repeat; }

That should do the trick. Save and upload everything, and test it. Let’s take a look…

Voila!

© Adam for Adam Kayce, 2009. | Permalink | No comment