Custom Cursor Image

War3DarkOrder · 1 Custom Cursor Image Wed Jul 28, 2010 2:34 pm

War3DarkOrder

Registered Member

Posts : 26
Points : 0
Age : 35
Location : Canada

Custom Cursor Image
Using a custom image as cursor - CSS

Okay, I'm going to cover "How to change the cursor while browsing your forum!"

1# Visit Cursors-4u

2# Pick your Cursor from ANY category on THAT site. and click on the image.

3# When you click on the Cursor you want, It will bring you to a new page, there will be the image you clicked, and under that image should be a box with HTML codes in it. Copy the code.

The code should look somewhat like this

Code:: <style type="text/css">body, a, a:hover {cursor: url(CURSOR URL HERE), progress;}</style><a href="http://www.cursors-4u.com/" target="_blank" title="Cursors"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cursors" style="position:absolute; top: 0px; right: 0px;" /></a>

4# Paste it into your CSS style sheet located in Administration Panel.

6# Remove Everything exept these: body, a, a:hover {cursor: url(CURSOR URL HERE), progress;}

Witch are displayed in the code here:

<style type="text/css">body, a, a:hover {cursor: url(CURSOR URL HERE), progress;}</style><a href="http://www.cursors-4u.com/" target="_blank" title="Cursors"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cursors" style="position:absolute; top: 0px; right: 0px;" /></a>

Notice : These tutorials are copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

Last edited by War3DarkOrder on Wed Jul 28, 2010 4:52 pm; edited 1 time in total

ankillien · 2 Re: Custom Cursor Image Wed Jul 28, 2010 3:39 pm

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

Hi W3DO!

The tut is nice but a bit unclear Neutral

What do you mean by "Copy it" in step 3?
Copy the cursor URL or the image?

Why should we put the HTML part in the CSS Stylesheet? Forumotion removes HTML parts from CSS but other sites don't Wink

. Lets not make this tut for Forumotions only, but for any site Smile

In this code,

Code:: body, a, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-4/gam375.cur), progress;}

you have already set a URL of cursor which should be replaced with "PUT YOUR CURSOR URL HERE" or something.

What is the "progress" thing after the cursor URL for?

War3DarkOrder · 3 Re: Custom Cursor Image Wed Jul 28, 2010 4:45 pm

War3DarkOrder

Registered Member

Posts : 26
Points : 0
Age : 35
Location : Canada

Ill make it more easy to understand... Fixed everything you said, I think Smile

And I don't really understand CSS that well... I only know what portions of this code do.

Nem · 4 Re: Custom Cursor Image Wed Jul 28, 2010 6:28 pm

Nem

Registered Member

Posts : 445
Points : 0
Age : 30
Location : Canada
Browser : Safari

Wow, didn't expect that to work so easily, sweet tut.

I also realized on the site they have the cursor change when it hovers over a link, any idea on how to do that? or maybe even when a link is activated (clicked)

Kasperx · 5 Re: Custom Cursor Image Wed Jul 28, 2010 7:55 pm

Kasperx

Registered Member

Posts : 199
Points : 101
Age : 28
Location : Right there
Browser : Firefox

Nem wrote:Wow, didn't expect that to work so easily, sweet tut.

I also realized on the site they have the cursor change when it hovers over a link, any idea on how to do that? or maybe even when a link is activated (clicked)

I think that goes by the divs styles (css).

Terry Harvey · 6 Re: Custom Cursor Image Thu Jul 29, 2010 2:59 am

Terry Harvey

Registered Member

Posts : 223
Points : 132
Age : 29
Location : UK
Browser : Google Chrome

Please add a demo Smile

War3DarkOrder · 7 Re: Custom Cursor Image Thu Jul 29, 2010 3:01 am

War3DarkOrder

Registered Member

Posts : 26
Points : 0
Age : 35
Location : Canada

My Site?

ankillien · 8 Re: Custom Cursor Image Thu Jul 29, 2010 12:37 pm

ankillien

Administrator

Posts : 5070
Points : 1013
Age : 34
Location : India
Browser : Firefox

Nem wrote:Wow, didn't expect that to work so easily, sweet tut.

I also realized on the site they have the cursor change when it hovers over a link, any idea on how to do that? or maybe even when a link is activated (clicked)

It can be done using pseudo classes...

Code:: a:hover { cursor : url(CURSOR URL HERE); } a:active { cursor : url(CURSOR URL HERE); }

@War3DO,
Tut looks better now Very Happy

Thank for your contribution.

Tutorial Accepted

War3DarkOrder · 9 Re: Custom Cursor Image Thu Jul 29, 2010 2:06 pm

War3DarkOrder

Registered Member

Posts : 26
Points : 0
Age : 35
Location : Canada

No Problem for the Contribution, and thanks for the Accepted!

Kasperx · 10 Re: Custom Cursor Image Thu Jul 29, 2010 4:02 pm

Kasperx

Registered Member

Posts : 199
Points : 101
Age : 28
Location : Right there
Browser : Firefox

Yeah its clearer now, good work!

C.noergaard · 11 Re: Custom Cursor Image Tue Sep 07, 2010 2:06 am

C.noergaard

Registered Member

Posts : 103
Points : 0
Age : 26
Location : Ikast,Jylland,Denmark
Browser : Google Chrome

Good Tutorial i love it Very Happy

Sponsored content

Quick Menu

Quick Menu

1 Custom Cursor Image Wed Jul 28, 2010 2:34 pm

War3DarkOrder

2 Re: Custom Cursor Image Wed Jul 28, 2010 3:39 pm

ankillien

3 Re: Custom Cursor Image Wed Jul 28, 2010 4:45 pm

War3DarkOrder

4 Re: Custom Cursor Image Wed Jul 28, 2010 6:28 pm

Nem

5 Re: Custom Cursor Image Wed Jul 28, 2010 7:55 pm

Kasperx

6 Re: Custom Cursor Image Thu Jul 29, 2010 2:59 am

Terry Harvey

7 Re: Custom Cursor Image Thu Jul 29, 2010 3:01 am

War3DarkOrder

8 Re: Custom Cursor Image Thu Jul 29, 2010 12:37 pm

ankillien

9 Re: Custom Cursor Image Thu Jul 29, 2010 2:06 pm

War3DarkOrder

10 Re: Custom Cursor Image Thu Jul 29, 2010 4:02 pm

Kasperx

11 Re: Custom Cursor Image Tue Sep 07, 2010 2:06 am

C.noergaard

12 Re: Custom Cursor Image

Sponsored content