Vous n'êtes pas identifié(e).
13 février 2024 Sortie de Dotclear 2.29
Pages : 1
Bonjour à tous,
J'ai effectué une mise à jour complète vers dc 2.9.1. Tout marche bien.
Mon seul problème : la mise en page de mes billets (post)
Je voudrais apporter les deux modifications suivantes au template concerné (post.html ?) avec themeEditor :
1/ supprimer l'en-tête orientant vers les billets précédents et suivants, juste au-dessus du titre du billet ;
2/ supprimer la partie "lien permanent" (avec le tiret qui précède), juste après la date et l'heure de publication, entre le titre et le corps du billet.
De bonnes âmes pour m'indiquer la marche à suivre ?
Mon blog : http://yetiblog.org/
Un billet pour l'exemple : http://yetiblog.org/index.php?post/1807
Mon thème : Giacomo (where are you, Kozlika ?)
Hors ligne
1/ supprimer l'en-tête orientant vers les billets précédents et suivants, juste au-dessus du titre du billet ;
2/ supprimer la partie "lien permanent" (avec le tiret qui précède), juste après la date et l'heure de publication, entre le titre et le corps du billet.
1 - créer une règle .css
#navlinks {
display: none;
}
à ajouter dans le .css de ton thème ou bien via morecss (plugin dotaddict)
2 - chercher dans le .css du thème :
.post-info
y ajouter en fin
display:none;
ce qui devrait donner
.post-info {
background: transparent url("images/folder.gif") no-repeat scroll left center;
color: #888;
margin-bottom: 0;
margin-top: 0.5em;
padding-left: 20px;
display: none;
}
Après avoir vu le résultat, si ca ne te convient pas, pour le point 2, on verra une autre façon de faire en allant directement dans le code du "post.html"
Hors ligne
Merci pour tes infos.
Très bien pour la règle #navlinks
Par contre, dans le .post-info, je voudrais garder : le nom de l'auteur, la date et l'heure, l'affichage de la catégorie, mais supprimer la mention "- lien permanent"
En ce moment, ça donne ça :
Par Pierrick Tillet le 25 mai 2016, 08:42 - Le monde du Yéti - Lien permanent
Et je voudrais que ça donne ça :
Par Pierrick Tillet le 25 mai 2016, 08:42 - Le monde du Yéti
Hors ligne
Comme dit pierrevg, il te faut éditer le "post.html".
Rechercher (control+f)
- <a href="{{tpl:EntryURL}}">{{tpl:lang Permalink}}</a>
(ne pas oublier le tiret devant le <a href....) et commenter/désactiver la ligne en question.
Commenter c'est désactiver le code et ceci ce fait avec <!-- la/les lignes de codes à désactiver -->.
En gros obtenir ceci.
<p class="post-info">{{tpl:lang By}} {{tpl:EntryAuthorLink}}
{{tpl:lang on}} {{tpl:EntryDate}}, {{tpl:EntryTime}}
<tpl:EntryIf has_category="1">
- <a href="{{tpl:EntryCategoryURL}}">{{tpl:EntryCategory encode_html="1"}}</a>
</tpl:EntryIf>
<!-- - <a href="{{tpl:EntryURL}}">{{tpl:lang Permalink}}</a> -->
</p>
Hors ligne
Merci beaucoup, i_love_dc. Super efficace. Tout marche comme je veux.
Petite question de curiosité subsidiaire (n'a rien à voir avec mon problème) : dans les default-templates, quelle est la différence entre le fichier currywurst et le fichier mustek ? NB : j'ai vu que sur mon blog, c'est le fichier mustek qui est opérant.
Hors ligne
Je constate que tu à modifié ton "_top.html" et enlevé le "titre du blog" (écrit en texte) pour le remplacer par une image.
Ta façon de faire n'est pas la bonne puisque cela fait "couinner" le validateur voir le message en 8.
La bonne méthode est de remplacer ton actuel :
<h1><span><a href="{{tpl:BlogURL}}"><img src="/themes/giacomo2/images/logo.jpg" alt=""></a></span></h1>
D'y remettre le code :
<h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1>
Ensuite, modifier la règle .css #top a comme suit (c'est un exemple que tu adaptera à tes soins) :
#top a {
background: url(images/logo.jpg) no-repeat 0 0;
font-weight: normal;
text-decoration: none;
text-indent: -9999px;
}
Voila, grosso-modo :
background: url(images/logo.jpg) no-repeat 0 0;
Fera que le fond de l'emplacement du titre deviendra ton image (celle actuelle en guise de titre)
text-indent: -9999px;
Va faire dégager le titre (texte) hors de l’écran.
Du coup rien ne change par rapport a ton rendu actuel, mais ton blog ne "couine" plus :-)
PS- Si par hasard l'image ne s'affiche pas entièrement tu peut ajouter les règles .css pour la hauteur et largeur de l'image.
Comme ton image actuelle fait "226 × 65", ça donnerait par exemple :
width:226px;
height:65px;
Et donc le tout devrait donner quelque chose comme :
#top a {
background: url(images/logo.jpg) no-repeat 0 0;
font-weight: normal;
text-decoration: none;
width:226px;
height:65px;
text-indent: -9999px;
}
Tout ça reste à adapter évidement hein ;-)
Il y a également un autre soucis..(plus gros celui-ci) voir le validateur message en 2 - 3 - 6 - 7 - 8.
Les balises "<head> </head> et <body></body> ce répètes 2 fois.
Je pense qu'il y en a qu'il ne devraient pas y être dans ton "_top.html"
Tu peut nous mettre le contenu en copier-coller stp ?
.
Dernière modification par i_love_dc (2016-05-26 12:11:19)
Hors ligne
Voici le contenu de mon template "_top.html" :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<LINK REL="SHORTCUT ICON" HREF="http://www.yetiblog.org/public/yeti_favicon.png">
</head>
<body>
<div id="top">
<h1><span><a href="{{tpl:BlogURL}}"><img alt="{{tpl:BlogTitle}}" src="{{tpl:BlogThemeURL}}/images/logo.jpg"></a></span></h1>
<p class="blogdesc">Le vieux monde est mort, vive le monde d'après !</p>
</div>
</body>
</html>
Attention : mon fichier modifié "_top.html" se trouve dans le dossier "tpl" de mon thème giacomo et non dans les default-templates (où figure le fichier "_top.html" non modifié). Peut-être pas très orthodoxe ?!
Hors ligne
Déjà abordé dans https://forum.dotclear.org/viewtopic.php?id=48800
Hors ligne
Comme le dit pierrevg ici en #13
Remplace le contenu de ton "_top.html"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<LINK REL="SHORTCUT ICON" HREF="http://www.yetiblog.org/public/yeti_favicon.png">
</head>
<body>
<div id="top">
<h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1>
<p class="blogdesc">Le vieux monde est mort, vive le monde d'après !</p>
</div>
</body>
</html>
par ceci :
<div id="top" role="banner">
<h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1></a></span></h1>
<p class="blogdesc">{{tpl:BlogDescription}}</p>
<!-- # --BEHAVIOR-- publicTopAfterContent -->
{{tpl:SysBehavior behavior="publicTopAfterContent"}}
</div>
Applique les modifications que je te donne ci-dessus en #7
C'est a dire :
Ensuite, modifier la règle .css #top a comme suit (c'est un exemple que tu adaptera à tes soins) :
#top a {
background: url(images/logo.jpg) no-repeat 0 0;
font-weight: normal;
text-decoration: none;
text-indent: -9999px;
}
Voila, grosso-modo :
background: url(images/logo.jpg) no-repeat 0 0;
Fera que le fond de l'emplacement du titre deviendra ton image (celle actuelle en guise de titre)
text-indent: -9999px;
Va faire dégager le titre (texte) hors de l’écran.
Du coup rien ne change par rapport a ton rendu actuel, mais ton blog ne "couine" plus :-)
PS- Si par hasard l'image ne s'affiche pas entièrement tu peut ajouter les règles .css pour la hauteur et largeur de l'image.
Comme ton image actuelle fait "226 × 65", ça donnerait par exemple :
width:226px;
height:65px;
Et donc le tout devrait donner quelque chose comme :
#top a {
background: url(images/logo.jpg) no-repeat 0 0;
font-weight: normal;
text-decoration: none;
width:226px;
height:65px;
text-indent: -9999px;
}
Tout ça reste à adapter évidement hein ;-)
Et tout devrait rentrer dans l'ordre, c'est a dire même résultat que maintenant, mais tout propre et sans erreurs.
.
Dernière modification par i_love_dc (2016-05-26 12:11:41)
Hors ligne
Oups pierre, bien vue!! j'avais pas testé le code autant pour moi....désolé
Pour résumé et comme le dit pierrevg ...
Efface le contenu de ton "_top.html" et remplace le par :
<div id="top" role="banner">
<h1><span><a href="{{tpl:BlogURL}}"><img alt="{{tpl:BlogName encode_html="1"}}" src="{{tpl:BlogThemeURL}}/images/logo.jpg"></a></span></h1>
<p class="blogdesc">{{tpl:BlogDescription}}</p>
<!-- # --BEHAVIOR-- publicTopAfterContent -->
{{tpl:SysBehavior behavior="publicTopAfterContent"}}
</div>
Ne prend pas la peine de faire les modifications .css ci-dessus, y a pas besoin.
Finalement, c'est tout con et bien plus simple.
PS - Ce coup-ci jai testé et ca fonctionne nickel puis c'est valide.
.
Dernière modification par i_love_dc (2016-05-26 12:50:06)
Hors ligne
1/ Modifié mon "_top.html" comme indiqué dans #12
2/ Pas modifié le .css comme conseillé par i_love_dc, toujours dans son #12
Ça donne ça : http://yetiblog.org/index.php? ... c'est-à dire exactement ce que je cherchais !
Merci beaucoup à i_love_dc et à pierrevg
Une toute petite dernière question (mais vous avez peut-être déjà assez donné, je peux peut-être me débrouiller tout seul) : dans les billets, je voudrais insérer une ligne entre le top et le billet (comme sur la page d'accueil)
Hors ligne
dans les billets, je voudrais insérer une ligne entre le top et le billet (comme sur la page d'accueil)
Dans le style.css chercher ".post"
Y ajouter :
border-top: 1px solid #933522;
Si le titre semble trop proche du trait changer le :
margin: 0;
par
margin-top: 2em;
Hors ligne
Pages : 1
Vous n'êtes pas identifié(e).