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

    Totally Free Cursors

    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.

     Curseurs à gogo

    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.

    Cursors4u.com

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

    Avec 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 {
    cursorurl("URL1"),auto;}
    A:hover {
    cursorurl("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.

    Clique là pour savoir pourquoi ça ne change pas le curseur au survol du header et comment remédier à ce problème très grave

    Voilà! J'espère que cet article vous aura servi :)

    Glowing Master Sword The Legend Of Zelda


    votre commentaire
  • 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 notifications

    Le 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
       
       
       

    17 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
  • Yo! Pas mal de personnes ne se contentent pas des polices présentes sur Ekla et souhaitent en choisir une différente.
    Je suis certaine qu'encore une fois, un ou des tutos ont déjà été faits sur le sujet mais voilà une astuce assez simple: le @font-face.

    Il s'agit d'une astuce full CSS, après laquelle vous devrez régler les polices de votre blog directement via CSS, du coup je vous donnerai aussi les sélecteurs des principaux éléments CSS. (Vous pouvez aussi cliquer droit sur l'élément à modifier, choisir "Inspecter" et vous aurez une page qui s'ouvrira où vous pourrez trouver votre sélecteur.)

    1. Hébergez votre police sur un hébergeur externe ou sur votre blog directement.
    Ici, je prendrai l'exemple de la police Scriptina (titre de ce blog). Vu qu'elle est hébergée dessus, je vous donne aussi l'URL d'hébergement, c'est tout bénèf: http://ekladata.com/KZ9FDbMcxNEZ-eYSElSZbrGJZlQ/SCRIPTIN.ttf
    Vous aurez besoin de cette URL, mais aussi du format de la police: souvent .ttf ou .otf -là c'est simple vous regardez l'extension du nom de fichier. Dans l'URL que je vous donne plus haut, c'est .ttf

    2. Allez dans apparence > modifier le thème > ajouter du CSS et copiez le code suivant:

    @font-face {font-family: 'Nom_de_la_police';
    src: url('URL SOURCE') format('extension du fichier');}

    Dans mon cas, avec Scriptina, ça donne ça:

    @font-face{font-family: 'Scriptina';
    src: url('http://ekladata.com/KZ9FDbMcxNEZ-eYSElSZbrGJZlQ/SCRIPTIN.ttf') format ('.ttf');}

    3. Codez les éléments où vous voulez voir apparaître la police :3
    Voici une liste délicate des sélecteurs des principaux éléments de votre blog Ekla (les sélecteurs changent en fonction des plateformes).

    Élément du blog Sélecteur Élément du blog  Sélecteur 
    Menu d'en-tête #menu a Menu de gauche #menu1
    Titre du header  #titre_header Menu de droite #menu2
    Slogan  #slogan_header  Titres du contenu  .module_titre_contenu
    Corps principal (header compris) #background Titres des menus .module_menu_titre
    Contenu #content Titres du menu de gauche #menu1 .module_menu_titre
    Pied de page #footer Titres du menu de droite #menu2 .module_menu_titre
    Sous-menu d'en-tête #menu ul a    

    Ladite liste n'est pas exhaustive, une liste plus complète est à paraître.

    Exemple, si vous voulez que les titres de vos articles apparaissent en Scriptina, vous mettez ça:

    .module_titre_contenu {font-family: Scriptina;}

    4. Voilà, c'est fini :3 j'espère que cet article vous aura servi!


    25 commentaires
  • Yo!

    Voici deux sites qui pourront vous aider si vous faites des schémas de couleur avant de créer vos designs et/ou si vous avez souvent besoin de convertir de l'hexadécimal -en gros les couleurs telles que vous les donne l'interface d'édition Ekla, de type #83d6b5 en RGB, utile par exemple si vous souhaitez changer l'opacité d'un background avec le code de type RGBA (a pour... opacité, oui, et j'ai pas envie de chercher pourquoi mais si vous savez manifestez-vous ça fait toujours plaisir).

    Un schéma de couleurs c'est quoi? En web-design, c'est tout simplement les couleurs dominantes que vous allez utiliser dans votre design. Ici, c'est gris clair, gris plus clair, vert, gris foncé et orange.

    Ce site, Colourcode, vous permettra de trouver un schéma de couleurs de 5 couleurs allant bien ensemble (exemple random ci-dessous pour des couleurs analogues):

                            

    Le site propose également de vous trouver des schémas monochrome + gris clair ou foncé, des couleurs analogiques et complémentaires; complémentaires; des trios et même des quatuors de couleurs accordées. J'ai voulu tester le quatuor et voilà ce que j'ai trouvé en balandant la souris sur l'écran:

                            

    Bien sûr, vous pouvez aussi créer vos propres schémas très librement en choisissant le mode "free build". Ce site donne des résultats assez harmonieux et ça m'arrive de l'utiliser pour certaines couleurs que je maîtrise mal.

    Un dernier exemple pour la route? 8D allez, monochrome: 

                            

    Le second site est tout simplement, comme je l'ai dit en haut, un convertisseur de l'hexadécimal (type #debcde) vers le RGB (red green blue, qui se présente comme ça: 25,37,255) et inversement.

    Voilà pour cet article, j'espère que ça vous servira à quelque chose :3 bien sûr, savoir choisir ses couleurs est important, mais si vous les mettez n'importe comment, ça n'ira pas même si elles vont bien ensemble.

    J'ai jamais su faire les conclusions, donc faites comme si y'en avait une~


    votre commentaire