Custom Cursors help?

  • 1
  • Question
  • Updated 6 years ago
How can I put custom cursors on my website on Yola?
I don't know much about HTML coding,
so can someone explain how?
Thanks
Photo of Jon Fedas

Jon Fedas

  • 12 Posts
  • 0 Reply Likes
  • frustrated

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Jon,

I think this is a good introduction into custom cursors and I think you will begin to understand the process of others after working through some of these.

If you want further detail please let us know.
Photo of Jon Fedas

Jon Fedas

  • 12 Posts
  • 0 Reply Likes
Thanks, but how can I insert them into my website?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK.
Grab an HTML widget from the Right Hand Side column of widgets. The HTML one is a blue glass orb. Then type in:

<style type="text/css">
body {cursor:crosshair}
</style>


(Ref: http://www.echoecho.com/csscursors.htm)

Beginning on line 1.

Save this and publish and the cursor will display on your page.

If you go and inspect the code you will see:
body {cursor:crosshair}

the words within the curly brackets can be replaced with the other styles shown on that page. These are really hard-wired into the OS of your computer so they don't have to be imported from an external source.

Here is that list of cursor styles:

CURSOR PROPERTIES

cursor:default

cursor:crosshair

cursor:hand

cursor:pointer

cursor:pointer;cursor:hand

cursor:move

cursor:text

cursor:wait

cursor:help

cursor:n-resize

cursor:ne-resize

cursor:e-resize

cursor:se-resize

cursor:s-resize

cursor:sw-resize

cursor:w-resize

cursor:nw-resize

cursor:progress

cursor:not-allowed

cursor:no-drop

cursor:vertical-text

cursor:all-scroll

cursor:col-resize

cursor:row-resize

cursor:url(uri)
Photo of Jon Fedas

Jon Fedas

  • 12 Posts
  • 0 Reply Likes
Thank you!
But, I have a few other questions.
What is the last one, cursor; url (uri) ?
Also, how can I put customs cursors that come in html code,
such as the one found on this website http://www.hypergurl.com/magicwand.html
Thank you.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Jon,

If you want that 'magic wand' cursor from that site, just simply copy and paste the code and into an HTML widget on your site (make sure that you copy the entire code).

The cursor: url(uri) is for a custom image cursor.

For example:


<style type="text/css">
body {
cursor: url('resources/image.jpg');
}
</style>



I hope this helps.
Photo of Jon Fedas

Jon Fedas

  • 12 Posts
  • 0 Reply Likes
Ok, about the url in the custom image, what do I put in the parantheses?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
You put the URL to the image in the parentheses, as seen in my example code above. Just upload an icon image to your file manager and then you can put resources/imagename.png in the parentheses. (change imagename.png though, of course)
Photo of Jon Fedas

Jon Fedas

  • 12 Posts
  • 0 Reply Likes
So all I have to do to is to paste the code into the HTML widget?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Yes. But the uri one needs an image to be uploaded into the file manager. The code then fetches that image to make it work. The name of the image and the name in the code must be identical.
Photo of Jon Fedas

Jon Fedas

  • 12 Posts
  • 0 Reply Likes
The magic wand one doesn't work.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Jon, is it working in the preview?

@Gop: It can also be an external URL to the image, if you didn't know.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah, just copy and paste it into an HTML widget and click "Save".

The new cursor may not show up in the site builder. In that case, just click on "Preview" to see it.
Photo of Jon Fedas

Jon Fedas

  • 12 Posts
  • 0 Reply Likes
I did, but something comes up saying that something was wrong with the javascript code?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
What is the message? Did it pop up when you clicked "save"?
Photo of Jon Fedas

Jon Fedas

  • 12 Posts
  • 0 Reply Likes
yes it comes up after I click save,
it says:
Oops! An error has occured with your pasted javascript code. Please check your code.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Okay, don't save the page and try this code on a test page first, just to make sure that it won't break your page. If it does that pop up again, ignore it if you're putting it on the test page and click on the little refresh icon next to the page selector. If nothing happens after you refresh the site builder, then that means it didn't break the page. Preview your page to see the cursor.
Photo of Jon Fedas

Jon Fedas

  • 12 Posts
  • 0 Reply Likes
I just did that, and yet I still don't see the cursor.
Photo of Jon Fedas

Jon Fedas

  • 12 Posts
  • 0 Reply Likes
I just did that, and yet I still don't see the cursor.
Is there any other way to do it?
Photo of Jon Fedas

Jon Fedas

  • 12 Posts
  • 0 Reply Likes
How can I put custom cursors on my website?
I don't know much about HTML coding,
so can someone help me?
Thanks.

This reply was created from a merged topic originally titled
Custom Cursors help?.