Salut à tous ! J’utilise Discourse en partie comme un wiki pour mon groupe d’intérêt — j’aimerais vraiment avoir des infoboxes pour vraiment faire passer ces articles au niveau supérieur.
Quelqu’un a-t-il intégré cela dans Discourse ? Je ne trouve aucun plugin ou composant de thème pour cela.
J’ai trouvé quelqu’un qui a fait fonctionner un modèle d’infobox de style wiki sur Obsidian — donc peut-être que ce serait un bon point de départ.
Peut-être utiliser un wrapper Bbcode générique.
créer un Theme component et ajouter ceci à CSS Common.
div[data-wrap="redbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
//* Décommentez la ligne ci-dessous pour changer la couleur de fond. Bien que dans ce cas, vous devriez pouvoir utiliser la couleur de fond du bbcode.
// background-color: var(--secondary);
//* Couleur et épaisseur de la boîte
border: 2.5px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="greenbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="bluebox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="yellowbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #ffff00;
border-radius: 0.40em;
}
div[data-wrap="box"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
// background-color: var(--secondary);
border: 2.5px solid #808080;
border-radius: 0.40em;
}
Note : Créé plusieurs copies du code ci-dessus pour différentes couleurs. Par exemple “greenbox”, “yellowbox”, “bluebox” et “box” (gris)
Comment l’utiliser dans un post
[wrap=redbox]
> ## Boîte d'information
Test des boîtes
[/wrap]
Remplacez “red” par la couleur appropriée. Pour le gris, utilisez simplement “box”.
Note 2 : Si vous utilisez le composant de thème bbcode-color ou Theme component au lieu d’utiliser “>” (une ligne vide est nécessaire comme séparateur) ou vous pouvez utiliser bgcolor=
Colored Text TC Puisqu’il s’agit d’un composant de thème, il peut être installé quel que soit l’hébergement.
Il existe 2 #plugins qui prennent en charge la couleur Bbcode. Bbcode color ou Formatting Toolbar. Attention n’installez qu’un seul de ces plugins ; je pense que la barre d’outils de mise en forme avertit que l’installation des deux cassera votre site.
div[data-wrap="redbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="greenbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="bluebox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="yellowbox"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #ffff00;
border-radius: 0.40em;
}
div[data-wrap="box"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
border: 2.5px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="redboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #ff0000;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="greenboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #00ff00;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="blueboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #0000ff;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="yellowboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #ffff00;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="greyboxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #808080;
border-radius: 0.40em;
}
div[data-wrap="grey1boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #ff0000;
border-radius: 0.40em;
}
div[data-wrap="grey2boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #00ff00;
border-radius: 0.40em;
}
div[data-wrap="grey3boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #0000ff;
border-radius: 0.40em;
}
div[data-wrap="grey4boxbg"]{
margin-top: 0.15em;
margin-bottom: 0.15em;
padding-left: 0.30em;
padding-right: 0.30em;
background-color: #808080;
border: 2.75px solid #ffff00;
border-radius: 0.40em;
}
Utilisez ce code dans les publications pour les boîtes de couleur d’arrière-plan :
[Wrap="redboxbg"]
> Infobox
Testing boxed
[/wrap]
Nouvelles options de couleur d’arrière-plan Remplacez « red » par :
