Infobox di Bbcode

Sviluppatore
1

Vesti i tuoi post con Infobox!

Semplice soluzione CSS pura per aggiungere un tocco di stile ai contenuti dei topic.

Crea un Theme component e aggiungi questo a “CSS Common”. Prima bozza completamente utilizzabile. Attualmente senza java. Anche se sono sicuro che potrebbe essere più pulito e probabilmente migliorato con un po’ di JavaScript.

Codice 
div[data-wrap="redbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.5px solid #ff0000;
      border-radius: 0.40em;
}
div[data-wrap="greenbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.5px solid #00ff00;
      border-radius: 0.40em;
}
div[data-wrap="bluebox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.5px solid #0000ff;
      border-radius: 0.40em;
}
div[data-wrap="yellowbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.5px solid #ffff00;
      border-radius: 0.40em;
}
div[data-wrap="box"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.5px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="redboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #ff0000;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="greenboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #00ff00;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="blueboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #0000ff;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="yellowboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #ffff00;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="greyboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="grey1boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #ff0000;
      border-radius: 0.40em;
}
div[data-wrap="grey2boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color:  #808080;
      border: 2.75px solid #00ff00;
      border-radius: 0.40em;
}
div[data-wrap="grey3boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #0000ff;
      border-radius: 0.40em;
}
div[data-wrap="grey4boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #ffff00;
      border-radius: 0.40em;
}

// Border colourAdded Orange, Brown, Purple , Pink, magenta, cyan
div[data-wrap="brownbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.75px solid #964B00;
      border-radius: 0.40em;
}
div[data-wrap="orangebox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.75px solid #FFA500;
      border-radius: 0.40em;
}
div[data-wrap="purplebox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="pinkbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.5px solid #FFC0CB;
      border-radius: 0.40em;
}
div[data-wrap="magentabox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.5px solid #FF00FF;
      border-radius: 0.40em;
}
div[data-wrap="cyanbox"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      border: 2.5px solid #00FFFF;
      border-radius: 0.40em;
}

// Bg colour added brown, orange, purple, magenta, cyan
div[data-wrap="brownboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #964B00;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="orangeboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #FFA5000;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="purpleboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #800080;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="pinkboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #FFC0CB;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="magentaboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #FF00FF;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}
div[data-wrap="cyanboxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #00FFFF;
      border: 2.75px solid #808080;
      border-radius: 0.40em;
}

// Grey background add Border colour Brown, Orange, Purple, Pink, Magenta, Cyan
div[data-wrap="grey5boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #964B00;
      border-radius: 0.40em;
}
div[data-wrap="grey6boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color:  #808080;
      border: 2.75px solid #FFA5000;
      border-radius: 0.40em;
}
div[data-wrap="grey7boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #FFC0CB;
      border-radius: 0.40em;
}
div[data-wrap="grey8boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #FF00FF;
      border-radius: 0.40em;
}
div[data-wrap="grey9boxbg"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
      padding-left: 0.30em;
      padding-right: 0.30em;
      background-color: #808080;
      border: 2.75px solid #00FFFF;
      border-radius: 0.40em;
}

Screenshot

Bordi colorati Infobox

L'immagine mostra un'interfaccia utente colorata con più categorie di caselle informative. (Didascalia dell'IA)
L'immagine mostra un'interfaccia utente colorata con più categorie di caselle informative. (Didascalia dell'IA)864×1679 149 KB

L'immagine mostra una figura robotica con uno schema di colori viola-rosato. Il robot ha un viso e una testa simili a quelli umani, ed è ambientato su uno sfondo di un paesaggio urbano futuristico. (Didascalia dell'IA)
L'immagine mostra una figura robotica con uno schema di colori viola-rosato. Il robot ha un viso e una testa simili a quelli umani, ed è ambientato su uno sfondo di un paesaggio urbano futuristico. (Didascalia dell'IA)864×1086 135 KB

Bordi colorati Infobox 2

L'immagine mostra un'interfaccia utente per un'applicazione di test, con varie categorie di test elencate come opzioni, come "Info box", "Testing text below", "Info box", "Testing text below" e "Info box". (Didascalia dell'IA)
L'immagine mostra un'interfaccia utente per un'applicazione di test, con varie categorie di test elencate come opzioni, come "Info box", "Testing text below", "Info box", "Testing text below" e "Info box". (Didascalia dell'IA)852×1669 126 KB

L'immagine mostra lo schermo di un dispositivo mobile con un elenco di caselle di testo colorate, ognuna etichettata con diversi tipi di informazioni. (Didascalia dell'IA)
L'immagine mostra lo schermo di un dispositivo mobile con un elenco di caselle di testo colorate, ognuna etichettata con diversi tipi di informazioni. (Didascalia dell'IA)864×1311 100 KB

Come usare nel post

[wrap=redbox]
> ## Info box

Testing boxes
[/wrap]

Sostituisci “red” con “green”, “blue”, “yellow”, “brown”, “orange”, “purple”, “pink”, “cyan”. Per grigio usa solo “box”.

1 Mi Piace
2

Utilizzare questo codice nei post per le caselle di sfondo a colori:

[Wrap="redboxbg"]
> Infobox

Testing boxed
[/wrap]

Nuove opzioni di colore di sfondo Sostituire “red” con:

  • “green”, “blue”, “yellow”, “brown”, “orange”, “purple”, “pink”, “cyan”., “grey”.
  • Aggiunta casella vuota
    Sfondo colorato. Bordo grigio.
Screenshot Mobile

C'è un display colorato con caselle di testo che probabilmente rappresentano diverse categorie o scopi. (Sottotitolato dall'IA)
C'è un display colorato con caselle di testo che probabilmente rappresentano diverse categorie o scopi. (Sottotitolato dall'IA)864×1700 147 KB

Screenshot Mobile 2

L'immagine mostra un'interfaccia di un telefono cellulare con un elenco di caselle di test, tra cui informazioni e caselle di testo di test, con uno schema di colori blu e bianco. (Sottotitolato dall'IA)
L'immagine mostra un'interfaccia di un telefono cellulare con un elenco di caselle di test, tra cui informazioni e caselle di testo di test, con uno schema di colori blu e bianco. (Sottotitolato dall'IA)864×1631 144 KB

L'immagine mostra la testa di un robot futuristico, accompagnata dal testo "Testing text boxes" e da un invito all'utente a "Testing text below. (Sottotitolato dall'IA)
L'immagine mostra la testa di un robot futuristico, accompagnata dal testo "Testing text boxes" e da un invito all'utente a "Testing text below. (Sottotitolato dall'IA)864×876 437 KB

  • “grey”, “grey#” #=0-9.
    *Tutti sfondi grigi, bordo grigio,
    Bordo colore
    1 rosso, 2 verde, 3 blu, 4 giallo, 5 marrone, 6 arancione, 7 viola, 8 magenta, 9 rosa, 0 ciano (Op Code aggiornato)
Screenshot Mobile

Questo è uno screenshot di un'interfaccia utente che mostra una casella di test etichettata "Picture" con una testa di robot meccanica come immagine sottostante. (Sottotitolato dall'IA)
Questo è uno screenshot di un'interfaccia utente che mostra una casella di test etichettata "Picture" con una testa di robot meccanica come immagine sottostante. (Sottotitolato dall'IA)864×1050 353 KB

Questa immagine mostra un menu a discesa con quattro diverse caselle, ognuna delle quali rappresenta un diverso tipo di test. (Sottotitolato dall'IA)
Questa immagine mostra un menu a discesa con quattro diverse caselle, ognuna delle quali rappresenta un diverso tipo di test. (Sottotitolato dall'IA)863×1287 105 KB

Screenshot Mobile 2

L'immagine mostra un elenco di sei diverse opzioni di caselle di test, ognuna con il proprio codice colore e un'etichetta per la sua funzione. (Sottotitolato dall'IA)
L'immagine mostra un elenco di sei diverse opzioni di caselle di test, ognuna con il proprio codice colore e un'etichetta per la sua funzione. (Sottotitolato dall'IA)864×1676 127 KB

Questo è uno screenshot di una casella informativa con testo segnaposto per il contenuto. (Sottotitolato dall'IA)
Questo è uno screenshot di una casella informativa con testo segnaposto per il contenuto. (Sottotitolato dall'IA)864×445 33.4 KB

Questo potrebbe essere sia un componente autonomo sia aggiunto a Testo colorato TC.

  • Limitare i colori utilizzabili aiuta a mantenerli puliti.

DA FARE:

  • Aggiungere opzioni per Arancione, Marrone, Viola, & Rosa, Magenta, Ciano Codice completo aggiornato Op post
  • Forse rendere il codice più bello con feedback.
  • Creare account GitHub. Imparare ad aggiungere impostazioni per personalizzare il bordo &?.. Pubblicare eventualmente come TC.
3 Mi Piace
3

Grazie per aver preso l’iniziativa su questo!

Potrebbe apparire a lato degli argomenti, come gli infobox appaiono tipicamente sul lato destro?
Sembra che l’esempio che ho originariamente fornito per Obsidian richiedesse un plugin Markdown Multi-Colonna come prerequisito.

Il CSS delle tabelle integrato di Discourse non è poi così male, a parte il fatto che non può apparire a lato di un argomento. Ottenere flessibilità nel layout sulla pagina e all’interno della casella è probabilmente l’ostacolo più grande.

1 Mi Piace
4

Sto facendo dei test. Sembra che un wrap bbcode non possa contenerne un altro.

Se hai installato uno dei plugin bbcode, potresti usare i float bbcodes.

Probabilmente c’è un modo per inserire uno switch, forse.

In alternativa, si potrebbero creare copie aggiuntive, se ho capito bene, usando gli attributi CSS Float 5:width: 48% (testerò quando avrò tempo, forse potrò estenderlo aggiungendo un attributo data div…)

  • oppure

Se sai quali caselle informative di colore vuoi prioritizzare, potresti aggiungere float/align e altri CSS per creare colonne multiple.

Sto ancora imparando, quindi spero che altri possano aggiungere qualcosa.

Aggiunti colori aggiuntivi, vedi i primi 2 post

5

Per questo hai bisogno di una soluzione come questa:

Vedi un esempio qui: Discourse AI Topic Summary 🤖

3 Mi Piace
6

Ok, sono riuscito a testare il supporto per 2 colonne. Il codice è ancora piuttosto basilare/primitivo.

Il codice al momento ha solo opzioni float per Redbox.

// Testing float

div[data-wrap="redboxfl"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
//*
      float: left;
      margin-right: 0.10em;
      width: 45.5% !important;
//*
      padding-left: 0.30em;
      padding-right: 0.30em;
      float: left;
      border: 2.5px solid #ff0000;
      border-radius: 0.40em;
}
div[data-wrap="redboxfr"]{
      margin-top: 0.15em;
      margin-bottom: 0.15em;
//*
      float: right;
      margin-left: 0.10em;
      width: 45.5% !important;
//*
      padding-left: 0.30em;
      padding-right: 0.30em;
      float: right;
      border: 2.5px solid #ff0000;
      border-radius: 0.40em;
}

Devo ancora aggiungere altre opzioni di colore.

Come usare nel Post

[wrap="redboxfl"]
# Infobox float

Testing float
[/Wrap]

[wrap="redboxfr"]
# Infobox float

Testing float
[/Wrap]
>
Text after
  • Nota: Il “>” è richiesto tra le righe, almeno con il testo sottostante. In alternativa, potresti mettere il testo sottostante accanto a “> Test” in modo simile a come l’ho usato per il titolo dell’Infobox.
Screenshot Mobile

Lo screenshot mostra un'applicazione mobile, con un menu a tendina contenente quattro opzioni relative agli elementi flottanti in un contesto digitale. (Didascalia dell'IA)
Lo screenshot mostra un'applicazione mobile, con un menu a tendina contenente quattro opzioni relative agli elementi flottanti in un contesto digitale. (Didascalia dell'IA)864×1544 170 KB

@merefield potrei aggiungere qualcosa a ciascun codice attuale in Op, qualcosa come


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

Per avere l’opzione di usarlo nel post come? Confermo che funziona!

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

Testing float
[/Wrap]
Screenshot Mobile

Questa immagine mostra uno screenshot di un dispositivo mobile con un elenco di elementi flottanti denominati diversamente. (Didascalia dell'IA)
Questa immagine mostra uno screenshot di un dispositivo mobile con un elenco di elementi flottanti denominati diversamente. (Didascalia dell'IA)862×1222 120 KB

Il primo set usa semplicemente float left, 3 di essi vanno a capo automaticamente!

Penso di aggiungere il codice mobile con una larghezza del 44,5%. Quindi creare il supporto desktop per 3 colonne, magari con una larghezza impostata al 25%?

Oppure, se hai una soluzione migliore per consentire 2 colonne su mobile con 3 o 4 su desktop. Anche se sarebbe necessario che la larghezza si adattasse in base al numero di colonne e spostasse le colonne aggiuntive alla riga successiva se su mobile.

Forse usare qualcosa come la griglia dall’immagine o il codice da masonry image?

7

Codice per 2 Colonne

  • Aggiungere a mobile e/o desktop per 2 colonne.
Codice 
//* Aggiunge Float per colonne mobili 2 

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

Codice da usare nel post:

[Wrap="Redbox" float="left"]
> #Infobox float
Testo sotto
[/Wrap]

Sostituisci “redbox” con la casella appropriata. Float= “left” o “right”.

Usa “>” dopo l’ultima casella.

  • es
[Wrap="Redbox" float="left"]
> #Infobox float
Testo sotto
[/Wrap]
[Wrap="Redbox" float="left"]
> #Infobox float
Testo sotto
[/Wrap]
[Wrap="Redbox" float="left"]
> #Infobox float
Testo sotto
[/Wrap]

>

Questo disporrà 3 caselle in 2 colonne allineate a sinistra.

Funzionerà su un codice desktop a 3 colonne.. Forse come allegato extra, es col=3?

Per ora aggiungi questo sia alle sezioni mobile che desktop.

Lo screenshot mostra un'applicazione mobile con caselle di testo relative a un'infobox, suggerendo la possibilità di aggiungere o modificare contenuti su un sito web. (Didascalia dell'IA)
Lo screenshot mostra un'applicazione mobile con caselle di testo relative a un'infobox, suggerendo la possibilità di aggiungere o modificare contenuti su un sito web. (Didascalia dell'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 Mi Piace