• 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
  • Forums
  • 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.
by Brad Guigar on January 15, 2016
Posted In: Uncategorized
Comments available to logged in users only.



Recent comments

  • hpkomic on Managing commissions
  • Brad Guigar on Tweet and sour
  • Kulanah on Tweet and sour
  • Kulanah on Tweet and sour
  • Andrew Fraser on Tweet and sour

Search



Webcomics.com Poll

I design my comic specifically for smartphones and digital tablets.

  • Disagree (52%, 178 Votes)
  • Agree (48%, 165 Votes)

Total Voters: 343

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
  • Studios
  • 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

Special Features

Just now, in the forum…

  • Mixing First and Third Person Captions
  • Help with Toocheke
  • Label Printer for shipping
  • Patreon Merch
  • Pricing Your Comics

Recent Posts

  • ComicLab Ep 268 — Special Guest Ellen Woodbury of “Pizza Cake Comics”
  • “Poor Man’s Copyright”
  • Blambot sale
  • February To-Do List
  • ComicLab Ep 267 — How to turn OFF creativity

Recent Replies

  • Brad Guigar on Mixing First and Third Person Captions
  • Brad Guigar on Help with Toocheke
  • Brad Guigar on Label Printer for shipping
  • Andrew Fraser on Label Printer for shipping
  • Brad Guigar on Label Printer for shipping

Recent Topics

  • Mixing First and Third Person Captions by jpactor
  • Help with Toocheke by Andrew Fraser
  • Label Printer for shipping by Andrew Fraser
  • Patreon Merch by Jaycee Knight
  • Pricing Your Comics by Jaycee Knight

Recent Comments

  • hpkomic on Managing commissions
  • Brad Guigar on Tweet and sour
  • Kulanah on Tweet and sour
  • Kulanah on Tweet and sour
  • Andrew Fraser on Tweet and sour
  • My Subscription
  • Store
  • Terms of Service
  • Account
  • Membership List

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