Dress up your posts with Infoboxes! From this discussion Simple pure CSS solution to add bling to topic contents. Create a #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 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)] [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)] 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)] [The image displays a mobile device screen with a list of colorful text boxes, each labeled with different types of information. (Captioned by AI)] How to use in post [wrap=redbox] > ## Info box Testing boxes [/wrap] Substitute “red” with “green”, “blue”, “yellow”, “brown”, “orange”, “purple”, “pink”, “cyan”. For grey just “box”

Use this code in posts for bgcolor boxes: [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)] 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)] [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)] “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)] [This image displays a dropdown menu with four different boxes, each representing a different type of test. (Captioned by AI)] 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)] [This is a screenshot of an information box with a placeholder text for the content. (Captioned by AI)] This could be both a standalone component or maybe also added to Coloured Text TC. 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.

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 required a Multi-Column Markdown plugin 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.

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

[תמונה] Hazen Ellwood: appear on the side of topics For that you need a solution like this: [תמונה] Discourse Bars beers cocktail (a sidebar framework) Theme component eyeglasses Overview A Theme Component that allows you to lay out Components[1] on top and side bars. Specify a set of “widgets” distinctly for Route and Position. Supports setups for each of: discovery[2], topic, tag[3], category[3:1], categories[3:2] OR tags-intersection[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 🤖

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. // 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 [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)] @merefield could I add something to each current code in Op something like &[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! [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)] 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?

Code for 2 Columns Add to mobile &or desktop for 2 column. Code //* 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: [Wrap="Redbox" float="left"] > #Infobox float Text below [/Wrap] Substitute “redbox” with appropriate box. Float= “left” or “right”. Use “>” after last box. ie [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)]

Updated Common CSS Code 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)]

תיבות מידע ב-Bbcode

מפתח

merefield (Robert) 26 באוגוסט,‏ 2024,‏ 8:43am 5

For that you need a solution like this:

See an example here: Discourse AI Topic Summary 🤖

נושא		תגובות	צפיות
Templates for Wikis (especially an Infobox Object) Feature wiki-posts	2	357	26 באוגוסט,‏ 2024
Discourse Bars :beers: :cocktail: (a sidebar framework) Theme component	68	6634	22 בפברואר,‏ 2026
FKB Pro - Social theme Theme	502	45269	14 בנובמבר,‏ 2026
Select-kit is completely missing Product Support	9	796	27 ביולי,‏ 2022
Graceful Theme Theme official , graceful-theme	61	47794	13 במאי,‏ 2026

תיבות מידע ב-Bbcode

נושאים קשורים