Docs

[Mitica]

Hello,

Online I have found a code that should make my cursor have a little hummingbird flying next to it, as we have on our current site. I found the following code online, on totallyfreecursors.com, and did the following to try and install it:

– I downloaded the hummingbird.cur file and created a folder in my child theme called Cursor and pasted it there:
ftp://[email protected]/public_html/test/wp-content/themes/x-child/Cursor/hummingbird.cur

– I put the following code into my style.css of my child theme according to instructions on this site:
/*Hummingbird*/
BODY{cursor:url(‘ftp://[email protected]/public_html/test/wp-content/themes/x-child/Cursor/hummingbird.cur’);

I had no big hopes and it is not working, after trying some different ways to put it.
I have no idea whether this is correct though in any way, I am just learning css and this does not seem to be the standard coding used for other implementations. Could you please offer some advice?
The cursor would need to be like this everywhere on the site and I have found some advice on how to change the colour of cursors on this forum, but nothing else..

Thank you!

[Jade]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Mitica]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for the URL but I can’t access it, please confirm. It was indicated on the cursor page here, to copy and paste this code anywhere in your HTML, that means you can paste that code on a RAW content element.

Actually you can paste the code below on Customizer’s > Global Custom CSS.

HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/hummingbird.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/hummingbird.gif"), auto;}

Hope it helps, Cheers!

[Mitica]

Hello Friech! Bluehost.com was offline yesterday, for hours and hours, and so was my site, it affected thousands of people around the world, I am seriously considering changing, even though I just signed up with them.

If I use the code you suggest and put it in the style.css file of my child theme, I see a hummingbird, but it is a different one and it is not moving. So this is the correct hummingbird code the website says to put in, but I think it needs some altering just like you did for the other one:

/*Hummingbird*/

<div align=”center” style=”z-index:9;visibility:visible;”></div><style>HTML,BODY{cursor: url(“http://downloads.totallyfreecursors.com/cursor_files/hummingbird.cur&#8221;), url(“http://downloads.totallyfreecursors.com/thumbnails/hummingbird1.gif&#8221;), auto;}</style>

/*Hummingbird rollover cursor*/
<style>A:hover{cursor: url(“http://downloads.totallyfreecursors.com/cursor_files/hummingbird.cur&#8221;), url(“http://downloads.totallyfreecursors.com/thumbnails/hummingbird1.gif&#8221;), auto;}</style>

I know this is slightly outside of what your support is for, but I really appreciate the help you are giving me here, coding is new to me and I am able to copy and paste code from one place to another, but that is as far as my capability goes so far 🙂

[Thai]

Hi There,

In this case, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link login to your site
– WordPress Admin username / Password

Don’t forget to select Set as a private reply. This ensures your information is only visible to our staff.

Thanks.

[Mitica]

This reply has been marked as private.

[Thai]

Hey There,

I’ve just added the following CSS, it seems to work fine:

html,
body {
  cursor: url("http://downloads.totallyfreecursors.com/cursor_files/hummingbird.cur"), url("http://downloads.totallyfreecursors.com/thumbnails/hummingbird1.gif"), auto;
}
a:hover{
  cursor: url("http://downloads.totallyfreecursors.com/cursor_files/hummingbird.cur"), url("http://downloads.totallyfreecursors.com/thumbnails/hummingbird1.gif"), auto;
}

Regards!

[Mitica]

Hello Thai! The correct one shows right now, but it is still not flying around, the gif is not working, I am checking on two computers and only an image shows, no animation going on anywhere. Could you please take another look?
Thank you!!

[Rue Nel]

Hello There,

Thanks for updating in! Sadly no animated cursors for some browsers as I have checked. Unless you do something crazy like hide the cursor (cursor: none;), track the mouse position with JavaScript, and display something entirely custom. For more better option, please check out this link:
http://stackoverflow.com/questions/9189250/animated-cursor-support-in-web-applications

Changing the Cursor with CSS for Better User Experience (or Fun)

Hope this helps.

[Mitica]

Thank you Rue Nel! I will read up.

[Christopher]

You’re welcome.

[Author]

Posts