CSS-Only Triangles with Hover Effects

I was giddy when I saw this post about creating CSS triangles on Jon Rohan’s blog and quickly realized two things:

1. I am officially a CSS geek.
2. Because the code relies on creating a div with a height and width of 0, there is no way to create hover effects — which is fine if I’m using the triangles for a design element, but not as good if I’m using it for navigation.

Fortunately, there is a very easy fix (for #2, at least): wrap the element in an anchor tag.

The final code looks something like this:

<a class="css-arrow-multicolor" href="#">
	<div></div>
</a>

.css-arrow-multicolor {
	display: block;
	width: 20px;
	height: 40px;
	overflow: hidden;
}

.css-arrow-multicolor div {
	border-color: transparent transparent transparent #000066;
	border-style:solid;
	border-width:20px;
	width:0;
	height:0;
}

	.css-arrow-multicolor:hover div {
		border-color: transparent transparent transparent #0000ff;
	}

In this case I set the width of the containing <a> element to the same as the border width of the div, and the height of the <a> element to twice the border width of the div so that the <a> is exactly the size of the arrow. I set the overflow to hidden for the same reason.

Unfortunately I can’t show you an example of the triangle with its hover effects due to code limitations on free WordPress blogs, so you’ll either have to take my word for it or try it out yourself.

The Celebration of Love, Trust, Partnership, Tolerance and Tenacity

About this time two years ago I was driving to the Portland, Oregon Temple of the Church of Jesus Christ of Latter-Days Saints to marry the love of my life when she called me on my cell phone.

“We can’t do this,” she said to me (or something to that effect). I had only a moment for the shock and disbelief that she might be backing out to register before she clarified that her father (who was driving to Portland from La Grande) was stuck about two hours from Portland because his truck had broken down.

Fortunately an LDS wedding is a relatively small and simple affair, so we moved the time later in the day without much difficulty. We had scheduled the wedding and the reception several hours apart and the new wedding time fit nicely into the new schedule. We even still had time for our family luncheon between the two — of course, Melissa spent most of the luncheon time on a couch trying to sleep off the flu she had caught that morning, an illness that would last throughout the week of our honeymoon.

It seems that many of the best things in our lives have started with little disasters. Melissa and I had our first real conversation talking about all how depressed I was over some bad personal and family situations. On our first date we missed hearing one of Melissa’s favorite Jazz singers because that night the restaurant she was singing in (which didn’t normally take reservations) was completely reserved. I spent too much for not-so-great food at Greek Cuisina* and we saw the catastrophe that was Ghost Rider.

Who would have thought that failing so miserably would actually bring us closer together? Both Melissa and I later admitted that we went home from that date feeling really good about the night — and of course we later began dating and got married about a year after that first date.

The little disasters continue, but always seem to end in something better than if we were blessed with smooth sailing. I lost my job a year ago this month, but now I own my own business. Labor was a multi-day ordeal for Melissa, but now our son Isaac is 4 months old and almost crawling. Decisions we had to make during that labor started us on an early path of putting his needs above our own, and I am convinced that we treasure him more because of it.

So here’s to the little disasters — they got me where I am today: celebrating a second year with my beautiful bride, happier than I have ever been.

---

*This is not to say that Greek Cuisina didn’t have good food, just that what we ordered was not.

RPG Saturday: The Serial One-Shot – Coraline 2: Electric Boogaloo

RPG Saturday is a weekly feature which discusses issues related to role-playing games using movies, television, etc. as examples.

Note from Michael: It’s still Saturday for one hour (Pacific Time), so this still counts as an RPG Saturday post!

In my last RPG Saturday post I made a passing reference to the serial one-shot, and I want to talk about that a little more.

Unlike most RPG campaigns, a “one-shot” adventure is not an ongoing story. When the adventure ends, the story ends too — which opens the game up for all kinds of situations and outcomes that a GM normally wouldn’t include in an ongoing campaign. Character deaths, for example, are more acceptable in one-shots, as are games where the characters are the villains or are ridiculously overpowered. Many movie plots work great as one-shot games but not as extended campaigns — Jurassic Park was a good one-shot movie, but an ongoing campaign would be difficult.

A “serial one-shot” is a bit of a hybrid between the one-shot adventure and the ongoing campaign. The story doesn’t necessarily end at the end of the adventure, but each adventure is self-contained enough that if the story does end the players won’t feel like anything was left unresolved. Going back to the movie example, a serial one-shot would be a movie and its sequels.

One good thing about a serial one-shot as opposed to an ongoing campaign is that months or years can pass between adventures, and instead of role-playing that time the players simply update their characters for the next installment of the game and keep going.

…and that’s where my Coraline idea comes in.

The Setup

So you were able to keep your characters on track. They explored the Other World, learned some of the history of the Pink Palace Apartments from Wybie and ultimately defeated the Other Mother. Now years have passed. The characters have grown up. They have jobs, homes and families of their own.

The Hook

One day a character’s home is strangely quiet. Little Emma is gone! The character searches the house frantically, screaming Emma’s name…and then finds a doll dressed just like Emma, staring out from under Emma’s bed with black button eyes.

-OR-

Each of the characters goes to answer a knock at the door. Sitting on the porch is a small package wrapped in brown paper. There are no return addresses, no postage stamps…no sign of a letter carrier. They each take their packages inside and open them to find a little doll, dressed just like them, staring up from the box with black button eyes.

No matter how you set it up, that kind of cool opening scene is tough to do with an ongoing campaign — largely because it’s really hard to role-play all the time between adventures. It can be especially cool if the players weren’t expecting a sequel to the first adventure, and since they aren’t expecting a sequel to this adventure, their tension levels will be lot higher.

WordPress Wednesday: How to Transfer Your Plugin Data Using phpMyAdmin

I often use Stray Random Quotes for clients who want to display random testimonials (or quotes, natch) on their WordPress sites. Of course, I build their sites completely on my webspace to test them before installing on the client domain. While WordPress has export and import functions for pages, posts and media, my quotes don’t transfer over so easily. Fortunately, the built-in functions of phpMyAdmin can pick up the slack.

The following assumes that you already have WordPress installed on both your test domain and the live domain. I’m using the specific example of Stray Random Quotes but you can do the same with any plugin that creates tables in your WordPress database.

First, make sure you have Stray Random Quotes (or whichever plugin you’re transferring data for) installed on the live site. This is important because the plugin will create the necessary tables for you (saves you a few steps and a lot of headache).

Second, open your WordPress database using phpMyAdmin on your test site. In the left-hand column, click on the database name to expand it, then click on the wp_stray_quotes table.

Click on the “Export” tab in the  main window. Make sure your export format is set for “SQL” and your export type is “INSERT,” then click “Go.”

You should see a text representation of the database export. Copy only the text rows that start with “INSERT INTO.” Paste these into a text file using Notepad and save as a .txt file.

Next, open the WordPress database on your live site using phpMyAdmin. Click on the database name to expand and then on wp_stray_quotes.

Click the “Import” tab, then the “Browse” button. Locate the text file you created previously and click “Open,” then click “Go.”

Your quotes should be imported into the live database.

Twitter Tuesday: Why to Not Be a Broadcaster (and How I’m Going to Stop)

It’s easy to fall into the trap of treating Twitter like a P.A. system; you tell everyone about the articles you’re reading online, your latest blog post or even the food you just had for dinner and expect that you’ll gain followers and readers.

However, unless you’re a major brand or some kind of celebrity, it probably won’t work like that. Instead, you’ll tweet and tweet and tweet and get very little attention.

Why is that?

Well, in Twitter-speak you’re being a broadcaster. That is, you’re talking a lot but not really “joining the conversation.”

Think of real life: do you like to talk to someone who keeps talking endlessly without giving you a chance to respond (or who completely ignores you when you do)? Of course not. People like to have interaction; a chance to ask questions and to make observations of their own.

Now, you’re not a bad person if you’ve acting like a broadcaster — at least, I hope not, since I’ve fallen into the broadcasting trap myself. However, you’re not using Twitter to its full potential. The true strength of Twitter, like any social network, is in building relationships — because, as LinkedIn says, relationships matter.

So how am I going to stop being a broadcaster and start building relationships? Here are my thoughts:

Remember it’s not all about me

Everyone on Twitter wants to be heard, and it’s good to acknowledge someone who’s tweeted something interesting or relevant. A great way to do this, of course, is the retweet; forwarding someone else’s tweet to your followers. Twitter has a function for this now, but I still like to do it the old-fashioned way: either a) cut-and-paste the tweet, adding “RT” to the front, or b) using the retweet function on TweetDeck. This lets me explain why I think it’s worth retweeting.

When my friend JosephRanseth co-hosted an webinar on “Guerilla Social Marketing,” I didn’t just forward his announcements, I encouraged people to come and then sent out the link to the recorded version after along with my thoughts on how the webinar went.

Make Good Use of Follow Fridays

As long as I’m acknowledging other people, I really need to take part in Follow Fridays. #FollowFriday or #ff gives me a chance to point to someone else who I think is worth following on Twitter, and — as with retweets — tell others why I think this person is worth following.

My friend Joseph had some good thoughts on the subject over at his blog. I’m not sure he always follows his own advice, but it’s good advice anyway.

Comment, Ask Questions, Answer Questions

I can’t expect people to reply to me unless I’m willing to reply to them. It’s kind of like dating. I didn’t date very much before I got married, largely because I didn’t do my part to engage members of the opposite sex. I didn’t talk enough to them, so they didn’t talk enough to me.

When Dave Kellett asked his followers what typeface captured the fun and energy of “Squee!,” I answered. In fact, I posted an image on TwitPic with my choice (Alpha Thin) and sent a download link if he decided to use my suggestion. I forgot to adjust my kerning on the image and Dave never replied, but hey, I actually engaged someone. I need to do this more — there’s no better way to show someone that their tweet is important to you than to actually reply to it.

Join a conversation

I think the best experience I’ve had on Twitter was joining #webcomicschat hosted by Patrick Scullin. This is Twitter taken to a logical conclusion: a mass instant messaging system. I enjoy webcomics and hope to get back to one of my own someday, so I like joining in with other like-minded twitterers to discuss whatever topics get thrown out.

I haven’t had a chance to join in on the chat for awhile, but hopefully I’ll be free tomorrow for the next one.

Start a conversation

This is the step I’m not sure I’m ready for quite yet. I’d like to host a regular chat like Patrick does. I have a few that I’d like to do, ranging in topics from graphic design to creating a more focused webcomics chat that would specifically be a big brainstorming session for concepts and stories. I think that I’ll hold this as a goal while I work on the first four steps a little longer. Hopefully, the next time I post about this topic I’ll be able to say that I’m not a broadcaster anymore.

We’ll see.

---

Got any more ideas for how to make the move from being a broadcaster to forming actual (virtual) relationships? Leave them below — I’d love the help!