"restyler" le forum !

[pirlouy]

Voilà, comme il y a quelque problème avec le design du forum, je me permets de proposer quelques modifications qui peuvent donner des idées à certains, ou faire vomir les autres personnes.

Bref, voilà ce que j'utilise pour le forum, afin de notamment ne jamais avoir de problèmes de scroll horizontal, que ce soit avec les images trop grandes, ou les lignes trop longues...

Code : Tout sélectionner

@namespace url(http://www.w3.org/1999/xhtml);


/* modification de la page contenant les posts */
@-moz-document url-prefix(http://www.geckozone.org/forum/) {

/* limitation en largeur */
.forumline   {max-width: 55em !important; } 
.postbody { max-width: 35em !important; } 
.row1 , .row2  {max-width: 35em !important; } 


/* limitation en largeur des citations et du code */
.quote { width: 105% !important;
         max-width: 43em !important; 
         overflow-x:auto !important; }
.quote IMG {max-width: 40em !important;}
.code {max-width: 39em !important; } 

/* largeur de la partie "profil" */
.row1Poster, .row2Poster { min-width: 15em !important; }

/* pseudo du posteur */
.name { font-size: 1.2em !important;
        margin-left: 30px !important; }

/* détails du profil */
.row1Poster .postdetails,.row2Poster .postdetails { color: #999999 !important; }

/* "Posté le" */
.row1 .postdetails, .row2 .postdetails {color: #008855 !important; }

/* contenu du post */
.postbody { /* */ font-family: Tahoma !important ;/**/
            font-size: 1.1em !important ;
            text-align: justify !important; }

/* "machin a écrit" */
.postbody .genmed { color: #003388 !important;
    font-size: 0.8em !important ; }

/* réduire la police des citations */
.quote { font-size: 0.8em !important ; }

/* signatures */

/* couleur + taille */
.genmed { color: #999999 !important;
          font-size: 0.80em !important ;
text-align: right !important;
 }
.genmed A { color: #99aaff !important; }
.genmed A:hover { color: #0055ff !important; }
/* ne pas afficher les images des signatures */
td.genmed img { display: none !important; }

/* user-agent */
.genmed .postdetails { font-size: 0.85em !important ;
                       color: #008888 !important;  }

/* phpBB - Bloquer le titre de l'article en haut de la page */ 
/* à désactiver en cas de problème de scroll */
.maintitle A { position: fixed !important; 
               top: 50px !important;
               right: 0px !important ;
               text-align: right !important ;
               background-color: #003355 !important;
               color: #ff9900 !important;
               opacity: 0.80 !important; }
.maintitle A:hover {color: #ffff00!important;}

.topictitle { font-size: 0.85em !important;
             /* * font-weight: normal !important; /* */
              font-family: tahoma !important; }

}


/* obligé de rajouter cette section afin de ne
   pas avoir le listing des topics trop petit */
@-moz-document url-prefix(http://www.geckozone.org/forum/) {
    body { max-width: 69em !important; }
}/* */

...... tout en espérant bien sûr que nos très chers administrateurs nous tiendront rapidement au courant d'une évolution concernant phpBB 3 qui permettrait un meilleur confort d'utilisation...

Edit: style complet mis à jour...

[Benoit]

J'aurais bien intégré certaines parties dans la feuille de style du forum mais tu as presque tout indiqué en px, donc ça va juste être adapté à ta résolution

[pirlouy]

C'est volontaire !
Regarde bien, c'est le max-width que j'ai mis en px, afin que la lecture des topics ne soit pas trop difficile (lignes trop longues).

Normalement, tu peux utiliser ça sans crainte:

Code : Tout sélectionner

/* modification de la page contenant les posts */
@-moz-document url-prefix(http://www.geckozone.org/forum/viewtopic),
               url-prefix(http://www.geckozone.org/forum/posting) {

/* limitation en largeur */
.forumline   {max-width: 700px !important; } 
.postbody { max-width: 485px !important; }
.row1 , .row2  {max-width: 485px !important; } 


/* limitation en largeur des citations et du code */
.quote { /* width: 103% !important; */
         max-width: 480px !important;
         overflow:auto !important; }
.quote IMG {max-width: 450px !important;}
.code {max-width: 490px !important; }

}

/* obligé de rajouter cette section afin de ne
   pas avoir le listing des topics trop petit */
@-moz-document url-prefix(http://www.geckozone.org/forum/) {
    body { max-width: 860px !important; }
    .maintitle A { font-size: 0.85em !important; }
}

Le problème c'est qu'au début, on ne s'y fait pas, parce qu'on a l'impression de perdre plein de place sur le côté, surtout si on utilise un écran Widescreen. Pourtant, c'est prouvé, afin de faciliter la lecture, les lignes ne doivent pas être trop longues, sinon l'œil se fatigue plus vite...

Lors du passage à phpBB 3, il faudra en profiter pour utiliser une barre latérale plutôt que l'espace du haut, afin de mieux remplir la page. Je proposerais bien de mettre cette sidebar en "fixed", mais je ne suis pas sûr que ça soit une bonne idée pour Firefox 3 !

[teoli2003]

Je proposerais bien de mettre cette sidebar en "fixed", mais je ne suis pas sûr que ça soit une bonne idée pour Firefox 3 !

Ça ne dérangerait pas tout le monde

OK, je

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9) Gecko/2008052906 Firefox/3.0

[Benoit]

C'est volontaire !
Regarde bien, c'est le max-width que j'ai mis en px, afin que la lecture des topics ne soit pas trop difficile (lignes trop longues).

Pas d'accord, tu mélanges deux concepts : longueur des lignes et taille en pixels. Si tu changes la résolution des polices de l'écran (par exemple en grandes polices, 125dpi) les lignes vont être coupées plus tôt et il y aura encore plus d'espace vide. Alors qu'à priori si tu as agrandi tes polices c'est parce que tu as plus d'espace et que peux te le permettre.

Les bonnes unités pour définir une taille maximum de ligne ce sont les em et les ex, qui se basent sur les tailles de police.

[pirlouy]

Punaise, j'avais pas pensé à ça !

Et là ?

Code : Tout sélectionner

/* modification de la page contenant les posts */
@-moz-document url-prefix(http://www.geckozone.org/forum/viewtopic),
               url-prefix(http://www.geckozone.org/forum/posting) { 

/* limitation en largeur */
.forumline   {max-width: 55em !important; } 
.postbody { max-width: 35em !important; } 
.row1 , .row2  {max-width: 35em !important; } 


/* limitation en largeur des citations et du code */
.quote {  /* width: 105% !important; */
         max-width: 43em !important; 
         overflow:auto !important; }
.quote IMG {max-width: 40em !important;}
.code {max-width: 39em !important; }

/* réduire la police des citations */
.quote { font-size: 0.8em !important ; }

}

/* obligé de rajouter cette section afin de ne
   pas avoir le listing des topics trop petit */
@-moz-document url-prefix(http://www.geckozone.org/forum/) {
    body { max-width: 69em !important; }
    .maintitle A { font-size: 0.85em !important; }
}

À noter qu'il faudrait virer le code pour les images en citation; parce que non seulement il ne marche pas, en plus il dégrade la lisibilité, et encore en plus, avec ce que je propose, il n'a plus d'utilité.

[pirlouy]

Personne ne veut tester pour voir (stylish ou userContent.css) siouplè ?


Juste pour essai:

sdfghil ilqsdrlqsruh srluhlr uh ruhsrl: r

dmiogjsdmoij sdromijsmdij sdmgjsdmg jspmù sdgigjmù jimùj s

Code : Tout sélectionner

grosblocdetextegrosblocdetextegrosblocdetextegrosblocdetextegrosblocdetextegrosblocdetextegrosblocdetextegrosblocdetexte

Code : Tout sélectionner

grosblocdetextegrosblocdetextegrosblocdetextegrosblocdetextegrosblocdetextegrosblocdetextegrosblocdetextegrosblocdetexte

[jpj]

Vi-gnetttte !!!!!!!!! boudiou Il y a encore des gens en 1280 (et même moins).

[pirlouy]

Comment ça "vignette" ?
Avec mon style, je laisse l'image s'afficher en grand, mais le texte conserve bien la bonne mise en forme !

[Omnisilver]

Il veut dire : met ton image en vignette cliquable plutôt que directement en taille réelle.

Là par exemple je suis sur le petit portable du boulot et ton image me fait scroller sur la droite, elle décale toute la page

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[pirlouy]

Mais c'est volontaire, afin que vous testiez mon style et que vous puissiez vérifier qu'il fait du bien !

[jpj]

Ben je viens de tester ... sur un profil fait pour.


Soit courageux :

[Lien mort]

[pirlouy]

Mais c'est volontaire !

Je laisse l'image s'afficher en grand, mais le texte lui, tu remarqueras qu'il va bien à la ligne, et qu'il ne t'oblige pas à scroller horizontalement.

Ce que j'ai déjà testé, c'est mettre un max-width à l'image afin qu'elle rentre dans la page, et l'afficher en grand lorsqu'on met le curseur dessus, mais le problème c'est qu'on ne pourrait pas scroller horizontalement (dans le cas où l'image dépasse la largeur du navigateur, ce qui est le cas ici)...

[pirlouy]

Si vous ne comprenez pas ce que je dis, essayez de rajouter ça:

Code : Tout sélectionner

.postbody IMG {max-width: 48em !important; }
.postbody IMG:hover {max-width: none !important; }

Et vous verrez que même si ça paraît bien au premier abord, ça ne va pas...

[Mori]

salut,

moi (et mes mules) qui m'en branle grave des css et des stylish de mes bollocks, qu'est-ce que je dois tester ? faut le mettre où ce code de romances nerveuses ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686 (x86_64); fr; rv:1.8.1.14) Gecko/20080404 Firefox