• CSS & HTML

      Comment améliorer son blog avec une série de codes CSS et HTLM...

      Un bon blog pour le faire soi-même quand on a compris:

      Fantasy-Graph

      Et le blog où je prends mes codes:

      Sunshine World

     

     

     

    Menus coulissants

    Mettre un fond ou un header plus lourd que la limite

    Sélection

    Derniers visiteurs texte

    Déplacer les modules

     

    Si tu veux un tuto précis, dis le par MP!

  • Mettre des liens dans des images
    (clique ici mon ami)

     

    Mais comment on fait ça ? 8D

    C'est très simple ! \O

      Première étape, on a ses deux pages : l'article de base et l'article ciblé. Soit pour mon exemple cette page et celle-ci. Avec les deux images évidemment ! :D

      Deuxième étape, on poste son image et on décoche "Ouvrir l'original quand on clique sur l'image" si votre image doit être redimensionnée. Si non (c'est-à-dire que votre image a une taille qui rentre dans votre page sans devoir être redimensionnée), on passe simplement à l'étape 3.

    Mettre des liens dans des images

    Mettre des liens dans des images

     

    OU

     

    Mettre des liens dans des images

     

      Troisième étape, on sélectionne l'image en cliquant dessus (elle s'affichera alors en bleu).

      Quatrième étape, on insère un lien :

    Mettre des liens dans des images

    Mettre des liens dans des images

     

      Et c'est fini ! :D


    votre commentaire
  • /!\ Tuto en cours /!\

    Mettre des images dans le module


    votre commentaire
  •   Déjà qu'est-ce qu'un module? Un module c'est un de ces trucs dans le menu, genre chez moi "Bienvenue!", "Question" ou encore "Partenaires". Et bien aujourd'hui, nous allons apprendre à les mettre n'importe où sur ton blog!

      Donc en premier, il faut que ce module existe déjà. Ensuite, tu ouvres "Apparence" → "Modifier le thème" → "Ajouter du CSS", et puis tu colles:

    #module_menuXXXXXX {position: absolute;
              top: Xpx;
              left: Xpx;
    }
     
      Donc à la place des XXXXXX tu mets ce que tu vas trouver en faisant: "Clique droit n'importe où sur la page" → "Code source de la page" → "Ctrl + F" → "Tu écris dans la barre de recherche qui vient de s'afficher le titre de ton module. Conseil: pour le trouver plus facilement, donne lui temporairement un nom original, genre "Bananasplit" ou je ne sais quoi" → "Tu copies le numéro qui suis module_menu plus haut"
      Faisons l'exemple avec mon Bienvenue!:

    Déplacer les modules

    Déplacer les modules

    Déplacer les modules

    Déplacer les modules

      Donc surligné en rouge, c'est le résultat de votre recherche. Vous regardez un peu au-dessus, et ce qu'on va copier/coller c'est ce qui est surligné en vert.
      Donc, on se souvient? A la place des XXXXXX on met ce qui est en vert!

      A la place des X de top et left, vous mettez des chiffres, ça donnera l'emplacement de votre module. Faîtes des test et voyez ce qui convient le mieux! Mais gardez en tête que certaines personnes ont un écran plus petit que le vôtre!

      Voilà, j'espère que ce tutoriel vous aura aidé! Sachez que vous pouvez ensuite modifier entièrement votre module avec des codes CSS de bases. Tenez, voici le mien appliqué sur Doll's Music pour le menu en haut à gauche:

    #module_menu139552720 {position: fixed;
              top: 35px;
              left: 10px;
    }

     

      J'ai mis "fixed" à la place d'"absolute" parce que je veux que mon module reste à cet emplacement même si on descend la page. L'actuel est donc très simple, mais voici un de mes anciens:

    #module_menu131466899 {position: absolute;
              top: 20px;
              left: 1200px;
            background: #C12530;
         box-shadow: 0 0 8px #C12530 ;
    }

      En rose vous voyez que j'ai modifié la couleur de fond et en bleu j'ai mis une ombre!
      Il y a d'autres codes qu'on peut appliquer,

      En restant à votre disposition,

      Mindy.


    votre commentaire
  •   Avec ce tuto, ta rubrique "Derniers visiteurs" dans ton menu sera un peu plus unique! 

      Quand tu survoles un icôn/avatar, le texte ne s'affiche pas forcément avec le design que tu souhaites... Et bien maintenant si!

      Comme d'hab', "Apparence" → "Modifier le thème" → "Ajouter du CSS", et puis tu colles:

    #help_bubble

    opacity1;
    border1px solid BLACK;
    background-color:#BDE782;
    color:BLACK;
    border-radius2px;}


    votre commentaire
  •   Oh ho! Mais c'est quoi ce tuto chelou? Et bien... Quand tu sélectionnes quelque chose sur Eklablog, c'est par défaut fait dans un immonde bleu... Et bien, grâce à Amichu à la base, et maintenant grâce à moi, nous allons combattre cet affreux bleu! *^* C'est très simple... Comme d'habitude: "Apparence" → "Modifier le thème" → "Ajouter du CSS"

      Ensuite dans tes superbes lignes déjà bien remplies (ou pas) tu colles ceci:

    ::selection background-colorCOULEURcolorCOULEUR}

      Et pour finir, tu changes le rose par la couleur que tu veux à la place du bleu tout moche en code Web (exemple pour le blanc: #fffff) ou en anglais (exemple pour le blanc: WHITE) et ce qui est en bleu par la couleur que tu veux pour le texte sélectionné toujours soit en code Web soit en anglais!

      Des questions? Par commentaire!


    4 commentaires


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