Dons de BB codes
Coucou,
Voici un tout début de code que j'avais commencé, je doute qu'il puisse servir à quelqu'un mais mieux vaut ne pas le perdre ! En principe vous pouvez l'utiliser pour à peu près ce que vous voulez, et... voilà
Je pense qu'il serait facilement combinable au code fait par Mina juste là
Encore une fois, un petit clin d'œil ne fait pas de mal
Voici un tout début de code que j'avais commencé, je doute qu'il puisse servir à quelqu'un mais mieux vaut ne pas le perdre ! En principe vous pouvez l'utiliser pour à peu près ce que vous voulez, et... voilà
Je pense qu'il serait facilement combinable au code fait par Mina juste là
Bloupxxxxxxx
Bloupxxxxxxxxxxxx
Reducio
Code : Tout sélectionner
[quote][table]
[tr]
[td][quote][table]
[tr]
[td][size=90][color=black]Summary[/color][/size][color=transparent]xxxxxxx[/color][/td]
[td][right][icon]times-r[/icon][/right][/td]
[/tr]
[/table][/quote][/td]
[td][quote][table]
[tr]
[td][size=90]Malo[/size][color=transparent]xxxxxxxxxxxx[/color][/td]
[td][right][icon]times-r[/icon][/right][/td]
[/tr]
[/table][/quote][/td]
[td][color=transparent][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][/color][/td]
[td][quote][icon]minus-r[/icon][/quote][/td]
[td][quote][icon]square-r[/icon][/quote][/td]
[td][quote][icon]times-r[/icon][/quote][/td]
[/tr]
[/table][table]
[tr]
[td][quote][color=#00000050]Search[/color][color=transparent][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][/color][/quote][/td]
[td][quote][icon]search-r[/icon][/quote][/td]
[/tr]
[/table]
[/quote]
Encore une fois, un petit clin d'œil ne fait pas de mal
Nouveau compte : Eliott Faulkner
Dons de BB codes
Hello ! Voici un code que j'ai fait pour les badges, en espérant que ça aidera
N'hésitez pas à l'adapter en fonction de votre perso !
Et comme dises mes VDD, un clin d’œil me ferai plaisir mais pas obligé
N'hésitez pas à l'adapter en fonction de votre perso !
Reducio
Reducio
Code : Tout sélectionner
[quote][center][img=300x300]/images/upload/q5uwgzm5xlek.webp[/img][/center]
[center][quote][img]/images/upload/uena6yl0a4o6.webp[/img][/quote][/center][/quote]
[center][img=300x300]/images/upload/2yvdbopeayno.webp[/img][/center]
[quote][center][img=300x300]/images/upload/lgcaim4zyj3u.webp[/img][/center]
[quote][center][img]/images/upload/uena6yl0a4o6.webp[/img][/center][/quote][/quote]
[center][img=400x400]/images/upload/umdofd0hw0uk.webp[/img][/center]
[quote][center][img=300x300]/images/upload/neqmhisbqe42.webp[/img][/center]
[quote][center][img]/images/upload/uena6yl0a4o6.webp[/img][/center][/quote][/quote]
[center][img=300x300]/images/upload/2yvdbopeayno.webp[/img][/center]
[quote][center][img=300x300]/images/upload/q3ksjyeyefjy.webp[/img][/center]
[quote][center][img]/images/upload/uena6yl0a4o6.webp[/img][/center][/quote][/quote]
[center][img=400x400]/images/upload/umdofd0hw0uk.webp[/img][/center]
[quote][center][img=300x300]/images/upload/mr6x1oxsdmc1.webp[/img][/center]
[quote][center][img]/images/upload/uena6yl0a4o6.webp[/img][/center][/quote][/quote]
[center][img=300x300]/images/upload/2yvdbopeayno.webp[/img][/center]
[quote][center][img=300x300]/images/upload/bu2jis3kw22r.webp[/img][/center]
[quote][center][img]/images/upload/uena6yl0a4o6.webp[/img][/center][/quote][/quote]
[center][img=400x400]/images/upload/umdofd0hw0uk.webp[/img][/center]
[quote][center][img=300x300]/images/upload/s2saiepl4jzu.webp[/img][/center]
[quote][center][img]/images/upload/uena6yl0a4o6.webp[/img][/center][/quote][/quote]
[center][img=300x300]/images/upload/2yvdbopeayno.webp[/img][/center]
[quote][center][img=300x300]/images/upload/gsk2v9pw0k5t.webp[/img][/center]
[quote][center][img]/images/upload/uena6yl0a4o6.webp[/img][/center][/quote][/quote]Et comme dises mes VDD, un clin d’œil me ferai plaisir mais pas obligé
Dernière modification par Lonely Smile le 12 juil. 2026, 17:32, modifié 1 fois.
Dons de BB codes
Bonjour !
Après plusieurs hiboux de la part de divers élèves, je décide de mettre ce code ici !
J'espère qu'il vous aidera De mon côté, je l'ai utilisé pour le référencement de mes PNJs, mais vous pouvez le bidouiller pour qu'il serve dans la partie "famille" de votre fiche, si vous le souhaitez !
Après plusieurs hiboux de la part de divers élèves, je décide de mettre ce code ici !
J'espère qu'il vous aidera
De mon côté, je l'ai utilisé pour le référencement de mes PNJs, mais vous pouvez le bidouiller pour qu'il serve dans la partie "famille" de votre fiche, si vous le souhaitez !VISUEL
Mises à jourReducio◈ JJ/MM/AAAA - Description de la mise à jour.
◈ JJ/MM/AAAA - Description de la mise à jour.
◈ JJ/MM/AAAA - Description de la mise à jour.
 |
|
◈─────◈─────◈
|
|
Codé par Elena McFly
CODE
Code : Tout sélectionner
[quote][center][b][color=#003375]Mises à jour[/color][/b][reducio][size=80]◈ [b]JJ/MM/AAAA[/b] - Description de la mise à jour.
◈ [b]JJ/MM/AAAA[/b] - Description de la mise à jour.
◈ [b]JJ/MM/AAAA[/b] - Description de la mise à jour.
[/size][/reducio][/center][/quote]
[ref]Nom du membre[/ref][table]
[tr]
[td][center][img=250x250]/images/upload/7ptdac8rxow2.webp[/img][/center][/td]
[td][quote][b][font=cursive]Prénom Nom[/font]
[color=#000000][icon]fill-drip-s[/icon]#000000[/color]
[size=85][color=#000000]◈[/color] Statut de sang
[color=#000000]◈[/color] lien [/size][/b][size=75](justification)[/size][b]
[size=85][color=#000000]◈ [/color] Nationalité
[color=#000000]◈ [/color]Né.e à ? le JJ mois AAAA[/size][/b]
[size=85][b]Liste des RPs où ce PNJ est utilisé en mode actif :[/b][/size]
[reducio][size=90][url=null]◈[url] [b]JJ/MM/AAAA[/b] - Nom du RP
[url=null]◈[url] [b]JJ/MM/AAAA[/b] - Nom du RP[/size][/reducio][/quote][/td]
[/tr]
[/table]
[ref]Nom du membre[/ref][center]◈─────[size=125]◈[/size]─────◈[/center]
[table]
[tr]
[td][center][img=250x250]/images/upload/7ptdac8rxow2.webp[/img][/center][/td]
[td][quote][b][font=cursive]Prénom Nom[/font]
[color=#000000][icon]fill-drip-s[/icon]#000000[/color]
[size=85][color=#000000]◈[/color] Statut de sang
[color=#000000]◈[/color] lien [/size][/b][size=75](justification)[/size][b]
[size=85][color=#5073de]◈ [/color] Nationalité
[color=#000000]◈ [/color]Né.e à ? le JJ mois AAAA[/size][/b]
[size=90][b]Liste des RPs où ce PNJ est utilisé en mode actif :[/b]
[/size]
[reducio][size=90][url=null]◈[url] [b]JJ/MM/AAAA[/b] - Nom du RP
[url=null]◈[url] [b]JJ/MM/AAAA[/b] - Nom du RP[/size][/reducio][/quote][/td]
[/tr]
[/table]
[right][size=75][b]Codé par [color=#84774d][url=https://poudlard.fr/memberlist.php?mode=viewprofile&u=112644][color=#89700a]Elena McFly[/color][/url][/color][/b][/right]
Dons de BB codes
Bonjour,
Avec la récente mise à jour concernant les tableaux, certaines mises en page dans les fiches ont pu être bousculées, et maintenant que le contrôle les largeurs est devenu un peu plus précis et facilité par l’affichage effectif des largeurs sur PC, je me dis que proposer quelques codes pourrait aider à ajuster ou intégrer des tableaux s’affichant sans nécessiter la barre de défilement horizontale.
Dans les exemples, j’utilise la balise de dimension pour toujours travailler la même image, mais vous pouvez tout à fait relever le nombre de pixels nécessaire pour dimensionner en amont les images à intégrer dans les tableaux avec une utilisation simple de la balise image (sans valeur à intégrer). A priori, cette nouvelle balise de dimension ne fait plus dépasser sur mobile donc ça ne nuit pas à l’accessibilité (ces tableaux à colonnes s’afficheront en lignes sur écran étroit)
Dans un tableau à trois colonnes, il faut répartir environ 670 pixels quand aucun quote/reducio est utilisé, ce qui donne par exemple une image à 223 pixels de large dans chaque colonne :
Pour mettre chaque colonne sous quote, on peut mettre la ligne des images de contrôle à part, en dessous ou dessus, afin de garder ces 670 pixels hors quote
Quand on met le tableau entier dans un quote/reducio, alors il faut plutôt répartir environ 645 pixels, ce qui donne par exemple une image à 215 pixels de large dans chaque colonne :
Enfin, avec un quote à chaque colonne, chacune peut contenir une image d’environ 198 pixels de large, soit 594 pixels au total:
Dans un tableau à deux colonnes, il faut également environ 670 pixels quand aucun quote/reducio est utilisé, ce qui peut donner une image à 336 pixels de large dans chaque colonne :
Afin de mettre chaque colonne de texte sous quote, on peut mettre la ligne des images à part :
Quand on met le tableau entier dans un quote/reducio, alors il faut plutôt répartir environ 648 pixels, ce peut donner une image à 324 pixels de large dans chaque colonne :
Enfin, avec un quote à chaque colonne, chacune peut contenir une image allant jusque 311 pixels de large environ soit 622 pixels au total
En respectant les largeurs maximales précédentes (~670 sans quote, ~648 pour un tableau dans quote, ~622 avec un quote par colonne), on peut aussi décider d’avoir une colonne large et une colonne étroite. Les exemples proposent une colonne de droite deux plus fine que celle de gauche mais on peut inverser les valeurs (colonne de gauche plus fine) ou changer les ratios (en prenant en compte la somme maximale conseillée sur la largeur)
Il est possible de faire un tableau à deux colonnes contenant en réalité une troisième colonne centrale d’espacement pour aérer si on trouve les deux colonnes de base trop collées. Pour cela il faut prendre en compte les largeurs maximales des tableaux à trois colonnes, soit ~670 sans quote, ~645 pour un tableau dans un quote, ~620 pixels si chaque colonne est en quote (plutôt que 594 si on ne met pas de quote pour la colonne d’aération). Dans les exemples la colonne pour aérer est de 30 pixels mais c’est possible de changer la répartition en respectant la largeur totale
On peut appliquer la même logique de troisième colonne centrale pour aérer même avec des colonnes inégales (une colonne deux fois plus étroite que l’autre)
Enfin, il est possible de placer des images centrées dans une colonne sans coller aux bords de la façon suivante : en restant dans les balises "center", placer l’image souhaitée sous ou sur l’image servant à dimensionner la colonne, et choisir des dimensions inférieures (si supérieures alors l’image la plus grande deviendra celle contrôlant la largeur de la colonne)
Exemple d’un tableau à deux colonnes égales et espacées avec image centrée d'un côté et texte de l’autre, puis alternance à la ligne suivante (en l’occurence image en 220x220 sous l’image de dimensionnement de la colonne en 320x320 soit ~50 pixels de respiration de chaque côté, ça pourrait être n’importe quelle valeur en dessous de 320 de largeur).
Cet exemple permet aussi de voir que dans un même tableau, il suffit de mettre les images de contrôle de largeur dans une seule ligne pour affecter les autres, il n’est pas nécessaire de mettre partout
Vous pouvez reprendre le code de n’importe quel tableau si cela correspond à une configuration recherchée (j’ai remplacé dans la partie code la bande colorée par une image transparente pour un contrôle discret des largeurs) ; ou vous appuyer sur les limites max de pixels sur la largeur selon l’utilisation ou non des quote pour dimensionner (soit par la balise, soit en ajustant la largeur des images avant hébergement) les différentes colonnes à votre goût.
J’espère que cela vous sera utile et fonctionnera. Il est possible que selon le contenu du post il faille ajuster de quelques pixels, d’où un ordre de grandeur donné (environ...). Ces dimensions sont pensées pour les messages, la section "informations complèmentaires" du profil étant plus étroite, les valeurs sont différentes (plutôt ~460 pixels max au lieu de ~675 sur la largeur)
Largeurs limites (±)
Si la somme des largeurs des colonnes dépasse ces valeurs, les tableaux sont susceptibles de s’afficher avec la barre de défilement
Avec la récente mise à jour concernant les tableaux, certaines mises en page dans les fiches ont pu être bousculées, et maintenant que le contrôle les largeurs est devenu un peu plus précis et facilité par l’affichage effectif des largeurs sur PC, je me dis que proposer quelques codes pourrait aider à ajuster ou intégrer des tableaux s’affichant sans nécessiter la barre de défilement horizontale.
Pour rendre visuelle la technique, j’utilise dans les exemples un image colorée de 500x10 pixels, mais en situation réelle je conseille de remplacer par une image invisible, pour agir discrètement (l’image colorée est d’ailleurs remplacée par une image invisible dans les codes proposés)code pro-accessibilité
(grâce au nouvel affichage des tableaux, il n’y a plus de risque de dépassement sur mobile, ce code est conçu pour équilibrer les colonnes sur PC avant d’en arriver à la barre de défilement)
pas besoin de créditer
Dans les exemples, j’utilise la balise de dimension pour toujours travailler la même image, mais vous pouvez tout à fait relever le nombre de pixels nécessaire pour dimensionner en amont les images à intégrer dans les tableaux avec une utilisation simple de la balise image (sans valeur à intégrer). A priori, cette nouvelle balise de dimension ne fait plus dépasser sur mobile donc ça ne nuit pas à l’accessibilité (ces tableaux à colonnes s’afficheront en lignes sur écran étroit)
Trois colonnes égales
(sommaire)
(sommaire)
Dans un tableau à trois colonnes, il faut répartir environ 670 pixels quand aucun quote/reducio est utilisé, ce qui donne par exemple une image à 223 pixels de large dans chaque colonne :
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Reducio
Code : Tout sélectionner
[table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=223x223]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=223x223]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=223x223]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table]Pour mettre chaque colonne sous quote, on peut mettre la ligne des images de contrôle à part, en dessous ou dessus, afin de garder ces 670 pixels hors quote
|
|
|
| | |
Reducio
Code : Tout sélectionner
[table][tr][td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[/quote][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[/quote][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[/quote][/td][/tr]
[tr][td][center][img=223x223]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][td][center][img=223x223]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][td][center][img=223x223]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table]Quand on met le tableau entier dans un quote/reducio, alors il faut plutôt répartir environ 645 pixels, ce qui donne par exemple une image à 215 pixels de large dans chaque colonne :
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Reducio
Code : Tout sélectionner
[quote][table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=215x215]/images/upload/g77huo7b5ohh.webp[/img][/center]
[/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=215x215]/images/upload/g77huo7b5ohh.webp[/img][/center]
[/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=215x215]/images/upload/g77huo7b5ohh.webp[/img][/center]
[/td][/tr][/table][/quote]Enfin, avec un quote à chaque colonne, chacune peut contenir une image d’environ 198 pixels de large, soit 594 pixels au total:
|
|
|
Reducio
Code : Tout sélectionner
[table][tr][td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=198x198]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=198x198]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=198x198]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td][/tr][/table]Deux colonnes égales
(sommaire)
(sommaire)
Dans un tableau à deux colonnes, il faut également environ 670 pixels quand aucun quote/reducio est utilisé, ce qui peut donner une image à 336 pixels de large dans chaque colonne :
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Reducio
Code : Tout sélectionner
[table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=336x336]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=336x336]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table]Afin de mettre chaque colonne de texte sous quote, on peut mettre la ligne des images à part :
|
|
| |
Reducio
Code : Tout sélectionner
[table][tr][td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[/quote][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[/quote][/td][/tr]
[tr][td][center][img=336x336]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][td][center][img=336x336]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table]Quand on met le tableau entier dans un quote/reducio, alors il faut plutôt répartir environ 648 pixels, ce peut donner une image à 324 pixels de large dans chaque colonne :
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Reducio
Code : Tout sélectionner
[quote][table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=324x324]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=324x324]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr]
[/table][/quote]Enfin, avec un quote à chaque colonne, chacune peut contenir une image allant jusque 311 pixels de large environ soit 622 pixels au total
|
|
Reducio
Code : Tout sélectionner
[table][tr][td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=311x311]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=311x311]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td][/tr][/table]Deux colonnes inégales (2/3 – 1/3)
(sommaire)
(sommaire)
En respectant les largeurs maximales précédentes (~670 sans quote, ~648 pour un tableau dans quote, ~622 avec un quote par colonne), on peut aussi décider d’avoir une colonne large et une colonne étroite. Les exemples proposent une colonne de droite deux plus fine que celle de gauche mais on peut inverser les valeurs (colonne de gauche plus fine) ou changer les ratios (en prenant en compte la somme maximale conseillée sur la largeur)
Répartition possible des 670 pixels : 445 - 225
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Reducio
Code : Tout sélectionner
[table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=445x445]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=225x225]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table]Répartition possible des 648 pixels : 432 - 216
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Reducio
Code : Tout sélectionner
[quote][table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=432x432]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=216x216]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table][/quote]Répartition possible des 622 pixels : 414 - 207
|
|
Reducio
Code : Tout sélectionner
[table][tr][td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=414x414]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=207x207]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td][/tr][/table]Deux colonnes égales (colonne d’espacement)
(sommaire)
(sommaire)
Il est possible de faire un tableau à deux colonnes contenant en réalité une troisième colonne centrale d’espacement pour aérer si on trouve les deux colonnes de base trop collées. Pour cela il faut prendre en compte les largeurs maximales des tableaux à trois colonnes, soit ~670 sans quote, ~645 pour un tableau dans un quote, ~620 pixels si chaque colonne est en quote (plutôt que 594 si on ne met pas de quote pour la colonne d’aération). Dans les exemples la colonne pour aérer est de 30 pixels mais c’est possible de changer la répartition en respectant la largeur totale
Répartition possible des 670 pixels : 320 - 30 - 320
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Reducio
Code : Tout sélectionner
[table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=320x320]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td][center][img=30x30]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=320x320]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table]Répartition possible des 645 pixels : 308 - 30 - 308
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Reducio
Code : Tout sélectionner
[quote][table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=308x308]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td][center][img=30x30]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=308x308]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table][/quote]Répartition possible des 620 pixels : 295 - 30 - 295
|
|
|
Reducio
Code : Tout sélectionner
[table][tr][td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=295x295]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td]
[td][center][img=30x30]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=295x295]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td][/tr][/table]Deux colonnes inégales 2/3 – 1/3 (colonne d’espacement)
(sommaire)
(sommaire)
On peut appliquer la même logique de troisième colonne centrale pour aérer même avec des colonnes inégales (une colonne deux fois plus étroite que l’autre)
Répartition possible des 670 pixels : 426 - 30 - 213
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Reducio
Code : Tout sélectionner
[table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=426x426]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td][center][img=30x30]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=213x213]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table]Répartition possible des 645 pixels : 410 - 30 - 205
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Reducio
Code : Tout sélectionner
[quote][table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=410x410]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td][center][img=30x30]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=205x205]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table][/quote]Répartition possible des 620 pixels : 392 - 30 - 196
|
|
|
Reducio
Code : Tout sélectionner
[table][tr][td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=392x392]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td]
[td][center][img=30x30]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=196x196]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td][/tr][/table]Astuce
(sommaire)
Enfin, il est possible de placer des images centrées dans une colonne sans coller aux bords de la façon suivante : en restant dans les balises "center", placer l’image souhaitée sous ou sur l’image servant à dimensionner la colonne, et choisir des dimensions inférieures (si supérieures alors l’image la plus grande deviendra celle contrôlant la largeur de la colonne)
Exemple d’un tableau à deux colonnes égales et espacées avec image centrée d'un côté et texte de l’autre, puis alternance à la ligne suivante (en l’occurence image en 220x220 sous l’image de dimensionnement de la colonne en 320x320 soit ~50 pixels de respiration de chaque côté, ça pourrait être n’importe quelle valeur en dessous de 320 de largeur).
Cet exemple permet aussi de voir que dans un même tableau, il suffit de mettre les images de contrôle de largeur dans une seule ligne pour affecter les autres, il n’est pas nécessaire de mettre partout
 |
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. | |
Reducio
Code : Tout sélectionner
[table][tr][td][center][img=320x320]/images/upload/g77huo7b5ohh.webp[/img]
[img=220x220]/images/upload/e6t4uos9e1zc.webp[/img][/center][/td]
[td][img=30x30]/images/upload/g77huo7b5ohh.webp[/img][/td]
[td][center][img=320x320]/images/upload/g77huo7b5ohh.webp[/img][/center]
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. [/td][/tr]
[tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. [/td]
[td][/td]
[td][center][img=220x220]/images/upload/e6t4uos9e1zc.webp[/img][/center][/td][/tr][/table]Vous pouvez reprendre le code de n’importe quel tableau si cela correspond à une configuration recherchée (j’ai remplacé dans la partie code la bande colorée par une image transparente pour un contrôle discret des largeurs) ; ou vous appuyer sur les limites max de pixels sur la largeur selon l’utilisation ou non des quote pour dimensionner (soit par la balise, soit en ajustant la largeur des images avant hébergement) les différentes colonnes à votre goût.
J’espère que cela vous sera utile et fonctionnera. Il est possible que selon le contenu du post il faille ajuster de quelques pixels, d’où un ordre de grandeur donné (environ...). Ces dimensions sont pensées pour les messages, la section "informations complèmentaires" du profil étant plus étroite, les valeurs sont différentes (plutôt ~460 pixels max au lieu de ~675 sur la largeur)
Largeurs limites (±)
(sommaire)
Si la somme des largeurs des colonnes dépasse ces valeurs, les tableaux sont susceptibles de s’afficher avec la barre de défilement
~670 pixels de large pour deux à trois colonnes sans aucun quote ou reducio
~648 pixels de large pour deux colonnes contenues dans un quote ; plutôt ~645 pixels si trois colonnes
~622 pixels de large pour deux colonnes ayant chacune un quote ; plutôt ~594 pixels si trois colonnes ; et ~620 pixels si deux colonnes en quote et la troisième sans quote
~648 pixels de large pour deux colonnes contenues dans un quote ; plutôt ~645 pixels si trois colonnes
~622 pixels de large pour deux colonnes ayant chacune un quote ; plutôt ~594 pixels si trois colonnes ; et ~620 pixels si deux colonnes en quote et la troisième sans quote
Dons de BB codes
Bonjour ! Je viens partager un petit code, rien d'incroyable, pour les informations complémentaires, inspiré des incroyables @Stella Ruewen et @Sonia Ross 
Voici donc ce que je vous propose :
Et voici le code pour copier/coller plus rapidement !
J'ai laissé la couleur en #84774d pour que vous mettiez la votre. Vous pouvez totalement changer le petit icône, la liste est par là, et j'ai déjà mis les balises lien (avec null à la place d'un quelconque lien) pour plus de facilité
Je souhaite simplement que vous mettiez mon nom, mention déjà présente dans le code
Si vous avez besoin d'aide ou pour n'importe quoi, ma volière est grande ouverte
Voici donc ce que je vous propose :
Avec mes informations complémentaires en exemple si vous voulez mieux vous projetez :« Paroles de musique » — Titre | Chanteur
[image]
IEL, EN BREF
xA RP | Promo xx/xx | Maison
Bla | Bla
IEL, PHYSIQUEMENT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacinia sapien auctor lacus pharetra, eget feugiat arcu consectetur. Nulla ultrices consectetur sem ut consequat. Donec malesuada auctor ipsum id malesuada.
IEL, MENTALEMENT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacinia sapien auctor lacus pharetra, eget feugiat arcu consectetur. Nulla ultrices consectetur sem ut consequat. Donec malesuada auctor ipsum id malesuada.
IEL, PRÉFÉRENCES
[AIME] Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[N'AIME PAS] Lorem ipsum dolor sit amet, consectetur adipiscing elit.
IEL, EN PLUS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacinia sapien auctor lacus pharetra, eget feugiat arcu consectetur. Nulla ultrices consectetur sem ut consequat. Donec malesuada auctor ipsum id malesuada.
PLUME, LIENS
[Bla] - [Bla] - [Bla]
PLUME, PRÉSENCE
Très présente - Normale - Réduite - Très réduite
PLUME, RPG
Moins d'une semaine - Plus d'une semaine - Environ deux semaines - Moins d'un mois - Plus d'un mois - Indéterminé
PLUME, HIBOUX
Dès réception - Dans la journée - Dans la semaine - Dans un mois
Code par : Cassidy Harrington
Reducio
« If I told you this was only gonna hurt. If I warned you that the fire's gonna burn. Would you walk in? Would you let me do it first? Do it all in the name of love. » — In The Name Of Love | Martin Garrix, Bebe Rexha
ELLE, EN BREF
1A RP | Promo 50/51 | Serpentard
Fanfariste | Anti NM
ELLE, PHYSIQUEMENT
Yeux bleu clair, longs cheveux roux cuivrés légèrement ondulés, peau claire parsemée de quelques taches de rousseur, visage fin aux traits délicats, lèvres rosées, silhouette élancée, taille moyenne et allure naturellement élégante.
ELLE, MENTALEMENT
Ambitieuse, déterminée, fière, confiante, sarcastique, intelligente, compétitive, persuasive, indépendante, impulsive, rancunière, loyale envers ses proches, passionnée, audacieuse et particulièrement têtue.
ELLE, PRÉFÉRENCES
[AIME] Le violet, les livres, la musique, les chevaux, la pluie, les nuits étoilées, le calme et les papillons.
[N'AIME PAS] Le bruit, les injustices, l'échec, perdre, l'hypocrisie, être prise pour une enfant, James.
ELLE, EN PLUS
Perfectionniste, réservée sur ses émotions, indépendante, observatrice, réfléchie, ambitieuse, curieuse, en quête de réussite, besoin de contrôle, peur de l'échec, de l'insignifiance et du rejet, analyse constamment son entourage, toujours un livre à portée de main.
PLUME, LIENS
[PARRAINAGE] - [PNJ] - [PR] - [COUCOU RAPELTOUT] - [DISCORD] - [CHRONOLOGIE] - [REGISTRE SERPENTARD] - [FICHE PERSO] - [VOLIÈRE] - [PINTEREST] - [RPG] - [EMPLOI DU TEMPS]
PLUME, PRÉSENCE
Très présente - Normale - Réduite - Très réduite - [ABSENCE]
PLUME, RPG
Moins d'une semaine - Plus d'une semaine - Environ deux semaines - Moins d'un mois - Plus d'un mois
PLUME, HIBOUX
Dès réception - Dans la journée - Dans la semaine - Dans un mois
1A RP | Promo 50/51 | Serpentard
Fanfariste | Anti NM
ELLE, PHYSIQUEMENT
Yeux bleu clair, longs cheveux roux cuivrés légèrement ondulés, peau claire parsemée de quelques taches de rousseur, visage fin aux traits délicats, lèvres rosées, silhouette élancée, taille moyenne et allure naturellement élégante.
ELLE, MENTALEMENT
Ambitieuse, déterminée, fière, confiante, sarcastique, intelligente, compétitive, persuasive, indépendante, impulsive, rancunière, loyale envers ses proches, passionnée, audacieuse et particulièrement têtue.
ELLE, PRÉFÉRENCES
[AIME] Le violet, les livres, la musique, les chevaux, la pluie, les nuits étoilées, le calme et les papillons.
[N'AIME PAS] Le bruit, les injustices, l'échec, perdre, l'hypocrisie, être prise pour une enfant, James.
ELLE, EN PLUS
Perfectionniste, réservée sur ses émotions, indépendante, observatrice, réfléchie, ambitieuse, curieuse, en quête de réussite, besoin de contrôle, peur de l'échec, de l'insignifiance et du rejet, analyse constamment son entourage, toujours un livre à portée de main.
PLUME, LIENS
[PARRAINAGE] - [PNJ] - [PR] - [COUCOU RAPELTOUT] - [DISCORD] - [CHRONOLOGIE] - [REGISTRE SERPENTARD] - [FICHE PERSO] - [VOLIÈRE] - [PINTEREST] - [RPG] - [EMPLOI DU TEMPS]
PLUME, PRÉSENCE
Très présente - Normale - Réduite - Très réduite - [ABSENCE]
PLUME, RPG
Moins d'une semaine - Plus d'une semaine - Environ deux semaines - Moins d'un mois - Plus d'un mois
PLUME, HIBOUX
Dès réception - Dans la journée - Dans la semaine - Dans un mois
Et voici le code pour copier/coller plus rapidement !
Reducio
Code : Tout sélectionner
[center][size=85][i][color=#000000]« Paroles de musique »[/color] — [url=null][color=#84774d]Titre | Chanteur[/color][/url][/i][/size][/center]
[center][image][/center]
[center][size=85][b][color=#84774d]IEL, EN BREF[/color][/b]
xA RP | Promo xx/xx | [color=#84774d]Maison[/color]
Bla | Bla
[color=#84774d][icon]sparkles-s[/icon][/color]
[b][color=#84774d]IEL, PHYSIQUEMENT[/color][/b]
[i]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacinia sapien auctor lacus pharetra, eget feugiat arcu consectetur. Nulla ultrices consectetur sem ut consequat. Donec malesuada auctor ipsum id malesuada.[/i]
[color=#84774d][icon]sparkles-s[/icon][/color]
[b][color=#84774d]IEL, MENTALEMENT[/color][/b]
[i]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacinia sapien auctor lacus pharetra, eget feugiat arcu consectetur. Nulla ultrices consectetur sem ut consequat. Donec malesuada auctor ipsum id malesuada.[/i]
[color=#84774d][icon]sparkles-s[/icon][/color]
[b][color=#84774d]IEL, PRÉFÉRENCES[/color][/b]
[AIME] [i]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/i]
[N'AIME PAS] [i]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/i]
[color=#84774d][icon]sparkles-s[/icon][/color]
[b][color=#84774d]IEL, EN PLUS[/color][/b]
[i]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacinia sapien auctor lacus pharetra, eget feugiat arcu consectetur. Nulla ultrices consectetur sem ut consequat. Donec malesuada auctor ipsum id malesuada.[/i]
[color=#84774d][icon]sparkles-s[/icon][/color]
[b][color=#84774d]PLUME, LIENS[/color][/b]
[[url=null]Bla[/url]] - [[url=null]Bla[/url]] - [[url=null]Bla[/url]]
[color=#84774d][icon]sparkles-s[/icon][/color]
[b][color=#84774d]PLUME, PRÉSENCE[/color][/b]
Très présente - Normale - Réduite - Très réduite
[color=#84774d][icon]sparkles-s[/icon][/color]
[b][color=#84774d]PLUME, RPG[/color][/b]
Moins d'une semaine - Plus d'une semaine - Environ deux semaines - Moins d'un mois - Plus d'un mois - Indéterminé
[color=#84774d][icon]sparkles-s[/icon][/color]
[b][color=#84774d]PLUME, HIBOUX[/color][/b]
Dès réception - Dans la journée - Dans la semaine - Dans un mois[/size][/center]
[right][size=75]Code par : [color=#1a542a]Cassidy Harrington[/color][/size][/right]J'ai laissé la couleur en #84774d pour que vous mettiez la votre. Vous pouvez totalement changer le petit icône, la liste est par là, et j'ai déjà mis les balises lien (avec null à la place d'un quelconque lien) pour plus de facilité
Je souhaite simplement que vous mettiez mon nom, mention déjà présente dans le code
Si vous avez besoin d'aide ou pour n'importe quoi, ma volière est grande ouverte