Templates for Wikis (especially an Infobox Object)

Feature
1

Hey all! Using Discourse partially as a wiki for my interest group — I would really love to have infoboxes to really take these articles to the next level.

Has anyone integrated this into Discourse? I can’t find any plugins or theme comps for it.

I found someone who got a wiki-style infobox template working on Obsidian - so perhaps that would be a good place to start.

2 Likes
2

Maybe use Generic Bbcode wrapper.

The image is a screenshot of a digital interface displaying technical information and a test box with an informational caption. (Captioned by AI)
The image is a screenshot of a digital interface displaying technical information and a test box with an informational caption. (Captioned by AI)864×797 54.8 KB

create a theme-component and add this to CSS Common.

div[data-wrap="redbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
//* Uncomment line below to change background color.  Though in that case should be able to use bbcode background color.
//      background-color: var(--secondary);
//* Color & Thickness of Box
      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: Created several copies of above code for different colors. Ie “greenbox”, “yellowbox”, “bluebox” & “box”(grey)

The image shows a computer screen with a list of boxes, each labeled with a type of box and a testing text. (Captioned by AI)
The image shows a computer screen with a list of boxes, each labeled with a type of box and a testing text. (Captioned by AI)864×1480 106 KB

How to use in post

[wrap=redbox]
> ## Info box

Testing boxes
[/wrap]

Substitute “red” with appropriate color. For grey just “box”

Note 2; if using bbcode color plugin or theme-component instead of using “>”(blank line required as separator) or you could use bgcolor=

Colored Text TC Since this is a theme component it can be installed regardless of hosting.

There are 2 #plugins that supportBbcode color. Bbcode color or Formatting Toolbar. Warning only install one of these plugins; I think formatting tool bar warns installing both will break your site.

3

Revised Code adds background colors

  • Note this code has all code from previous post.
Code For CSS Common 
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;
}

Use this code in posts for bgcolor boxes:

[Wrap="redboxbg"]
> Infobox

Testing boxed
[/wrap]

New background color Options Substitute “red” with:

  • “green”, “blue”, “yellow”
    Color background. Grey border.
Screenshot Mobile

There is a colorful display with text boxes that likely represent different categories or purposes. (Captioned by AI)
There is a colorful display with text boxes that likely represent different categories or purposes. (Captioned by AI)864×1700 147 KB

  • “grey”, “grey#” #=1-4.
    *All grey backgrounds, grey border, 1 red border, 2 green border, 3 blue border, 4 yellow border
Screenshot Mobile

This is a screenshot of a user interface showing a testing box labeled "Picture" with a mechanical robot head as the image underneath. (Captioned by AI)
This is a screenshot of a user interface showing a testing box labeled "Picture" with a mechanical robot head as the image underneath. (Captioned by AI)864×1050 353 KB

This image displays a dropdown menu with four different boxes, each representing a different type of test. (Captioned by AI)
This image displays a dropdown menu with four different boxes, each representing a different type of test. (Captioned by AI)863×1287 105 KB

A stylized image of a robot with a human-like face and an intricate design, set against a backdrop of a futuristic cityscape. (Captioned by AI)
A stylized image of a robot with a human-like face and an intricate design, set against a backdrop of a futuristic cityscape. (Captioned by AI)863×908 392 KB