Navigation Buttons

Introduction

ComicPress comes with a customizable Comic Navigation Widget that has links to:

  • First Comic
  • Previous Comic
  • Next Comic
  • Latest Comic
  • Archives
  • Comments
  • Random
  • Share
  • Subscribe

In addition, It can also have the Comic Title displayed.

Adding/Configuring the Comic Navigation Widget

In order to use the Comic Navigation, follow these steps:

  1. Log in to your WordPress Admin Dashboard.
  2. On the left sidebar of the page, go to Appearance→Widgets.
  3. Decide which area you want your Comic Navigation to be in. (This is normally Under Comic and/or Above Comic). Click the arrow to the right of the description,
  4. Drag and drop the Comic Navigation from Available Widgets to the area you chose in the last step.
  5. Choose what items you want to have displayed. Click the checkbox for every item you want displayed
    • Each item has a text field underneath it where you can change what text you want for the above item. You can change it from “First” to “The Beginning”, for example.
    • If you do not want to have any text, empty the field.
    • The Archives item has a second text field where you can enter the URL to your archives page. You must first set up an Archives page, then you can copy/paste the URL into this field.
  6. Hit Save at the bottom of the widget.
  7. After you have done this, you may want to disable the default text navigation links, so you do not have multiple links to the same files.
    1. Log in to your WordPress Admin Dashboard.
    2. On the left sidebar of the page, go to Appearance→ComicPress Options.
    3. Click the General tab.
    4. Under Navigation, click Disable the default comic post navigation.
    5. Click Save Settings.

Use a Navigation Style

Now that you have a Navigation Bar, you can style it like you would any other part of your page. The easiest way to do this is with a navstyle.css file. ComicPress comes with 5 navstyle.css styles: box, comical, default, scifi, and silver. To choose one of these styles, or your own that you have created,

  1. Log in to your WordPress Admin Dashboard.
  2. On the left sidebar of the page, go to Appearance→ComicPress Options.
  3. Click the General tab.
  4. Under Navigation, choose a style in the Graphic Navigation Directory list.
  5. Click Save Settings.

Create Your Own Navigation Style

If you’re not satisfied with the styles available, you can easily create your own styles! The easiest thing to do is copy one of the existing styles into a new folder, and change the CSS and images to suit your needs.

How navstyle.css works

Inside the ComicPress or Child Theme directory/images/nav/, there can multiple folders. Each folder contains a navstyle.css file and all the images used by that file. navstyle.css is an ordinary CSS file, which modifies the elements created by the Comic Navigation widget. ComicPress is set to search in those particular directories for the active Graphic Navigation style, then include the CSS in the page. navstyle.css handles the rest.

Creating the Images

The navigation images included by default actually house three distinct styles for each button in one file. The “states” of the default buttons, from left to right, are for Normal (image is displayed on page), Hover (user has their mouse pointer over the link), and Disabled (link is not valid, such as if you are on the most recent Comic, the “Next” button is grayed out because it is disabled). You do not have to do this with your buttons, but it’s recommended, because using one image instead of two (or more):

  • Reduces the load on your server by having clients request one file instead of two.
  • Ensures that the user will never have to “load” the hover image when they mouse over a file; the style change will be instantaneous
  • It helps you keep your buttons more organized having multiple states in one file.

The easiest thing to do is open the old image(s) you want to change in your image editing program, make the changes, and save them with the same filename in your new directory.

Navigation entities

  • .navi: All links in the navigation bar
  • .navi-void: Disabled links
  • .navi-first: First comic on site
  • .navi-prev: Previous comic
  • .navi-next: Next Comic
  • .navi-last: Latest Comic
  • .comic_navi_wrapper: div wrapper that goes around entire navigation bar
  • .comic_navi: table containing all the buttons
  • .navi-comictitle: Text in the middle of the table containing the title
  • .comic_navi_left: Left of three table cells
  • .comic_navi_center: Middle of three table cells
  • .comic_navi_right: Right of three table cells
  • .navi-firstinchap: First in current Chapter
  • .navi-prevchap: Previous Chapter
  • .navi-nextchap: Next Chapter
  • .navi-lastinchap: Last in Chapter
  • .navi-prev-in: Previous comic in storyline
  • .navi-next-in: Next comic in storyline
  • .navi-buyprint: Buy Print button
  • .navi-archive: Archives (as defined in Comic Navigation widget)
  • .navi-random: Random comic
  • .navi-share: ShareThis button
  • #navi-share-box: ShareThis popup
  • .navi-subscribe: Link to Subscribe to RSS
  • .navi-comments: Comments link for current comic
  • .navi-comments span: Shows number of comments on current comic
  • :hover : When appended to any of the above elements, when the user mouses over the element

Removing the Comment Count # from inside the Comment button

a.navi-comments span { text-indent: -9999px; }

Updating navstyle.css

After you have your images updated, it’s time to edit your navstyle.css. Some entries you may find useful If you edited/changed the image files:

  • If you changed the image height, you may have to edit the padding-top for the appropriate entities.
  • If you changed the image height, you may have to edit the width for the appropriate entries and background-position for the appropriate :hover entities.
  • If you are using individual images instead of one image with all states, you may have to add a new entry for the appropriate :hover and .navi-void entities with the proper background/width.
  • Save all your changes, and upload the entire folder to your server. Follow the instructions above for using a Navigation Style.