Support » Theme: Panel » Custom Comic Navigation Buttons

  • Resolved MarkDusko


    I am looking to use the Panel theme for my comic strip, but I would like to replace the comic navigation buttons with graphic ones. I found the navigation section in the style sheet, but I can’t figure out where to find the code that displays the buttons.

    I found this: <?php panel_content_nav( ‘comic-nav-below’ ); ?>

    in compic.php but I don’t know what that is referring to. I am not sure what I am missing. Thanks for the great theme. Any help is appreciated.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Kathryn


    Automattic Happiness Engineer

    Making this type of tweak will require changing a function in inc/template-tags.php – and is a little bit complicated, but it can be done.

    The first step is to set up a child theme – do you have one made already? Making a child theme means your tweaks won’t be overwritten when updating the theme. Here are some guides in case you haven’t made one before:

    If your site is online, could you also provide a link so I can have a look directly? Thanks.

    I have panel and jetpack installed and working, plus a child theme setup and ready for coding. I Am just getting started but I have some PHP experience and I am pretty good with CSS.

    Here is the site:

    And thank you for the help and the great theme!

    Just to make sure I understand correctly, are you trying to replace the text in the buttons on the home page that say “« First”, “Random”, and “Latest »” with images instead?

    Here’s some example CSS I came up with to show one possible way to do it:

    .nav-random span {
    	display: none;
    .entry-comic .navigation-comic .nav-random a,
    .entry-comic .navigation-comic .nav-random a:hover {
    	background: url( center center no-repeat;
    	margin: 0 auto;
    	display: block;
    	height: 40px;
    	width: 40px;

    I used a WordPress logo for this example that illustrates an image replacement technique on the “Random” button in the middle. To use your own image, replace the url() value and adjust the height and width as needed. From there, you should be able to copy that set of CSS and repeat it for each of the other buttons.

    You can add custom CSS using a child theme or you can add it with a custom CSS editor such as the one that comes with Jetpack.

    Yep, that’s exactly what I want to do. Change the “First”, “Random”, and “Latest”, and other comic navigation buttons with images.

    I really like the ones King Feature used for the Tinkersons:

    Your code makes perfect sense. I will give it a try and report back. I am currently working on the graphic elements in Gimp, so hopefully I will have the images done soon.

    Thank you very much for the great help!

    I like how they did the background image on it’s pretty cute!

    I checked just now, but I don’t see any updates. Still need help?

    I have been working on the graphics elements such as the header, footer buttons, ect, so I haven’t gotten back to do any more CSS on the site. It’s taking much longer than I thought. I think I am in pretty good shape at the moment as far as needing help, but it was very nice of you to check in and I appreciate that. I hope to have something more to see on soon!

    I tried the code designsimply posted and it worked. -Very much appreciated =! However, I couldn’t get the navigation menu graphics to scale on mobile devices well enough, so I went back to the original navigation menu and just did some size changes.

    I just wanted to let everyone know graphic comic navigation buttons will work. Maybe someone who knows more about making websites responsive can make the graphics scale better on mobile devices.


    Moderator Kathryn


    Automattic Happiness Engineer

    Hi Mark – glad Sheri’s techniques worked.

    If you want to limit the graphics to display only at certain screen sizes, you can always wrap the CSS in something called a media query.

    You can learn more about using media queries that target certain screen sizes here:

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Custom Comic Navigation Buttons’ is closed to new replies.