Caixas de informações BBCode

Dev
1

Decore suas postagens com Infoboxes!

Solução simples e pura em CSS para adicionar brilho ao conteúdo dos tópicos.

Crie um Theme component e adicione isso em “CSS Common”. Primeira versão totalmente utilizável. Atualmente sem Java. Embora eu tenha certeza de que poderia ser mais limpo e provavelmente aprimorado com algum script Java.

Código 
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;
}

// Cor da borda Adicionado Laranja, Marrom, Roxo, Rosa, magenta, ciano
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;
}

// Cor de fundo adicionado marrom, laranja, roxo, magenta, ciano
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;
}

// Fundo cinza adiciona cor de borda Marrom, Laranja, Roxo, Rosa, Magenta, Ciano
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;
}

Capturas de tela

Bordas coloridas de Infobox

A imagem mostra uma interface de usuário colorida com várias categorias de caixas de informação. (Legenda da IA)
A imagem mostra uma interface de usuário colorida com várias categorias de caixas de informação. (Legenda da IA)864×1679 149 KB

A imagem mostra uma figura robótica com um esquema de cores roxo-rosado. O robô tem um rosto e cabeça semelhantes aos humanos, e está contra um cenário de uma paisagem urbana futurista. (Legenda da IA)
A imagem mostra uma figura robótica com um esquema de cores roxo-rosado. O robô tem um rosto e cabeça semelhantes aos humanos, e está contra um cenário de uma paisagem urbana futurista. (Legenda da IA)864×1086 135 KB

Bordas coloridas de Infobox 2

A imagem mostra uma interface de usuário para um aplicativo de teste, com várias categorias de teste listadas como opções, como "Caixa de informações", "Texto de teste abaixo", "Caixa de informações", "Texto de teste abaixo" e "Caixa de informações". (Legenda da IA)
A imagem mostra uma interface de usuário para um aplicativo de teste, com várias categorias de teste listadas como opções, como "Caixa de informações", "Texto de teste abaixo", "Caixa de informações", "Texto de teste abaixo" e "Caixa de informações". (Legenda da IA)852×1669 126 KB

A imagem exibe a tela de um dispositivo móvel com uma lista de caixas de texto coloridas, cada uma rotulada com diferentes tipos de informação. (Legenda da IA)
A imagem exibe a tela de um dispositivo móvel com uma lista de caixas de texto coloridas, cada uma rotulada com diferentes tipos de informação. (Legenda da IA)864×1311 100 KB

Como usar na postagem

[wrap=redbox]
> ## Caixa de informações

Testando caixas
[/wrap]

Substitua “red” por “green”, “blue”, “yellow”, “brown”, “orange”, “purple”, “pink”, “cyan”. Para cinza, apenas “box”.

1 curtida
2

Use este código em postagens para caixas de cor de fundo:

[Wrap="redboxbg"]
> Infobox

Testing boxed
[/wrap]

Novas opções de cor de fundo Substitua “red” por:

  • “green”, “blue”, “yellow”, “brown”, “orange”, “purple”, “pink”, “cyan”., “grey”.
  • Caixa em branco adicionada
    Cor de fundo. Borda cinza.
Screenshot Mobile

Há uma exibição colorida com caixas de texto que provavelmente representam diferentes categorias ou propósitos. (Legenda da IA)
Há uma exibição colorida com caixas de texto que provavelmente representam diferentes categorias ou propósitos. (Legenda da IA)864×1700 147 KB

Screenshot Mobile 2

A imagem exibe uma interface de telefone móvel com uma lista de caixas de teste, incluindo informações e caixas de texto de teste, com um esquema de cores azul e branco. (Legenda da IA)
A imagem exibe uma interface de telefone móvel com uma lista de caixas de teste, incluindo informações e caixas de texto de teste, com um esquema de cores azul e branco. (Legenda da IA)864×1631 144 KB

A imagem exibe a cabeça de um robô futurista, acompanhada pelo texto "Testing text boxes" e um prompt para o usuário "Testing text below. (Legenda da IA)
A imagem exibe a cabeça de um robô futurista, acompanhada pelo texto "Testing text boxes" e um prompt para o usuário "Testing text below. (Legenda da IA)864×876 437 KB

  • “grey”, “grey#” #=0-9.
    *Todos os fundos cinza, borda cinza,
    Borda cor
    1 vermelho, 2 verde, 3 azul, 4 amarelo, 5 Marrom, 6 Laranja, 7 Roxo, 8 Magenta, 9 Rosa, 0 Ciano (Op Code atualizado)
Screenshot Mobile

Este é um screenshot de uma interface de usuário mostrando uma caixa de teste rotulada "Picture" com uma cabeça de robô mecânica como imagem abaixo. (Legenda da IA)
Este é um screenshot de uma interface de usuário mostrando uma caixa de teste rotulada "Picture" com uma cabeça de robô mecânica como imagem abaixo. (Legenda da IA)864×1050 353 KB

Esta imagem exibe um menu suspenso com quatro caixas diferentes, cada uma representando um tipo diferente de teste. (Legenda da IA)
Esta imagem exibe um menu suspenso com quatro caixas diferentes, cada uma representando um tipo diferente de teste. (Legenda da IA)863×1287 105 KB

Screenshot Mobile 2

A imagem mostra uma lista de seis opções diferentes de caixas de teste, cada uma com seu próprio código de cor e um rótulo para sua função. (Legenda da IA)
A imagem mostra uma lista de seis opções diferentes de caixas de teste, cada uma com seu próprio código de cor e um rótulo para sua função. (Legenda da IA)864×1676 127 KB

Este é um screenshot de uma caixa de informações com um texto de espaço reservado para o conteúdo. (Legenda da IA)
Este é um screenshot de uma caixa de informações com um texto de espaço reservado para o conteúdo. (Legenda da IA)864×445 33.4 KB

Isso pode ser um componente independente ou talvez também adicionado a Texto Colorido TC.

  • Restringir quais cores podem ser usadas ajuda a mantê-las limpas.

PARA FAZER:

  • Adicionar opções para Laranja, Marrom, Roxo e Rosa, Magenta, Ciano Código completo atualizado Op post
  • Talvez tornar o código mais bonito com feedback.
  • Criar conta no GitHub. Aprender a adicionar configurações para personalizar borda e?.. Publicar eventualmente como um TC.
3 curtidas
3

Obrigado por liderar isso!

Isso poderia aparecer na lateral dos tópicos, como os infoboxes geralmente aparecem no lado direito?
Parece que o exemplo que dei originalmente para Obsidian exigia um plugin Multi-Column Markdown como pré-requisito.

O CSS de tabela integrado do Discourse não é tão ruim, exceto que ele não pode aparecer na lateral de um tópico. Obter flexibilidade no layout na página e dentro da caixa é provavelmente o maior obstáculo.

1 curtida
4

Fazendo alguns testes. Parece que talvez um bbcode de contêiner não possa ter outro bbcode de contêiner dentro.

Se você tiver um dos plugins de bbcode instalados, provavelmente poderá usar bbcodes de flutuação.

Provavelmente há uma maneira de colocar um switch, talvez.

Alternativamente, cópias extras poderiam ser feitas adicionando, se eu entendi corretamente, usando atributos CSS Float 5:width: 48% (testarei quando tiver tempo, talvez seja possível estender adicionando um atributo de dados div…)

  • ou

Se você souber quais caixas de informações coloridas deseja priorizar, poderá adicionar float/align e outros CSS para realizar várias colunas.

Ainda estou aprendendo, então espero que outros possam adicionar mais informações.

Cores adicionais adicionadas, veja os 2 primeiros posts

5

Para isso, você precisa de uma solução como esta:

Veja um exemplo aqui: Discourse AI Topic Summary 🤖

3 curtidas
6

Ok, consegui testar o suporte para 2 colunas. O código ainda é bastante básico/primitivo.

O código ATM tem apenas opções de float para Redbox.

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

Ainda preciso adicionar outras opções de cores.

Como usar no Post

[wrap="redboxfl"]
# Infobox float

Testing float
[/Wrap]

[wrap="redboxfr"]
# Infobox float

Testing float
[/Wrap]
>
Text after
  • Nota: O “>” é necessário entre as linhas, pelo menos com o texto abaixo. Alternativamente, você poderia colocar o texto abaixo ao lado do “> Texto” da mesma forma que usei para o título da Infobox.
Screenshot Mobile

A imagem é uma captura de tela de um aplicativo móvel, mostrando um menu suspenso com quatro opções relacionadas a elementos flutuantes em um contexto digital. (Legenda por IA)
A imagem é uma captura de tela de um aplicativo móvel, mostrando um menu suspenso com quatro opções relacionadas a elementos flutuantes em um contexto digital. (Legenda por IA)864×1544 170 KB

@merefield, eu poderia adicionar algo a cada código atual no Op, algo como


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

Para ter a opção de usar no post como? Confirmado, funciona!

[wrap="redbox" float="left"]
# Infobox float

Testing float
[/Wrap]
Screenshot Mobile

Esta imagem exibe uma captura de tela de um dispositivo móvel com uma lista de elementos flutuantes de nomes diferentes. (Legenda por IA)
Esta imagem exibe uma captura de tela de um dispositivo móvel com uma lista de elementos flutuantes de nomes diferentes. (Legenda por IA)862×1222 120 KB

O primeiro conjunto é apenas usando float left, 3 deles quebram automaticamente!

Acho que adicionei o código móvel com 44,5% de largura. Então, criei suporte para desktop com 3 colunas, talvez com largura definida para 25%?

Ou se você tiver uma solução melhor para permitir 2 colunas no celular com 3 ou 4 no desktop. Embora precise ter a largura ajustada de acordo com o número de colunas e mover colunas adicionais para a próxima linha se for no celular.

Talvez usar algo como grid da imagem ou código de masonry image?

7

Código para 2 Colunas

  • Adicionar para celular e/ou desktop para 2 colunas.
Código 
//* Adiciona Float para 2 colunas em celular 
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;
    }
}

Código para usar na postagem:

[Wrap="Redbox" float="left"]
> #Infobox float
Texto abaixo
[/Wrap]

Substitua “redbox” pela caixa apropriada. Float= “left” ou “right”.

Use “>” após a última caixa.

  • ex:
[Wrap="Redbox" float="left"]
> #Infobox float
Texto abaixo
[/Wrap]
[Wrap="Redbox" float="left"]
> #Infobox float
Texto abaixo
[/Wrap]
[Wrap="Redbox" float="left"]
> #Infobox float
Texto abaixo
[/Wrap]
>

Isso organizará 3 caixas em 2 colunas alinhadas à esquerda.

Funcionará em um código de desktop de 3 colunas. Talvez como um anexo extra, como col=3?

Por enquanto, adicione isso a ambas as seções de celular e desktop.

A imagem exibe uma captura de tela de um aplicativo móvel com caixas de texto relacionadas a um infobox, sugerindo a capacidade de adicionar ou editar conteúdo em um site. (Legenda gerada por IA)
A imagem exibe uma captura de tela de um aplicativo móvel com caixas de texto relacionadas a um infobox, sugerindo a capacidade de adicionar ou editar conteúdo em um site. (Legenda gerada por IA)864×1543 162 KB

8

Updated Common CSS

Code 
div[data-wrap="redbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.75px solid #ff0000;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
//  background-color: #f5f5f5;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
//  background-color: #f5f5f5;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="greenbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.75px solid #00ff00;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="bluebox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;;
      border: 2.75px solid #007bff;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="yellowbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.75px solid #ffff00;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -12px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
v[data-wrap="brownbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.75px solid #964B00;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -12px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="orangebox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.75px solid #FFA500;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="purplebox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.75px solid #800080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -12px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="pinkbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.75px solid #FFC0CB;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -12px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="magentabox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.75px solid #FF00FF;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="cyanbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.75px solid #00FFFF;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -12px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="box"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;;
//     border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="greybox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="brownboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #964B00;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="orangeboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #FFA5000;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="purpleboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #800080;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5x !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="pinkboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #FFC0CB;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="magentaboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #FF00FF;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="cyanboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #00FFFF;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="redboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #ff0000;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
      //* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="greenboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #00ff00;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="blueboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
//      background-color: #0000ff;
      background-color: #007bff;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="yellowboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #ffff00;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
v[data-wrap="brownboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #964B00;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="orangeboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #FFA5000;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="purpleboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #800080;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="pinkboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #FFC0CB;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="magentaboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #FF00FF;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="cyanboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #00FFFF;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="greyboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="grey1boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #ff0000;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="grey2boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color:  #808080;
      border: 2.75px solid #00ff00;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="grey3boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #007bff;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="grey4boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #ffff00;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}

// Grey background add Border 
// colour 4Brown, 5Orange,
// 7Purple, 8Pink, 9Magenta, Cyan

div[data-wrap="grey5boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #964B00;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="grey6boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color:  #808080;
      border: 2.75px solid #FFA500;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="grey7boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #FFC0CB;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="grey8boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #FF00FF;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="grey9boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #FFC0CB;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}
div[data-wrap="grey0boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #00FFFF;
      border-radius: 0.40em;
//* Header customizations    
h1 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
h2, h3, h4, h5, h6 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  color: darkblue;
  text-align: center;
  margin: 3px 0;
  margin-top: -5px !important;
  margin-bottom: -5px !important;
  padding: 3px;
  background-color: darkgrey;
  border: 2px solid #ccc;
  border-radius: 5px;
}
}

What’s new?

  • Added “h1 to h6” customizations. No longer need to use “>” to highlight headers.
  • adjusted border thickness.
  • Fixed added grey with pink border.
  • changed “box” from grey border to none to use as a blank box container.
  • greybox has grey border.
  • Still need to adjust header color for greybg and possibly color background.

This is a screenshot of a user interface, showcasing a text box input area with the heading "Info box". (Captioned by AI)
This is a screenshot of a user interface, showcasing a text box input area with the heading "Info box". (Captioned by AI)864×782 70.7 KB

1 curtida