This question is answered. Helpful answers available: 2. Correct answers available: 1.


Permlink Replies: 4 - Pages: 1 - Last Post: 02-Dec-2018 18:18 Last Post By: ksmatharu Threads: [ Previous | Next ]
ksmatharu

Posts: 63
Registered: 2-May-2009
Gromit: Customise cursor and buttons for "prev" and "next"?
Posted: 02-Dec-2018 12:16
 
  Click to reply to this thread Reply
Two main questions really.

Q1. It is possible to customise the buttons for "previous" and "next"? I'd rather change these to a chevron design rather than use the existing that look like "play" buttons if you know what I mean.

I wasn't sure how to overwrite your html code easily. I could just create my own png files and overwrite the ones in the skin but I imagine that I have to keep doing this every time I updated the skin.

Thinking about it now, I'd really like to be able to customise all the buttons.

Q2. Is it possible to change the cursor for the "previous" and "next" pointers to match the customised buttons from (Q1) above?

For the cursors, I thought of creating my own png files and then adding the custom CSS code similar to this point to my own png files:

.gr-prev {
cursor: url(myurl-mycursorprev.png),pointer;
.gr-next {
cursor: url(myurl-cursornext.png),pointer;

But I wasn't sure if this would conflict with the existing CSS code for the cursors.

Regards,
jGromit

Posts: 7,488
Registered: 31-Jan-2006
Gromit: Re: Customise cursor and buttons for "prev" and "next"?
Posted: 02-Dec-2018 13:35   in response to: ksmatharu in response to: ksmatharu
 
  Click to reply to this thread Reply
ksmatharu wrote:
Q1. It is possible to customise the buttons for "previous" and "next"?

The only practical way to do that is to put together your own set of PNG files (with the same names), stash them somewhere for safekeeping, and copy them to the skin directories. Two things to keep in mind:

First, these files are in two different places in the skin - some are in the res subdirectory, and others are in the resopt subdirectory. Don't mix up the two, or you won't get the correct icons in your album. (Some are "optional" in that the skin doesn't automatically copy them to the output unless they're actually needed for the album - that keeps the number of files in the output directory under control.)

Second, make sure your icon files are square, like 64x64px, and that they're at least as large as the icon size settings you've chosen in the Gromit settings. Otherwise, they'll end up being distorted or blurry.

If there's a new skin release, just do the copying over again. Trying to edit the skin's template files would be a much worse maintenance problem.

Thinking about it now, I'd really like to be able to customise all the buttons.

Yes, they're starting to look a bit old-fashioned. I chose them because they were royalty-free, even for commercial use. Be careful about just copying someone else's icons - they might be copyrighted! It was also easy to create an "empty frame" version that I could then use to create additional icons, like the "globe" for a Google map link, which I cobbled together.

Q2. Is it possible to change the cursor for the "previous" and "next" pointers to match the customised buttons from (Q1) above?

Pretty much the same answer. Find your own cursors, and plant them in the skin's resopt directory (they're "optional" because a user might not tell the skin to use on-image navigation). But they have to be named cursorprev.cur and cursornext.cur. If you do that, no code-hacking is needed.

If you want to use PNG files, there are two problems. First, IE11 can't use PNG files for cursors - only CUR and ANI files. Second, again for IE11, the files have to be in a different location in the output directory, and the skin takes care of that.

If you want to use PNG files, and don't care about IE11, then just put your PNG cursor files, called cursorprev.png and cursornext.png, into the skin's res directory (not the resopt directory). Don't delete the existing CUR files in the resopt directory, or you'll get errors. Then put this into the Gromit > Code > CSS box:
.gr-prev {cursor: url(cursorprev.png), pointer;}
.gr-next {cursor: url(cursornext.png), pointer;}
(Your syntax isn't quite right.)

One last thing - the jAlbum integrated browser doesn't honor custom cursors, so don't do your testing by using it. View the album in a real browser.
ksmatharu

Posts: 63
Registered: 2-May-2009
Gromit: Re: Customise cursor and buttons for "prev" and "next"?
Posted: 02-Dec-2018 14:23   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
JGromit, thank you for such a quick and detailed response. I'll take your guidance and create the files as directed and not mess around with any code. I'm not too bad at creating my own icons from scratch. I just need to find out a bit more on how to create .cur files!
jGromit

Posts: 7,488
Registered: 31-Jan-2006
Gromit: Re: Customise cursor and buttons for "prev" and "next"?
Posted: 02-Dec-2018 14:31   in response to: ksmatharu in response to: ksmatharu
 
  Click to reply to this thread Reply
If you can create your own PNG icons for cursors, you can easily find places online to convert them to CUR files.

One good source: https://convertio.co/png-cur/

Either that, or just forget about IE11. I don't pay much attention to it in my newer skins - the latest one, Pluto, really doesn't work properly in IE11 at all. IE11 usage is dropping fast - most of the remaining users are in the commercial world, I suspect, rather than among home users.

ETA: Worldwide, IE11 browser share is estimated to be under 3%.
ksmatharu

Posts: 63
Registered: 2-May-2009
Gromit: Re: Customise cursor and buttons for "prev" and "next"?
Posted: 02-Dec-2018 18:18   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
I'll try the conversion to CUR format. Yeah, know a few companies still on IE11...
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums