Zephir Pownce !
Trolls récents
Fresque de Tags
Psychanalyse
Cette aprem' je me suis pris à fouiller dans les fichiers de thèmes, la feuille de style CSS pour être précis.
Comme j'ai bien galéré, je vous mets les quelques modifs que j'ai effectué. Heureusement que la dcTeam m'a aidé 
Tout d'abord, je voulais mettre un effet d'ombre sur mes images.
J'avais bien trouvé une méthode mais elle était assez fastidieuse à mettre en place étant donné qu'il fallait mettre pas moins de 5 blocs div pour faire l'effet.
Finalement, j'ai suivi une méthode beaucoup plus simple, certes qui offre de moins résultats.
Il faut simplement rajouter une règle dans la feuille de style de votre thème. À mettre dans la section "Post content".
.post-content img, .post-excerpt img {
padding: 0.2em;
border-top: 1px solid #CCCCCC;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-left: 1px solid #CCCCCC;
margin: 5px;
}
.post-content img parce que ça concerne les images présentes dans le corps du billet; .post-excerpt img parce que ça concerne aussi les photos présentes dans l'extrait du billet.padding: 0.2em;
border-top: 1px solid #CCCCCC;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-left: 1px solid #CCCCCC;
Euh... tout ça j'en sais rien. Ca renseigne sur les bordures et les marges internes avec les dimensions et let couleurs.
C'est avec ces quelques lignes qu'on arrive à simuler l'effet d'ombre.
margin: 5px; pour mettre une marge externe autour de l'image insérée. Ca permet d'aérer la zone autour de l'image.Utile quand je positionne des images en
float: left comme dans le billet sur Nova Tunes 1.5
Le problème c'est que ça touche toutes les images insérées dans un billet, donc aussi les smileys.
Par chance, le créateur du plugin avait prévu d'associer une classe avec les smiley. Il a donc simplement fallu renseigner cette classe dans la CSS en indiquant qu'il ne fallait pas d'encadrement de ces images :
.post-content img.smiley, .post-excerpt img.smiley {
border: none;
padding: 0;
margin: 0;
}
Ensuite, je voulais passer tout le texte en justifier et non aligné à gauche comme avant.
Je me voyais mal retaper tous les posts et j'avais la flegme de mettre un align="justify" chaque fois que je crée un nouveau paragraphe.
Retour dans la feuille de style pour rajouter text-align: justify; à la règle;
.post-content, .post-excerpt {
padding: 4px 0 0 0;
line-height: 1.5em;
font-size: 1.2em;
text-align: justify;
}
Et ça a aussi l'avantage de conserver la mise en forme interne. Cette dernière prévaut sur la feuille de style externe. Si je mets en center un paragraphe ou une image directement dans l'édition, il/elle sera centré(e) et non justifié(e).
Enfin, je voulais retrouver sur le blog les alinéas en début de chaque paragraphe.
Ici, deux solutions; soit on indique la "taille" de l'alinéa par une valeur fixe en px, soit de manière variable en % de la longueur de la ligne en question.
Pour ma part, j'ai choisi la première solution. Je rajoute donc text-indent: 30px; à la règle concernant les paragraphes.
.post-content p, .post-excerpt p {
padding: 4px 0;
text-indent: 30px;
}
Le problème c'est que les paragraphes, on les retrouve de partout et ils peuvent être associés à d'autres balises.
S'il est inutile de mettre un paragraphe dans un texte en pre, Dotclear rajoute une balise p quand on fait une citation en bloc blockquote.
Je pourrais également en mettre une à l'intérieur de code par exemple.
Or, je veux que les blocs de code restent aligné à gauche, sans alinéa; de même pour les blocs de citations. Il faut donc que j'assigne à ces balises une nouvelle règle.
.post-content blockquote p, .post-excerpt blockquote p {text-indent: 0px; }
.post-content p code, .post-excerpt p code {text-indent: 0px;}
Avec cela, j'ai mes paragraphes correctement syntaxés et le reste va aussi Le petit plus, c'est que ça me force à mieux utiliser les balises
p et br 
