Dotclear

Vous n'êtes pas identifié(e).

Annonce

13 février 2024 Sortie de Dotclear 2.29

#1 2016-05-25 20:27:02

Le Yéti
Membre
Lieu : Séné 56
Inscription : 2006-01-17
Site Web

modification template post

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

#2 2016-05-26 01:02:18

i_love_dc
Membre
Inscription : 2007-07-13

Re : modification template post

Le Yéti a écrit :

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

#3 2016-05-26 06:00:38

Le Yéti
Membre
Lieu : Séné 56
Inscription : 2006-01-17
Site Web

Re : modification template post

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

#4 2016-05-26 06:14:43

pierrevg
Membre
Inscription : 2005-04-13
Site Web

Re : modification template post

Il te faut éditer post.html.

Hors ligne

#5 2016-05-26 08:22:36

i_love_dc
Membre
Inscription : 2007-07-13

Re : modification template post

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

#6 2016-05-26 09:31:06

Le Yéti
Membre
Lieu : Séné 56
Inscription : 2006-01-17
Site Web

Re : modification template post

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

#7 2016-05-26 10:12:38

i_love_dc
Membre
Inscription : 2007-07-13

Re : modification template post

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

#8 2016-05-26 10:36:12

Le Yéti
Membre
Lieu : Séné 56
Inscription : 2006-01-17
Site Web

Re : modification template post

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

#9 2016-05-26 10:37:05

pierrevg
Membre
Inscription : 2005-04-13
Site Web

Re : modification template post

Hors ligne

#10 2016-05-26 11:29:37

i_love_dc
Membre
Inscription : 2007-07-13

Re : modification template post

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

#11 2016-05-26 12:01:21

pierrevg
Membre
Inscription : 2005-04-13
Site Web

Re : modification template post

i_love_dc a écrit :

Et tout devrait rentrer dans l'ordre, c'est a dire même résultat que maintenant, mais tout propre et sans erreurs.

Sauf que la bannière ne sera plus cliquable avec ton code...

Hors ligne

#12 2016-05-26 12:19:58

i_love_dc
Membre
Inscription : 2007-07-13

Re : modification template post

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

#13 2016-05-26 14:31:42

Le Yéti
Membre
Lieu : Séné 56
Inscription : 2006-01-17
Site Web

Re : modification template post

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

#14 2016-05-26 14:59:36

i_love_dc
Membre
Inscription : 2007-07-13

Re : modification template post

Le Yéti a écrit :

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

#15 2016-05-26 15:24:08

Le Yéti
Membre
Lieu : Séné 56
Inscription : 2006-01-17
Site Web

Re : modification template post

Parfait jusqu'au bout, i_love_dc ! Mon blog est désormais bien calé. Merci infiniment.

Hors ligne

Vous n'êtes pas identifié(e).

Pied de page des forums

Sites map