• 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

WebComic 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:

  • Facebook
  • Twitter
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

  • Shadowmark Productions on Comicraft’s annual New Year’s Day Sale
  • Shadowmark Productions on CASE Act passes
  • Phil Maish on Comicraft’s annual New Year’s Day Sale
  • Phil Maish on Comicraft’s annual New Year’s Day Sale
  • Don Vega, v1: "Zorro" on the Border - Pipeline Comics on The crossbar ‘I’

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
  • Studios
  • Surviving Creativity
  • To-Do List
  • Uncategorized
  • Video
  • Webcomics Confidential
  • Webcomics Weekly
  • Webcomics.com Poll

Tags

AdSense advertising Comic Easel comments composition contract copyright creativity exercise credit cards Crowdfunding digital lettering digital publishing Facebook Google Analytics 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…

  • Quantity time vs quality time on social media
  • Writing a Slice of life
  • Can’t Set Up WordPress Site
  • Multiple Websites for Multiple comics?
  • How many to start with?

Recent Posts

  • Finding the right format
  • NCS Divisional Awards: Call for entries
  • The Great Twitter Bot Purge
  • Doing it for the right reasons
  • Ten resolutions for a better 2021

Recent Replies

  • Shadowmark Productions on Can’t Set Up WordPress Site
  • Brad Guigar on Can’t Set Up WordPress Site
  • Shadowmark Productions on Can’t Set Up WordPress Site
  • edustin78 on Can’t Set Up WordPress Site
  • Brad Guigar on Quantity time vs quality time on social media

Recent Topics

  • Quantity time vs quality time on social media by MrMcCloud
  • Writing a Slice of life by MrMcCloud
  • Can’t Set Up WordPress Site by edustin78
  • Multiple Websites for Multiple comics? by MrMcCloud
  • How many to start with? by Boofredlay

Recent Comments

  • Shadowmark Productions on Comicraft’s annual New Year’s Day Sale
  • Shadowmark Productions on CASE Act passes
  • Phil Maish on Comicraft’s annual New Year’s Day Sale
  • Phil Maish on Comicraft’s annual New Year’s Day Sale
  • Don Vega, v1: "Zorro" on the Border - Pipeline Comics on The crossbar ‘I’
  • My Subscription
  • Contact
  • Store
  • Terms of Service
  • Account
  • Membership List

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