Putting a custom cursor in CSS

[Former Member]

Hello! I am still pretty new to CSS and have been trying to add a custom cursor to my theme but everything I try doesn't work and when I look up instructions,  I dont understand their explanation and/or they are too vague.

Could someone please tell me what code I should use to put a custom cursor in my forum and where in the coding I need to put it? CSS is very different than HTML and I am familiar with doing custom cursors in HTML but I am struggling in CSS. Please try to make instructions easy for a beginner to understand!

Thank you!

[elli]

As an image:

.custom {
 cursor: url(images/my-cursor.png), auto;
}
Where the path within url(...) should be the URL to your image.

[Former Member]

Dec 11, 2017 10:37:56 GMT -8 elli said:

As an image:

.custom {
 cursor: url(images/my-cursor.png), auto;
}
Where the path within url(...) should be the URL to your image.

Where in my theme's coding should I put this? I already tried this code and it didn't work with where I placed it. Is there a specific place or...? elli

[elli]

Yes, you should be adding all CSS to your forum's stylesheet. Admin > Themes > Advanced Styles & CSS > "Style Sheet" tab.

You can also add CSS to HTML using the <style /> tag or with inline styles, but the above is the recommended.

Check out this CSS tutorial: htmldog.com/guides/css/

[Former Member]

Yes like where in the style sheet? I put it at the bottom of the style sheet (the entire CSS code) and nothing happened even when I edited it with the url of my custom cursor. elli

.custom {


cursor: url(Url), auto;

}


[Former Member]

Never mind I found a way to do it. Thank you though!

[Chris]

Dec 11, 2017 14:23:33 GMT -8 @julia128 said:

Never mind I found a way to do it. Thank you though!

Please pay it forward by posting the solution you found so someone looking for the answer in the future will have it right there when they happen upon this thread.

[elli]

Sorry, I should specify: the .custom class is only an example, and the custom cursor image would only be visible within an element where that class has been applied. If you want the custom cursor image to apply to your entire forum, you'll want to add this property to body, the selector for which is located near the top of your stylesheet. If you click within the text area, press ctrl (cmd) + F and type "body" into the search field, it should bring you right to the selector. You'll want to add the property within the curly braces { ... } as shown in the example.

Keep in mind that this may override other cursor objects, such as the cursor pointer when hovering over a link.

I feel obligated to warn against this behavior, however. Using the wrong cursor can create a confusing user experience. and may negatively affect your members' interactions on your forum.

[Philip]

I agree with elli. You generally do NOT want to change your cursor. One example I would agree with is changing the cursor color on form inputs, this can be done by changing the "caret_color" CSS property.

[Kami]

I also want to point out that it’s against imgur ToS to use their service as a host for images you use on your forum (design/theme images, avatars, signatures, etc).

[Philip]

Dec 11, 2017 17:58:04 GMT -8 Kami said:

I also want to point out that it’s against imgur ToS to use their service as a host for images you use on your forum (design/theme images, avatars, signatures, etc).

I agree, however uploading/serving it on proboards can be quite challenging, even though it can be done it requires extensive documentation, for such a minor thing. 

[Kami]

Dec 11, 2017 19:23:29 GMT -8 Philip said:

Dec 11, 2017 17:58:04 GMT -8 Kami said:

I also want to point out that it’s against imgur ToS to use their service as a host for images you use on your forum (design/theme images, avatars, signatures, etc).

I agree, however uploading/serving it on proboards can be quite challenging, even though it can be done it requires extensive documentation, for such a minor thing. 

I’m not necessarily suggesting hosting with PB, just not with imgur.

[Former Member]

I haven't found a reliable host site to host images I make so temporarily I am using imgur to upload my photos until I find a way to upload my photos (ones I make) privately and use them on sites that use URL only for photos. Sorry if this upsets you but as I said I made these images and I am working on finding another host site  

As for the code I used, I put this at the end of my style sheet:

body, a:hover {cursor: url(Your-URL), url(your-URL), progress !important;}

[Kami]

I have no personal investment in imgur so it’s not “upsetting”, but just know that using imgur for this purpose can get your images removed, your account (if you have one) banned, and may get PB blacklisted from their service