You don’t need a subscription to read today’s post!

This is a re-post from the Webcomics.com archive. If you’ve ever been curious about the kind of information, tutorials and advice that you’ll get as part of your subscription to Webcomics.com, this is a good example.

If you’d like to join the site, you can get a 12-month subscription for $30 — or you can get a one-month Trial for $5 … with no obligation after your 30 days expire.  For less than three bucks a month, you can get a steady flow of information, tutorials and advice targeted towards your webcomic business — plus a private forum to discuss issues with other professionally minded cartoonists.

Here’s another helpful CSS coding tip from Philip M. Hofer (“Frumph”), creator of the popular Comics Easel WordPress plug-in.

Landing on a good hyperlink style is difficult. If you use the default style, you get a look that’s somewhat dated. On the other hand, if you stray too far from that, some readers might miss the links entirely!

However, with an easy copy-paste CSS code, you can get a unique, recognizable hyperlink style — and tweak it to fit the unique requirements of your Web site.

Here’s the code:

[css]

.entry a {
border-bottom: 1px solid #cbeefa;
-moz-box-shadow: inset 0 -4px 0 #cbeefa;
-webkit-box-shadow: inset 0 -4px 0 #cbeefa;
-khtml-box-shadow: inset 0 -4px 0 #cbeefa;
box-shadow: inset 0 -4px 0 #cbeefa;
color: inherit;
}

.entry a:hover {
color: #f00;
}

[/css]

If you’d like to see it in action, check out Frumph’s own site. Or Wired’s site.

Using the code

That’s easy. Copy the code above and open your WordPress dashboard. Go down to Appearance -> Edit CSS.

Paste the code and click OK.

If you’re not familiar with how Edit CSS works, you owe it to yourself to check out this post from the Webcomics.com archive. It’s a part of the Jetpack plug-in that I strongly recommend.

The #cbeefa is the hex code for the color. Change that to whatever you’d like it to be.

Three box shadows?

You’ll notice that “boxshadow” is repeated three times:

• -moz-box-shadow

• -khtml-box-shadow

• -webkit-box-shadow

That’s done to ensure that the style will look correct in the different types of browsers (except Internet Explorer). Just use the same hex color value in each.

Tweaks!

You can design a bunch of different looks for the underline, including increasing the width of the border and using a border-radius: CSS element to give it curved corners and such, but then your line-height: would have to be increased to fit the underline underneath the type.