Header
Partagez | 

[ForumActif] Avoir un curseur personnalisé sur son forum

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: [ForumActif] Avoir un curseur personnalisé sur son forum   Mer 4 Sep - 10:00

Tutoriel rédigé par Caline

Avoir un curseur personnalisé sur son forum



Hello ^^

Marre d'avoir la petite flêche du curseur (de la souris) que tous les sites et forums ont ? Vous voulez un curseur personnalisé à votre goût et qui corresponde au thème de votre forum...

Le tutoriel sera divisé en deux parties. Dans la première, vous saurez comment changer le curseur par un autre curseur, défini par nos navigateurs. Dans la deuxième, vous saurez comment héberger votre propre curseur personnalisé !

I - Remplacer un curseur classique.



Pré-requis :

Arrow Avoir accès au CSS de son forum ! (Donc être administrateur.)

Voici le code en entier, à copier-coller dans sa feuille de style (Panneau d'administration => Affichage => Couleurs => Feuilles de Style CSS).

Code:
body {
cursor: url('LIEN DU CURSEUR'), auto;
}

a:hover {
cursor: url('LIEN DU CURSEUR'), auto;
}
Regardons-le de plus près...

Code:
body {
cursor: url('LIEN DU CURSEUR'), auto;
}
Cette partie du code change votre curseur sur l'intégralité du forum.

Code:
a:hover{
cursor: url('LIEN DU CURSEUR'), auto;
}
Et celle-ci change votre curseur sur les liens !

Il existe une liste de curseurs prédéfinis par nos navigateurs. Voici une liste tirée de [http://babylon-design.com].

Citation :
Par défaut, on peut utiliser comme curseurs dit classiques 16 possibilités.

default : Curseur par défaut (couramment une flèche)
auto : Curseur dans le contexte courant
crosshair : Curseur de ciblage (= une croix)
help : Curseur d’aide (= un point d'interrogation)
move : Curseur de déplacement (= une croix fléchée)
pointer : Curseur indiquant un lien (= une main)
text : Curseur de texte
wait : Curseur d’attente (= un sablier)
progress : Curseur de progression
n-resize : Curseur de redimensionnement Nord (= redimensionnement en haut)
nw-resize : Curseur de redimensionnement Nord-Ouest (= redimensionnement en haut à gauche)
ne-resize : Curseur de redimensionnement Nord-Est (= redimensionnement en haut à droite)
s-resize : Curseur de redimensionnement Sud (= redimensionnement en bas)
se-resize : Curseur de redimensionnement Sud-Est (= redimensionnement en bas à droite)
sw-resize : Curseur de redimensionnement Sud-Ouest (= redimensionnement en gauche)
w-resize : Curseur de redimensionnement Ouest (= redimensionnement à gauche)
e-resize :Curseur de redimensionnement Est (= redimensionnement à droite)
Exemple d'utilisation :

Code:
body {
cursor: wait;
}

a:hover {
cursor:pointer;
}



II - Avoir un curseur personnalisé.



Si vous êtes comme moi, qui ai fouillé les sites proposant des curseurs mais que rien ne vous a plu (quelle fille difficile je suis mdrrr lol!) lapinou2

Va donc falloir faire le vôtre ! ^^



Deux choix possibles :

- Soit vous trouvez une image qui vous plait sur google ou vous en avez déjà une (peu importe le format de l'image).

- Soit vous avez envie de grapher, et vous créez votre propre curseur.

Ensuite pour que l'image puisse devenir votre curseur, il faut la convertir sur le format .cur

Pour la convertir, ouvrez le logiciel Photofiltre.

Si vous ne l'avez pas, à télécharger ICI !

Une fois le logiciel ouvert, vous faites :

1-Outils puis Exportation en icones au choix : 256 couleurs (8 bits) ou 16 millions de couleurs (24 bits) bref vous voyez comment rend l'image.

2-Ensuite cliquez sur Exporter puis au nom de votre image à la fin vous écrirez .cur

Votre curseur est donc prêt.. lapinou2lapinou2lapinou2

Ensuite il faut héberger ce curseur, la plupart des hébergeurs d'images ne prennent pas le format .cur

Je vous conseille donc celui la : http://www.patmax.eu/

Vous cliquez sur : Fichiers ANI, CUR et ICO puis vous selectionnez votre image et vous cliquez sur HEBERGER


    Ensuite 3 liens vous sont proposés..

    Voici le lien vers votre fichier:
    Code à placer dans votre CSS:
    Code à placer dans une page HTML:


Afin d'assurer une compatibilité avec quasiment tous les navigateurs, et qu'on le voit bien sur toutes les pages du forum ^^

Je vous conseille de prendre le 1er lien à savoir :

Voici le lien vers votre fichier: bref le lien du curseur écrit en rouge ^^

Ensuite, vous allez dans Panneau d'administration puis affichage puis couleurs puis feuille de style CSS :

Puis vous copier-coller ceci :

body{cursor:url("LIEN DE VOTRE CURSEUR"),default;}

Voila c'est fini vous avez votre curseur personalisé, pas plus compliqué lapinou2lapinou2lapinou2

Tuto compatible avec :

IE7, IE8
Firefox
Google Chrome
Aol Explorer
Nestcape uniquement en mode affichage comme Internet Explorer

Non compatible avec :

Opéra
Nestcape affiche comme Firefox

Non testé sur :

Safari
+ Tout ce que j'ai pas cité mdr



Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].
Idea N'oubliez pas de lire et de suivre les [règles de la section].

Je soussigné(e), Caline,  accepte / n'accepte pas [barrez la mention inutile] qu'un directeur reposte ce tutoriel tel que je l'ai rédigé.
Revenir en haut Aller en bas
[ForumActif] Avoir un curseur personnalisé sur son forum
Page 1 sur 1
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Gestion d'un forum+