Présentation

Blank Theme

Un code complet de forum est mis à disposition dans lequel tous les templates et le CSS ont été optimisés et simplifiés pour personnaliser vos forums

Des fonctionnalités supplémentaires pré-installées et son design minimaliste suffisant permet d'avoir un forum prêt à l'emploi à la portée de tous.

En plus de codes commentés avec des explications, il s'accompagne d'une documentation complète qui vous guide dans l'installation étape par étape.

Communauté

Le forum est ouvert à tous et sollicite votre participation !

C'est un projet qui se veut participatif et dans lequel tout le monde peut apporter sa pierre à l'édifice. Vous pouvez venir en aide aux autres, proposer vos propres tutoriels, astuces, tips, ... et partager vos forums.

Installation

Codes

Ajouter un onglet

Code:

<input type="radio" name="tab" id="tab-3" checked><label for="tab-3">Onglet 3</label><div class="tab-content">Contenu de l'onglet</div>

Modifications

Utiliser plusieurs tableaux sur une même page

Onglets à la verticale

Code:

/* Conteneurs des onglets */
.tabs {
   display: grid;
   grid-template-columns: repeat(2, max-content);
   grid-template-rows: repeat(30, minmax(min-content, auto));
   gap: 5px;
   margin: 0 auto;

   /* Ne pas retirer */
   & > br,
   input[name*="tab"] {
      display: none;
   }

   /* Onglet */
   label[for*="tab"] {
      grid-column: 1;
      display: block;
      text-transform: uppercase;
      color: var(--contrastLighter);
      font-size: 12px;
      padding: 2px 10px;
                text-wrap: nowrap;
      cursor: pointer;
      top: 0;
      transition: all 0.25s;
   }

   /* Onglet au survol */
   label[for*="tab"]:hover {
      color: var(--contrast);
   }

   /* Onglet actif */
   input[name*="tab"]:checked + label[for*="tab"] {
      background: var(--neutralDark);
      border-radius: 5px;
      color: var(--contrast);
      transition: all 0.35s;
   }

   /* Contenu d'un onglet */
   .tab-content {
      grid-column: 2;
      grid-row: 1 / -1;
      z-index: 1;
      opacity: 0;
      transition: all 0.35s;
      background: var(--neutralDark);
      border-radius: 5px;
      padding: 5px 10px;
   }

   /* Contenu d'un onglet actif */
   input[name*="tab"]:checked + label + .tab-content {
      z-index: 2;
      opacity: 1;
      transition: all 0.35s;
   }
}