-
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 # ♦
-
Par Parthenia le 7 Septembre 2014 à 14:43
astuce donnée par Papasti :
Ajouter le onmouseover dans le code html.
Exemple (partie en couleur à ajouter):
<img onmouseover="javascript:Help.bubble(this,'<h2>Exemple</h2>');" 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;
}votre commentaire
-
Par Parthenia le 2 Juin 2014 à 14:36
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;}
votre commentaire
-
Par Parthenia le 26 Mars 2014 à 15:14
donnée par Papasti :
#menubar {font-family:Comic Sans MS ,Helvetica,"Bitstream Vera Sans",sans-serif;
votre commentaire
-
Par Parthenia le 26 Mars 2014 à 15:03
astuce donnée par Samiie :
p {text-decoration : none ! important; text-shadow : red 5px 5px 9px;}
2 commentaires
-
Par Parthenia le 26 Mars 2014 à 14:41
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;}votre commentaire
Suivre le flux RSS des articles de cette rubrique
Suivre le flux RSS des commentaires de cette rubrique