CSS cursor tutorial

One of the nice advantages of CSS is the ability to have a custom cursor within your deviantART journal. The process of making a cursor is fairly quick and simple and you don’t need any CSS coding experience to get it to work.

The Requirements

The main requirement for using a CSS cursor within your deviantART journal is a premium membership. Sadly this is not a free feature, so if you have a ~ symbol next to your username you won’t be able to use this code on your own account.

To make a CSS cursor you first need 2 images. The first of these is a normal cursor which is the default image you want your cursor to display when on your journal. The second of these is the link cursor designed for when your cursor hovers over or click on a link. If you don’t want the image to change then simply use one image for both sections.

The images don’t have any size requirements though it is recommended you don’t make them much bigger than 25 x 25 pixels as large cursors can be impractical. The images are saved either as a .png or .gif and must be static as any animation won’t appear.

The Process

First the images need to be hosted on a website. This could be your deviantART account (or sta.sh) or some external image hosting site such as photobucket or imageshack. You just have to remember that these files can’t be deleted whilst the cursor is in use. Once they have been uploaded you need to attain the direct links to the images. The direct links will lead to a webpage where the image is shown on a plain background. These links can be acquired by right clicking on the image and selecting 'copy image URL/Location/Address'. _{(dependant on web browser)}.

These URLs then need to be pasted into the code shown below in the relevant places.

Once you have filled in the CSS code you then need to place it within the Skin CSS section of your journal. At the time of writing this tutorial _{(September 2012)} this can be accessed by clicking the ‘Edit skin button on the journal submission page. Within Sta.sh writer this can be found in the lower right corner, where as it is located in the top left on the regular journal submission page.

The position of the code within any other CSS doesn’t really matter provided that it isn’t in the middle of another line of code. If you are unsure then it is best to place it at the very top or very bottom. This also makes it easier to locate in future in case there are any issues or you wish to edit it.

Once you have completed the steps above simply click save on the CSS page and save your journal and start enjoying your new CSS cursor.

The Code

a:link {cursor:url(url of link cursor), pointer;}
a:hover {cursor:url(url of link cursor), pointer;}
body {cursor:url(url of normal cursor), pointer;}

Example code

Below is an example of the code corrected filled in. It is very easy to accidently delete a bracket or comma which will break the code, so please take care when inputting your links.

_{a:link {cursor:url(http://fc02.deviantart.com/fs48/f/2009/171/7/2/Link_cursor_by_deviant.png), pointer;}
a:hover {cursor:url(http://fc02.deviantart.com/fs48/f/2009/171/7/2/Link_cursor_by_deviant.png), pointer;}
body {cursor:url(http://fc03.deviantart.com/fs48/f/2009/171/7/2/Normal_cursor_by_deviant.png), pointer;}}

Troubleshooting

If you have any issues with your cursor then it is suggested you check:

- You haven’t accidently deleted anything from the code
- There aren’t any unnecessary spaces added by mistake
- The links are direct links and not links to a regular deviation page/gallery
- The code has been successfully pasted into the CSS section
- The correct CSS has been applied to your journal (not a previous copy)

If you are still unsure of the issue and need some assistance then you can contact me via note with a copy of the code you are using and I will try my best to fix the issue. Please don’t edit or add spaces to the code before sending it to me as this prevents me easily spotting the problem. It is also important that it is sent in a note as this allows me to access the code intact rather than formatted versions displayed in dA comments.

Please also note that I don’t have any knowledge of desktop cursors or general CSS coding. Please direct any questions regarding other elements of CSS to a CSS related group and take into account these tips when asking for help

Other tutorials

_{You can find all of my other tutorials on this page: [link]}