Custom Mouse Cursors

Custom cursors can easily be implemented on webpages you own or visit. A consistent or custom mouse cursor can also be implemented on all websites that you visit.

Note: Settings can be customized as desired and reversion may be done in a similar fashion. This tutorial is only for Firefox. Using images longer or wider than 32px will cause a duplicate image to displayed outside the browser in the top left of the screen. The only fix is to scale down the largest length to 32px.

To start,

• type in about:support in Firefox.
• click show folder
• if  there is not a chrome folder, create one
• move the cursor image you want to use to this folder
• open up the chrome folder and create the file userContent.css if it does not exist
• add the next line to the userContent.css
• html *, *:active, *:hover,  a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {cursor:url('add your file name between these quotes'), auto !important;}
• save and restart firefox

To apply these affects to the Firefox browser itself, create a userChrome.css file in the same chrome folder, if it does not exists and add the same line of code.

If your pointer location is off, add in offsets as follows:
{cursor:url('add your file name between these quotes') X Y, auto !important;}

A good online image/png to cur converter is located here