Bbcode Infoboxes

Dress up your posts with Infoboxes!

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

Infobox color borders 2

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”

1 Like

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


Screenshot Mobile 2

  • “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

Screenshot Mobile 2

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.
3 Likes

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.

1 Like

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

For that you need a solution like this:

See an example here: Discourse AI Topic Summary 🤖

3 Likes

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


@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

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

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.

1 Like