• 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
  • astuce donnée par luette :

    #form_cavom_image {display:none;}

    .commentbody img{display:none;}
    .commentbody img[src*="emoticons"]{display:block;}

     

    La première ligne du code enlève le bouton pour insérer une image (mais conserve les emoticones)

    La seconde cache les images des commentaires (y compris les emoticones)

    La troisième rétablit l'affichage des emoticones uniquement.

    Les images ne sont pas supprimées. Il suffit d'enlever le code css pour qu'elles apparaissent à nouveau.

    Partager via Gmail Yahoo! Google Bookmarks

    votre commentaire
  • astuce donnée par Mike :

    <img style="box-shadow: 10px 7px 3px grey;" src="http://data0.eklablog.com/papyrocktest/perso/img%20video%2001.jpg" alt="" width="200" />

    La première valeur indique le décalage horizontal vers la droite (ici 10px)
    le deuxième correspond au décalage vertical vers le bas (ici 7px) 
    le chiffre suivant indique la force du dégradé (ici 3px) 
    et enfin, la couleur (ici grey)

     

    Pour appliquer une ombre sur toutes les images du blog, ajouter ce code dans la session CSS:

    img { box-shadow: Dodgerblue 3px 0px 10px;}

     

    et pour que ce code ne s'applique pas à toutes les images :

    Remplacer dans ajout CSS:

    img box-shadow: black 6px 6px 10px;}

    par

    p img box-shadow: black 6px 6px 10px;}

     

    Partager via Gmail Yahoo! Google Bookmarks

    votre commentaire
  • astuce donnée par Anne :

    Ajouter dans le CSS :

     .module_titre_contenu {
        padding: 5px 15px;
        height: auto;}

    Ce code  consiste à adapter la hauteur du module du titre en fonction de la longueur du titre justement (sur une ou deux lignes) .

     

    Pour le titre du menu :

    #menu1 .module_menu_titre{
        padding: 5px 15px;
        height: auto;}

    Partager via Gmail Yahoo! Google Bookmarks

    votre commentaire
  • astuce donnée par stormalo :

    (ce qui est en vert est un ajout facultatif, pour info)

    /* image opaque */
    img {

    -moz-transition: opacity 0.4s linear 0s;
    -webkit-transition: opacity 0.4s linear 0s;
    transition: opacity 0.4s linear 0s;
    opacity: 0.5;
    }
    /* image claire */
    img:hover {
    -moz-transition: opacity 0.4s linear 0s;
    -webkit-transition: opacity 0.4s linear 0s;
    transition: opacity 0.4s linear 0s;
    opacity: 1;
    }

    Partager via Gmail Yahoo! Google Bookmarks

    votre commentaire
  • astuce donnée par rezemika :

    <div style="margin: 5px 10px 10px;">
    <div class="smallfont" style="margin-bottom: 2px;"><strong>NOM</strong> <input style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Montrer'; }" type="button" value="Montrer" /></div>
    <div class="alt2" style="border: 1px inset; margin: 0px; padding: 2px;">
    <div style="display: none;"><br />
    <p>VOTRE TEXTE</p>
    </div>
    </div>
    </div>

    Partager via Gmail Yahoo! Google Bookmarks

    votre commentaire
  • astuce donnée par macema :

    .article_text img {

     -moz-border-radius : 25px;

     -webkit-border-radius : 25px;

     -khtml-border-radius : 25px;

     border-radius : 25px; }

     

    pour arrondir une image précise (astuce donnée par pépins et citron) :

    ajouter entre img et src

    style="border-radius: 25px;"

    Partager via Gmail Yahoo! Google Bookmarks

    votre commentaire
  • astuce donnée par Papasti :

    On peut appliquer sur les images une opacité (par exemple 60%) ce qui donne en CSS:

    opacity:0.6;

    Et on peut leur appliquer une opacité de 100 % au survol.

    Exemple pour les images du module derniers visiteurs:

    .module_menu_type_lastvisitors img{
      opacity:0.6;
    }
    .module_menu_type_lastvisitors img:hover{
      opacity:1;
    }

    Pour toutes les images:

     img{
      opacity:0.6;
    }
     img:hover{
      opacity:1;
    }

    Partager via Gmail Yahoo! Google Bookmarks

    votre commentaire
  • astuce donnée par Stormalo :

    Pour une image placée à gauche du texte avec un écart de 15 pixels:
    mettre style="float: left; margin: 15px" entre img ou src

    Exemple: pour afficher l'image de photo1 a gauche du texte avec 15 pixels de marge
    <p><img style="float: left; margin: 15px;" src="URL Photo1" alt="" /></a></p>

     

    Partager via Gmail Yahoo! Google Bookmarks

    2 commentaires


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