Changer le curseur de votre forum

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Changer le curseur de votre forum

Message par SoraNoHime le Lun 26 Sep 2011 - 19:50

Changer le curseur de votre forum


Installation

    Pour installer un curseur sur votre forum, il faut passer par la CSS. Vous avez deux possibilités :

    • Utiliser les curseurs par défaut installés sur tous les ordinateurs
    • Créer, héberger et utiliser votre propre curseur

    Les curseurs s'utilisent par le biais de la propriété cursor en CSS, vous pouvez les utiliser de différentes façons.

    Pour le forum en général, dans ce cas il s'installe dans body, exemple :

    Code:
    body {
    cursor : move ;
    }
    Pour le passage sur les liens, dans ce cas, ils s'intallent dans la fonction a, exemple :

    Code:
    a {
    cursor : help;
    }

    mais vous pouvez aussi les associer à des éléments en particulier tel que les images, exemple :

    Code:
    img {
      cursor: pointer;
    }
    ou toute autre partie du forum en l'associant à sa classe ou nom de tag correspondant.

A. Les curseurs par défaut

    Ils possèdent déjà une sous-propriété qui leurs permettent d'être utilisé sans avoir à être créé ou hébergé ^^

    En voici une liste non exhaustive :

    default
    pointer
    text
    help
    wait
    progress
    move
    crosshair
    n-resize
    s-resize
    e-resize
    w-resize
    ne-resize
    se-resize
    nw-resize
    sw-resize

    il suffit donc de recopier une de ces valeurs derrière la propriété cursor dans votre css, Panneau d'Administration >> Affichage >> Couleurs >> onglets à droite : feuille de style CSS. Par exemple :

    Code:
    a {
    cursor : move;
    }

B. Les curseurs personnalisés

    Ils se présentent sous deux formes : .cur qui sont les curseurs fixes, ou .ani pour les curseurs animés.

    Warning Les curseurs animés sont une particularité d'Internet Explorer et n'apparaissent pas sur les autres navigateurs Warning
    Vous pouvez trouver sur le web pas mal de site offrant l'utilisation de curseurs gratuitement, liens d'hébergement à l'appui à intégrer tel quel dans le code css de votre forum. Vous pouvez également créer votre propre curseur ( voir le point suivant ^^ ).

    1. Créer son curseur

    Pour ce faire, il y a plusieurs moyens :

    • Les logiciels de création de curseurs: vous en trouvez pas mal de gratuits sur le web, tel que RealWorld Cursor Editor, ZNsoft icone maker, AWicon Lite, Greenfish Icon Editor Pro, Sib Icon Editor etc... La plupart fonctionnant comme Paint, donc assez simplement, certains acceptant l'import d'images sous format jpeg, png, gif ou même encore bmp.

    • Les logiciels de graphisme. Photofiltre propose une exportation des images en icône soit un fichier.ico. Il vous suffit au moment d'enregistrer cette image en icone de mettre .cur à la fin de son nom. Et vous aurez ainsi votre image en format curseur enregistré dans votre ordinateur. Pour les logiciels comme Photoshop ou Gimp, vous devez exporter votre image en icône. Puis une fois celle-ci enregistrée en format .ico, d'utiliser un convertisseur d'icone en curseur. Là plupart des logiciels que je vous ai cité ci-dessous le font.

    • Les générateurs en ligne. HTML Basix permet par exemple de convertir vos images en curseurs animés ou non, mais il existe également des générateurs pour icônes tel que Converthub, I-Convert et bien d'autres qui permettent de transformer une image en format .ico. Comme pour les logiciels de graphisme, l'astuce est de renommer cette icône en .cur ensuite grâce aux logiciels qui convertissent les icones en curseur cités ci-dessus.

    Dans tous les cas, pensez en créant votre image à quelques points :

    • l'image ne doit pas être trop grande, la plupart des logiciels préconisent une taille 32 x 32 maximum, soit la plus grande taille autorisée déjà pour les icônes.
    • le fond autour de votre image doit être transparent, sous peine d'avoir un carré imagé pour curseur. Donc utilisez une image de base en .gif ou .png.
    • Il vaut mieux que l'image pointe vers le coin en haut à gauche, indiquant alors exactement ce qu'elle désigne.
      Par exemple :

    2. Héberger son curseur

    Une fois votre curseur créé, il vous faut l'héberger pour qu'il puisse ensuite être appellé par la css. Pour cela, il suffit d'uploader votre curseur à partir de votre ordinateur sur un hébergeur acceptant le format .cur ou .ani. Vous pouvez trouver une liste d'hébergeurs ici : Divers hébergeurs d'images et autres

    N'oubliez pas de récupérer le lien donné par l'hébergeur que vous avez choisi une fois que votre curseur a été hébergé.

    3. Placer votre curseur sur votre forum

    Nous allons à nouveau utiliser la propriété cursor, avec cette fois comme valeur l'url de votre curseur.

    Allez dans dans votre feuille de style css : Panneau d'Administration >> Affichage >> Couleurs >> onglets à droite : feuille de style CSS.

    Pour le lien général, c'est exactement comme pour les curseurs par défaut nous allons installer notre curseur dans body

    body {
    cursor: url(lien de votre curseur hébergé), auto;
    }
    ( le ,auto permet, au cas où le lien de votre curseur serait mort, qu'il y ait quand même le curseur par défaut )

    Pour les liens ou d'autres éléments on change juste le body pour le curseur s'applique aux éléments qu'on souhaite ( donc par exemple en mettant a à la place pour les liens ).

    N'oubliez pas d' :enreg: et puis voilà votre curseur est installé et fonctionne.



SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum