-
Yo! Il existe deux moyens.
Avec un curseur déjà fait:
Il existe pas mal de sites vous proposant des curseurs déjà faits, joignant le code qui permet de l'installer. Je vais vous en donner plusieurs et vous donner le mode de fonctionnement.
Sur ce site, on vous donne deux codes pour chaque curseur.
Le premier, à copier-coller dans le CSS du blog ou l'HTML de l'article, est pour le curseur par défaut.Le second est pour le cuseur au survol d'un élément cliquable, comme un lien.
J'avais piqué ce curseur pour essayer de l'intégrer uniquement dans cet article en le mettant dans le code HTML, mais vous voyez que c'est une master sword qui s'affiche, je donne le lien du site où je l'ai trouvée plus bas.Pas trop de choix, mais pour ceux qui m'ont intéressé, ils sont assez chouettes.
Sur ce site, on vous donne un code par curseur, à insérer dans le CSS ou l'HTML également. Il y a beaucoup plus de choix que sur le précédent et ils sont plutôt sympathiques aussi.
C'est celui qui a fourni le curseur Master Sword présent sur cet article. BEAUCOUP de choix, des curseurs de très bonne qualité, et comme sur Totally Free Cursors on vous donne un code par défaut et un code pour le survol.
Autre chose, matez ce curseur, il est plutôt cool :3Avec une image personnalisée:
Celle que vous voulez. Vous aurez besoin de:
- une ou deux image/s de moins de 150x150 pixels
- Cette ligne de code:
HTML,BODY {
cursor: url("URL1"),auto;}
A:hover {
cursor: url("URL2"), auto;
}URL1 est votre curseur par défaut, URL2 est le curseur au survol.
Je pense me remettre à faire dans le curseur, ceux que je proposais jusqu'à présent n'étaient pas de très bonne qualité mais j'essaierai de faire mieux ^^'N'importe quelle image ne fait pas un bon curseur, il vous faudra sûrement la bidouiller.
Voilà! J'espère que cet article vous aura servi :)
2 commentaires -
Yo! Voici une liste (non complète) des sélecteurs Ekla, triés par partie de la page. N'hésitez pas à me donner ceux qui me manquent.
Ensemble du blog
Ensemble de la fenêtre #body Corps de page #background Elément survolé ajouter :hover derrière le sélecteur Liens a Infobulle #help_bubble Barre de menu/ Menubarre / Infobarre
Ensemble de la menubarre #menubar Ces sélecteurs doivent tous être mis si vous voulez éliminer les séparations entre les éléments de la menubarre Barre entre les éléments .menubar_section Séparation des éléments .menubar_separation Séparation des éléments .menubar_button Logo Ekla de la menubarre #menubar_logo Cœur de favoris #menubar_favorites Ces sélecteurs servent à coder l'apparence des différentes
sections de la menubarre (contenu, apparence, interactions,
aide, configuration...)
account = compte (pseudo)
help = aide
signin = champs de connexion
favorites (au-dessus) = coeur de favoris
notifications = icône de notificationsLe reste est invisible pour l'utilisateur
#menubar_section_content #menubar_section_appearance #menubar_section_interactions #menubar_section_manage #menubar_section_account #menubar_section_help #menubar_notifications #menubar_signin Cœur de favoris si l'utilisateur n'a pas mis votre blog en favori #menubar_nofavorites_btn Cœur de favoris si l'utilisateur a mis votre blog en favori #menubar_favorites_btn Pseudo dans la menubarre #menubar_notifications.menubar_section #menubar_section_account.menubar_section Notifications:
L'ensemble des notifications "lues" #notifications_panel Une seule notification #notifications_panel_li Bouton afficher les nouvelles notifications #notifications_panel_li:lastchild Notifications "non lues" #notifications_panel .new_notification Header
Header #header Titre #titre_header Slogan #slogan_header Menu d'en-tête #menu a Sous-menu d'en-tête #menu ul a Menus de gauche/droite
Menu de gauche #menu1 Menu de droite #menu2 Titres des menus .module_menu_tire Titres du menu de gauche #menu1 .module_menu_tire Titres du menu de droite #menu2 .module_menu_tire Contenu des modules .module_menu_contenu Un seul module .module_menu Haut du menu #menu1_top / #menu2_top Bas du menu #menu1_bottom / #menu2_bottom Boutons #background input[type="submit"] Champs #background input[type="text"] Types de menus:
Statistiques .module_menu_type_stats Derniers visiteurs .module_menu_type_lastvisitors Images des derniers visiteurs img.menu_lastvisitors-avatars Calendrier .menu_calendar Recherche .module_menu_type_search Shoutbox #shoutbox Pseudo de la shoutbox #shoutbox strong Derniers articles .module_menu_type_lastarticles Un module en particulier cliquez droit > inspecter > #module_menuXXXXXXXXX Liens .module_menu_type_links2 Newsletter .module_menu_type_newsletter Sondages .module_menu_type_survey Derniers commentaires .module_menu_type_lastcomments Articles les plus commentés .module_menu_type_mostcommented Tag cloud .module_menu_type_tags Derniers topics sur les forums .module_menu_type_lasttopics Contenu
Ensemble du contenu #content Contenant du titre de l'article .module_titre Titre des articles .module_menu_titre Information des articles .article_info Date dans les infos de l'article .article_info_date Texte des articles .article_text Lien pour ajouter son commentaire au bas d'un article .article_comments_link Pseudo des commentaires .commentpseudo En-tête des commentaires .commentheader Corps des commentaires .commentbody Commentaires de l'auteur de l'article .comment_admin Commentaires des autres .comment_normal Date des commentaires .commentdate Avatar des commentaires .commentavatar Numéro du commentaire .commentnumber Réponse(s) à un commentaire #replies Citations blockquote Fil d'Arianne #breadcrumb Footer
Ensemble #footer 1er lien (nom du blog) #titre_footer
18 commentaires -
Salut!
Ceci est une petite astuce pour ceux qui ont un RPG, un jeu interactif ou qui veulent tout simplement que leur header ne contienne pas de lien vers leur accueil.
Il faut que votre header aie une dimension fixe sinon il risque d'être cliquable sur une partie. (en gros la largeur de page en % rend cette astuce un peu naze).Vous aurez besoin:
- d'une interface d'édition permettant l'ajout de CSS
- d'une image .png transparente un peu plus grande que votre header (10-15px max en tout pour une pitite marge de sécurité :3)
Voici l'URL de la mienne: "http://ekladata.com/YslN7-QeoET1CcRKLiBLWoP_v28.png"
Elle fait 1090px de large et 297px de haut à la base. Vous pouvez modifier les dimensions en ajoutant @XxY avant .png; où X est la largeur et Y est la hauteur de l'image.- d'un module simple dans un menu
- de cette ligne de code HTML:
<div id="ID">
Vous pouvez mettre ce que vous voulez à la place de ID, c'est l'identifiant qui permettra d'appeler votre image transparente via CSS.
Ouvrez un nouveau module simple: votre image transparente doit être le seul contenu du module.
Puis, insérez-y votre image transparente (n'hésitez pas à prendre celle que je vous donne plus haut).Ensuite, copiez-collez ce code CSS dans la partie "Ajouter du CSS" de votre interface d'édition de thème:
#background {margin: auto} /*pour que votre page, et donc votre header soient bien centrés*/
#ID {position: absolute; /*permet de mettre l'élément par-dessus tous les autres*/
top: 0px; /*colle l'élément tout en haut de la page, sans marge*/
margin: auto; /*centre l'image sur le header*/}ID est l'identifiant par lequel vous avez nommé l'élément plus haut en HTML.
Bien sûr, il faut modifier les coordonnées de position pour que l'image soit sur votre header et pas à côté, prenez en compte vos marges, vos positions si elles sont déjà fixées...Voilà, c'est fait ^^ cette astuce est basée sur cette qui consiste à mettre un autre lien sur le header, ici, votre image ne contient simplement aucun lien. Il est aussi possible de ne mettre l'image que sur une partie du header, bref, vous êtes libres de faire ce que vous voulez!
J'espère que cet article aura servi à quelque chose :3
votre commentaire
Suivre le flux RSS des articles
Suivre le flux RSS des commentaires