• 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

‹ Fraudulent charges on Patreon Ripl — No significant improvement in engagement ›

Custom Navigation Buttons — Tutorial

A special thank-you to Philip M. Hofer, “Frumph,” for walking me through this process.

 

It’s no secret. I despise some of the default navigation buttons that are included with webcomic CMS packages. The ones (as seen on the right) that come with ComicsPress are especially high on this list.

Personal aesthetics aside, using the default buttons kinda makes your site look like every other webcomic. It labels you as generic. Making your navigation buttons fit the look of your Web site is the first step towards separating yourself from the pack.

Although these instructions are written with Comic Easel in mind, I’m assured that the instructions are directly transferable to ComicsPress users.

To create your own set of navigation buttons, you may want to consider copying a current set. They are located in the /wp-content/plugins/comic-easel/images/nav/ directory. Drag a copy of one of the folders to your desktop. Open the image files inside the folder and redesign them to fit your site’s look. (But first, read the rest of these instructions!)

Along with the image files, each folder has its own navstyle.css file. This CSS file has all of the information inside of it which determines which graphics to use and how the buttons display on the screen.

Open one of the images and look at it. I’ll use the “previous” arrows from the Box button design as an example.

Note: this is a PNG file with a transparent background.

Notice that there are three different image “states” inside of a single image file.

  1. “Active” state:  This part gets displayed when there is a comic it can travel to, but the mouse isn’t currently hovering over it.
  2. “Hover” state: Used when the user’s cursor hovers over the button.
  3. “Inactive” state: Used when there’s no comic to travel to (and it can’t be clicked). For today’s comic, the “Next” button would appear in the “inactive” state because there’s no “next” today; only “previous.”

The navstyle.css file takes this image file and moves it back and forth to display the portion of the image that corresponds to the state (active, hover or inactive). In our example, the button displays in a 44 x 44 pixel area. The image file is 132 pizels wide (and 44 pixels deep). Here’s the code that does it:

In the above navstyle.css, “.navi” is the element that contains the base information that is used in all of its states. This element contains the height and width along with other information on how the the button is displayed. The .navi-hover code moves the image 44 pixels to the left. The .navi-void and .navi-void hover code moves it 88 pixels.

Once you’re happy with your new buttons, you’ll want to upload them to your Child Theme folder — not the folder you originally got them from!

  • On your desktop, rename the folder that contains your new buttons (so you don’t get these buttons confused with the originals).
  • Go to /wp-content/plugins and open the folder of your Child Theme.
  • If there’s not an “images” folder, create one.
  • Create a folder inside this one named “nav.”
  • Upload your custom-made button set here.

When customizing your own set of buttons, you can use whatever height and width you want for the buttons, but remembering to alter the code in the .navi portion of navstyle.css to reflect that change. The .navi-void and .navi:hover numbers will need to be changed as well. For example if your new buttons are 50 x 50 px, the image itself will need to be 150 x 50 px (width x height), then the .navi:hover will then need to be -50px instead of -44px, and .navi-void needs to move 2 states over so it needs to be -100px.

The comic navigation widget will only work inside one of the comic sidebars:

  • Comic sidebars need to be enabled in the Comic -> Config (under the General tab).
  • Next, go to the Navigation tab and disable “default navigation.”
  • Select your personal navigation buttons from the dropdown.
  • Finally, go to Appearance -> Widgets and drag the Navigation Widget into its proper place (usually the Under Comic sidebar).

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 August 4, 2017
Posted In: Archive Dive, Tech, Web site, Web Site Design
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 391 — Alaska Comics Camp
  • Estimated taxes are due Monday
  • Two things every longform comic needs
  • How to build an audience on Substack
  • ComicLab Ep 390 — How to fight loneliness all by yourself

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 ↑