Voir le dernier article paru dans cette catégorie.
Blog allégorique de lui-même
Ce blog est créé pour être vu préférentiellement sous Mozilla ou FireFox ...
Quelques problèmes d'affichage et de transparence peuvent apparaître
sous Internet Explorer ou Crazy Browser ...
: Pfff... Le blog d'un chat, non mais vraiment, on aura tout vu sur Over-Blog...
: Et Pourquoi les chats, ils auraient pas le droit de blogger, d'abord, hein, Zoélie ?
: Parce qu'ils n'ont rien d'intéressant à dire, tout ce qui les intéresse, c'est manger et dormir...
: Même pas vrai, regarde, j'ai mis pleins de chouettes références dans Coups de Coeur !
: Bon, c'est ce qu'on verra, je parie que je bloggerai plus souvent que toi !
Ce blog sera donc composé alternativement et en fonction de l'inspiration de chacune, des articles de Zoélie la (presque) physicienne et de Chatoune, sa petite chatte.
Quelques problèmes d'affichage et de transparence peuvent apparaître
sous Internet Explorer ou Crazy Browser ...
: Pfff... Le blog d'un chat, non mais vraiment, on aura tout vu sur Over-Blog... : Et Pourquoi les chats, ils auraient pas le droit de blogger, d'abord, hein, Zoélie ? : Parce qu'ils n'ont rien d'intéressant à dire, tout ce qui les intéresse, c'est manger et dormir...: Même pas vrai, regarde, j'ai mis pleins de chouettes références dans Coups de Coeur ! : Bon, c'est ce qu'on verra, je parie que je bloggerai plus souvent que toi !Ce blog sera donc composé alternativement et en fonction de l'inspiration de chacune, des articles de Zoélie la (presque) physicienne et de Chatoune, sa petite chatte.
| |
Je voudrais bien qu'on joue avec moi ... |
| Les animaux virtuels ont aussi besoin d' Âââmour : Adoptez-en un ! |
Dernier épisode de la PartieCommentairüngSaga (clin d'oeil à Walsong et à son premier opéra farfelu), le plus facile - ça tombe bien, il est tard -
les liens Ajouter un commentaire et Ajouter un trackback :
Ils sont commandés par deux fonctions simples : .linkcomment et .linkTrackback.
Les personnaliser est donc plutôt facile; vous pouvez changer la couleur et l'aspect de la police, mais aussi les transformer en boutons.
Deux options: soit mettre un font en forme de bouton, que vous pouvez créer par exemple sur ce site:
Il faut cependant bien comprendre qu'on peut pas modifier le texte en lui-même, puisqu'il est implémenter dans le partie HTML du code du blog, auquel nous n'avons pas accès. Il faut donc créer un bouton "vierge", vide de texte, qui sera mis en background-image de .linkcomment et de .linkTrackback.
Comme il d'agit de deux fonctions distinctes, il est tout à fait possible d'en faire deux différents.
Ainsi, par exemple, vous créez un bouton de 200px de large et de 50Px de haut :
et vous l'insérez dans
.linkcomment {
background: url(http://idata.over-blog.com/0/05/85/46/utilitaires/buttonvide.jpg) no-repeat center left;
width:200px;
height: 50px;
padding: 25px 50px 25px 50px;
}
Le padding est nécessaire pour avoir le bouton en entier et le texte bien centré au milieu; il doit être adapté à la dimension du bouton. N'hésitez pas à faire des tests.
Résultat:
Autre possibilité, celle que j'ai choisie pour l'instant (mais sait-on jamais...), pas d'image en background, mais un effet "bouton" grâce aux borders.
.linkcomment{
border: outset #EEC591;
background-color: #code_couleur;
...
}
Ici le "bouton" est délimité par une bordure en relief vers l'extérieur (border: outset #EEC591;), le code couleur #EEC591 désignant la couleur claire de la bordure.
L'avantage ?
On peut facilement reconfigurer le bouton au passage de la souris avec le désormais connu :hover de façon à créer un effet d' "enfoncement" en choisissant une bordure de type inset, c'est-à-dire un relief vers l'intérieur:
.linkcomment:hover{
border: outset #EEC591;
}
Bien sûr, tout ceci ne sont que des exemples de ce que vous pouvez faire, à vous d'imaginer votre propre design pour ces deux liens, pas nécessairement sous forme de boutons, c'est très conventionnel, un bouton, après tout, l'important étant qu'ils donnent envie de cliquer dessus pour qu'on vous le laisse, ce commentaire bien mérité ...
On est au bas de la page, ouf : Fin du troisième et dernier acte !
Alors vous savez ce qu'il vous reste à faire pour me requinquer après tout ce travail herculéen:
Cliquez là ->
les liens Ajouter un commentaire et Ajouter un trackback :
Ils sont commandés par deux fonctions simples : .linkcomment et .linkTrackback.
Les personnaliser est donc plutôt facile; vous pouvez changer la couleur et l'aspect de la police, mais aussi les transformer en boutons.
Deux options: soit mettre un font en forme de bouton, que vous pouvez créer par exemple sur ce site:
Il faut cependant bien comprendre qu'on peut pas modifier le texte en lui-même, puisqu'il est implémenter dans le partie HTML du code du blog, auquel nous n'avons pas accès. Il faut donc créer un bouton "vierge", vide de texte, qui sera mis en background-image de .linkcomment et de .linkTrackback.
Comme il d'agit de deux fonctions distinctes, il est tout à fait possible d'en faire deux différents.
Ainsi, par exemple, vous créez un bouton de 200px de large et de 50Px de haut :
et vous l'insérez dans
.linkcomment {background: url(http://idata.over-blog.com/0/05/85/46/utilitaires/buttonvide.jpg) no-repeat center left;
width:200px;
height: 50px;
padding: 25px 50px 25px 50px;
}
Le padding est nécessaire pour avoir le bouton en entier et le texte bien centré au milieu; il doit être adapté à la dimension du bouton. N'hésitez pas à faire des tests.
Résultat:
Ajouter un commentaire
(enfin, en mieux, parce que, là, dans le texte, c'est pas évident à reproduire, si vous n'avez pas le même navigateur que moi, soyez indulgents...)Autre possibilité, celle que j'ai choisie pour l'instant (mais sait-on jamais...), pas d'image en background, mais un effet "bouton" grâce aux borders.
.linkcomment{border: outset #EEC591;
background-color: #code_couleur;
...
}
Ici le "bouton" est délimité par une bordure en relief vers l'extérieur (border: outset #EEC591;), le code couleur #EEC591 désignant la couleur claire de la bordure.
L'avantage ?
On peut facilement reconfigurer le bouton au passage de la souris avec le désormais connu :hover de façon à créer un effet d' "enfoncement" en choisissant une bordure de type inset, c'est-à-dire un relief vers l'intérieur:
.linkcomment:hover{border: outset #EEC591;
}
Bien sûr, tout ceci ne sont que des exemples de ce que vous pouvez faire, à vous d'imaginer votre propre design pour ces deux liens, pas nécessairement sous forme de boutons, c'est très conventionnel, un bouton, après tout, l'important étant qu'ils donnent envie de cliquer dessus pour qu'on vous le laisse, ce commentaire bien mérité ...On est au bas de la page, ouf : Fin du troisième et dernier acte !
Cliquez là ->
par Zoélie
publié dans :
TIP's
Je vous ai laisse hier soir sur un suspens carrement insoutenable
quant a l'etude de la partie des elements sub-commentaires; bien que personne n'ait manifeste une impatience excessive en se roulant par terre, je sais que c'est uniquement parce que vous etes bien eleves (merci a vos mamans) mais que vous trepignez en realite sur vos sieges depuis l'aube ...
Chers bloggeurs, je comprends votre soif inextinguible de connaissances CSSiennes, et je m'en vais de ce pas l'apaiser...
(Si les details techniques ne sont pas votre tasse de the, passez directement aux lignes ou est indique la solution, prcedee par un petit, ca marche aussi si on n'a pas compris pourquoi c'est comme ci ou comme ca... d'ailleurs, moi-meme, parfois...)
Voici donc, sous vos yeux ebahis... La partie Trackback !!!
Commencons par le plus simple: la partie
Adresse de trackback pour cet article :
http://admin.over-blog.com/trackback.php?Id=622944
Cet ensemble est gere par l'identifiant #addTrackback { } et contient generalement a la base un contour, defini par l'attribut border.
Si vous souhaitez vous debarrasser d'une ou plusieures de ces bordures, il suffit de modifier la regle de style de facon a avoir:
#addTrackback {
background:transparent;
color: #528B8B;
padding:5px;
border-bottom: solid #FFDEAD 0px;
border-right: solid #FFDEAD 0px;
border-left: solid #FFDEAD 0px;
border-top: solid #FFDEAD 0px;
}
Si vous modifier la couleur de texte dans cette fonction, ca ne va cependant changer que la partie
http://admin.over-blog.com/trackback.php?Id=622944
Pour modifier la partie Adresse de trackback pour cet article :, il faut ajouter dans le CSS une autre fonction, qui represente le titre de #addTrackback. Cette fonction se construit comme les autres fonctions de titre, c'est-a-dire en appelant le selecteur h2 et en precisant que celui-ci ne doit s'appliquer qu'a #addtrackback, d'ou
#addTrackback h2 {
color:#40E0D0;
}
Jusque la, c'etait facile; pour la partie
Trackbacks Pas de trackbacks pour cet article
il va falloir ruser un peu ... (he ! Revenez... c'est facile aussi, en fait...)
D'abord Trackbacks: c'est un titre aussi. Mais pour pouvoir en determiner les parametres (couleur, taille, etc...), il faut proceder comme pour le titre "Commentaires", il faut utiliser
.h2Trackback {color:#40E0D0;}
Dans les parentheses, vous mettez ce que vous voulez ... (color, background-image... laisser vous aller a votre imagination.)
Pour le texte Pas de trackbacks pour cet article, le code source en Html de la page nous indique qu'il est entoure par les balises
<p class="nocomm"><em> et </em></p>, un peu comme Trackbacks est defini par les balises
<h2 class="h2Trackback">...</h2>
Moralite: il faut creer la sous-classe
#main1 .nocomm et lui ajouter le selecteur em pour pouvoir changer le texte Pas de trackbacks pour cet article
#main1 .nocomm em {color: #528B8B;}
Il est important d'ajouter que cette fonction gouverne egalement la phrase Pas de commentaires pour cet article: la pas moyen de les differencier... Mais bon, un peu d'uniformite ne fait pas de mal de temps en temps...
Nota Bene: ecrire
p em {color: #528B8B;} donne le meme resultat, mais va changer tout ce qui est entoure des balises <p><em> ... </em></p>, ce qui peut arriver si vous faites un copier/coller d'un article du net en apportant avec ses balises HTML (ce qui est MAL, il ne faut pas faire ca...)
Voili voilou, il ne reste plus pour le prochain article de cette trepidante serie que les liens Ajouter un commentaire/un Trackback... A suivre.
quant a l'etude de la partie des elements sub-commentaires; bien que personne n'ait manifeste une impatience excessive en se roulant par terre, je sais que c'est uniquement parce que vous etes bien eleves (merci a vos mamans) mais que vous trepignez en realite sur vos sieges depuis l'aube ...Chers bloggeurs, je comprends votre soif inextinguible de connaissances CSSiennes, et je m'en vais de ce pas l'apaiser...
(Si les details techniques ne sont pas votre tasse de the, passez directement aux lignes ou est indique la solution, prcedee par un petit
, ca marche aussi si on n'a pas compris pourquoi c'est comme ci ou comme ca... d'ailleurs, moi-meme, parfois...)Voici donc, sous vos yeux ebahis... La partie Trackback !!!
Commencons par le plus simple: la partie
Adresse de trackback pour cet article :
http://admin.over-blog.com/trackback.php?Id=622944
Cet ensemble est gere par l'identifiant #addTrackback { } et contient generalement a la base un contour, defini par l'attribut border.
Si vous souhaitez vous debarrasser d'une ou plusieures de ces bordures, il suffit de modifier la regle de style de facon a avoir:
#addTrackback {background:transparent;
color: #528B8B;
padding:5px;
border-bottom: solid #FFDEAD 0px;
border-right: solid #FFDEAD 0px;
border-left: solid #FFDEAD 0px;
border-top: solid #FFDEAD 0px;
}
Si vous modifier la couleur de texte dans cette fonction, ca ne va cependant changer que la partie
http://admin.over-blog.com/trackback.php?Id=622944
Pour modifier la partie Adresse de trackback pour cet article :, il faut ajouter dans le CSS une autre fonction, qui represente le titre de #addTrackback. Cette fonction se construit comme les autres fonctions de titre, c'est-a-dire en appelant le selecteur h2 et en precisant que celui-ci ne doit s'appliquer qu'a #addtrackback, d'ou
#addTrackback h2 {color:#40E0D0;
}
Jusque la, c'etait facile; pour la partie
Trackbacks Pas de trackbacks pour cet article
il va falloir ruser un peu ... (he ! Revenez... c'est facile aussi, en fait...)
D'abord Trackbacks: c'est un titre aussi. Mais pour pouvoir en determiner les parametres (couleur, taille, etc...), il faut proceder comme pour le titre "Commentaires", il faut utiliser
.h2Trackback {color:#40E0D0;}Dans les parentheses, vous mettez ce que vous voulez ... (color, background-image... laisser vous aller a votre imagination.)
Pour le texte Pas de trackbacks pour cet article, le code source en Html de la page nous indique qu'il est entoure par les balises
<p class="nocomm"><em> et </em></p>, un peu comme Trackbacks est defini par les balises
<h2 class="h2Trackback">...</h2>
Moralite: il faut creer la sous-classe
#main1 .nocomm et lui ajouter le selecteur em pour pouvoir changer le texte Pas de trackbacks pour cet article
#main1 .nocomm em {color: #528B8B;} Il est important d'ajouter que cette fonction gouverne egalement la phrase Pas de commentaires pour cet article: la pas moyen de les differencier... Mais bon, un peu d'uniformite ne fait pas de mal de temps en temps...
Nota Bene: ecrire
p em {color: #528B8B;} donne le meme resultat, mais va changer tout ce qui est entoure des balises <p><em> ... </em></p>, ce qui peut arriver si vous faites un copier/coller d'un article du net en apportant avec ses balises HTML (ce qui est MAL, il ne faut pas faire ca...)
Voili voilou, il ne reste plus pour le prochain article de cette trepidante serie que les liens Ajouter un commentaire/un Trackback... A suivre.
par Zoélie
publié dans :
TIP's
