howto_user
in
howto
[all] Cursor Customization
Prereq
Knowledge of CSS properties
GLOBAL_HEAD Tutorial
One of the neatest things you can do with CSS is to change the style of the mouse cursor when it hovers over certain sections of a page. For instance you can change the usual pointing hand, which you're accustomed to when navigating pages, to something like a crosshair or another type of arrow.
The directions are fairly simple; in a CSS property you simply add the directive: 'cursor', which you can then set to different types of cursors, mainly:
nw-resize n-resize ne-resize default w-resize move e-resize auto sw-resize s-resize se-resize pointer text wait help crosshair
Say for example, you wanted to change the mouse cursor to a crosshair whenever someone hovers over the links to your page, all you would need to do is add this simple CSS property to a GLOBAL_HEAD override:
Or, if you wanted the above override to apply to all of your journal, not just when a link is hovered over, you would add the following to a GLOBAL_HEAD override:
THE FOLLOWING WILL ONLY WORK IN MICROSOFT INTERNET EXPLORER.
If you do not wish to use one of the above cursors, you can use your own .cur or .ani image to make a custom cursor. To do this you would add the following to a GLOBAL_HEAD override:
The file you use for the cursor (orange text) must be a .cur or .ani file. Do not simply rename an image file to a .cur or .ani file as this will not work. Additionally, the cursor file must be hosted on a website that permits remote loading of images. For details on remote loading see this FAQ.
Only one override is permitted for each specific override block.
If you are currently using a GLOBAL_HEAD override, then that override would need to be revised to reflect changes presented here or otherwise merged.
Variable References:GLOBAL_HEAD
Additional References: What are overrides? How do they work? Merging your GLOBAL_HEAD over-rides
Contributed by jproulx, kamara, phoenixdreaming and jennielynn1127.
Knowledge of CSS properties
GLOBAL_HEAD Tutorial
One of the neatest things you can do with CSS is to change the style of the mouse cursor when it hovers over certain sections of a page. For instance you can change the usual pointing hand, which you're accustomed to when navigating pages, to something like a crosshair or another type of arrow.
The directions are fairly simple; in a CSS property you simply add the directive: 'cursor', which you can then set to different types of cursors, mainly:
nw-resize n-resize ne-resize default w-resize move e-resize auto sw-resize s-resize se-resize pointer text wait help crosshair
Say for example, you wanted to change the mouse cursor to a crosshair whenever someone hovers over the links to your page, all you would need to do is add this simple CSS property to a GLOBAL_HEAD override:
Or, if you wanted the above override to apply to all of your journal, not just when a link is hovered over, you would add the following to a GLOBAL_HEAD override:
THE FOLLOWING WILL ONLY WORK IN MICROSOFT INTERNET EXPLORER.
If you do not wish to use one of the above cursors, you can use your own .cur or .ani image to make a custom cursor. To do this you would add the following to a GLOBAL_HEAD override:
The file you use for the cursor (orange text) must be a .cur or .ani file. Do not simply rename an image file to a .cur or .ani file as this will not work. Additionally, the cursor file must be hosted on a website that permits remote loading of images. For details on remote loading see this FAQ.
Only one override is permitted for each specific override block.
If you are currently using a GLOBAL_HEAD override, then that override would need to be revised to reflect changes presented here or otherwise merged.
Variable References:
Additional References:
Contributed by jproulx, kamara, phoenixdreaming and jennielynn1127.