ADAPTATION : Style phpBB 3.0.x en style phpBB 3.1.x - FTH_Tropic

[FranckTH]

Archive mise à jour concernant les correctifs sur les fichiers CSS merci à toi raph pour cette remontée d'information

Edit: je lis en même temps que tu me réponds

[Raphaël]

Oui relis bien, j’ai mis en gras et grand les 6 problèmes cités.

[FranckTH]

C'est laborieux ce soir... aurais je quelques faiblesses ou un manque de vitamines, en tout cas merci pour cette aide raph

j'ai remis l'archive à jour et corrigé les nombreux soucis de couleurs sur divers éléments dans le CSS

[Raphaël]

Salut,

dans la modification présentée dans le viewtopic.php?p=1013#p1013, il y a une erreur bénigne :

1. OUVRIR : ./styles/FTH_Tropic/template/ucp_pm_viewmessage.html
2. TROUVER : <!-- IF S_ONLINE --><dd><strong>{L_ONLINE}/{L_OFFLINE}:</strong> {ONLINE_IMG}</dd><!-- ENDIF -->
3. REMPLACER : <!-- IF S_ONLINE --><dd><strong>{L_ONLINE}/{L_OFFLINE}{L_COLON}</strong> {ONLINE_IMG}</dd><!-- ENDIF -->
4. Commentaire : Lorsque l’on doit utiliser le deux-points dans les fichiers template du style, en tant que caractère de typographie, il doit toujours être remplacé par {L_COLON}, car cette balise remplacera par  : ou : selon la langue utilisée.

EDIT : une autre du même ordre :

1. OUVRIR : ./styles/FTH_Tropic/template/viewtopic_body.html
2. TROUVER :

   Code : Tout sélectionner

   <!-- IF postrow.ONLINE_IMG and not postrow.S_IGNORE_POST --><dd class="profile-offonline"><strong>{L_ONLINE}/{L_OFFLINE}:</strong> {postrow.ONLINE_IMG}</dd><!-- ENDIF -->
3. REMPLACER :

   Code : Tout sélectionner

   <!-- IF postrow.ONLINE_IMG and not postrow.S_IGNORE_POST --><dd class="profile-offonline"><strong>{L_ONLINE}/{L_OFFLINE}{L_COLON}</strong> {postrow.ONLINE_IMG}</dd><!-- ENDIF -->

Une autre différente :

1. OUVRIR : ./styles/FTH_Tropic/template/overall_footer.html
2. TROUVER :

   Code : Tout sélectionner

         <br /><a href="http://www.graphogames.com" title="Graphogames" onclick="window.open(this.href); return false">FTH_Tropic</a> by FranckTH
      <!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
      <!-- EVENT overall_footer_copyright_append -->
      <!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
      <!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
      <br /><div id="gototop2"><a href="#logo" class="gototop" title="{L_BACK_TO_TOP}"></a></div>
      <div class="logofth"></div>
   </div>
3. REMPLACER :

   Code : Tout sélectionner

         <br /><a href="http://www.graphogames.com" title="Graphogames" onclick="window.open(this.href); return false">FTH_Tropic</a> by FranckTH
      <!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
      <!-- EVENT overall_footer_copyright_append -->
      <!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
      <!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
      <br /><div id="gototop2"><a href="#logo" class="gototop" title="{L_BACK_TO_TOP}"></a></div>
      <div class="logofth"></div>
   </div>
4. Commentaire : Préférer la touche TAB pour marquer des espaces dans les fichiers en lieu et place de la touche espace.

[Raphaël]

Un autre, dans la vue des sujet (viewtopic), les boutons de rédaction, modération, etc..

Ils n’ont pas la même couleur entre eux, le bouton « Modifier le message » me semble bon : de couleur vert par défaut et devenant rouge si l’on survole ce dernier au moyen de la souris.

Mais il n’en est pas de même pour les boutons suivants : « Supprimer le message », « Rapporter le message » et « Accepter cette réponse » (disponible via l’extension disponible sur le viewtopic.php?f=11&t=95). Mais pour ce dernier en forme de coche ou encoche selon comment on appelle cela, je pense qu’il s’agit d’un bouton provenant de prosilver.

[Raphaël]

Je viens de télécharger ton archive mise à jour, et je constate que le problème disponible sur le viewtopic.php?p=1061#p1061 à propos du mini-profil dans le viewtopic n’est pas résolu aussi je propose ce changment :

1. OUVRIR : ./styles/FTH_Tropic/theme/colours.css
2. TROUVER :

   Code : Tout sélectionner

   /* Poster profile block
----------------------------------------*/
.postprofile {
   color: #666666;
   border-color: #FFFFFF;
}
3. REMPLACER :

   Code : Tout sélectionner

   /* Poster profile block
----------------------------------------*/
.postprofile {
   color: #666666;
   border-color: #FFFFFF;
   padding-top: 10px; */;
   padding-right: 10px; */;
   padding-bottom: 10px; */;
}
4. Commentaire : Cela permet d’aérer le mini-profil dans le viewtopic.

[FranckTH]

Modifications apportés et archive mise à jour dans le premier message. En revanche l'état des boutons "rapporter" "éditer" etc... est logique si l'on compare aux boutons du prosilver ou seul trois boutons n'ont pas la même couleur selon leur importance

[FranckTH]

j'ai refait complètement l'image, à voir si ça rend mieux...

icons_button.png (7.99 Kio) Vu 35482 fois

[Raphaël]

Salut,

dans le fichier overall_footer.html, trouver :

Code : Tout sélectionner

      <br /><a href="http://www.graphogames.com" title="Graphogames" onclick="window.open(this.href); return false">FTH_Tropic</a> by FranckTH
      <!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
      <!-- EVENT overall_footer_copyright_append -->
      <!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
      <!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
      <br /><div id="gototop2"><a href="#logo" class="gototop" title="{L_BACK_TO_TOP}"></a></div>
      <div class="logofth"></div>
   </div>

Remplacer par :

Code : Tout sélectionner

      <br /><a href="http://www.graphogames.com" title="Graphogames" onclick="window.open(this.href); return false">FTH_Tropic</a> by FranckTH
      <!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
      <!-- EVENT overall_footer_copyright_append -->
      <!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
      <!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
      <br /><div id="gototop2"><a href="#logo" class="gototop" title="{L_BACK_TO_TOP}"></a></div>
      <div class="logofth"></div>
   </div>

C’est pour l’histoire des espaces.

Dans le fichier index_body.html, trouver :

Code : Tout sélectionner

<br />
<div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dt>{SITENAME}</dt>
              <dd></dd>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">
         <li class="row bg2" style="padding-left: 5px">

Remplacer par :

Code : Tout sélectionner

<br />
   <div class="forabg">
      <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dt>{SITENAME}</dt>
                  <dd></dd>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">
            <li class="row bg2" style="padding-left: 5px">

Trouver :

Code : Tout sélectionner

</div> <!-- end post box content -->
                </div> <!-- end post box border right -->
            </div> <!-- end post box border left -->
        </div> <!-- end post box border block -->
        <div class="contenu_base_bloc_bg">
            <div class="contenu_base-gauche_bg"></div>
            <div class="contenu_base-centre_bg"></div>
            <div class="contenu_base-droit_bg"></div>
        </div> <!-- end post box base block -->

Remplacer :

Code : Tout sélectionner

</div><!-- end post box content -->
</div><!-- end post box border right -->
</div><!-- end post box border left -->
</div><!-- end post box border block -->
   <div class="contenu_base_bloc_bg">
      <div class="contenu_base-gauche_bg"></div>
      <div class="contenu_base-centre_bg"></div>
      <div class="contenu_base-droit_bg"></div>
   </div> <!-- end post box base block -->

EDIT : cela ne fonctionne pas de copier le code pour récupérer les tabulations, il faut le faire à la main, tu peux copier le texte pour la mis en forme que j’ai modifiée, mais après remplacer les espaces par des tabulations manuellement.

Dans la page de rédaction d’un nouveau message, la zone située tout autour du cadre de saisie du texte, est bleu/grise alors qu’elle devrait être marron, c’est la page ./posting.php.

[Raphaël]

Ta nouvelle image d’icons_button est parfaite, bravo !

Bon je pense, que pour ce gris bleu que je soulève un peu partout, il faut reprendre tout ça de manière plus harmonieuse et surtout scruter le moindre endroit.

EDIT : ok je comprends, c’est ton répertoire ./FTH_Tropic/theme/images/bg/ qui rend ce gris partout. Pourquoi ne pas lui donner une teinte plus couleur sable claire pour le différencier de ton marron, comme la couleur du sable dans ton background ou ton header ?

Aussi, si tu regardes sur prosilver, lorsque tu survoles le cadre d’un forum ou d’un sujet dans la liste des forums ou des sujets la couleur change, chose par évidente sur ton style.

Dans toute les revues des messages, et la vue des messages, sur prosilver il a été établie d’alterner la couleur une fois sur deux. Cela semble logique que l’on retrouve cela aussi, cela rend plus lisible pour le lecteur.

EDIT : les bulles des messages n’apparaissent pas dans les revues de messages.

[Raphaël]

Pour l’harmonisation des couleurs, tu as une bonne documentation sur phpbb-fr.com. Comme le site est en maintenance, il y a un cache de Google qui permet tout de même d’y accéder : http://webcache.googleusercontent.com/s ... -view.html.

[FranckTH]

du gris bleu ?? je dois pas avoir la même vue lol perso non le fond est mieux en blanc cassé que couleur sable, ce qui ferait trop sable à mon goût...

Edit: là je suis sur prosilver, et franchement le changement de couleur n'est pas vraiment visible du tout...

Redit: je fais un essai avec un fond sable et je montre sur le forum de démo

[Raphaël]

Bon, je me suis mal fait comprendre, je vais réactiver le chat sur l’index du forum comme ça on pourra parler plus simplement.

[Testeur]

[Raphaël]

bug barre verte claire lorsque l’on rafraichi la page su l’index, dans la vue des sujets et dans le panneau de moderation.

screen.png (86.94 Kio) Vu 35433 fois