# Bbcode Infoboxes

**URL:** <https://meta.discourse.org/t/bbcode-infoboxes/323332>\
**Category:** Development\
**Tags:** css\
**Created:** [August 26, 2024, 12:53am UTC](https://meta.discourse.org/t/bbcode-infoboxes/323332 "2024-08-26T00:53:10Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)\
**Post date:** [August 26, 2024, 12:53am UTC](https://meta.discourse.org/t/bbcode-infoboxes/323332/1 "2024-08-26T00:53:10Z")

</div>

## Dress up your posts with Infoboxes!

- [From this discussion](https://meta.discourse.org/t/templates-for-wikis-especially-an-infobox-object/322617/2)

Simple pure CSS solution to add bling to topic contents.

Create a #Customization > Theme component and add this to “CSS Common”. First draft fully usable. Currently java free. Though I am sure could be cleaner and likely enhanced with some Java script.

> **Code**
>
> ```plaintext
> 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;
> }
> 
> // Border colourAdded Orange, Brown, Purple , Pink, magenta, cyan
> div[data-wrap="brownbox"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> border: 2.75px solid #964B00;
> border-radius: 0.40em;
> }
> div[data-wrap="orangebox"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> border: 2.75px solid #FFA500;
> border-radius: 0.40em;
> }
> div[data-wrap="purplebox"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> border: 2.75px solid #808080;
> border-radius: 0.40em;
> }
> div[data-wrap="pinkbox"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> border: 2.5px solid #FFC0CB;
> border-radius: 0.40em;
> }
> div[data-wrap="magentabox"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> border: 2.5px solid #FF00FF;
> border-radius: 0.40em;
> }
> div[data-wrap="cyanbox"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> border: 2.5px solid #00FFFF;
> border-radius: 0.40em;
> }
> 
> // Bg colour added brown, orange, purple, magenta, cyan
> div[data-wrap="brownboxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #964B00;
> border: 2.75px solid #808080;
> border-radius: 0.40em;
> }
> div[data-wrap="orangeboxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #FFA5000;
> border: 2.75px solid #808080;
> border-radius: 0.40em;
> }
> div[data-wrap="purpleboxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #800080;
> border: 2.75px solid #808080;
> border-radius: 0.40em;
> }
> div[data-wrap="pinkboxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #FFC0CB;
> border: 2.75px solid #808080;
> border-radius: 0.40em;
> }
> div[data-wrap="magentaboxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #FF00FF;
> border: 2.75px solid #808080;
> border-radius: 0.40em;
> }
> div[data-wrap="cyanboxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #00FFFF;
> border: 2.75px solid #808080;
> border-radius: 0.40em;
> }
> 
> // Grey background add Border colour Brown, Orange, Purple, Pink, Magenta, Cyan
> div[data-wrap="grey5boxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #808080;
> border: 2.75px solid #964B00;
> border-radius: 0.40em;
> }
> div[data-wrap="grey6boxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #808080;
> border: 2.75px solid #FFA5000;
> border-radius: 0.40em;
> }
> div[data-wrap="grey7boxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #808080;
> border: 2.75px solid #FFC0CB;
> border-radius: 0.40em;
> }
> div[data-wrap="grey8boxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #808080;
> border: 2.75px solid #FF00FF;
> border-radius: 0.40em;
> }
> div[data-wrap="grey9boxbg"]{
> margin-top: 0.15em;
> margin-bottom: 0.15em;
> padding-left: 0.30em;
> padding-right: 0.30em;
> background-color: #808080;
> border: 2.75px solid #00FFFF;
> border-radius: 0.40em;
> }
> 
> ```

**Screenshots**

> **Infobox color borders**
>
> ![The image shows a colorful user interface with multiple categories of information boxes. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/1/c/e/1ce37c2d58382083d4c4496312dca3dac5ea2f15.png)
> 
> ![The image shows a robotic figure with a pinkish-purple color scheme. The robot has a human-like face and head, and is set against a backdrop of a futuristic cityscape. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/3/a/8/3a8d37526c3727c2810549f55dac42b5ce1d4d63.jpeg)

> **Infobox color borders 2**
>
> ![The image shows a user interface for a testing application, with various testing categories listed as options, such as "Info box," "Testing text below," "Info box," "Testing text below," and "Info box." (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/e/9/7/e9722d503daea743989d76017b0a86a6e9ddd0da.png)
> 
> ![The image displays a mobile device screen with a list of colorful text boxes, each labeled with different types of information. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/8/4/e/84e991a18f415f0a4910315905801b23578845c8.png)

How to use in post

```plaintext
[wrap=redbox]
> ## Info box

Testing boxes
[/wrap]

```

Substitute “red” with “green”, “blue”, “yellow”, “brown”, “orange”, “purple”, “pink”, “cyan”. For grey just “box”

---

_[View the full topic](https://meta.discourse.org/t/bbcode-infoboxes/323332)._