Shop More Submit  Join Login
×




Details

Submitted on
January 17, 2009
Image Size
5.9 KB
Resolution
120×120
Link
Thumb
Embed

Stats

Views
23,423 (13 today)
Favourites
929 (who?)
Comments
346
Downloads
884
×
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 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]
Add a Comment:
 
:iconfurs2draw:
Furs2Draw Featured By Owner Oct 8, 2014  New member
I wish i could have premium membership someday...........
Reply
:iconsynfull:
Synfull Featured By Owner Oct 11, 2014
Sometimes they do events were non-premium members can use CSS :)
Reply
:iconfurs2draw:
Furs2Draw Featured By Owner Oct 11, 2014  New member
hhmmmm
Reply
:iconkinzigamer:
KinziGamer Featured By Owner Sep 28, 2014  Hobbyist Traditional Artist
Oh dear, this is so awesome! Thank you so much for this tutorial! :)
Reply
:iconsynfull:
Synfull Featured By Owner Oct 1, 2014
No problem :D
Reply
:iconcoykat:
Coykat Featured By Owner Edited Sep 24, 2014  Student General Artist
So I put the code in at the very top, and then nothing shows up o.o 

OH, nvm :D Got it!
Reply
:iconmiyuimi:
miyuimi Featured By Owner Sep 14, 2014
Thank you so much this was really helpful! 8)
Reply
:iconsynfull:
Synfull Featured By Owner Sep 15, 2014
:)
Reply
:iconstarlywing:
starlywing Featured By Owner Jul 4, 2014  Hobbyist General Artist
ah thanks for making this tutorial! 
Reply
:iconsynfull:
Synfull Featured By Owner Jul 4, 2014
No problem :)
Reply
Add a Comment: