Infoboxes BBcode

Dev
1

Habillez vos publications avec des infobulles !

Solution CSS pure et simple pour ajouter du style au contenu des sujets.

Créez un Theme component et ajoutez ceci à « CSS Common ». Première version entièrement utilisable. Actuellement sans Java. Bien que je sois sûr que cela pourrait être plus propre et probablement amélioré avec du JavaScript.

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

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

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

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

Captures d’écran

Bordures de couleur d'infobulle

L'image montre une interface utilisateur colorée avec plusieurs catégories de boîtes d'information. (Légendé par l'IA)
L'image montre une interface utilisateur colorée avec plusieurs catégories de boîtes d'information. (Légendé par l'IA)864×1679 149 KB

L'image montre une figure robotique avec un schéma de couleurs rose-violet. Le robot a un visage et une tête semblables à ceux d'un humain, et est placé sur une toile de fond de paysage urbain futuriste. (Légendé par l'IA)
L'image montre une figure robotique avec un schéma de couleurs rose-violet. Le robot a un visage et une tête semblables à ceux d'un humain, et est placé sur une toile de fond de paysage urbain futuriste. (Légendé par l'IA)864×1086 135 KB

Bordures de couleur d'infobulle 2

L'image montre une interface utilisateur pour une application de test, avec diverses catégories de test listées comme options, telles que « Info box », « Testing text below », « Info box », « Testing text below » et « Info box ». (Légendé par l'IA)
L'image montre une interface utilisateur pour une application de test, avec diverses catégories de test listées comme options, telles que « Info box », « Testing text below », « Info box », « Testing text below » et « Info box ». (Légendé par l'IA)852×1669 126 KB

L'image affiche l'écran d'un appareil mobile avec une liste de zones de texte colorées, chacune étiquetée avec différents types d'informations. (Légendé par l'IA)
L'image affiche l'écran d'un appareil mobile avec une liste de zones de texte colorées, chacune étiquetée avec différents types d'informations. (Légendé par l'IA)864×1311 100 KB

Comment utiliser dans une publication

[wrap=redbox]
> ## Boîte d'information

Boîtes de test
[/wrap]

Remplacez « red » par « green », « blue », « yellow », « brown », « orange », « purple », « pink », « cyan ». Pour gris, utilisez simplement « box ».

1 « J'aime »
2

Utilisez ce code dans les publications pour des boîtes de couleur de fond :

[Wrap="redboxbg"]
> Infobox

Testing boxed
[/wrap]

Nouvelles options de couleur d’arrière-plan Remplacez « red » par :

  • « green », « blue », « yellow », « brown », « orange », « purple », « pink », « cyan », « grey ».
  • Boîte vide ajoutée
    Couleur de fond. Bordure grise.
Screenshot Mobile

Il y a un affichage coloré avec des zones de texte qui représentent probablement différentes catégories ou objectifs. (Légendé par l'IA)
Il y a un affichage coloré avec des zones de texte qui représentent probablement différentes catégories ou objectifs. (Légendé par l'IA)864×1700 147 KB

Screenshot Mobile 2

L'image affiche une interface de téléphone mobile avec une liste de zones de test, y compris des zones d'information et de test, avec un schéma de couleurs bleu et blanc. (Légendé par l'IA)
L'image affiche une interface de téléphone mobile avec une liste de zones de test, y compris des zones d'information et de test, avec un schéma de couleurs bleu et blanc. (Légendé par l'IA)864×1631 144 KB

L'image affiche une tête de robot futuriste, accompagnée du texte "Testing text boxes" et d'une invite à l'utilisateur pour "Testing text below. (Légendé par l'IA)
L'image affiche une tête de robot futuriste, accompagnée du texte "Testing text boxes" et d'une invite à l'utilisateur pour "Testing text below. (Légendé par l'IA)864×876 437 KB

  • « grey », « grey# » #=0-9.
    *Tous les arrière-plans gris, bordure grise,
    Bordure couleur
    1 rouge, 2 vert, 3 bleu, 4 jaune, 5 marron, 6 orange, 7 violet, 8 magenta, 9 rose, 0 cyan (Code Op mis à jour)
Screenshot Mobile

Ceci est une capture d'écran d'une interface utilisateur montrant une boîte de test intitulée "Picture" avec une tête de robot mécanique en dessous. (Légendé par l'IA)
Ceci est une capture d'écran d'une interface utilisateur montrant une boîte de test intitulée "Picture" avec une tête de robot mécanique en dessous. (Légendé par l'IA)864×1050 353 KB

Cette image affiche un menu déroulant avec quatre boîtes différentes, chacune représentant un type de test différent. (Légendé par l'IA)
Cette image affiche un menu déroulant avec quatre boîtes différentes, chacune représentant un type de test différent. (Légendé par l'IA)863×1287 105 KB

Screenshot Mobile 2

L'image montre une liste de six options de boîtes de test différentes, chacune avec son propre code couleur et une étiquette pour sa fonction. (Légendé par l'IA)
L'image montre une liste de six options de boîtes de test différentes, chacune avec son propre code couleur et une étiquette pour sa fonction. (Légendé par l'IA)864×1676 127 KB

Ceci est une capture d'écran d'une boîte d'information avec un texte de substitution pour le contenu. (Légendé par l'IA)
Ceci est une capture d'écran d'une boîte d'information avec un texte de substitution pour le contenu. (Légendé par l'IA)864×445 33.4 KB

Cela pourrait être à la fois un composant autonome ou peut-être ajouté à Texte coloré TC.

  • Restreindre les couleurs utilisables permet de les garder propres.

À FAIRE :

  • Ajouter des options pour Orange, Marron, Violet, & Rose, Magenta, Cyan Code complet mis à jour dans le post Op
  • Peut-être rendre le code plus joli avec des retours.
  • Créer un compte GitHub. Apprendre à ajouter des paramètres pour personnaliser la bordure et ?.. Publier éventuellement en tant que TC.
3 « J'aime »
3

Merci d’avoir pris les devants sur ce sujet !

Est-ce que cela pourrait apparaître sur le côté des sujets, comme les infoboxes apparaissent généralement sur la droite ?
Il semble que l’exemple que j’avais initialement donné pour Obsidian nécessitait un plugin Markdown Multi-Colonne comme prérequis.

Le CSS intégré de Discourse pour les tableaux n’est pas si mal, à part qu’il ne peut pas apparaître sur le côté d’un sujet. Obtenir de la flexibilité dans la mise en page sur la page et à l’intérieur de la boîte est probablement le plus grand obstacle.

1 « J'aime »
4

Je fais quelques tests. Il semble qu’un bbcode d’enveloppement ne puisse pas en contenir un autre.

Si vous avez un des plugins bbcode installés, vous pourriez probablement utiliser des bbcodes flottants.

Il y a probablement un moyen d’insérer un commutateur peut-être.

Alternativement, des copies supplémentaires pourraient être faites en utilisant, si je comprends bien, des attributs CSS Float 5:width: 48% (je testerai quand j’aurai le temps, peut-être que je pourrai étendre en ajoutant un attribut de données div…)

  • ou

Si vous savez quelles couleurs d’infobulles vous voulez prioriser, vous pourriez ajouter float/align et d’autres CSS pour réaliser plusieurs colonnes.

J’apprends encore, donc j’espère que d’autres pourront ajouter des choses.

Couleurs supplémentaires ajoutées, voir les 2 premiers messages

5

Pour cela, vous avez besoin d’une solution comme celle-ci :

Voir un exemple ici : Discourse AI Topic Summary 🤖

3 « J'aime »
6

J’ai réussi à tester la prise en charge de 2 colonnes. Le code est encore assez basique/primitif.

Le code ATM n’a que des options flottantes pour Redbox.

// Test flottant

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

Il faut encore ajouter d’autres options de couleur.

Comment l’utiliser dans un post

[wrap="redboxfl"]
# Infobulle flottante

Test flottant
[/Wrap]

[wrap="redboxfr"]
# Infobulle flottante

Test flottant
[/Wrap]
>
Texte après
  • Note : Le “>” est requis entre les lignes au moins avec le texte ci-dessous. Alternativement, vous pourriez placer le texte ci-dessous à côté du “> Texte” de la même manière que je l’ai utilisé pour le titre de l’infobulle.
Capture d'écran mobile

La capture d'écran montre une application mobile, avec un menu déroulant proposant quatre options relatives aux éléments flottants dans un contexte numérique. (Légendé par l'IA)
La capture d'écran montre une application mobile, avec un menu déroulant proposant quatre options relatives aux éléments flottants dans un contexte numérique. (Légendé par l'IA)864×1544 170 KB

@merefield pourrais-je ajouter quelque chose à chaque code actuel dans l’Op, quelque chose comme


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

Pour avoir l’option d’utiliser dans le post comme ? Confirmé, ça marche !

[wrap="redbox" float="left"]
# Infobulle flottante

Test flottant
[/Wrap]
Capture d'écran mobile

Cette image montre la capture d'écran d'un appareil mobile avec une liste d'éléments flottants nommés différemment. (Légendé par l'IA)
Cette image montre la capture d'écran d'un appareil mobile avec une liste d'éléments flottants nommés différemment. (Légendé par l'IA)862×1222 120 KB

Le premier ensemble utilise simplement le flottant gauche, 3 d’entre eux s’enroulent automatiquement !

Je pense que j’ai ajouté le code mobile à 44,5% de largeur. Ensuite, je rends le bureau compatible avec 3 colonnes, peut-être avec une largeur définie à 25% ?

Ou si vous avez une meilleure solution pour permettre 2 colonnes sur mobile avec 3 ou 4 sur bureau. Bien qu’il faudrait que la largeur s’ajuste en fonction du nombre de colonnes et déplace les colonnes supplémentaires à la ligne suivante si sur mobile.

Peut-être utiliser quelque chose comme une grille à partir d’une image ou un code d’image de maçonnerie ?

7

Code pour 2 colonnes

  • Ajouter sur mobile et/ou bureau pour 2 colonnes.
Code 
//* Ajoute le float pour les 2 colonnes mobiles 
div[data-wrap="redbox"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="greenbox"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="bluebox"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="yellowbox"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="brownbox"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="orangebox"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="purplebox"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="pinkbox"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="magentabox"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="cyanbox"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="greybox"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="redboxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="greenboxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="blueboxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="yellowboxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="brownboxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="orangeboxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="purpleboxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="pinkboxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="magentaboxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="cyanboxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="greyboxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="grey1boxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="grey2boxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="grey3boxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="grey4boxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="grey5boxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="grey6boxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="grey7boxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="grey8boxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}
div[data-wrap="grey9boxbg"]{
   &[data-float="left"]{
     float: left;
     margin-left: 0.25em !important;
     width: 44.5% !important;
    }
    &[data-float="right"]{
      float: right;
      margin-rightt: 0.25em !important;
      width: 44.5% !important;
    }
}

Code à utiliser dans le post :

[Wrap="Redbox" float="left"]
> #Infobox float
Texte ci-dessous
[/Wrap]

Remplacez “redbox” par la boîte appropriée. Float = “left” ou “right”.

Utilisez “>” après la dernière boîte.

  • par exemple
[Wrap="Redbox" float="left"]
> #Infobox float
Texte ci-dessous
[/Wrap]
[Wrap="Redbox" float="left"]
> #Infobox float
Texte ci-dessous
[/Wrap]
[Wrap="Redbox" float="left"]
> #Infobox float
Texte ci-dessous
[/Wrap]
>

Cela arrangera 3 boîtes en 2 colonnes alignées à gauche.

Fonctionnera sur un code de bureau à 3 colonnes… Peut-être en pièce jointe supplémentaire, par exemple col=3 ?

Pour le moment, ajoutez ceci aux sections mobile et bureau.

La capture d'écran affiche une application mobile avec des zones de texte relatives à une infobulle, suggérant la possibilité d'ajouter ou de modifier du contenu sur un site Web. (Légendé par l'IA)
La capture d'écran affiche une application mobile avec des zones de texte relatives à une infobulle, suggérant la possibilité d'ajouter ou de modifier du contenu sur un site Web. (Légendé par l'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 « J'aime »