Bbcode 信息框

Heliosurge · 2024 年8 月 26 日 00:53

用信息框装饰你的帖子！

来自此讨论

纯 CSS 解决方案，为帖子内容增添光彩。

创建一个 Theme component 并将其添加到“CSS Common”。第一个版本完全可用。目前不含 Java。但我确定可以做得更简洁，并且很可能通过一些 Java 脚本得到增强。

代码

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;
}

// 边框颜色添加了橙色、棕色、紫色、粉色、品红色、青色
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;
}

// 背景色添加了棕色、橙色、紫色、品红色、青色
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;
}

// 灰色背景添加边框颜色棕色、橙色、紫色、粉色、品红色、青色
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;
}

截图

信息框边框颜色

信息框颜色边框 2

如何在帖子中使用

[wrap=redbox]
> ## 信息框

测试框
[/wrap]

将“red”替换为“green”、“blue”、“yellow”、“brown”、“orange”、“purple”、“pink”、“cyan”。对于灰色，只需使用“box”。

Heliosurge · 2024 年8 月 26 日 01:05

在此处使用代码以用于背景框：

[Wrap="redboxbg"]
> Infobox

Testing boxed
[/wrap]

新的背景颜色选项将“red”替换为：

“green”、“blue”、“yellow”、“brown”、“orange”、“purple”、“pink”、“cyan”。，“grey”。
添加了空白框
彩色背景。灰色边框。

Screenshot Mobile

Screenshot Mobile 2

“grey”、“grey#” #=0-9。
*所有灰色背景，灰色边框，
边框颜色
1 红色，2 绿色，3 蓝色，4 黄色，5 棕色，6 橙色，7 紫色，8 品红色，9 粉色，0 青色 (操作码已更新)

Screenshot Mobile

Screenshot Mobile 2

这可以是一个独立的组件，也可以添加到彩色文本 TC。

*限制可用的颜色有助于保持这些整洁。

待办事项：

~~添加橙色、棕色、紫色和粉色、品红色、青色的选项~~ 已完成代码更新操作帖子
也许通过反馈使代码更美观。
创建 GitHub 帐户。学习添加用于自定义边框的设置以及……最终以 TC 的形式发布。

hazenbiz · 2024 年8 月 26 日 02:54

感谢您在此事上牵头！

这能否像信息框那样通常出现在右侧一样，出现在主题的侧边？
看起来我最初为 Obsidian 提供的示例（https://codepen.io/carloshenrgin/pen/xxyzavo）需要一个 Multi-Column Markdown 插件作为先决条件。

Discourse 内置的表格 CSS 还不错，只是它不能出现在主题的侧边。在页面和框内获得布局灵活性可能是最大的障碍。

Heliosurge · 2024 年8 月 26 日 03:42

正在进行一些测试。看起来换行 bbcode 可能无法包含另一个换行 bbcode。

如果您安装了 bbcode 插件，则可能可以使用浮动 bbcode。

可能有一种方法可以放置一个开关。

或者，如果我理解正确，可以通过添加 div 数据属性来扩展，使用 Float 5:width: 48% CSS 属性来制作额外的副本（有时间时会进行测试……）。

或者

如果您知道要优先排序的颜色信息框，可以添加浮动/对齐和其他 CSS 来实现多列。

我还在学习中，希望其他人能有所贡献。

已添加其他颜色，请参见前 2 篇帖子

merefield · 2024 年8 月 26 日 08:43

为此，您需要一个类似以下的解决方案：

在此处查看示例：Discourse AI Topic Summary 🤖

Heliosurge · 2024 年8 月 26 日 15:26

我已经设法测试了对 2 列的支持。代码仍然非常基础/原始。

目前的代码只有 Redbox 的浮点选项。

// 测试浮点
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;
}

仍然需要添加其他颜色选项。

如何在帖子中使用

[wrap="redboxfl"]
# 信息框浮点
测试浮点
[/Wrap]

[wrap="redboxfr"]
# 信息框浮点
测试浮点
[/Wrap]
>
文本之后

注意：在行之间至少需要“>”，下方至少有文本。或者，您可以像我用于信息框标题一样，将下方文本放在“> 文本”旁边。

移动端截图

@merefield 我能否在 Op 中的每个当前代码中添加类似以下内容？


&[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;
}

~~在帖子中使用它的选项，例如？~~ 确认有效！

[wrap="redbox" float="left"]
# 信息框浮点
测试浮点
[/Wrap]

移动端截图

第一组只是使用浮动左侧 3 个自动换行！

我认为我将移动端的代码宽度设置为 44.5%。然后让桌面支持 3 列，宽度设置为 25%？

或者，如果您有更好的解决方案，允许移动端使用 2 列，桌面端使用 3 或 4 列。不过，需要根据列数调整宽度，并在移动端将其他列移至下一行。

也许可以使用类似图片中的网格或 Masonry 图片中的代码？

Heliosurge · 2024 年8 月 26 日 20:39

两列代码

添加到移动端和/或桌面端的两列。

代码

//* 为移动端两列添加浮动
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;
    }
}

帖子中使用的代码：

[Wrap="Redbox" float="left"]
> #信息框浮动
下面的文字
[/Wrap]

将“redbox”替换为适当的框。Float=“left”或“right”。

在最后一个框后使用“>”。

例如

[Wrap="Redbox" float="left"]
> #信息框浮动
下面的文字
[/Wrap]
[Wrap="Redbox" float="left"]
> #信息框浮动
下面的文字
[/Wrap]
[Wrap="Redbox" float="left"]
> #信息框浮动
下面的文字
[/Wrap]
>

这将安排3个框在2列中向左对齐。

将适用于3列桌面代码。也许可以作为附件额外添加 col=3？

暂时将其添加到移动端和桌面端部分

Heliosurge · 2024 年8 月 27 日 09:30

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.

话题		回复	浏览量
Templates for Wikis (especially an Infobox Object) Feature wiki-posts	2	128	2024 年8 月 26 日
Discourse Bars :beers: :cocktail: (a sidebar framework) Theme component	56	4283	2025 年6 月 9 日
FKB Pro - Social theme Theme	452	27891	2025 年10 月 31 日
Quote Callouts Theme component	38	1148	2025 年11 月 29 日
Graceful Theme Theme official , graceful-theme	58	44833	2025 年9 月 25 日

Bbcode 信息框

用信息框装饰你的帖子！

待办事项：

What’s new?

相关话题