Shop Mobile More Submit  Join Login
×




Details

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

Stats

Views
24,352 (2 today)
Favourites
974 (who?)
Comments
365
Downloads
889
×
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:
 
:icondevinhworks:
DevinHWorks Featured By Owner Jan 20, 2015  Hobbyist General Artist
This'll be extremely helpful thanks!
Reply
:iconsynfull:
Synfull Featured By Owner Jan 21, 2015
:)
Reply
:iconpixstral:
Pixstral Featured By Owner Jan 11, 2015  Hobbyist Digital Artist
Thank you very much!
Reply
:iconsynfull:
Synfull Featured By Owner Jan 13, 2015
:)
Reply
:iconcoffee-pony:
Coffee-Pony Featured By Owner Jan 6, 2015  Hobbyist General Artist
It helpe me a lot, thank you!
Reply
:iconsynfull:
Synfull Featured By Owner Jan 6, 2015
:)
Reply
:iconcoffee-pony:
Coffee-Pony Featured By Owner Jan 6, 2015  Hobbyist General Artist
Btw, I see you are quiet good with all those things. Can you tell me how to add css skin to your particular folder in gallery? ;)
Reply
:iconsynfull:
Synfull Featured By Owner Jan 7, 2015
There's a 'Folder Options' button in the upper right corner when viewing one of the folders. Once you select that, there's a CSS tab.
Reply
:iconcoffee-pony:
Coffee-Pony Featured By Owner Jan 7, 2015  Hobbyist General Artist
Yes yes, I know this one ;3 I was asking abou the skin code :)
Reply
:iconsynfull:
Synfull Featured By Owner Jan 7, 2015
I don't think they applied them to galleries - only journals. You have to copy the CSS code in
Reply
:iconcoffee-pony:
Coffee-Pony Featured By Owner Jan 7, 2015  Hobbyist General Artist
Okey, thank you :)
Reply
:iconchewynote:
ChewyNote Featured By Owner Jan 6, 2015  Hobbyist General Artist
Do you know of any any way to make an image change when your cursor hovers over it?
Reply
:iconsynfull:
Synfull Featured By Owner Jan 6, 2015
I'm not sure how to do that. Sorry ^^;
Reply
:iconhedgecatdragonix:
HedgeCatDragonix Featured By Owner Jan 1, 2015  Hobbyist Digital Artist
What do you do if you want to use a cursor that someone has made? Like how do you get the static image of it and stuff? .3.
Reply
:iconsynfull:
Synfull Featured By Owner Jan 3, 2015
What sort of cursor? One that someone has in their dA journal, or one that can be installed for use on a computer?
Reply
:iconhedgecatdragonix:
HedgeCatDragonix Featured By Owner Jan 3, 2015  Hobbyist Digital Artist
Ah sorry its ok, I found a tutorial for it :)
Reply
:iconacruxic:
Acruxic 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?
Reply
:iconsynfull:
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
Reply
:iconacruxic:
Acruxic Featured By Owner Nov 24, 2014  Student Filmographer
Okay, thank you.
Reply
:iconfurs2draw:
Furs2Draw Featured By Owner Oct 8, 2014  Hobbyist Digital Artist
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  Hobbyist Digital Artist
hhmmmm
Reply
:iconkinzigamer:
KinziGamer Featured By Owner Sep 28, 2014  Hobbyist General 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  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!
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
:iconstarlywing:
starlywing Featured By Owner Jul 4, 2014  Hobbyist General Artist
i may not have a pm, but that doesn't mean i can't code skins for other people :3

i just can't save them
Reply
:iconpixel--neko:
Pixel--Neko Featured By Owner Jun 19, 2014  Hobbyist Digital Artist
This works in your gallery too! :D
Reply
:iconsynfull:
Synfull Featured By Owner Jun 20, 2014
I hadn't really thought about that, but I guess it would :)
Reply
:iconwaterfallthecat:
WaterfallTheCat Featured By Owner Apr 12, 2014  Hobbyist Digital Artist
Thanks!
Reply
:iconsynfull:
Synfull Featured By Owner Apr 13, 2014
:)
Reply
:iconguiis:
guIIs Featured By Owner Mar 31, 2014  Hobbyist Digital Artist
This is amazing, thanks for posting owo !! :highfive:
Reply
:iconsynfull:
Synfull Featured By Owner Apr 2, 2014
:)
Reply
:iconscarefoo:
Scarefoo Featured By Owner Mar 19, 2014  Student Traditional Artist
is there a way to make  the cursor visible to your whole profile page instead of just your journal?
Reply
:iconsynfull:
Synfull Featured By Owner Mar 19, 2014
Nope. You can only alter the CSS of your journal.
Reply
:iconstargirlstan:
stargirlstan Featured By Owner Mar 16, 2014   General Artist
woaaahhhh thank you for sharing this! <3 <3 <3
Reply
:iconsynfull:
Synfull Featured By Owner Mar 16, 2014
No problem :)
Reply
:iconstormwing0:
StormWing0 Featured By Owner Mar 12, 2014
This tutorial can also be used by people who make websites too if I've read the code right so just because you can't use it here doesn't mean you can't use it elsewhere. :)
Reply
:iconsynfull:
Synfull Featured By Owner Mar 12, 2014
I've never really thought about that before, but I guess as it is just CSS it will work on other sites
Reply
:icondracodoptables:
DRACODOPTABLES Featured By Owner Feb 21, 2014
:worship: Thank you~
Reply
:iconsynfull:
Synfull Featured By Owner Feb 23, 2014
No problem :)
Reply
:iconx-paintedlynx:
x-PaintedLynx Featured By Owner Jan 14, 2014  Student Digital Artist
Wow! :> This helped alot! It's amazing how it's so easy.. Do you also know how to make animated journal skins? I went to see Accalialove's journal and it was animated.. :p Thanks!
Reply
:iconsynfull:
Synfull Featured By Owner Jan 14, 2014
I don't really have any CSS knowledge, so whilst I know it can be done, I don't know how.
I suggest you ask over at a CSS group like deviantCSS or eCSSited and somewhere there may know how. :)
Reply
:iconx-paintedlynx:
x-PaintedLynx Featured By Owner Jan 14, 2014  Student Digital Artist
Thanks alot for your info! ~ChocobunnyOwO
Reply
:iconxxhyena-tinyxx:
xXHyena-TinyXx Featured By Owner Aug 11, 2013  Student Digital Artist
For some reasons, the journal skins work, because of that will we be able to use the cursor or no?
Reply
:iconsynfull:
Synfull Featured By Owner Aug 11, 2013
If you have access to the CSS section it should work :)
Reply
Add a Comment: