[BESTOF] [PHPBB3]Hiérarchie sur sous forum et les sujets

Milouzien

Version du forum :
PHPBB3
Templates modifiés :
oui
Navigateur :
Firefox

Bonjour à tous les Milouziens,

Serait-il possible de revoir la ligne de la hiérarchie (les liens pour remonter vers les autres pages) sur les sous forums et les sujets.

Par exemple, le haut de la liste des sujets (sous forums), se présente ainsi sur mon forum.

[BESTOF] [PHPBB3]Hiérarchie sur sous forum et les sujets Captur86

Serait-il possible de revoir la ligne de la hiérarchie, en présentant cela avec un cadre et une flèche pour chaque lien. L'idée serait de présenter ces liens comme des boutons

De plus, serait-il possible d'avoir à la place du lien qui renvoie à l'accueil le texte Accueil. Actuellement c'est le titre du forum qui s'affiche.

Pour être plus précis, cela se présenterait ainsi:

[BESTOF] [PHPBB3]Hiérarchie sur sous forum et les sujets Captur85

Si cela est possible, avoir le même rendu sur les sujets.

Un grand merci pour votre aide.

Fondateur

Hello Serge,
voir le rendu sur mon fofo de tests:
https://testphpbb3.1fr1.net/f10-blabla

hum, c'est assez sympa, en fait on faire presque ce que l'on souhaite sauf pour modifier les catégories.
C'est à dire que ceci:

PHOTOCLIC - Forum photos pour passionnés, amateurs et débutants :: Les Photos du Clic :: PhotoTest

Deviendra:

Accueil > Forum photos pour passionnés, amateurs et débutants > Les Photos du Clic > PhotoTest

Les symboles ">" seront représentés par une image faite par mes soins:

https://i.servimg.com/u/f20/20/11/87/27/190.png

Cette dernière à une hauteur de 60px, il faut donc tout adapter par rapport à cette hauteur dans la css.
On ne peut pas jouer avec des formes géométriques via la css car il faut des largeur définies.
Donc une image après le lien désormais nommé:
Accueil.
Puis la catégorie.

La c.s.s commentée:

Code:: /*LES FILS D ARIANE */
#M14_ariane
{
height:60px;
margin-left:8%!important;
width:90%;
border: 2px solid #777777;

}
/*les liens du fil d ariane*/
#M14_ariane a[href="/"],#M14_ariane a[href^="/c"],#M14_ariane a[href^="/f"]
{color: #27aab8;min-width:60px;width:auto;max-width:200px;height:60px;display: inline-flex;margin:0px 5px 0px 5px !important;}

/*le fil d ariane sur la liste des sujets*/
#M14_ariane.nomargin.path.M14_ariane{line-height:60px!important;}
/*le fil d ariane sur les messages*/
#M14_ariane.pathname-box{float:none;}
#M14_ariane.pathname-box .M14_ariane{line-height:60px!important;}
/*LES BORDURES DES LIENS DU FIL D ARIANE SAUF LE DERNIER*/
#M14_ariane a[href]:not(:last-child):after
{
content='';
background-image:url(https://i.servimg.com/u/f20/20/11/87/27/238.png);
background-position: right;
background-repeat: no-repeat;
width: 21px;
height: 60px;
opacity:0.5;
}

Et voilou

......

Ben non on va intervenir dans 2 templates et modifier deux trois trucs.

Dans le template viewforum_body:
Affichage/Templates/Général/viewforum_body

Recherches ceci:

Code:: <p class="nomargin path">
<a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
{NAV_CAT_DESC}
</p>

Supprimes et remplaces par:

Code:: <p id="M14_ariane" class="nomargin path M14_ariane">
<a class="nav" href="{U_INDEX}"><span>Accueil</span></a>
{NAV_CAT_DESC}
<script type="text/javascript">$('.M14_ariane').each(function(){$(this).html($(this).html().replace(/::/g,""));});</script>
</p>
</div>

Penses a enregistrer puis à valider en cliquant respectivement sur puis

Dans le template viewtopic_body:
Affichage/Templates/Général/viewtopic_body

Attention car dans ce template, on va ôter le fil d’Ariane du bloc actuel car il est positionné a gauche par défaut (css de base).
Recherches et supprimes ceci:

Code:: <div class="pathname-box">
<p>
   <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
   
   {NAV_CAT_DESC}
   </p>
</div>

Recherches ce premier commentaire (ligne 108 environ)

Code::

Juste avant déposes ceci:

Code:: <div id="M14_ariane"class="pathname-box">
   <p class="M14_ariane">
   <a class="nav" href="{U_INDEX}"><span>Accueil</span></a>
   
   {NAV_CAT_DESC}
   <script type="text/javascript">$('.M14_ariane').each(function(){$(this).html($(this).html().replace(/::/g,""));});</script>
   </p>
   </div>

Penses a enregistrer puis à valider en cliquant respectivement sur puis

Dans les deux templates, tu as ce script:

Code:: <script type="text/javascript">$('.M14_ariane').each(function(){$(this).html($(this).html().replace(/::/g,""));});</script>

Ce dernier sert a supprimer les deux points.

De plus remplacer:

Code:: <span>{L_INDEX}</span>

Par :

Code:: <span>Accueil</span>

Et voilou mon ami.

Milouzien

Bonjour Philippe,

Vraiment trop fort. Un grand merci pour ce script et ta rapidité.

Je viens de l'installer sur les forums.

Juste un truc, serait-il possible de laisser l'image du forum comme sur mon image à gauche de la ligne et avoir le titre du forum non tronqué.
J'ai ça dans "Reportage/séries au long cours":

[BESTOF] [PHPBB3]Hiérarchie sur sous forum et les sujets Captur87

Fondateur

Je viens de ton fofo et ce style devrait fonctionner Serge:

Code:: p.nomargin.path.M14_ariane a[href^="/f"] img
{
position: absolute;
margin-left: -21%;
}

Milouzien

Super Philippe.

Juste un léger ajustement dans le css du fil d'ariane.
Pour info dans le template tu avais mis en trop.

Code:: </p>
</div>

J'essaie tout ça dans les sujets avant de passer en résolu.

Fondateur

Oups, désolé.

La fermeture de la balise div Serge.
La fermeture de la balise p doit rester:

Code:: <p id="M14_ariane" class="nomargin path M14_ariane">
<a class="nav" href="{U_INDEX}"><span>Accueil</span></a>
{NAV_CAT_DESC}
<script type="text/javascript">$('.M14_ariane').each(function(){$(this).html($(this).html().replace(/::/g,""));});</script>
</p>

Fondateur

Oups, j'ai oublié le bas de la page Serge sur les messages:

Dans le template, recherches ceci (ligne 343 environ):

Code::    <div class="topic-actions">
   <div class="buttons">

Juste avant déposes ceci:

Code:: <div id="M14_ariane"class="pathname-box">
   <p class="M14_ariane">
   <a class="nav" href="{U_INDEX}"><span>Accueil</span></a>
   
   {NAV_CAT_DESC}
   <script type="text/javascript">$('.M14_ariane').each(function(){$(this).html($(this).html().replace(/::/g,""));});</script>
   </p>
   </div>

Dis moi, est-ce normal d'avoir deux prévisualisations sur la réponse rapide?:

[BESTOF] [PHPBB3]Hiérarchie sur sous forum et les sujets 192

Milouzien

Re Phil,

J'ai été un peu long car je suis tombé dans un piège.

Dans le template, ceci y est 2 fois et j'avais mis ton code sur le premier pascontentGrrrrrr

Code:: <div class="topic-actions">
<div class="buttons">

Bon c'est corrigé.
Mais il reste en bas les liens d'origine. doit y avoir un truc à retirer aussi en bas.

J'ai aussi un souci en bas au niveau de ce qu'il y a de chaque coté de l'éditeur (avatar et miniature) faudrait que je les redescende.

Et aussi en haut, j'ai le texte "Des photos- vos photos - Encore des photos" qui est descendu.

FAut que je trouve comment replacer tout ça .

Fondateur

Ah vi décidément , j'oublie des trucs moi....

Recherches en bas de page ceci et supprimes le:

Code:: <div class="pathname-box">
<p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p>
</div>

Et aussi en haut, j'ai le texte "Des photos- vos photos - Encore des photos" qui est descendu.

Une ouverture ou fermeture d'une balise div oubliée!!!

Milouzien

Merci Philippe, j'y suis presque.

Il me reste le texte en haut. Faut que je trouve où j'ai oublié une balise div.

Fondateur

En fait, c'est la div sans class au dessus de la div ayant comme class"boutons_list".
Elle se ballade sans position Serge.

Elle a ce style:

Code:: background: #3cc2c4;
width: 95%;
padding: 10px 30px;
color: black;
text-align: center;
font-family: Verdana;
font-size: 16px;
font-weight: bold;
height: 75px;
margin-top: 60px;

Ajoutes une :

Code:: position:absolute;

Et réduit la largeur de 95% a 90% et hop le tour est joué.

Fondateur

Punaise, je ne sais pas ce que tu fais lorsque tu édites un de tes messages
mais tu coches en permanence le bouton "Sujet" pascontentGrrrrrr

Milouzien

Heureusement que tu es là pour corriger mes lacunes, et il y en a encore un paquet.

C'est bon Philippe pour la phrase du haut mal placée. C'était bien ça au niveau du style à compléter.
Mais par contre ça couvre la ligne des boutons "Voir la page facebook voir les nouveaux messages etc.
J'ai donc pour l'instant retiré son script qui est celui-ci:

Code:: //Message en haut des sujets d'une catégorie (C2- Les photos du clic, C1-Les choix du clic)
jQuery(document).ready(function(){if(jQuery('.post:eq(0) .i_icon_edit')&&jQuery('h2.topic-title img[src!=" "]:eq(0)').length&&jQuery('.pathname-box a.nav[href*="c1-"], .pathname-box a.nav[href*="c2-"]').length){jQuery('.boutons_list').before(' <div style="position:absolute;background:#3cc2c4;width: 90%;padding:10px 30px;color:black;text-align:center;font-family:Verdana;font-size:16px;font-weight: bold;height: 75px;margin-top: 30px;"><img src="https://i.servimg.com/u/f58/18/97/96/21/27365110.gif" style="vertical-align:middle;height: 65px;margin-bottom: -20px;"> ***** Des photos - <span style="color:#4267B2;font-size:18px;">Vos photos <span style="color:black;font-size:16px;"> - Encore des photos *****  <img src="https://i.servimg.com/u/f58/18/97/96/21/27365110.gif" style="vertical-align:middle;height: 65px;margin-bottom: -20px;"></span></span><br/><span style="color:#4267B2;font-size:16px;">* Postez - Commentez - Votez - Participez ... Bref, soyez fou *<br/> </span></div> ')}});

pas sur de le remettre cela soulagera un peu le fofo.

Aussi au niveau du css pour les images, j'ai ajouté pour l'image des sujets:

Code:: div#M14_ariane.pathname-box p.M14_ariane a.nav span img

Code:: ce qui donne ça:
/*Image dans LES FILS D ARIANE */
   p.nomargin.path.M14_ariane a[href^="/f"] img, div#M14_ariane.pathname-box p.M14_ariane a.nav span img
   {
   position: absolute;
   margin-left: -21%;
   margin-top: -9px;
   }

Mais faudrait en margin-left -20% pour les sujets dans phototest et voire même 19% pour les sujets de Photovote ou tutos par exemple. Bizarre.

Et pour finir, serait-il possible de déplacer le titre dans le nouveau cadre et avec la flèche derrière pour la mettre là:

[BESTOF] [PHPBB3]Hiérarchie sur sous forum et les sujets Captur88

Pas compris ce que tu dis ici:
https://www.milouze14.com/t32554-phpbb3-hierarchie-sur-sous-forum-et-les-sujets#620102

Fondateur

pas sur de le remettre cela soulagera un peu le fofo.

C'est une bonne nouvelle Serge car il est vrai que le temps d'affichage est très long..

Concernant le positionnement des images c'est un sérieux casse tête que j''arrive pas à résoudre..

Concernant le titre du sujet a insérer dans le fil d'Ariane, on peut le faire mais il faudra masquer (display:none) car tuas deux trois scripts qui reprend le lien de cette partie.

Dans le template recherche ceci:

Code:: <h1 class="page-title">
<a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
</h1>

Ajoutes un style display none à la balise h1:

Code:: <h1 class="page-title" style="display:none;">
<a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
</h1>

Ensuite déposes ceci:

Code:: <a class="nav" href="{TOPIC_URL}">{TOPIC_TITLE}</a>

après les deux variables:

Code:: {NAV_CAT_DESC}

que tu trouveras dans les deux fils d'Ariane

Puis ajoutes dans cette partie de la c.s.s ici:

Code:: /*les liens du fil d ariane*/
#M14_ariane a[href="/"],#M14_ariane a[href^="/c"],#M14_ariane a[href^="/f"]

Ceci:

Code:: ,#M14_ariane a.nav

Et voilou.

Pas compris ce que tu dis ici:
https://www.milouze14.com/t32554-phpbb3-hierarchie-sur-sous-forum-et-les-sujets#620102

Tu coches je ne sais comment le bouton sujet soit lorsque tu réponds à un sujet ou une édition, je suis obligé d'éditer pour cocher le bouton encours.

Milouzien

Hello Philippe,

Encore merci pour tout ce que tu développes.

J'ai mis tout ça en place.
Le title se positionne bien où il faut.
Par contre, les flèches ont disparu.

Peut-être oublié un truc.

Concernant celà Phil.

Citation :: Tu coches je ne sais comment le bouton sujet soit lorsque tu réponds à un sujet ou une édition, je suis obligé d'éditer pour cocher le bouton encours.

c'est bizarre car je ne coche rien.
Par contre, il m'arrive d'éditer mon dernier message pour éviter de surcharger. Et comme je te l'ai signalé je ne sais plus quand, quand j'édite il y a du code qui se met autour de mon message.
Je n'y touche pas mais complète simplement mon message.

Ce message n'est pas édité. As-tu le problème?

Fondateur

Tu as bien suivi car la css a été modifié vu le visu sur ton fofo.

Tu as bien ajouté ceci (attention virgule comprise):

Code:: ,#M14_ariane a.nav

Après ceci:

Code:: /*les liens du fil d ariane*/
#M14_ariane a[href="/"],#M14_ariane a[href^="/c"],#M14_ariane a[href^="/f"]

c'est bizarre car je ne coche rien.
Par contre, il m'arrive d'éditer mon dernier message pour éviter de surcharger. Et comme je te l'ai signalé je ne sais plus quand, quand j'édite il y a du code qui se met autour de mon message.
Je n'y touche pas mais complète simplement mon message.

Ce message n'est pas édité. As-tu le problème?

Laisses tomber Serge clin oeil