Bonjour ou bonsoir peut-être ? Ce tutoriel a pour but de vous apprendre à faire un retour à la ligne de vos sous-forums, et donc d'enlever la virgule, sans utiliser le code JS disponible dans le lien à la droite de ce message. Ici nous devrons accéder aussi aux templates mais nous utiliserons à la place du CSS. Il faut aussi savoir que les possibilités sont plus grandes que ça. En plus de masquer la virgule, vous pouvez aussi jouer de manière à aligner deux liens puis mettre deux autres en dessous et ainsi de suite.

Je vous recommande de lier ce tuto à une LS ou à une modification déjà faites des catégories, de ce fais, les sous-forums ont déjà une class propre qui les entoures, donc pas besoin de toucher au template :)

Ce que ça donne:






Le but de ce tutoriel est de pouvoir mettre les sous-forums en "ligne" donc une par ligne et ceux sans JavaScript, mais dans un premier temps, il va au préalable falloir modifier légèrement le template "Index-box" si ce n'est pas déjà fais, sinon, passez à l'étape suivante.



Pour rappeler : Panneau d'administration > Affichage > Général > Index-box
Dans le template "Index-box" il va vous falloir repérer cette ligne :

Code:

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

Une fois cela fait, il faudra y ajouter une class autour, si vous ne savez pas la marche à suivre est simple, on va ici y rajouter une balise span (Ici, je pars du principe que vous ne souhaitez pas déplacer les liens ou quoi, juste retirer les lignes, donc une balise "span" est suffisante, mais une div fera très bien l'affaire aussi.) à laquelle on rajoutera une class (on évitera l'identifiant (ID) puisque les sous-forums se répètent pour chaque forum que vous avez créer et donc la balise est répétée plusieurs fois sur la même page).

Code:

<span class="sous_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>

Vous pouvez mettre ce que vous voulez comme nom de class, dans mon cas j'ai mis "sous_forums" car comme ça on sait bien de quoi il s'agit sans se creuser la tête. Pensez ensuite à enregistrer le template et à le valider.



Maintenant qu'on a tous ce qu'il nous faut, nous allons utiliser le code CSS. Dans un premier temps je vais reprendre l'ensemble au dessus. On part du principe qu'on veut faire disparaître les virgules, donc on va leur donner une taille trop petite pour qu'elles soit affichée, la taille la plus petite étant 0. Bien évidemment, 0 étant nulle le texte ne s'affichera pas du tout, mais il sera quand même là, juste invisible.

Pensez à changer le nom de la class par le votre, sinon cela ne fonctionnera pas.

Pour rappeler : Panneau d'administration > Affichage > Couleurs > Feuille de Style CSS

Code:

.sous_forums{
font-size: 0;
}

Et voilà les virgules on disparu, mais là vous êtes en droit de crier "Au scandale !". Ce serait légitime puisqu'il n'y a pu de virgule mais que les sous-forums sont collés entre eux, ou ils ont simplement disparu (en fonction de votre version) !

Pas de panique. Pour remédier à ça nous allons faire en sorte que les liens soient considéré comme des "bloc" donc en quelque sorte leur demander de jouer le rôle d'une div mais en restant un lien cliquable. Il faut savoir que les liens possèdent la class "gensmall" par défaut, et sous PHPBB2 elle a une valeur "font-size" défini, mais sous les autres version ce n'est pas le cas, donc les liens peuvent être susceptible de disparaître. D'où le fais que je donnerais ici un code pour toutes les versions donc avec un font-size rétabli. Le font-size est de base de 10px normalement, mais si vous l'avez changé ou si vous voulez vos liens plus gros ou plus petit, libre à vous de modifier ça.

Code:

.sous_forums a{
display: block;
font-size: 10px;
}

Il va nous rester une dernière chose, les images, généralement sur pas mal de forums sont utilisé les images derrière les sous-forums, ses petites images vont faire n'importe quoi avec notre CSS ici. On veut qu'elles retournent à leur place et qu'elles ne fassent pas de chichi. Les possibilités sont nombreuses, selon moi la plus simple est de leur mettre un flottement vers la gauche, pour les forcer à se trouver toujours à gauche du lien (qui je le rappelle se trouvent chacun sur une ligne.)

Il nous restera une dernière chose à corriger, si vous avez activer les liens des sous-forums avec image, celle-ci pourraient alors poser quelques soucis, se mettre n'importe où, faire buger le code, ou quoi. Les possibilités sont nombreuses pour palier à ça, mais dans mon cas je vais simplement jouer avec le flottement sur la droite, en sachant que nous aurons :


Nous allons donc juste appliquer un "float: left;" sur les images des sous-forums et le tour est joué :

Code:

.sous_forums img{
float: left;
}

Et voilà, vous avez normalement votre code pour retirer les virgules et faire un retour à la ligne des sous-forums et cela sans JS. Pour ceux le désirant, ayant peur de faire une bêtise ou quoi que ce soit, voici le code complet à copier/coller dans votre feuille de style. Je le rappelle, pensez à remplacer le nom de la class par celui que vous avez mis autour des sous-forums.

Code:

.sous_forums{font-size: 0;}
.sous_forums a{display: block; font-size: 10px;}
.sous_forums img{float: left;}

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Voilà, voilà, en espérant que ce tuto vous servent, l'utilité réside dans le fais qu'on ne touche qu'à du CSS, cela rend logiquement le chargement de la page un peu plus rapide ou du moins moins lourd, de plus, si les gens ont désactivé le JS (ce qui est théoriquement déconseillé) ils auront quand même un retour à la ligne. Enfin, cela reste accessible à tous de compréhension et de personnalisation puisque le CSS est quand même plus facile à dompter que le JS.

Hello

Sur phpbb2 la classe .gensmall est utilisée à pleins d'endroits et ce n'est vraiment pas une bonne idée de proposer le code comme ça... Sincèrement, je pense que tu devrais écrire bien plus en haut en rouge et en gros qu'il ne faut pas modifier directement .gensmall sur phpbb2

Tu peux lire par exemple ce sujet : Les principaux identifiants CSS (phpBB2 & phpBB3) où il est stipulé "Ces identifiants sont utilisés à de nombreuses reprises, sur toutes les pages du forum. Si vous faites une modification sur l'un de ces identifiants, elle peut donc s'appliquer à énormément d'endroits sur le forum. Vous devez donc agir avec précautions !". Ici un font-size 0 ça ne pardonne pas, ça change énormément d'endroits sur le forum :s

Fait d'ailleurs attention, à aucun moment tu ne remets la bonne taille de police pour les liens :p ! Les liens de sous forums sont dans une span .gensmall... Mais les liens avec le nom du sous forum ont eux aussi la classe gensmall !

Alzufen a écrit:

Code:

.gensmall { /* on cible notre class */
font-size: 0; /* on cache les virgules */
}
.gensmall a{ /* on cible les sous-forums */
display: block; /* on leur demande d'être un bloc et donc d'être seul sur leur ligne */
}
.gensmall img { /* on cible les images des sous-forums, si vous en utilisez */
float: left; /* on leur demande de flotter sur la droite, de ce fait ils seront toujours à droite de vos sous-forums */
}

Si j'applique ton premier code sur un forum en phphbb2 je passe de ceci [screen normal] à ceci [screen avec ton code]

Alzufen a écrit:

Code:

h3.hierarchy + .genmed + .gensmall {font-size: 0;}
h3.hierarchy + .genmed + .gensmall a {display: block;}

Attention ici à bien préciser ici que ce code est pour phpbb2

Je me permets toutes ces petites remarques car j'avais posté mon libre service pour exactement la même chose cette nuit, puis je l'ai retiré ce matin en voyant que ça manquait d'informations...
Mais du coup le voici sous spoiler si ça peut t'aider à comprendre comment modifier ton code (mettre le float left -et non pas right comme tu l'as écrit dans les commentaires- sur l'image c'est cool (^-^))

Spoiler:

EDIT :

Alzufen a écrit:Un petit plus, utilisez de préférence cette astuce avec des catégories déjà modifié et où il y a une class/id propre aux sous-forums, ça nous permettra de cibler plus facilement cette partie et d'y ajouter l'effet CSS voulu.

Oups, une partie de ton tuto a du disparaitre, je ne vois pas le passage qui explique où ajouter sa propre classe aux sous-forums (^-^).

Nihil, limite complète ton LS et poste-le. À moins que Alzu complète son tuto ou tout du moins le rectifie, parce que là, effectivement, c'est pas utilisable. Et plutôt que de dire que tu expliqueras le reste dans un autre tuto, mets tout en un, ce serait beaucoup mieux. Du coup, il vaudrait mieux mettre "en cours" sur ton tuto, pour qu'on attende le reste.

Salut Nihil, merci de ton intervention, il est vrai que j'avais oublié pas mal de truc, plus que ce que je pensais donc merci de m'avoir rappelé ça, du coup j'ai refait le tuto en précisant bien les choses, bien mieux qu'avant où ils étaient finalement un peu livré à eux-même devant le code Cela dit, la plus part des trucs que tu disais je le précisais mais il est vrai que je l'écrivais juste et je donnais pas d'indication ><' En tout cas, encore merci

Et pour Nyo, non je ne parlais pas de faire un autre Tuto mais il est vrai que je n'ai pas songé à mettre le "en cours" j'étais un peu pris par le temps (au final non mais je le pensais) et je n'ai pas pensé à certaines choses, résultats je comptais les rajouter aujourd'hui car hier je n'ai pas eu le temps de "vraiment" repasser

Tu peux aussi simplement mettre l’icône en cours hein, c'est juste que comme tu le présentais, ça faisait un peu "voilà j'ai fini et le reste dans le prochain épisode" ^^"

J'avais effectivement oublié l'icône je le reconnais, j'y ai pas pensé désolé ><'

Pas de problème, je précisais afin d'éviter de laisser un code pouvant causer quelques "dommages" (^-^)

Puisque je re-passe sur le LS, autant faire quelques petits commentaires rapides ☺

Alzufen a écrit:normalement ça ne devrait pas arriver puisqu'ils possèdent la class "gensmall" celle-ci possédant une valeur "font-size" de base si jamais cela arrive

Seule la version phpbb2 a une font-size définie pour .gensmall. Pour phpbb3, Invision, punbb, il faut donc impérativement remettre la bonne taille pour les liens. (simple précision ◕‿◕✿).

Alzufen a écrit:

Code:

dd.dterm div {font-size: 0;}
dd.dterm div .hierarchy a {font-size: 16px;}
dd.dterm div a {font-size: 13px; display: block;}
dd.dterm div img{float: left;}

Sous phpBB3 nous avons l'avantage d'avoir la class "dterm" qui entoure les "forums" dans les catégories, résultats on peut donc facilement cibler les sous-forums sans toucher au reste, cependant c'est toujours plus facile avec la première méthode et plus court.

Attention, la classe dterm est aussi utilisée ailleurs sur phpbb3, et avec ce code on passe par exemple de ceci (screen normal) à ceci (screen avec ton code). Des commentaires pour les tailles de polices pourraient aussi être un plus pour permettre aux gens de savoir à quoi correspond quelle taille de police

Alzufen a écrit:Une fois cela fait, il faudra y ajouter une class/ID autour, si vous ne savez pas faire la marche à suivre est simple, on va ici y rajouter une balise span (Pourquoi mettre une div ? Ce n'est franchement pas très utile mais pas non plus à ne pas faire, je pars cependant du principe que vos catégories ne sont pas changées et donc que le template est "vierge".) à laquelle on rajoutera une class (plutôt qu'une ID)

Tu parles plusieurs fois dans ton tuto de class/id, je pense que tu pourrais te contenter de parler de classe, non ? Je crois que les gens risquent de penser qu'on peut utiliser une id ici, alors qu'il faut éviter (cette partie du template peut se répéter plusieurs fois sur une page, ce qui n'est pas souhaitable pour une id). Là c'est un simple conseil pour éviter d'embrouiller les gens. {◕ ◡ ◕}

Simple curiosité pour la discussion là, pourquoi tu répètes plusieurs fois "(ou plutôt le jQuery)" ? C'est juste de la curiosité... L'idée ici c'est d'apprendre à faire sans javascript, peu importe qu'on utilise jQuery, Zepto, Mootools, ou autre (ou même tout simplement du vanilla js), non O_0 ?

Alzufen a écrit:Voilà, voilà, en espérant que ce tuto vous servent, il arrive que parfois le code jQuery plante un peu, car celui-ci n'est pas très optimal et peut devenir très capricieux notamment à cause des "br" qu'on a tendance à écrire "br /" et parfois ça ne passe pas, il faut pas mettre le / alors qu'on est théoriquement obligé de le mettre car toutes balises se ferme.

Attention avant de critiquer "le code jQuery" en général, c'est le code jQuery proposé en libre service sur Never Utopia qui n'est pas très optimisé, il y a pleins d'autres manières de faire en JS qui sont optimisées ♥. Par contre tu pourrais effectivement faire un petit paragraphe qui explique l'avantage de le faire en CSS plutôt qu'en JS en général, ça aurait peut-être plus de sens que de taper sur ce js :p

He Alzu! Tu as vu le message de Nihil?

Yo !

Petit poste pour dire que suite à des MP avec Nihil, je vais m'atteler à terminer ce tuto sous peu, mais j'admets avoir pas mal de rendez-vous et de choses à prévoir irl en ce moment donc voilà ^^'

Je compte cependant refaire le tuto, pas entièrement mais au moins changer la syntaxe de mes mots et éventuellement retirer la partie du flemmard, qui pose pas mal de souci avec certaines versions

Prend ton temps, je voulais juste savoir si tu le continuais ou pas. Si tu as des questions par rapport à mes remarques, n'hésite pas.

Coucou ^^

Voilà, j'ai corrigé le code en revoyant la tournure de mes phrases, ce que je disais, comment je le disais, ajouter un lien vers le topic des problèmes en codage, enlevé le flemmard mode pas du tout opti et tout

En espérant que ce soit bon cette fois-ci ^^

C'est tout bon! J'ai ajouté une image avant/après par contre! Du coup, je classe dès que j'ai le temps! ^^

merci beaucouuup o/