• Home
  • Contact
  • FAQs
    • What is Webcomics.com?
    • Member Benefits
    • How To Post an Article or News Item
    • How to Post a Webcomic on the List
    • How to Post a Comic
    • Terms of Service
  • WebComics List
  • Benefits
    • Print Vendors: Get multiple quotes
    • Banner stand: Discount
    • Consultation discount
    • “How To Make Webcomics” book: discount
    • “Webcomics Handbook”: discount
    • ALL benefits
  • My Account
    • Welcome
    • What is Webcomics.com?
    • My Subscription
    • Join us!
  • Account
  • Membership List
Twitter Email RSS

Webcomics.com

How To Make WebComics

Webcomics Handbook

‹ Awards Roundup Surviving Creativity: Sexism, Fair Page Rates, ... ›

Use this easy CSS trick to get better hyperlinks

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.

Using the CSS element color: inherit; will import the color from the actual text color you set for that section, so whatever text color you use for normal text it will be used.

Share this:

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X
by Brad Guigar on January 15, 2016
Posted In: Uncategorized
Comments available to logged in users only.



Recent comments

  • rpmichel on Humor Writing — One Step at a Time
  • Stan! on Should you do a 2025 calendar?
  • Jaycee Knight on Some brilliant marketing advice — and a warning
  • Brad Guigar on Some brilliant marketing advice — and a warning
  • Jaycee Knight on Some brilliant marketing advice — and a warning

Search



Webcomics.com Poll

I design my comic specifically for smartphones and digital tablets.

View Results

Loading ... Loading ...
  • Polls Archive

Categories

  • Archive Dive
  • Articles
    • Advertising
    • Art
    • Business
    • Community
    • Conventions
    • Creativity
    • Crowdfunding
    • Digital publishing
    • Image prep
    • Lettering
    • Marketing / Social Media
    • Merchandise
    • Print publishing
    • Tech
    • Web site
      • Web Site Design
    • Writing
  • ComicLab
  • Edited and Ready
  • Events
  • Guest
  • Hot Seat critiques
  • Information
  • Interviews
  • Livestream Chat
  • Mail Bag
  • Member Benefits
  • Promos
  • Site News
  • Surviving Creativity
  • To-Do List
  • Uncategorized
  • Video
  • Webcomics Confidential
  • Webcomics Weekly
  • Webcomics.com Poll

Tags

ad revenue AdSense advertising Comic Easel comments composition contract copyright creativity exercise credit cards Crowdfunding digital lettering digital publishing Facebook holiday Humor IP KDP Kickstarter Kindle legal lettering line weight Longform comics Manga Studio merchandise NCS panels Patreon Promotion PulsePoint readers revenue SEO shipping social media Square taxes trademark Twitter typography Web design word balloons WordPress writing

Recent Posts

  • ComicLab Ep 396 — Whose House Are You In?
  • Webcomics Confidential: Unnecessary Tangents
  • How to do a reader survey
  • Webcomics Confidential: Finding your motivation
  • ComicLab Ep 395 — I Met My Hero, and They’re a Zero

Recent Comments

  • rpmichel on Humor Writing — One Step at a Time
  • Stan! on Should you do a 2025 calendar?
  • Jaycee Knight on Some brilliant marketing advice — and a warning
  • Brad Guigar on Some brilliant marketing advice — and a warning
  • Jaycee Knight on Some brilliant marketing advice — and a warning
  • My Subscription
  • Store
  • Terms of Service
  • Account
  • Membership List

©2007-2025 Webcomics.com | Powered by WordPress with ComicPress | Subscribe: RSS | Back to Top ↑