The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
2 posters

    How to change your forum cursor?

    Shadow
    Shadow
    Manager
    Manager


    Male Posts : 16208
    Reputation : 1832
    Language : French, English

    Tutorial How to change your forum cursor?

    Post by Shadow June 17th 2015, 9:35 am

    How to change your forum cursor?

    cursor - How to change your forum cursor? 10-10-13 How to set up a cursor?



    To set up a forum cursor, you should use your CSS. You have two options to pick from


    • Use cursors by default on your computer


    • Create, host and use your own cursor


    The cursors are used through the cursors property in CSS. You can use different ways.

    Admin panel>> Display>> Colors>> CSS Stylesheet
    cursor - How to change your forum cursor? Css10

    - For the forum in general, the code can be added in body, example:
    Code:
    body {
    cursor : move ;
    }
    - For links "fly over", the code can be added in a function, example:
    Code:
    a {
    cursor : help;
    }
    - But you can also associate them to some particular elements like images, example:
    Code:
    img {
     Â cursor: pointer;
    }

    cursor - How to change your forum cursor? 10-10-13 The cursors by default



    Here a list of cursors you can use:


    default
    cursor - How to change your forum cursor? 046
    pointer
    cursor - How to change your forum cursor? 037
    text
    cursor - How to change your forum cursor? 043
    help
    cursor - How to change your forum cursor? 042
    wait
    cursor - How to change your forum cursor? 045
    progress
    cursor - How to change your forum cursor? 044
    move
    cursor - How to change your forum cursor? 036
    cross-hair
    cursor - How to change your forum cursor? 035
    n-resize
    cursor - How to change your forum cursor? 041
    s-resize
    cursor - How to change your forum cursor? 041
    e-resize
    cursor - How to change your forum cursor? 040
    w-resize
    cursor - How to change your forum cursor? 040
    ne-resize
    cursor - How to change your forum cursor? 038
    se-resize
    cursor - How to change your forum cursor? 039
    nw-resize
    cursor - How to change your forum cursor? 039
    sw-resize
    cursor - How to change your forum cursor? 038


    You just have to copy/past one of those values in your CSS: Admin panel>> Display>> Colors>>CSS Stylesheet. For example:
    Code:
     Â       a {
     Â       cursor : move;
     Â       }

    cursor - How to change your forum cursor? 09615110 Personalized cursors




    You can have two different types: .cur which are fixed cursors, or .ani which are animated cursors.

    Edit Animated cursors are a feature of Internet Explorer and do not appear on other browsers  Edit

    You can find many websites offering free cursors. You can also create your own cursor Smile

    1. Create your cursor

    There are many ways:


    • The software to create cursors: you can find many free software on the web like RealWorld Cursor Editor, ZNsoft icone maker, AWicon Lite, Greenfish Icon Editor Pro, Sib Icon Editor etc. Most of them work like with Paint, so they are very easy to use. They also accept the upload of jpeg, png, gif and bmp pictures.



    • Graphics software: Photofiltre proposes an image exportation in icon. You just have to save your image in .cur! You'll have all your pictures in cursor format. For Photoshop and Gimp, you have to export your image as icon. Then, save your image in .ico



    • Online Generators: HTML Basix allows you to convert your pictures in animated or not cursors, but there are some icons generators like Converthub or iConvert that allow you to convert an image in .ico format. You just have to rename your icon in .cur.


    In any case, please find some advises:


    • The image should not be to big, the perfect size in 32x32 minimum
    • The background around your image should be transparent


    2- Host your cursor

    Once your cursor created, you should host it to call your CSS. You just have to upload your cursor from your computer by accepting .cur or .ani
    You can find a list for cursors here:


    • Images


    cursor - How to change your forum cursor? Fleche10 https://servimg.com/
    cursor - How to change your forum cursor? Fleche10 https://imgur.com/
    cursor - How to change your forum cursor? Fleche10 https://www.casimages.com/
    cursor - How to change your forum cursor? Fleche10 https://tinypic.com/


    • All types of files

    cursor - How to change your forum cursor? Fleche10 Images + all types of files: https://www.dropbox.com/
    cursor - How to change your forum cursor? Fleche10 Images + fiiles in .cur, .ico, .ani, .js, .css ...  : https://www.archive-host.com/

    3- Add your cursor on your forum

    First, enter you admin panel>> Display>> Colors>> CSS Stylesheet
    cursor - How to change your forum cursor? Css10


    You can install your cursor on body:


    Code:
    body {
     Â   cursor: url(link of your hosted cursor), auto;
    }

    Edit Auto is very helpful in case your cursor be dead. There will be a cursor by default!

    For links and other elements, you just have to change the "body". Once your CSS modification made, don't forget to save.
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15391
    Reputation : 1709
    Language : English,Greek
    Location : Greece

    Tutorial Re: How to change your forum cursor?

    Post by skouliki February 10th 2020, 4:48 pm

    This code was updated to fit in with the new HTTPS address

    updated 10.02.2020 by skouliki


      Current date/time is November 12th 2024, 12:28 am