AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Sous-forums en retour à la ligne sans JS

    Partagez
    avatar
    Alzufen
    MasculinAge : 21Messages : 2103

    le Sam 10 Jan 2015 - 19:14

    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:




    Explications


    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.

    Modification du Template "Index-box"


    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.

    Le code CSS


    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 :

    Une image flottante - Un bloc lien -
    Retour à la ligne à cause du bloc - Une image flottante - Un bloc lien -
    etc.

    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.


    Sinon bah un petit merci ou un petit cookie n'est pas de refus, même si le code n'est pas sous Hide :)

    Tchuss à tous et merci de m'avoir lu Very Happy


    Dernière édition par Alzufen le Jeu 11 Juin 2015 - 21:36, édité 13 fois



    avatar
    Nihil Scar Winspeare
    Messages : 4625

    le Sam 10 Jan 2015 - 21:36

    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 Wink

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

    @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 Wink

    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 Wink (mettre le float left -et non pas right comme tu l'as écrit dans les commentaires- sur l'image c'est cool (^-^))

    Spoiler:

    Sous forum avec retour à la ligne sans Javascript



    Taktiik a posté une autre manière de faire, grâce à du javascript, que vous pouvez trouver ici, et une version plus récente par le FdF ici.
    La technique que je vous propose ici n'utilise pas de javascript, nous ferons la modification grâce à du CSS.


    La modification porte seulement sur le fait de retirer les virgules ainsi que mettre un retour à la ligne, à vous d'adapter pour l'esthétique :)
    Pensez à mettre un petit remerciement pour Never Utopia si vous utilisez ce code :hug:

    Affichage de base (les sous forums sont séparés par des virgules) :


    Si on met les sous-forums en retour à la ligne :


    Pour afficher les sous forums : PA > Affichage > Page d'accueil > Structure et hiérarchie > Lien vers les niveaux inférieurs -> choisir "oui" ou bien "avec une image"

    Template index_box


    PA > Affichage > Templates > Général

    La première modification aura lieu dans le template index-box.

    La partie permettant d'afficher les liens sous-forums se trouve ici :
    Code:
    {catrow.forumrow.LINKS}

    Pour pouvoir ensuite la modifier en CSS nous allons lui mettre une classe spéciale sous-forums :
    Code:
    <span class="sous-forums">{catrow.forumrow.LINKS}</span>

    CSS


    Cette version permet de gérer la présence ou non de la petite image vers les sous forums :
    PA > Affichage > Couleurs > Feuille de style CSS

    Code:
    /* ----- Sous forums à la ligne -----  */
    .sous-forums { font-size: 0; } /* permet de masquer les virgules */
    .sous-forums a {
        font-size: 10px; /* taille de police des liens */
        float: left; /* permet de gérer les images de liens vers le niveau inférieur */
    }
    .sous-forums a.gensmall {
        float: none; /* permet de gérer les images de liens vers le niveau inférieur */
        display: block; /* retour à la ligne */
    }
    /* -----  Fin sous forums à la ligne -----  */

    Si vous n'utilisez pas d'image de lien pour les sous forums, vous pouvez prendre cette version du code un peu plus légère :
    Code:
    /* ----- Sous forums à la ligne sans images de liens -----  */
    .sous-forums { font-size: 0; } /* permet de masquer les virgules */
    .sous-forums a {
        font-size: 10px; /* taille de police des liens */
        display: block; /* retour à la ligne */
    }
    /* -----  Fin sous forums à la ligne -----  */

    En cas de problème, merci d'aller dans la partie un problème en codage :friends:

    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 (^-^).



    avatar
    NyoTheNeko
    FémininAge : 23Messages : 5018

    le Dim 11 Jan 2015 - 13:44

    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.




    avatar
    Alzufen
    MasculinAge : 21Messages : 2103

    le Dim 11 Jan 2015 - 15:40

    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 Wink 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 Razz

    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 Wink



    avatar
    NyoTheNeko
    FémininAge : 23Messages : 5018

    le Dim 11 Jan 2015 - 16:33

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



    avatar
    Alzufen
    MasculinAge : 21Messages : 2103

    le Dim 11 Jan 2015 - 17:01

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



    avatar
    Nihil Scar Winspeare
    Messages : 4625

    le Dim 11 Jan 2015 - 17:55

    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 Wink

    @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)" :toto: ? 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



    avatar
    NyoTheNeko
    FémininAge : 23Messages : 5018

    le Ven 23 Jan 2015 - 0:01

    He Alzu! Tu as vu le message de Nihil?



    avatar
    Alzufen
    MasculinAge : 21Messages : 2103

    le Lun 18 Mai 2015 - 0:09

    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 Razz



    avatar
    Nihil Scar Winspeare
    Messages : 4625

    le Lun 18 Mai 2015 - 0:29

    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.



    avatar
    Alzufen
    MasculinAge : 21Messages : 2103

    le Jeu 11 Juin 2015 - 21:37

    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 Very Happy

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



    avatar
    NyoTheNeko
    FémininAge : 23Messages : 5018

    le Mer 7 Oct 2015 - 11:04

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



    avatar
    Anarchy Rose
    FémininAge : 22Messages : 60

    le Mer 21 Oct 2015 - 15:35

    merci beaucouuup o/
    Contenu sponsorisé


      La date/heure actuelle est Sam 29 Juil 2017 - 13:40