WordPress.org

Forums

Panel
[resolved] Custom Comic Navigation Buttons (10 posts)

  1. MarkDusko
    Member
    Posted 1 year ago #

    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.

  2. 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:

    http://codex.wordpress.org/Child_Themes
    http://op111.net/53/
    http://vimeo.com/49770088

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

  3. MarkDusko
    Member
    Posted 1 year ago #

    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:

    http://www.hankandpank.com

    And thank you for the help and the great theme!
    Mark

  4. designsimply
    Member
    Posted 1 year ago #

    Just to make sure I understand correctly, are you trying to replace the text in the buttons on the http://www.hankandpank.com/ 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(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) 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.

  5. MarkDusko
    Member
    Posted 1 year ago #

    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:
    http://tinkersons.com/

    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!

  6. designsimply
    Member
    Posted 1 year ago #

    I like how they did the background image on http://tinkersons.com/ it's pretty cute!

  7. designsimply
    Member
    Posted 11 months ago #

    I checked http://www.hankandpank.com/ just now, but I don't see any updates. Still need help?

  8. MarkDusko
    Member
    Posted 11 months ago #

    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 hankandpank.com soon!

  9. MarkDusko
    Member
    Posted 11 months ago #

    so,
    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.

    Mark

  10. Kathryn
    Automattic Happiness Engineer
    Posted 11 months ago #

    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:

    http://en.support.wordpress.com/custom-design/custom-css-media-queries/
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.