These codes can:
* give you a custom cursor and let you set new ones with CUR or JPG/PNG files
* fix/replace broken cursors and custom cursors
Choose what kind of cursor you want below, and paste the code found in the spoiler to the bottom of your CSS and your list should have a custom cursor. You can change it in a variety of ways with the instructions! Get more cursors here: https://www.cursors-4u.com/
A sample of custom cursor pngs are here in this post: https://imgur.com/a/iltpXzK You can download the images and rehost them on your own Imgur account where you'll get the direct link under Images.
More details and help at the bottom of the post under Custom Cursor Help.
Custom Cursor Codes
Single Custom Cursor
Cursor with CUR and PNG files
Changing cursors
The link in the first parenthesis is for a cursor code (CUR) direct link from https://www.cursors-4u.com/ , change it by getting a new CUR direct link from a cursor's page. Put that in the first parenthesis in the code. Other users can't see this CUR file. The second parenthesis is a backup PNG cursor image which other users will see. You can convert your cursor to PNG with https://convertio.co/cur-png/ . Upload your PNG cursor to Imgur and replace the second parenthesis's link with a direct link to your new cursor. You can use PNG in both parenthesis if you want.
Changing and making cursors is reviewed in more detail at the bottom of the post.
Fixing PNG cursor problems
You can use EZGif to crop out (remove) the empty space around a custom cursor PNG if something seems wrong with it on your list. Lower the size under 32px wide and high if its too large. Use the new cropped and/or resized version for your cursor PNG. https://ezgif.com/crop https://ezgif.com/resize Crop the image first, download it, then resize the cropped version if needed.
Codes
Cursor codes are pasted to the bottom of your CSS.
/* CUSTOM CURSOR
Get new custom cursors here, or search online for CUR files.
https://www.cursors-4u.com/
The direct link for each cursor goes into the first parenthesis below. You can find the direct link in the parenthesis in the codes on each cursor page.
If you want others to see the cursors, you should convert it to PNG and upload the PNG to Imgur, and paste the direct image link from Imgur to the second parenthesis (or both parenthesis if you don't want to use the CUR file anymore). Convert cursors to PNG here:
https://convertio.co/cur-png/
Or right click the cursor on its page and save it as an image.
You can use EZGif to crop out (remove) the empty space around a custom cursor PNG if something seems wrong with it on your list. Lower the size under 32px wide and high if its too large. Use the new cropped and/or resized version for your cursor PNG.
https://ezgif.com/crop
https://ezgif.com/resize
Changing, making and fixing cursors is reviewed in more detail at the bottom of the post.
https://myanimelist.net/forum/?topicid=1903808
*/
body *, :not(*) {
cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), url(https://i.imgur.com/j9ZWzyT.png), auto !important;
}
Cursor with PNG file
Changing cursors
It only uses a PNG file in the code in parenthesis, but you can replace it with a CUR file link from cursor pages on https://www.cursors-4u.com/ or convert the cursor file to PNG with https://convertio.co/cur-png/ or right click the cursor on its page and save it as an image. You can also search and download PNG cursors. Use small PNGs for cursors otherwise there might be errors especially for visitors to your list. Upload your cursor PNG to Imgur, and replace the PNG in parenthesis with the new direct link. You can try to use GIFs and JPGs instead of PNGs, but I can't guarantee it will work right.
Changing and making cursors is reviewed in more detail at the bottom of the post.
Fixing PNG cursor problems
You can use EZGif to crop out (remove) the empty space around a custom cursor PNG if something seems wrong with it on your list. Lower the size under 32px wide and high if its too large. Use the new cropped and/or resized version for your cursor PNG. https://ezgif.com/crop https://ezgif.com/resize Crop the image first, download it, then resize the cropped version if needed.
Codes
Cursor codes are pasted to the bottom of your CSS.
/* CUSTOM CURSOR
Get new custom cursors here, or search online for CUR files.
https://www.cursors-4u.com/
The direct link for each cursor goes into the first parenthesis below. You can find the direct link in the parenthesis in the codes on each cursor page.
If you want others to see the cursors, you should convert it to PNG and upload the PNG to Imgur, and paste the direct image link from Imgur to the second parenthesis (or both parenthesis if you don't want to use the CUR file anymore). Convert cursors to PNG here:
https://convertio.co/cur-png/
Or right click the cursor on its page and save it as an image.
You can use EZGif to crop out (remove) the empty space around a custom cursor PNG if something seems wrong with it on your list. Lower the size under 32px wide and high if its too large. Use the new cropped and/or resized version for your cursor PNG.
https://ezgif.com/crop
https://ezgif.com/resize
Changing, making and fixing cursors is reviewed in more detail at the bottom of the post.
https://myanimelist.net/forum/?topicid=1903808
*/
body *, :not(*) {
cursor: url(https://i.imgur.com/j9ZWzyT.png), auto !important;
}
Alternating Link Cursors
Cursors with CUR and PNG files
Changing cursors
The link in the first parenthesis is for a cursor code (CUR) direct link from https://www.cursors-4u.com/ , change it by getting a new CUR direct link from a cursor's page. Put that in the first parenthesis in the code. Other users can't see this CUR file. The second parenthesis is a backup PNG cursor image which other users will see. You can convert your cursor to PNG with https://convertio.co/cur-png/ or right click the cursor on its page and save it as an image. Upload your PNG cursor to Imgur and replace the second parenthesis's link with a direct link to your new cursor. You can use PNG in both parenthesis if you want.
Changing and making cursors is reviewed in more detail at the bottom of the post.
Fixing PNG cursor problems
You can use EZGif to crop out (remove) the empty space around a custom cursor PNG if something seems wrong with it on your list. Lower the size under 32px wide and high if its too large. Use the new cropped and/or resized version for your cursor PNG. https://ezgif.com/crop https://ezgif.com/resize Crop the image first, download it, then resize the cropped version if needed.
Codes
Cursor codes are pasted to the bottom of your CSS.
/* CUSTOM CURSOR
Get new custom cursors here, or search online for CUR files.
https://www.cursors-4u.com/
The direct link for each cursor goes into the first parenthesis below. You can find the direct link in the parenthesis in the codes on each cursor page.
If you want others to see the cursors, you should convert it to PNG and upload the PNG to Imgur, and paste the direct image link from Imgur to the second parenthesis (or both parenthesis if you don't want to use the CUR file anymore). Convert cursors to PNG here:
https://convertio.co/cur-png/
Or right click the cursor on its page and save it as an image.
You can use EZGif to crop out (remove) the empty space around a custom cursor PNG if something seems wrong with it on your list. Lower the size under 32px wide and high if its too large. Use the new cropped and/or resized version for your cursor PNG.
https://ezgif.com/crop
https://ezgif.com/resize
Changing, making and fixing cursors is reviewed in more detail at the bottom of the post.
https://myanimelist.net/forum/?topicid=1903808
The second set of codes is for pointing to links.
*/
body *, :not(*) {
cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), url(https://i.imgur.com/j9ZWzyT.png), auto !important;
}
a:hover,
.data.tags span a,
.data.tags span a:hover,
.fa:hover,.data.progress span:hover,.list-table .list-table-data .data.score:hover,
.list-table .list-table-data .data.licensor a:hover,.list-table .list-table-data .data.score .link:before,
.data.progress span a:before,.list-table .list-table-data .data.season a:hover,.list-item .data.studio:hover *,
.list-table .list-table-data .data.title .link:hover,.list-table-data .data.tags:hover,.list-table .list-table-data .tags .edit:hover,
.list-table .list-table-data .data.title .edit:hover a,.list-table .list-table-data .data.title .add:hover a{
cursor: url(https://dl.dropboxusercontent.com/s/q3y753hi4kqklz7/red.cur), url(https://i.imgur.com/VNMuCD1.png), auto !important;
}
Cursors with PNG files
Changing cursors
It only uses PNG files in the code in parenthesis, but you can replace it with a CUR file link from cursor pages on https://www.cursors-4u.com/ or convert the cursor file to PNG with https://convertio.co/cur-png/ or right click the cursor on its page and save it as an image. You can also search and download PNG cursors. Use small PNGs for cursors otherwise there might be errors especially for visitors to your list. Upload your cursor PNG to Imgur, and replace the PNG in parenthesis with the new direct link. You can try to use GIFs and JPGs instead of PNGs, but I can't guarantee it will work right.
Changing and making cursors is reviewed in more detail at the bottom of the post.
Fixing PNG cursor problems
You can use EZGif to crop out (remove) the empty space around a custom cursor PNG if something seems wrong with it on your list. Lower the size under 32px wide and high if its too large. Use the new cropped and/or resized version for your cursor PNG. https://ezgif.com/crop https://ezgif.com/resize Crop the image first, download it, then resize the cropped version if needed.
Codes
Cursor codes are pasted to the bottom of your CSS.
/* CUSTOM CURSOR
Get new custom cursors here, or search online for CUR files.
https://www.cursors-4u.com/
The direct link for each cursor goes into the first parenthesis below. You can find the direct link in the parenthesis in the codes on each cursor page.
If you want others to see the cursors, you should convert it to PNG and upload the PNG to Imgur, and paste the direct image link from Imgur to the second parenthesis (or both parenthesis if you don't want to use the CUR file anymore). Convert cursors to PNG here:
https://convertio.co/cur-png/
Or right click the cursor on its page and save it as an image.
You can use EZGif to crop out (remove) the empty space around a custom cursor PNG if something seems wrong with it on your list. Lower the size under 32px wide and high if its too large. Use the new cropped and/or resized version for your cursor PNG.
https://ezgif.com/crop
https://ezgif.com/resize
Changing, making and fixing cursors is reviewed in more detail at the bottom of the post.
https://myanimelist.net/forum/?topicid=1903808
The second set of codes is for when pointing to links.
*/
body *, :not(*) {
cursor: url(https://i.imgur.com/j9ZWzyT.png), auto !important;
}
a:hover,
.data.tags span a,
.data.tags span a:hover,
.fa:hover,.data.progress span:hover,.list-table .list-table-data .data.score:hover,
.list-table .list-table-data .data.licensor a:hover,.list-table .list-table-data .data.score .link:before,
.data.progress span a:before,.list-table .list-table-data .data.season a:hover,.list-item .data.studio:hover *,
.list-table .list-table-data .data.title .link:hover,.list-table-data .data.tags:hover,.list-table .list-table-data .tags .edit:hover,
.list-table .list-table-data .data.title .edit:hover a,.list-table .list-table-data .data.title .add:hover a{
cursor: url(https://i.imgur.com/VNMuCD1.png), auto !important;
}
Alternating Multi-color Cursor
Changing cursors
It only uses PNG files in the code in parenthesis, but you can replace it with a CUR file link from cursor pages on https://www.cursors-4u.com/ or convert the cursor file to PNG with https://convertio.co/cur-png/ or right click the cursor on its page and save it as an image. You can also search and download PNG cursors. Use small PNGs for cursors otherwise there might be errors especially for visitors to your list. Upload your cursor PNG to Imgur, and replace the PNG in parenthesis with the new direct link. You can try to use GIFs and JPGs instead of PNGs, but I can't guarantee it will work right.
Changing and making cursors is reviewed in more detail at the bottom of the post.
Fixing PNG cursor problems
You can use EZGif to crop out (remove) the empty space around a custom cursor PNG if something seems wrong with it on your list. Lower the size under 32px wide and high if its too large. Use the new cropped and/or resized version for your cursor PNG. https://ezgif.com/crop https://ezgif.com/resize Crop the image first, download it, then resize the cropped version if needed.
Codes
Cursor codes are pasted to the bottom of your CSS.
/* CUSTOM CURSOR
Get new custom cursors here, or search online for CUR files.
https://www.cursors-4u.com/
The direct link for each cursor goes into the first parenthesis below. You can find the direct link in the parenthesis in the codes on each cursor page.
If you want others to see the cursors, you should convert it to PNG and upload the PNG to Imgur, and paste the direct image link from Imgur to the second parenthesis (or both parenthesis if you don't want to use the CUR file anymore). Convert cursors to PNG here:
https://convertio.co/cur-png/
Or right click the cursor on its page and save it as an image.
You can use EZGif to crop out (remove) the empty space around a custom cursor PNG if something seems wrong with it on your list. Lower the size under 32px wide and high if its too large. Use the new cropped and/or resized version for your cursor PNG.
https://ezgif.com/crop
https://ezgif.com/resize
Changing, making and fixing cursors is reviewed in more detail at the bottom of the post.
https://myanimelist.net/forum/?topicid=1903808
*/
body *{
cursor: url(https://i.imgur.com/tLq7FnL.png), auto !important;
}
.header *{
cursor: url(https://i.imgur.com/RRnwtL5.png), auto !important;
}
.list-menu-float *{
cursor: url(https://i.imgur.com/11JgqYW.png), auto !important;
}
.list-table *{
cursor: url(https://i.imgur.com/QvyUuJE.png), auto !important;
}
.status-menu-container *{
cursor: url(https://i.imgur.com/l5Wl4oY.png), auto !important;
}
a:hover{
cursor: url(https://i.imgur.com/VNMuCD1.png), auto !important;
}
.list-table-data .data.tags:hover,
.list-table .list-table-data .tags .edit:hover,.data.tags span a,
.data.tags span a:hover{
cursor: url(https://i.imgur.com/PTIBFJB.png), auto !important;
}
.data.progress span a:before,
.fa:hover,.data.progress span:hover{
cursor: url(https://i.imgur.com/PTIBFJB.png), auto !important;
}
.list-table .list-table-data .data.score .link:before,
.list-table .list-table-data .data.score:hover{
cursor: url(https://i.imgur.com/l5Wl4oY.png), auto !important;
}
.list-table .list-table-data .data.licensor a:hover,
.list-table .list-table-data .data.season a:hover,.list-item .data.studio:hover *{
cursor: url(https://i.imgur.com/VNMuCD1.png), auto !important;
}
.list-table .list-table-data .data.title .link:hover,
.list-table .list-table-data .data.title .edit:hover a,.list-table .list-table-data .data.title .add:hover a{
cursor: url(https://i.imgur.com/QvyUuJE.png), auto !important;
}
Alternating Character Cursor
Changing cursors
It only uses PNG files in the code in parenthesis, but you can replace it with a CUR file link from cursor pages on https://www.cursors-4u.com/ or convert the cursor file to PNG with https://convertio.co/cur-png/ or right click the cursor on its page and save it as an image. You can also search and download PNG cursors. Use small PNGs for cursors otherwise there might be errors especially for visitors to your list. Upload your cursor PNG to Imgur, and replace the PNG in parenthesis with the new direct link. You can try to use GIFs and JPGs instead of PNGs, but I can't guarantee it will work right.
Changing and making cursors is reviewed in more detail at the bottom of the post.
Fixing PNG cursor problems
You can use EZGif to crop out (remove) the empty space around a custom cursor PNG if something seems wrong with it on your list. Lower the size under 32px wide and high if its too large. Use the new cropped and/or resized version for your cursor PNG. https://ezgif.com/crop https://ezgif.com/resize Crop the image first, download it, then resize the cropped version if needed.
Codes
Cursor codes are pasted to the bottom of your CSS.
/* CUSTOM CURSOR
Get new custom cursors here, or search online for CUR files.
https://www.cursors-4u.com/
The direct link for each cursor goes into the first parenthesis below. You can find the direct link in the parenthesis in the codes on each cursor page.
If you want others to see the cursors, you should convert it to PNG and upload the PNG to Imgur, and paste the direct image link from Imgur to the second parenthesis (or both parenthesis if you don't want to use the CUR file anymore). Convert cursors to PNG here:
https://convertio.co/cur-png/
Or right click the cursor on its page and save it as an image.
You can use EZGif to crop out (remove) the empty space around a custom cursor PNG if something seems wrong with it on your list. Lower the size under 32px wide and high if its too large. Use the new cropped and/or resized version for your cursor PNG.
https://ezgif.com/crop
https://ezgif.com/resize
Changing, making and fixing cursors is reviewed in more detail at the bottom of the post.
https://myanimelist.net/forum/?topicid=1903808
The second set of codes is for when pointing to links.
*/
body *, :not(*) {
cursor: url(https://i.imgur.com/sbVwMrY.png), auto !important;
}
a:hover,
.data.tags span a,
.data.tags span a:hover,
.fa:hover,.data.progress span:hover,.list-table .list-table-data .data.score:hover,
.list-table .list-table-data .data.licensor a:hover,.list-table .list-table-data .data.score .link:before,
.data.progress span a:before,.list-table .list-table-data .data.season a:hover,.list-item .data.studio:hover *,
.list-table .list-table-data .data.title .link:hover,.list-table-data .data.tags:hover,.list-table .list-table-data .tags .edit:hover,
.list-table .list-table-data .data.title .edit:hover a,.list-table .list-table-data .data.title .add:hover a{
cursor: url(https://i.imgur.com/BoD8dMJ.png), auto !important;
}
Animated Hatsune Miku Cursor
This is far more complicated than the other cursors, and is better for simple layouts because of the loading animation. It isn't really meant to be edited; you should probably be very experienced with list design if you want to edit it or even use it since it can be finicky. I combined multiple PNG cursors with CSS3 animation for the animated cursor effect.
There are multiple versions, usually changing what happens when you point to a link. If one version is not working well in your browser, try another version, and see help below about making it load easier.
Before installing codes for an animated cursor, you may need to scroll down and remove custom cursor codes from your CSS, they look like this code in the spoiler. Any line with cursor should also be removed if your Miku cursor isn't displaying at all, so search your CSS. You can post it in Notepad+ and use CTRL+F to search the code for cursor codes to remove them.
/*CUSTOM CURSOR
More here: https://myanimelist.net/forum/?topicid=1903808*/
body *, :not(*) {
cursor: url(https://i.imgur.com/j9ZWzyT.png), auto !important;
}
Here are the different animated cursor codes you can use.
Animated Cursor, always singing
/* ANIMATED CUSTOM CURSOR
Each frame of animation for Miku singing is separated by the percentages. The duration is the length of the animation, 1 second, so you can speed it up by lowering it to .5s or increase it to 2s.
The a:hover is when you point to a link. It's Miku opening her eyes.*/
body *, :not(*) {
animation-name: Miku;
animation-duration: 1s !important;
animation-iteration-count: infinite;
}
@keyframes Miku {
0% {cursor: url(https://i.imgur.com/yDZDDMb.png), auto;}
12% {cursor: url(https://i.imgur.com/2xz6s1i.png), auto;}
24% {cursor: url(https://i.imgur.com/AD2RVaZ.png), auto;}
36% {cursor: url(https://i.imgur.com/A3VD6Yt.png), auto;}
48% {cursor: url(https://i.imgur.com/3G5l44k.png), auto;}
60% {cursor: url(https://i.imgur.com/ZE4NUY9.png), auto;}
72% {cursor: url(https://i.imgur.com/XLxsc6r.png), auto;}
84% {cursor: url(https://i.imgur.com/zzkvmh2.png), auto;}
96% {cursor: url(https://i.imgur.com/yDZDDMb.png), auto;}
}
a:hover,
.data.tags span a,
.data.tags span a:hover,
.fa:hover,.data.progress span:hover,.list-table .list-table-data .data.score:hover,
.list-table .list-table-data .data.licensor a:hover,.list-table .list-table-data .data.score .link:before,
.data.progress span a:before,.list-table .list-table-data .data.season a:hover,.list-item .data.studio:hover *,
.list-table .list-table-data .data.title .link:hover,.list-table-data .data.tags:hover,.list-table .list-table-data .tags .edit:hover,
.list-table .list-table-data .data.title .edit:hover a,.list-table .list-table-data .data.title .add:hover a{
animation-name: Miku;
animation-duration: 1s !important;
animation-iteration-count: infinite;
}
Animated Cursor, always eyes open and blinks
/* ANIMATED CUSTOM CURSOR
Each frame of animation for Miku singing is separated by the percentages. The duration is the length of the animation, 1 second, so you can speed it up by lowering it to .5s or increase it to 2s.
The a:hover is when you point to a link. It's Miku opening her eyes.*/
body *, :not(*) {
animation-name: Miku2;
animation-duration: 1s !important;
animation-iteration-count: infinite;
}
a:hover,
.data.tags span a,
.data.tags span a:hover,
.fa:hover,.data.progress span:hover,.list-table .list-table-data .data.score:hover,
.list-table .list-table-data .data.licensor a:hover,.list-table .list-table-data .data.score .link:before,
.data.progress span a:before,.list-table .list-table-data .data.season a:hover,.list-item .data.studio:hover *,
.list-table .list-table-data .data.title .link:hover,.list-table-data .data.tags:hover,.list-table .list-table-data .tags .edit:hover,
.list-table .list-table-data .data.title .edit:hover a,.list-table .list-table-data .data.title .add:hover a{
animation-name: Miku2;
animation-duration: 1s !important;
animation-iteration-count: infinite;
}
@keyframes Miku2 {
0% {cursor: url(https://i.imgur.com/wElxy8i.png), auto;}
12% {cursor: url(https://i.imgur.com/RC064Zf.png), auto;}
24% {cursor: url(https://i.imgur.com/TZcZbHI.png), auto;}
36% {cursor: url(https://i.imgur.com/ZS3WsJj.png), auto;}
48% {cursor: url(https://i.imgur.com/9y4r7KJ.png), auto;}
60% {cursor: url(https://i.imgur.com/jE22B8n.png), auto;}
72% {cursor: url(https://i.imgur.com/pC6MvOS.png), auto;}
84% {cursor: url(https://i.imgur.com/fVmsFyt.png), auto;}
96% {cursor: url(https://i.imgur.com/wElxy8i.png), auto;}
}
Animated Cursor, opens eyes on links but becomes still
/* ANIMATED CUSTOM CURSOR
Each frame of animation for Miku singing is separated by the percentages. The duration is the length of the animation, 1 second, so you can speed it up by lowering it to .5s or increase it to 2s.
The a:hover is when you point to a link. It's Miku opening her eyes.*/
body *, :not(*) {
animation-name: Miku;
animation-duration: 1s !important;
animation-iteration-count: infinite;
}
@keyframes Miku {
0% {cursor: url(https://i.imgur.com/yDZDDMb.png), auto;}
12% {cursor: url(https://i.imgur.com/2xz6s1i.png), auto;}
24% {cursor: url(https://i.imgur.com/AD2RVaZ.png), auto;}
36% {cursor: url(https://i.imgur.com/A3VD6Yt.png), auto;}
48% {cursor: url(https://i.imgur.com/3G5l44k.png), auto;}
60% {cursor: url(https://i.imgur.com/ZE4NUY9.png), auto;}
72% {cursor: url(https://i.imgur.com/XLxsc6r.png), auto;}
84% {cursor: url(https://i.imgur.com/zzkvmh2.png), auto;}
96% {cursor: url(https://i.imgur.com/yDZDDMb.png), auto;}
}
a:hover,
.data.tags span a,
.data.tags span a:hover,
.fa:hover,.data.progress span:hover,.list-table .list-table-data .data.score:hover,
.list-table .list-table-data .data.licensor a:hover,.list-table .list-table-data .data.score .link:before,
.data.progress span a:before,.list-table .list-table-data .data.season a:hover,.list-item .data.studio:hover *,
.list-table .list-table-data .data.title .link:hover,.list-table-data .data.tags:hover,.list-table .list-table-data .tags .edit:hover,
.list-table .list-table-data .data.title .edit:hover a,.list-table .list-table-data .data.title .add:hover a{
cursor: url(https://i.imgur.com/JSBks9w.png), auto !important;
}
Animated Cursor, opens eyes on link and starts blinking
/* ANIMATED CUSTOM CURSOR
Each frame of animation for Miku singing is separated by the percentages. The duration is the length of the animation, 1 second, so you can speed it up by lowering it to .5s or increase it to 2s.
The a:hover is when you point to a link. It's Miku opening her eyes.*/
body *, :not(*) {
animation-name: Miku;
animation-duration: 1s !important;
animation-iteration-count: infinite;
}
@keyframes Miku {
0% {cursor: url(https://i.imgur.com/yDZDDMb.png), auto;}
12% {cursor: url(https://i.imgur.com/2xz6s1i.png), auto;}
24% {cursor: url(https://i.imgur.com/AD2RVaZ.png), auto;}
36% {cursor: url(https://i.imgur.com/A3VD6Yt.png), auto;}
48% {cursor: url(https://i.imgur.com/3G5l44k.png), auto;}
60% {cursor: url(https://i.imgur.com/ZE4NUY9.png), auto;}
72% {cursor: url(https://i.imgur.com/XLxsc6r.png), auto;}
84% {cursor: url(https://i.imgur.com/zzkvmh2.png), auto;}
96% {cursor: url(https://i.imgur.com/yDZDDMb.png), auto;}
}
a:hover,
.data.tags span a,
.data.tags span a:hover,
.fa:hover,.data.progress span:hover,.list-table .list-table-data .data.score:hover,
.list-table .list-table-data .data.licensor a:hover,.list-table .list-table-data .data.score .link:before,
.data.progress span a:before,.list-table .list-table-data .data.season a:hover,.list-item .data.studio:hover *,
.list-table .list-table-data .data.title .link:hover,.list-table-data .data.tags:hover,.list-table .list-table-data .tags .edit:hover,
.list-table .list-table-data .data.title .edit:hover a,.list-table .list-table-data .data.title .add:hover a{
animation-name: Miku2;
animation-duration: 1s !important;
animation-iteration-count: infinite;
}
@keyframes Miku2 {
0% {cursor: url(https://i.imgur.com/wElxy8i.png), auto;}
12% {cursor: url(https://i.imgur.com/RC064Zf.png), auto;}
24% {cursor: url(https://i.imgur.com/TZcZbHI.png), auto;}
36% {cursor: url(https://i.imgur.com/ZS3WsJj.png), auto;}
48% {cursor: url(https://i.imgur.com/9y4r7KJ.png), auto;}
60% {cursor: url(https://i.imgur.com/jE22B8n.png), auto;}
72% {cursor: url(https://i.imgur.com/pC6MvOS.png), auto;}
84% {cursor: url(https://i.imgur.com/fVmsFyt.png), auto;}
96% {cursor: url(https://i.imgur.com/wElxy8i.png), auto;}
}
How to fix loading problems
This is best for simple layouts where it should load quickly. Try another cursor if your page is lagging.
How to customize or use your own animated cursor
To make your own animated cursor (ANI files) or a small GIF, you could download a custom animated cursor yourself, split the frames of animation into separate PNGs in an ap like JASC Animation Shop, then upload the PNGs to Imgur and replace each frame of animation in the @keyframes Miku animation code with the PNG frames you upload. Carefully replace each link, because the animation code is very fickle about proper coding and spacing.
Unfortunately, this is the only way I know of to add an animated cursor right now to lists, and it's quite complex. Animation codes are one of the most difficult and error-prone parts of CSS. ANI cursors which are animated cursors don't seem to work in Chrome, and GIFs won't work as cursors, so I use PNGs for each frame of animated cursor instead (and animate the frames with CSS code.
Custom Cursor Help
How to get a new custom cursor link (CUR file)
Site for custom cursor links and images: https://www.cursors-4u.com/
These cursors are CUR files and different from the images you've used in layouts before (those were JPGs, PNGs, and GIFs). They can't be uploaded to Imgur. You can also search Google and DeviantArt for more CUR files.
You'll get the direct link for a cursor on the cursor's page; look in the parenthesis:
Paste that cursor link into the parenthesis for the custom cursor link in the code to use it.
Getting a new custom cursor PNG link and converting a CUR file to PNG
https://www.cursors-4u.com/
You can get the PNG to use for a cursor by right clicking the cursor's image and choosing open in new tab or download the image. The PNG should be there. You can upload that PNG to Imgur and use it in your custom cursor code's image link parenthesis too. If there are two sets of parenthesis in your code, you can replace both links with your PNG cursor.
You can also use small PNG cursors you find on other sites as a cursor! Your PNGs need to be uploaded to Imgur, and you insert the direct links in the parenthesis of the cursor code. If you can't find the direct link log into your own Imgur account and upload to it, you'll get the direct link under Images on the upper right.
You can also use any image online for a cursor, use the next section.
Making your own cursor PNG, recoloring it, or using any image for a cursor
Pretty much any image you have or find can be a cursor, you just need to shrink it down with EZgif's resizer. Your own PNG or JPG cursor should be under 32px wide and high or there might be problems on your list. https://ezgif.com/resize
Tip: Character renders, or just the head, can make nice little cursors! (Google for them).
If you want to cut out or erase parts of your image, you can take any image and use Photoscissors to cut what you want out of it, it will also render most or all of it for your automatically. https://photoscissors.com/
EZGif's Crop tool can also crop the image down (remove empty space). This should make the cursor look and work better. Do this before resizing- save the cropped version- and then resize that. https://ezgif.com/crop
You can also use my graphic design tutorials to learn how to use Photoshop, GIMP, or Photopea, and edit the cursor PNGs from this topic into your own cursors. The above sites should be enough and faster to use for cropping and resizing, though. Graphic design programs are also good for recoloring cursors- use the Color Overlay Blending Option in Photoshop or Photopea. https://myanimelist.net/forum/?topicid=419631
Fixing cursor PNG problems
Download the PNG cursor and crop out (remove) the empty space around it. Use the new cropped version of the cursor. This can be done easily in EZGif. https://ezgif.com/crop
You should also resize it if it seems too large, it would work best under 32px wide and 32 in height. You probably want to crop it first, then download it, and resize the downloaded cropped version. https://ezgif.com/resize
Out of curiosity, is it possible to make it so you can have custom cursors based on the title of an anime (just when you hover the title). I already have something on my list that I can adjust to do it for data tags but when I tried adjusting it to titles I couldn't get it to work.
Paper2017 said: Out of curiosity, is it possible to make it so you can have custom cursors based on the title of an anime (just when you hover the title). I already have something on my list that I can adjust to do it for data tags but when I tried adjusting it to titles I couldn't get it to work.
so i used the animated hatsune miku's always singing and her eyes blinking cursor on my lists, it worked fine but it seems to have made my list laggy and scrolling through my list became way slower in fps but i really dont wanna get rid of the cursors because theyre cute, how do i fix this?
so i used the animated hatsune miku's always singing and her eyes blinking cursor on my lists, it worked fine but it seems to have made my list laggy and scrolling through my list became way slower in fps but i really dont wanna get rid of the cursors because theyre cute, how do i fix this?
I don't see a way to use APNG or GIF atm in browsers for the cursor, so until then this is the only way I can see to have an animated cursor :(
so i used the animated hatsune miku's always singing and her eyes blinking cursor on my lists, it worked fine but it seems to have made my list laggy and scrolling through my list became way slower in fps but i really dont wanna get rid of the cursors because theyre cute, how do i fix this?
I don't see a way to use APNG or GIF atm in browsers for the cursor, so until then this is the only way I can see to have an animated cursor :(
well thats fine but do let us know if you ever do figure a way out
I will, but sadly the animated cursor and custom cursor in general has been slowly getting depreciated over the years everywhere :( used to be very simple and clean everywhere long ago
I will, but sadly the animated cursor and custom cursor in general has been slowly getting depreciated over the years everywhere :( used to be very simple and clean everywhere long ago
Also QUADRUPLE FROGS!!!!!!! 😁🐸
thats sad to hear since i still like them so much
also yes that frog is really cute
one more thing id like to ask you since you seem to be really experienced with this css stuff but im not quite share i can ask you about it in this forum its a bit unrelated to cursors but its still about css and stuff for mal, where can i ask you it?
I will, but sadly the animated cursor and custom cursor in general has been slowly getting depreciated over the years everywhere :( used to be very simple and clean everywhere long ago
Also QUADRUPLE FROGS!!!!!!! 😁🐸
thats sad to hear since i still like them so much
also yes that frog is really cute
one more thing id like to ask you since you seem to be really experienced with this css stuff but im not quite share i can ask you about it in this forum its a bit unrelated to cursors but its still about css and stuff for mal, where can i ask you it?
Sorry this reply is late I didn't see it till now- you can ask me anywhere in this group, if you dont know to ask something off-topic in a thread you can just ask in the sticky with the green heart or the ask questions thread which has the question mark emoji
I will, but sadly the animated cursor and custom cursor in general has been slowly getting depreciated over the years everywhere :( used to be very simple and clean everywhere long ago
Also QUADRUPLE FROGS!!!!!!! 😁🐸
Shishio-kun said: sadly the animated cursor and custom cursor in general has been slowly getting depreciated over the years everywhere :( used to be very simple and clean everywhere long ago
This animated Miku cursor used to work on my lists before; it animates when I open my lists then stays still. Now, it no longer animates.
Shishio-kun said: sadly the animated cursor and custom cursor in general has been slowly getting depreciated over the years everywhere :( used to be very simple and clean everywhere long ago
This animated Miku cursor used to work on my lists before; it animates when I open my lists then stays still. Now, it no longer animates.
If both options are static, I guess it doesnt matter which one you use. I remember browsers killed the animated cursors years ago, so I had to use the CSS3 animated ones
If both options are static, I guess it doesnt matter which one you use. I remember browsers killed the animated cursors years ago, so I had to use the CSS3 animated ones
@Shishio-kun I'm currently on Firefox. It used to work on Firefox and Brave before. But I only noticed recently that it no longer animates on Firefox. It still animates on Safari, though.
@Shishio-kun I'm currently on Firefox. It used to work on Firefox and Brave before. But I only noticed recently that it no longer animates on Firefox. It still animates on Safari, though.
@IridescentJaune Firefox might have updated so you can't display animated cursors anymore? :/
However, I really feel there must be some kind of hack to push an animated cursor through (besides animating it as I had)
@IridescentJaune Firefox might have updated so you can't display animated cursors anymore? :/
However, I really feel there must be some kind of hack to push an animated cursor through (besides animating it as I had)
@Shishio-kun I've yet to update my Firefox because I still have opened tabs I'm working on. Haha. I'll update later in the day and see if that's still the case.
I was gonna try the method you did with keyframes but I didn't because I feel like my list will experience even more lags if I did.
@Shishio-kun I've yet to update my Firefox because I still have opened tabs I'm working on. Haha. I'll update later in the day and see if that's still the case.
I was gonna try the method you did with keyframes but I didn't because I feel like my list will experience even more lags if I did.
@IridescentJaune It doesnt load much on your Dropped page at least. A keyframes cursor seems to lag most when its "jerked around" even on a blank layout. So the best thing to do is probably have it only animate on links when you're more likely to keep the cursor still.
Maybe the cursors would be working fine if contained to an import, but I would think I tried that before!
