Shop Mobile More Submit  Join Login


Submitted on
January 17, 2009
Image Size
5.9 KB


23,902 (4 today)
944 (who?)
CSS cursor tutorial by Synfull CSS cursor tutorial by Synfull
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 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 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(, pointer;}
a:hover {cursor:url(, pointer;}
body {cursor:url(, pointer;}


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]
Add a Comment:
CodeReflection Featured By Owner Nov 24, 2014  Student Filmographer
Thanks man, you have no idea how much this helps.
So, I put the cursor code at the top, am I correct?
Synfull Featured By Owner Nov 24, 2014
Doesn't really matter, but it is useful to stick it right at the top or at the very bottom
CodeReflection Featured By Owner Nov 24, 2014  Student Filmographer
Okay, thank you.
Furs2Draw Featured By Owner Oct 8, 2014  Hobbyist Digital Artist
I wish i could have premium membership someday...........
Synfull Featured By Owner Oct 11, 2014
Sometimes they do events were non-premium members can use CSS :)
Furs2Draw Featured By Owner Oct 11, 2014  Hobbyist Digital Artist
KinziGamer Featured By Owner Sep 28, 2014  Hobbyist General Artist
Oh dear, this is so awesome! Thank you so much for this tutorial! :)
Synfull Featured By Owner Oct 1, 2014
No problem :D
Coykat Featured By Owner Edited Sep 24, 2014  Hobbyist General Artist
So I put the code in at the very top, and then nothing shows up o.o 

OH, nvm :D Got it!
miyuimi Featured By Owner Sep 14, 2014
Thank you so much this was really helpful! 8)
Add a Comment: