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

[photoclicMilouzien]

• 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.



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:



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

Un grand merci pour votre aide.

[Milouze14Fondateur]

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_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
            {NAV_CAT_DESC}
        </p>
 </div>

Recherches ce premier commentaire (ligne 108 environ)

Code:

<!-- BEGIN topicpagination -->

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_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</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.

[photoclicMilouzien]

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":

[Milouze14Fondateur]

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%;
}

[photoclicMilouzien]

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.

[Milouze14Fondateur]

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>



[Milouze14Fondateur]

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">
          <!-- BEGIN switch_user_authpost -->

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_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</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?:

[photoclicMilouzien]

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  

Code:



      <div class="topic-actions">
          <div class="buttons">
              <!-- BEGIN switch_user_authpost -->

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 .

[Milouze14Fondateur]

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!!!

[photoclicMilouzien]

Merci Philippe, j'y suis presque.

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

[Milouze14Fondateur]

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é.

[Milouze14Fondateur]

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

[photoclicMilouzien]

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  *****&nbsp; <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à:





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

[Milouze14Fondateur]

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.

[photoclicMilouzien]

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.

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?

[Milouze14Fondateur]

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

[photoclicMilouzien]

C'est tout bon Philippe, j'avais mis 2 virgules

[photoclicMilouzien]

Il me restera à voir ce pb de décalage d'image.

Je passe en résolu Philippe et un énorme merci l'ami

Va falloir que je trouve d'autres idées pour occuper le confinement.

[photoclicMilouzien]

Ah j'ai compris pour le décalage de l'image, cela dépent de la longueur de ce qu'il il a avant le titre de la catégorie etc.

[Milouze14Fondateur]

De rien Serge,

Va falloir que je trouve d'autres idées pour occuper le confinement.

Bonne idée .

Ah j'ai compris pour le décalage de l'image, cela dépent de la longueur de ce qu'il il a avant le titre de la catégorie etc.

Oki

Hello


Sujet résolu et déplacé dans les BESTOF

A bientôt pour une prochaine demande

@photoclic

Testes en mettant une position relative à cet ID:

Code:

#M14_ariane