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.
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
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.
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!
I like how they did the background image on http://tinkersons.com/ it’s pretty cute!
I checked http://www.hankandpank.com/ 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 hankandpank.com soon!
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
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
