• 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


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique