# 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:** 8 **Page:** 1
### 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")
## 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” ---
### 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, 1:05am UTC](https://meta.discourse.org/t/bbcode-infoboxes/323332/2 "2024-08-26T01:05:00Z")
Use this code in posts for bgcolor boxes: ```plaintext [Wrap="redboxbg"] > Infobox Testing boxed [/wrap] ``` New background color Options Substitute “ **red** ” with: - “green”, “blue”, “yellow”, “brown”, “orange”, “purple”, “pink”, “cyan”., “grey”. - Added blank box _Color background. Grey border._ > **Screenshot Mobile** > > ![There is a colorful display with text boxes that likely represent different categories or purposes. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/6/8/6/6866e812c631a7c6a422215255aa28cbcf12f387.png) > > * * * > **Screenshot Mobile 2** > > ![The image displays a mobile phone interface with a list of test boxes, including information and testing text boxes, with a blue and white color scheme. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/0/7/a/07a6189fcc8f27c71c14a9756c55764fc7f81293.png) > > ![The image displays a futuristic robot head, accompanied by the text "Testing text boxes" and a prompt for the user to "Testing text below. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/0/b/a/0bac131b4f467c7e6855ea41fa9750c8da387e5b.png) - “grey”, “grey#” #=0-9. \*All grey backgrounds, grey border, **Border** colour 1 red , 2 green , 3 blue, 4 yellow , 5 Brown, 6 Orange, 7 Purple, 8 Magenta, 9 Pink, 0 Cyan _(Op Code updated)_ > **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)](https://global.discourse-cdn.com/meta/original/4X/b/7/f/b7f0d035d83e6af5612e3edc7780aa3aa5b7cacc.png) > > ![This image displays a dropdown menu with four different boxes, each representing a different type of test. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/0/5/b/05bdb4139fbb59ed3167b8b22b6e83bf9cba6450.png) > **Screenshot Mobile 2** > > ![The image shows a list of six different testing box options, each with its own color code and a label for its function. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/6/7/4/674d504ed15332225eec59b9362d80ba53c0ce65.png) > > ![This is a screenshot of an information box with a placeholder text for the content. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/f/c/2/fc272b4f25cd886e898e176b2dfd3baac03cd6f5.png) This could be both a standalone component or maybe also added to [Coloured Text TC](https://meta.discourse.org/t/discourse-coloured-text/218111). - Restricting what colours can be used helps keep these clean. * * * ## TODO: - ~~Add options for Orange, Brown, Purple, & Pink, Magenta, Cyan~~ Complete code updated Op post - Maybe make code prettier with feedback. - Create GitHub account. Learn adding settings for customizing border &?.. Publish eventually as a TC. ---
### Author: ![hazenbiz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hazenbiz/32/442603_2.png) [@hazenbiz](https://meta.discourse.org/u/hazenbiz) #### Post date: [August 26, 2024, 2:54am UTC](https://meta.discourse.org/t/bbcode-infoboxes/323332/3 "2024-08-26T02:54:45Z")
Thanks for taking the lead on this! Could this appear on the side of topics, like how infoboxes typically appear on the right side? Looks like [the example I originally gave for Obsidian](https://codepen.io/carloshenrgin/pen/xxyzavo) required a [Multi-Column Markdown plugin](https://www.patreon.com/posts/65804979) as a prerequisite. Discourse’s built-in table CSS is not so bad other than it can’t appear on the side of a topic. Getting flexibility in the layout on the page and within the box is probably the biggest hurdle. ---
### 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, 3:42am UTC](https://meta.discourse.org/t/bbcode-infoboxes/323332/4 "2024-08-26T03:42:15Z")
Doing some testing. Looks like maybe a wrap bbcode cannot have another wrapbbcode within. If you have one of the bbcode plugins installed you could likely use float bbcodes. There is likely a way to put a switch maybe. Alternatively extra copies could be made adding if I understand correctly using Float 5:width: 48% CSS attributes(will test when have time maybe be able to extend by addicting a div data attribute…) - or If you know what colour info boxes you want to prioritize order you could add float/align and other CSS to accomplish multi columns. I am still learning so hopefully others can add to things. **Additional colours added see first 2 posts** ---
### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield) #### Post date: [August 26, 2024, 8:43am UTC](https://meta.discourse.org/t/bbcode-infoboxes/323332/5 "2024-08-26T08:43:27Z")
> [@hazenbiz](#): > > appear on the side of topics For that you need a solution like this: > [@Discourse Bars beers cocktail (a sidebar framework)](https://meta.discourse.org/t/discourse-bars-a-sidebar-framework/298216): > > eyeglasses Overview A Theme Component that allows you to lay out Components[[1]](#footnote-1469292-1) on top and side bars. Specify a set of “widgets” distinctly for Route and Position. Supports setups for each of: discovery[[2]](#footnote-1469292-2), topic, tag[[3]](#footnote-1469292-3), category[[3:1]](#footnote-1469292-3), categories[[3:2]](#footnote-1469292-3) OR tags-intersection[[4]](#footnote-1469292-4) “Bars” can be either: top, left, right OR alternative right location. Each bar can be collapsed or dismissed (refresh browser to reset dismiss). They can be minimised by default. Handles the Official Sidebar, but if you … See an example here: [Discourse AI Topic Summary 🤖](https://meta.discourse.org/t/discourse-ai-topic-summary/256711#side-bars-support-6) ---
### 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, 3:26pm UTC](https://meta.discourse.org/t/bbcode-infoboxes/323332/6 "2024-08-26T15:26:36Z")
Okay have manage to test support for 2 columns. The code is still pretty basic/primitive. The code ATM only has float options for Redbox. ```plaintext // Testing float div[data-wrap="redboxfl"]{ margin-top: 0.15em; margin-bottom: 0.15em; //* float: left; margin-right: 0.10em; width: 45.5% !important; //* padding-left: 0.30em; padding-right: 0.30em; float: left; border: 2.5px solid #ff0000; border-radius: 0.40em; } div[data-wrap="redboxfr"]{ margin-top: 0.15em; margin-bottom: 0.15em; //* float: right; margin-left: 0.10em; width: 45.5% !important; //* padding-left: 0.30em; padding-right: 0.30em; float: right; border: 2.5px solid #ff0000; border-radius: 0.40em; } ``` Still need to add other color options. How to use in Post ```plaintext [wrap="redboxfl"] # Infobox float Testing float [/Wrap] [wrap="redboxfr"] # Infobox float Testing float [/Wrap] > Text after ``` - **Note** : The “\>” is required between rows at least with text below. Alternatively you could put the text below beside the “\> Text” similar to how I used it for the Infobox title. > **Screenshot Mobile** > > ![The image is a screenshot of a mobile application, showing a dropdown menu with four options related to floating elements in a digital context. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/7/9/6/79624fb09780b5454f458d5354379da4a23180ee.jpeg) * * * @merefield could I add something to each current code in Op something like ```plaintext &[data-float="left"]{ float: left; margin-left: 0.25em !important; width: 44.5% !important; } &[data-float="right"]{ float: right; margin-right: 0.25em !important; width: 44.5% !important; } ``` ~~To have option to use in post like?~~ Confirmed works! ```plaintext [wrap="redbox" float="left"] # Infobox float Testing float [/Wrap] ``` > **Screenshot Mobile** > > ![This image displays a screenshot of a mobile device with a list of differently named floating elements. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/3/e/f/3ef8d94fa4c60396162002e4163f36fc0dbfe06f.png) > > The first set is just using float left 3 of them auto wraps! Think it I add the code mobile at 44.5% width. Then make desktop support 3 columns maybe with width set to 25% width? Or if you have a better solution to allow 2 columns in mobile with 3 or 4 on desktop. Though would need to have width adjust according to number of columns and move additional columns to next line if mobile. Maybe use something like grid from image or code from masonry image? ---
### 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, 8:39pm UTC](https://meta.discourse.org/t/bbcode-infoboxes/323332/7 "2024-08-26T20:39:42Z")
Code for 2 Columns - Add to mobile &or desktop for 2 column. > **Code** > > ```plaintext > //* Adds Float for mobile 2 columns > > div[data-wrap="redbox"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="greenbox"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="bluebox"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="yellowbox"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="brownbox"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="orangebox"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="purplebox"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="pinkbox"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="magentabox"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="cyanbox"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="greybox"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > > div[data-wrap="redboxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="greenboxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="blueboxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="yellowboxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="brownboxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="orangeboxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="purpleboxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="pinkboxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="magentaboxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="cyanboxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="greyboxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="grey1boxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="grey2boxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="grey3boxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="grey4boxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="grey5boxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="grey6boxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="grey7boxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="grey8boxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > div[data-wrap="grey9boxbg"]{ > > &[data-float="left"]{ > float: left; > margin-left: 0.25em !important; > width: 44.5% !important; > } > &[data-float="right"]{ > float: right; > margin-rightt: 0.25em !important; > width: 44.5% !important; > } > } > > ``` * * * Code to use in post: ```plaintext [Wrap="Redbox" float="left"] > #Infobox float Text below [/Wrap] ``` Substitute “redbox” with appropriate box. Float= “left” or “right”. Use “\>” after last box. - ie ```plaintext [Wrap="Redbox" float="left"] > #Infobox float Text below [/Wrap] [Wrap="Redbox" float="left"] > #Infobox float Text below [/Wrap] [Wrap="Redbox" float="left"] > #Infobox float Text below [/Wrap] > ``` This will arrange 3 boxes in 2 columns aligning to left. Will work on a 3 column desktop code..Maybe as an attachment extra ie col=3? For time being add this to both mobile & desktop sections ![The image displays a screenshot of a mobile application with text boxes related to an infobox, suggesting the ability to add or edit content on a website. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/4/d/5/4d577ceac3fb9c14d4c4ef27b88741c9f4dfc1f6.jpeg) ---
### 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 27, 2024, 9:30am UTC](https://meta.discourse.org/t/bbcode-infoboxes/323332/8 "2024-08-27T09:30:40Z")
Updated Common CSS > **Code** > > ```plaintext > div[data-wrap="redbox"]{ > margin-top: 0.15em; > margin-bottom: 0.15em; > padding-left: 0.30em; > padding-right: 0.30em; > border: 2.75px solid #ff0000; > border-radius: 0.40em; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > // background-color: #f5f5f5; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > // background-color: #f5f5f5; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > div[data-wrap="greenbox"]{ > margin-top: 0.15em; > margin-bottom: 0.15em; > padding-left: 0.30em; > padding-right: 0.30em; > border: 2.75px solid #00ff00; > border-radius: 0.40em; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > div[data-wrap="bluebox"]{ > margin-top: 0.15em; > margin-bottom: 0.15em; > padding-left: 0.30em; > padding-right: 0.30em;; > border: 2.75px solid #007bff; > border-radius: 0.40em; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > div[data-wrap="yellowbox"]{ > margin-top: 0.15em; > margin-bottom: 0.15em; > padding-left: 0.30em; > padding-right: 0.30em; > border: 2.75px solid #ffff00; > border-radius: 0.40em; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -12px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > v[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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -12px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > div[data-wrap="purplebox"]{ > margin-top: 0.15em; > margin-bottom: 0.15em; > padding-left: 0.30em; > padding-right: 0.30em; > border: 2.75px solid #800080; > border-radius: 0.40em; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -12px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > div[data-wrap="pinkbox"]{ > margin-top: 0.15em; > margin-bottom: 0.15em; > padding-left: 0.30em; > padding-right: 0.30em; > border: 2.75px solid #FFC0CB; > border-radius: 0.40em; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -12px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > div[data-wrap="magentabox"]{ > margin-top: 0.15em; > margin-bottom: 0.15em; > padding-left: 0.30em; > padding-right: 0.30em; > border: 2.75px solid #FF00FF; > border-radius: 0.40em; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > div[data-wrap="cyanbox"]{ > margin-top: 0.15em; > margin-bottom: 0.15em; > padding-left: 0.30em; > padding-right: 0.30em; > border: 2.75px solid #00FFFF; > border-radius: 0.40em; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -12px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > div[data-wrap="box"]{ > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > div[data-wrap="greybox"]{ > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5x !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > div[data-wrap="blueboxbg"]{ > margin-top: 0.15em; > margin-bottom: 0.15em; > padding-left: 0.30em; > padding-right: 0.30em; > // background-color: #0000ff; > background-color: #007bff; > border: 2.75px solid #808080; > border-radius: 0.40em; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > v[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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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 #007bff; > border-radius: 0.40em; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > > // Grey background add Border > // colour 4Brown, 5Orange, > // 7Purple, 8Pink, 9Magenta, 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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 #FFA500; > border-radius: 0.40em; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > 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 #FFC0CB; > border-radius: 0.40em; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > div[data-wrap="grey0boxbg"]{ > 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; > //* Header customizations > h1 { > font-family: Georgia, serif; > font-size: 30px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > h2, h3, h4, h5, h6 { > font-family: Georgia, serif; > font-size: 20px; > font-weight: bold; > color: darkblue; > text-align: center; > margin: 3px 0; > margin-top: -5px !important; > margin-bottom: -5px !important; > padding: 3px; > background-color: darkgrey; > border: 2px solid #ccc; > border-radius: 5px; > } > } > > ``` ## What’s new? - Added “h1 to h6” customizations. No longer need to use “\>” to highlight headers. - adjusted border thickness. - Fixed added grey with pink border. - changed “box” from grey border to none to use as a blank box container. - greybox has grey border. - Still need to adjust header color for greybg and possibly color background. ![This is a screenshot of a user interface, showcasing a text box input area with the heading "Info box". (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/9/c/2/9c2c65b618ab9d2381ca28ce063d80fec8d915e6.png)