Custom images for buttons

muckajay
@muckajay
9 years ago
19 posts
I'm trying to change the basic 'Back' and 'Next' buttons to make them bigger. I've uploaded a new image containing the buttons in all states but don't know where to change the code to make the buttons appear properly on the screen (and so the hover works). The larger buttons appear cropped as the code is expecting smaller images. Can anyone help? Thanks.
updated by @muckajay: 09/05/15 10:28:49AM
Strumelia
Strumelia
@strumelia
9 years ago
3,603 posts
Maybe someone else will have better advice, but here's my story:

I wanted to make my Audio play/pause buttons smaller on my site.
First, I went into my server via ftp and located the .png images for those buttons within the 'images' folder of my audio module.

I copied them to my computer, opened in photoshop and made them smaller by about 25%. Saved them without changing the name.
Then I went back into my server folder and simply replaced the .png files with my smaller ones of the same name.
Then back in my JR site, I just had to clear cache, including checking the checkbox for refresh Icons as well...and they were now showing as smaller.

Note- there may be TWO sets of the buttons- one regular set and another set for 'hover'...make sure you do both sets if there is a hover set as well. For my audio buttons, the 'hover' ones are bright green, while the regular ones are grey. My hover ones had names like: button_player_play_hover.png and the non-hover sibling was named without the word hover: button_player_play.png
On my computer, I saved copies of both the old and new button .pngs for safekeeping, in a clearly labeled folder, just in case something exploded. lol

Now that you've uploaded another version- go into that Images folder and find all the ones there and get them sorted so there is only the new-sized set, with the SAME names as the original .png files. If you keep the same names and only change the file sizes, then it doesn't mess up code anywhere that those buttons are called up.
Hope this is helpful



--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

updated by @strumelia: 07/30/15 01:01:50PM
paul
@paul
9 years ago
4,326 posts
The 'basic' back and next buttons used by default are in the Core list_pager.tpl template. If you look at that using the ACP template editor, say you'll see these smarty codes -

{jrCore_icon icon="previous"}

{jrCore_icon icon="next"}

You can add a size parameter to these smarty calls (default size is 32) -

{jrCore_icon icon="previous" size=64}

{jrCore_icon icon="next" size=64}

If you have uploaded your own images the code could be changed so as to pick those up instead -



hth


--
Paul Asher - JR Developer and System Import Specialist

Tags