profile picture

Published by Tracy

published
updated

Category: Web, HTML, Tech

View Tracy's Blog

View Tracy's Profile

Report Blog Entry

Adding a custom cursor




I am new to blogging and CSS but going to try to document some of my findings to help others. I was visiting Seth's page today and got super jealous of his Christmas tree that turns into a Trex cursor so I had to figure out at least how to customize my cursor tonight. Not sure if this is exactly how to do this in correct CSS but.... I found a great resource below




The second link had the CSS code for the custom cursor I chose which I pasted into my CSS sheet that I got from Meh!!. I just added the code to a new section at the bottom of their code and titled it and saved it and it worked! 


The code I used is below. 


/* Start http://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/mechanics/mec-1/mec5.cur), auto !important;} /* End http://www.cursors-4u.com */


I feel like it needs a little cleaning up to look nice and neat like the code I got from Meh!! but since it is 3am, i feel accomplished and am turning in. 



PS, super NOOB, i haven't figured out how to link to the people I have mentioned above but I am very grateful for their help 


12 Kudos

Comments

Displaying 2 of 2 comments ( View all | Add Comment )

Shanen

profile picture

Woah, I had just written a guide for using custom cursors, just saw this, good list of resources mentioned


Report Comment

alex

profile picture

Hey Tracy, I've got quite a bit of experience with CSS and what not but I had no idea how to switch the cursor, so thank you for teaching me something new! Now comes the tricky part of picking a cursor



I'll return the favor by linking to this page which has a nice explanation of how to create links



Essentially what you do is open the right HTML tag <a> add a "href" attribute containing the link to whatever page you want to link to, before closing the tag you add whatever content should be clickable to actually get to the page (it can be text like I did just above but it can also be an image or anything else, HTML can be nested, note that links cannot be nested however).



This is an example of what the final code looks like:



<a href="https://www.spacehey.com">this is the link's text</a>


Report Comment