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 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 navigateurs ;
  • 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'applique sur l'élément body, exemple :

Code:
body {
cursor : move ;
}
Pour le passage sur les liens, dans ce cas, il s'applique sur l'élément 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.


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
none
help
cell
alias
copy
no-drop
grab
grabbing

Il suffit donc de recopier une de ces valeurs derrière la propriété cursor dans votre CSS :

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Par exemple :
Code:
a {
  cursor : move;
}

Les curseurs personnalisés

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

Les curseurs animés sont une particularité d'Internet Explorer et n'apparaissent pas sur les autres navigateurs

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).

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 : 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.

Héberger son curseur


Une fois votre curseur créé, il vous faut l'héberger pour qu'il puisse ensuite être appelé par la feuille de style 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é.

Placer votre curseur sur votre forum


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

Panneau d'administration  Affichage  Couleurs - 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

Code:
body {
    cursor: url(LIENDUCURSEUR), auto;
}

Remplacez LIENDUCURSEUR par l'URL obtenu après avoir hébergé votre image-curseur.

SoraNoHime

SoraNoHime
Membre actif

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

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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