• Eklablog

    Dans cette rubrique, vous retrouverez toutes les astuces concernant les codes HTML ou CSS, que j'ai pu trouver sur le forum d'entraide d'Eklablog.
    A chaque fois, j'ai mentionné le nom des contributeurs et renvoyé aux articles initiaux.

    Merci à tous ceux qui partagent leur savoir en la matière et qui prennent le temps de répondre à nos questions... ^^

    Sommaire :

    ♦ Arrondir le bord du contenu et des menus #
    ♦ Arrondir les images des textes  #
    ♦ Derniers articles : insérer un point devant chaque lien #
    ♦ Empêcher les images dans les commentaires #
    ♦ Image qui s'allume au passage de la souris #
    ♦ Images plus claires #
    ♦ Infobulle : ajouter un texte sur une image #
    ♦ Menubar : changer la police #
    ♦ Ombrer les photos #
    ♦ Ombrer les textes et les liens #
    ♦ Spoiler #
    ♦ Texte autour de l'image #  ♦
    ♦ Titre trop long qui mord sur le texte #

    Liens vers blog de tutos :

    ♦ Le Blog facile de Papasti #
    ♦ Fantasy Graph' #
    ♦ Papasti #
    ♦ Pépins & citrons #
    ♦ Codes-CSS-Test #
    ♦ Sélecteurs par Papasti #
     

  • astuce donnée par Papasti :

    Ajouter le onmouseover dans le code html.

    Exemple (partie en couleur à ajouter):

    <img onmouseover="javascript:Help.bubble(this,'&lt;h2&gt;Exemple&lt;/h2&gt;');" src="http://data0.ek.la/monpremierblog/mod_article45847799_4f86e5251e99b.jpg?9261" alt="jgjgj" />

    Ici le texte affiché est celui en bleu et il va s'afficher au format des titres de type h2 

    l'avantage de cette méthode est de pouvoir mettre du gras, de l'italique, des images etc.

    On peut aussi jouer sur l'apparence de la bulle d'aide avec un css comme celui-ci:

    #help_bubble 
    {
       color:white;
       border-radius:10px;
       background-color:black;
       opacity:0.8;
    }

    Partager via Gmail Yahoo! Google Bookmarks

    votre commentaire
  • astuce donnée par Cotonelle :

    ajouter dans CSS :

    .module_menu_contenu ul {list-style-position: inside; list-style-type: disc;}

    et pour obtenir la même chose uniquement dans le module "derniers articles"

    .module_menu_type_lastarticles ul {list-style-position: inside; list-style-type: disc;} 

    Partager via Gmail Yahoo! Google Bookmarks

    votre commentaire
  • donnée par Papasti :

    #menubar {font-family:Comic Sans MS ,Helvetica,"Bitstream Vera Sans",sans-serif;

    Partager via Gmail Yahoo! Google Bookmarks

    votre commentaire
  • astuce donnée par Samiie :

    p {text-decoration : none ! important; text-shadow : red 5px 5px 9px;}

    Partager via Gmail Yahoo! Google Bookmarks

    2 commentaires
  • astuce donnée par Anne :

    .module_contenu{
        -webkit-border-radius: 10px;     -moz-border-radius: 10px;     border-radius: 10px;}

    pour le menu de gauche s'il y en a deux :

    #menu1{
        -webkit-border-radius: 10px;     -moz-border-radius: 10px;     border-radius: 10px;}
     

    et pour les titres des modules du menu de gauche s'il y  en a 2 :

    #menu1 .module_menu_titre{
        -webkit-border-radius: 10px;     -moz-border-radius: 10px;     border-radius: 10px;} 

    (on peut bien entendu changer la valeur de l'arrondi).

    Pour la bordure du contenu des articles, on emploie :

    .module_contenu{
        -webkit-border-radius: 10px;
    -moz-border-radius
    : 10px;
      
    border-radius: 10px;}

    Partager via Gmail Yahoo! Google Bookmarks

    votre commentaire


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