Modifier l'apparence du background du forum

3 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Modifier l'apparence du background du forum

Message par BelleFae Lun 2 Oct 2023 - 22:22

Détails techniques


Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://cauldronofwisdom.forumactif.com

Description du problème

Bonjour,

J'essaie de mettre ce code sur toute la page d'accueil à l'exception du footing. Quand je l'ai mis dans ma feuille CSS, seule la partie supérieure de la page à changer :

Code:
body
{
  background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat;
  /* le motif est en transparence il suffit de changer la couleur de fond */
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
}

Je voudrais savoir comment régler cela pour que ce soit partout autour des Catégories et Forums.

Voici mon code CSS complet :

Code:
/* définition des variables utilisées */
:root {
  /* ===================================
   * Variables générales :
   * =================================== */
  --couleur-bg: #ACC6AA;
  --police: "Roboto", Arial, Tahoma, sans-serif;
  /* couleurs réutilisées pour plusieurs éléments différents */
  --couleur-principale: #79AC78;
  --couleur-principale-alt1: #F7E6C4;
  --couleur-principale-alt2: #f98813;
  --couleur-ton-gris-base: #e0dbd2;
  --couleur-ton-gris-sombre: #1C315E;
  --couleur-ton-gris-clair: #f2ede4;
  /* Couleur des groupes */
  --couleur-gr1: #7cb326;
  --couleur-gr2: #eeb53a;
  --couleur-gr3: #31b2b4;
  --couleur-gr4: #b43192;
  --couleur-gr5: #eea2a4;
  --couleur-gr6: #3e2e2f;
  /* Variables pour l'image de séparation */
  --img-separateur: url("https://i.servimg.com/u/f27/20/52/45/74/untitl10.png");
  --img-separateur-hauteur: 156px;
  --img-separateur-largeur: 19px;
  /* l'avatar par défaut (utilisé dans le QEEL et les catégories) */
  --img-avatar-defaut: url("https://i.servimg.com/u/f27/20/52/45/74/emagj10.png");
  /* ===================================
   * Variables barre de navigation :
   * =================================== */
  --navbar-hauteur: 45px;
  --navbar-couleur-bg: #618264 ;
  --navbar-couleur-txt: white;
  --navbar-notif-base: url("https://i.goopics.net/4NOkZ.png");
  --navbar-notif-nonlu: url("https://i.goopics.net/2powK.png");
  /* ===================================
   * Variables de la PA :
   * (vérifiez le résultat sur tous les navigateurs - et résolutions - si vous modifiez ces dimensions, ça peut vite partir en vrille):
   * =================================== */
  --PA-hauteur-max: 230px;
  /* Rappel : idéalement, la largeur totale ne doit pas dépasser 1200px */
  --PA-col1-largeur-min: 510px;
  --PA-col2-largeur-min: 300px;
  --PA-col3-largeur-min: 300px;
  --PA-img-staff-largeur:100px;
  --PA-img-staff-hauteur:100px;
  /* ===================================
   * Variables des catégories :
   * =================================== */
  --couleur-titre-categories: var(--couleur-principale);
  --couleur-titre-forum: var(--couleur-ton-gris-sombre);
  --couleur-titre-forum-survol: var(--couleur-principale);
  /* couleurs nouveau message / pas de nouveau message / forum verrouillé */
  --couleur-statut-normal: var(--couleur-principale);
  --couleur-statut-nouveau: var(--couleur-principale-alt1);
  --couleur-statut-ferme: #a1a1a1;
  /* réglage des dimensions utiles */
  --epaisseur-bordure-forums: 1rem;
  --epaisseur-bordure-blanche: 0.5rem;
  --epaisseur-bordure-coloree: 1rem;
  /* illustration des forums */
  --img-forum-par-defaut: url("https://i.servimg.com/u/f27/20/52/45/74/x2a0g10.png");
  --img-forum-largeur: 250px;
  --img-forum-hauteur: 150px;
  /* ===================================
   * Variables utilisées dans le QEEL :
   * =================================== */
  --img-qeel-bg: url("https://i.goopics.net/d7gXr.png");
  --img-qeel-sep: var(--img-separateur);
  --img-qeel-sep-hauteur: var(--img-separateur-hauteur);
  --img-qeel-sep-largeur: var(--img-separateur-largeur);
}

/*  =======================================
    Réécritures valeurs de base de ModernBB
    ======================================= */
body, html {
  background: var(--couleur-bg);
  font-family: var(--police);
  min-width: 1200px;
}
body
{
  background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat;
  /* le motif est en transparence il suffit de changer la couleur de fond */
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
}

a, a:link, a:visited {
  color: var(--couleur-principale);
}

#wrap {
  background: var(--couleur-bg);
}

.linklist {
  border: none;
}

/*  =======================================
    Classes utilitaires
    ======================================= */
/* classe des scrollbars */
.sklmScrollbar {
  overflow: auto;
  scrollbar-color: var(--scrollbar-thumb, var(--couleur-ton-gris-sombre)) var(--scrollbar-fond, transparent);
  scrollbar-width: thin;
}
.sklmScrollbar::-webkit-scrollbar {
  width: var(--scrollbar-largeur, 8px);
}
.sklmScrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-fond, transparent);
}
.sklmScrollbar::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb, var(--couleur-ton-gris-sombre));
  border-radius: 6px;
  border: 2px solid var(--scrollbar-bordure-couleur, transparent);
}

/* classe éléments cachés */
.sklm_hidden {
  display: none;
}

/*  =======================================================================
    Header & Barre de navigation
    ======================================================================= */
body {
  margin-top: var(--navbar-hauteur);
}

.sklmHeader {
  text-align: center;
}

#logo {
  float: none;
  margin: auto;
}

/* mise en page de la barre de navigation */
.sklmNavbar {
  height: var(--navbar-hauteur);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--navbar-couleur-bg);
  z-index: 999;
}
.sklmNavbar ul {
  display: flex;
  height: 100%;
  padding: 0 1rem;
}
.sklmNavbar a {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--navbar-couleur-txt);
  text-transform: uppercase;
  font-weight: bold;
  font-style: italic;
  font-size: 1.3rem;
  position: relative;
  padding: 0 8px;
  white-space: nowrap;
}
.sklmNavbar a img {
  display: none;
}
.sklmNavbar a::after {
  content: " ";
  display: block;
  background: rgba(255, 255, 255, 0.75);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0px;
  transition: height 0.2s ease-in-out;
}
.sklmNavbar a:hover::after {
  height: 6px;
}
.sklmNavbar form {
  height: 100%;
  width: 80%;
  display: flex;
  margin: 0 auto;
}
.sklmNavbar form button[type=submit] {
  border: none !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(0, 0, 0, 0.3) !important;
  padding: 0 20px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 1.6rem;
}
.sklmNavbar form input[type=text] {
  cursor: text;
  border: none !important;
  width: 100%;
  min-width: 150px;
  padding: 0 25px !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.2) !important;
  color: rgba(0, 0, 0, 0.3);
  font-size: 1.2rem;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sklmNavbar form input {
  outline: none;
  font-size: 11px;
}

#sklmNav_searchbar {
  width: 100%;
}

/* On cache la toolbar de FA */
#fa_toolbar {
  position: relative;
  top: -50px;
}

/* Mise en page du bouton de notifications */
#fa_notifications {
  font-size: 0;
}
#fa_notifications:hover {
  cursor: pointer;
}
#fa_notifications #notif_unread {
  font-size: 1.3rem;
  padding-left: 0.5rem;
}
#fa_notifications::before {
  content: var(--navbar-notif-base);
}
#fa_notifications.unread::before {
  content: var(--navbar-notif-nonlu);
}

/* Mise en page de la liste de notifications */
#fa_toolbar #fa_right #notif_list {
  background-color: var(--navbar-couleur-bg);
  box-shadow: none;
  border-radius: 0;
  top: var(--navbar-hauteur);
  left: auto !important;
  right: 1rem;
  position: fixed;
}
#fa_toolbar #fa_right #notif_list li {
  color: #fff;
}
#fa_toolbar #fa_right #notif_list li.unread {
  background-color: rgba(255, 255, 255, 0.2);
}
#fa_toolbar #fa_right #notif_list li.unread .contentText::before {
  content: "◆ ";
}
#fa_toolbar #fa_right #notif_list li.see_all {
  background-color: #fa620c;
  color: #ff9b64;
}
#fa_toolbar #fa_right #notif_list li a.delete::before {
  color: var(--couleur-principale);
}

/* Affichage du titre et de la description du forum
   (pas de mise en page spéciale parce qu'ils ne sont pas spécifiquement prévus pour être affichés)
*/
#site-desc {
  position: static;
  text-align: center;
}
#site-desc p {
  color: inherit;
}

#site-title, #site-title h1 {
  color: var(--couleur-principale);
}

/*  =======================================================================
    Affichage du message d'accueil (PA)
    ======================================================================= */
.sklmPAConteneur {
  margin-top: 5rem;
}

/* le titre de la PA, si vous voulez lui en donner un */
.sklmPA_titre {
  font-size: 6rem;
  text-align: center;
  font-style: italic;
  text-transform: uppercase;
  color: var(--couleur-principale);
  font-weight: bold;
}

/* Agencement des blocs en colonnes de la PA */
.sklmPAColonnes {
  display: flex;
  flex-wrap: wrap;
}

/* Propriétés communes aux trois blocs */
.sklmPA_colBloc {
  height: var(--PA-hauteur-max, 230px);
  overflow: auto;
  margin-top: 1rem;
  padding: 1rem;
}

/* Premier bloc */
.sklmPA_infosBloc {
  background: var(--couleur-principale);
  flex: 0 1 var(--PA-col1-largeur-min);
  min-width: var(--PA-col1-largeur-min);
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Second bloc */
.sklmPA_contexteBloc {
  background:transparent;
  color: var(--couleur-principale);
  flex: 1 1 var(--PA-col2-largeur-min);
  text-align: center;
  min-width: var(--PA-col2-largeur-min);
}

/* Troisième bloc */
.sklmPA_actuBloc {
  background: var(--couleur-principale);
  flex: 1 1 var(--PA-col3-largeur-min);
  display: flex;
  min-width: var(--PA-col3-largeur-min);
}

/* ~~~ Contenu du premier bloc : ligne 1 */
.sklmPA_infosBloc-l1 {
  display: flex;
  margin-bottom: 1rem;
}

/* affichage du menu de la PA */
.sklmPA_navBloc {
  order: 2;
  flex: 1 1 30%;
  padding-left: 1rem;
}
.sklmPA_navBloc li {
  text-align: left;
  text-transform: uppercase;
  font-style: italic;
  font-size: 1.3em;
  margin-bottom: 0.4rem;
}
.sklmPA_navBloc li a {
  display: block;
}
.sklmPA_navBloc li a:link, .sklmPA_navBloc li a:visited {
  color: white;
}
.sklmPA_navBloc li a:hover, .sklmPA_navBloc li a:active {
  color: var(--couleur-principale);
  background: #fff;
}

/* Affichage du staff */
.sklmPA_staffBloc {
  order: 1;
}

.sklmPA_staffList {
  display: flex;
  background: #fff;
  padding: 8px;
  border-bottom: 0.8rem solid var(--couleur-principale-alt2);
}

.sklmPA_staffItem {
  width: var(--PA-img-staff-largeur, 100px);
  height: var(--PA-img-staff-hauteur, 100px);
  position: relative;
  color: #fff;
  margin-left: 10px;
}
.sklmPA_staffItem:first-child {
  margin-left: 0;
}
.sklmPA_staffItem img {
  height:100%;width:100%;object-fit: cover;-o-object-fit: cover;
}
.sklmPA_staffItem:hover > .sklmPA_staffInfo {
  opacity: 1;
  background: rgba(249, 138, 19, 0.75);
}

.sklmPA_staffInfo {
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  font-size: 1.3em;
  overflow: hidden;
}
.sklmPA_staffInfo strong {
  text-transform: uppercase;
  text-decoration: underline;
  word-break: break-word;
}

/* Contenu des blocs : Premier bloc, ligne 2 */
.sklmPA_infosBloc-l2 {
  display: flex;
}

.sklmPA_groupesBloc {
  order: 3;
  display: flex;
  flex: 1 1 100%;
}

.sklmPA_lienDiscord {
  display: block;
  width: 25%;
}

.sklmPA_groupesList {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:0.5rem;
  flex: 1 1 50%;
  font-size: 1.2rem;
  align-items: center;
}
.sklmPA_groupesList li {
  font-weight: bold;
  color: #fff;
}
.sklmPA_groupesList li strong {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  border-radius: 50px;
  background: #fff;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
.sklmPA_groupesList li.sklm_gr1 strong {
  background: var(--couleur-gr1);
}
.sklmPA_groupesList li.sklm_gr2 strong {
  background: var(--couleur-gr2);
}
.sklmPA_groupesList li.sklm_gr3 strong {
  background: var(--couleur-gr3);
}
.sklmPA_groupesList li.sklm_gr4 strong {
  background: var(--couleur-gr4);
}
.sklmPA_groupesList li.sklm_gr5 strong {
  background: var(--couleur-gr5);
}
.sklmPA_groupesList li.sklm_gr6 strong {
  background: var(--couleur-gr6);
}
.sklmPA_groupesList li a:link, .sklmPA_groupesList li a:visited {
  color: #fff;
}
.sklmPA_groupesList li a:hover, .sklmPA_groupesList li a:active {
  color: var(--couleur-principale-alt1);
}

/* contenu des blocs : 2eme bloc, contexte/presentation */
.sklmPA_contexteBloc.sklmScrollbar {
  /* on redéfinit les couleurs de la scrollbar pour ce bloc */
  --scrollbar-thumb:var(--couleur-principale);
  --scrollbar-bordure-couleur:var(--couleur-bg);
}

/* Contenu des blocs : 3eme bloc, events & prédefs */
.sklmPA_actuBloc > div:first-child {
  margin-right: 1rem;
}

.sklmPA_eventsBloc {
  flex: 1 1 50%;
  font-size: 1.2rem;
}

.sklmPA_eventsList {
  background: #ffeedd;
  height: 100%;
  border-bottom: 0.8rem solid var(--couleur-principale-alt2);
  overflow: auto;
}
.sklmPA_eventsList.sklmScrollbar {
  /* on rédéfinit les couleurs de la scrollbar pour ce bloc */
  --scrollbar-thumb:var(--couleur-principale-alt2);
  --scrollbar-bordure-couleur:var(--couleur-bg);
}
.sklmPA_eventsList li {
  padding: 0.6rem;
  color: var(--couleur-principale);
}
.sklmPA_eventsList li a {
  text-decoration: underline;
}
.sklmPA_eventsList li:nth-child(even) {
  background: var(--couleur-bg);
  color: var(--couleur-principale-alt2);
}

.sklmPA_predefsBloc {
  flex: 0 1 132px;
}
.sklmPA_predefsBloc h2 {
  color: white;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1rem;
  font-style: italic;
}

.sklmPA_predefsList {
  display: flex;
  flex-wrap: wrap;
}
.sklmPA_predefsList li {
  flex: 1 1 50%;
  text-align: center;
  padding: 0.5rem;
}
.sklmPA_predefsList a {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  overflow: hidden;
  border: 3px solid #fff;
}
.sklmPA_predefsList a img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 0.8s ease-in-out;
}
.sklmPA_predefsList a:hover img {
  transform: rotate(360deg);
}

/* credits PA */
.sklmPA_creditsBloc {display:grid;grid-template-columns: 1fr auto;gap:5px;grid-template-areas: "zcontent zcredit";margin:5px;}
.sklmPA_creditsBloc p, .sklmPA_creditsBloc h2 {all:unset; font-size:1em;}
.sklmPA_creditsBloc h2 {grid-area:zcredit; cursor:help;}
.sklmPA_creditsBloc p {grid-area: zcontent;justify-self: end;opacity:0;transition:all 1s ease-in-out}
.sklmPA_creditsBloc:hover p {opacity:1;}

/* Affichage des partenaires & des tops */
.sklmPA_partosBloc, .sklmPA_topsBloc {
  width: 100%;
}

.sklmPA_partosList, .sklmPA_topsList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

.sklmPA_partosList li {
  margin: 0 1.4rem;
}

/*  =======================================================================
 *   Affichage des Catégories et Forums
 *  ======================================================================= */

.sklmCatConteneur {
  max-width: 1080px;
  margin: auto;
}

.sklmCat_blocTitre {
  margin-bottom: 20px;
}
.sklmCat_blocTitre::before {
  content: var(--img-separateur);
  display: block;
  text-align: center;
  margin: 15px auto;
}
.sklmCat_blocTitre > h2 {
  font-size: 6rem;
  text-align: center;
  font-style: italic;
  text-transform: uppercase;
  color: var(--couleur-titre-categories);
  font-weight: bold;
}

.sklmFoConteneur {
  --largeur-col-1:calc(var(--img-forum-largeur) + 2 * var(--epaisseur-bordure-blanche) + 2 * var(--epaisseur-bordure-coloree));
  /* setup grille */
  display: grid;
  grid-template-columns: var(--largeur-col-1) 3fr 1fr minmax(150px, auto);
  grid-template-rows: auto auto 1fr auto;
  gap: 6px 15px;
  /* hauteur max par rapport à l'image */
  max-height: calc(var(--img-forum-hauteur) + 2 * var(--epaisseur-bordure-blanche) + 2 * var(--epaisseur-bordure-coloree) + 2 * var(--epaisseur-bordure-forums));
  background: #f2ede4;
  position: relative;
  padding: var(--epaisseur-bordure-forums);
  margin: 4rem auto;
}

.sklmFo_blocTitre {
  grid-area: 2/2/3/3;
  align-self:end;
}

h2.sklmFo_titre {
  font-size: 1.8em;
  text-transform: uppercase;
  font-style: italic;
  font-weight: bold;
  line-height: 1;
}

a.sklmFo_titre {
  color: var(--couleur-titre-forum);
}

a:hover.sklmFo_titre, a:active.sklmFo_titre {
  color: var(--couleur-titre-forum-survol);
}

.sklmFo_blocIllustration {
  grid-area: 1/1/5/2;
  /* dimensions calculées par rapport aux réglages des marges et à l'image d'illustration */
  height: calc(var(--img-forum-hauteur) + 2 * var(--epaisseur-bordure-blanche) + 2 * var(--epaisseur-bordure-coloree));
  width: calc(var(--img-forum-largeur) + 2 * var(--epaisseur-bordure-blanche) + 2 * var(--epaisseur-bordure-coloree));
  /* la bordure blanche (en réalité la couleur de fond) */
  padding: var(--epaisseur-bordure-blanche);
  background: #fff;
}

.sklmFo_illustration {
  background: var(--couleur-statut-normal) var(--img-forum-par-defaut) no-repeat center center;
  width: calc(100%);
  height: calc(100%);
}
.sklmFo_illustration.cat_no_new, .sklmFo_illustration.forum_no_new {
  background-color: var(--couleur-statut-normal);
}
.sklmFo_illustration.cat_new, .sklmFo_illustration.forum_new {
  background-color: var(--couleur-statut-nouveau);
}
.sklmFo_illustration.cat_locked, .sklmFo_illustration.forum_locked {
  background-color: var(--couleur-statut-ferme);
}
/* Apply the background to a specific category */
.category-class {
  background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat;
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
}

.sklmFo_blocDescription {
  grid-area: 3/2/5/4;
  padding: 0.8rem;
  background: var(--couleur-ton-gris-base);
  border: 1px solid #c6c1b8;
  color: var(--couleur-ton-gris-sombre);
}

.sklmFo_description {
  height: 100%;
  overflow: auto;
  line-height: 1.3em;
}
.sklmFo_description img[style^="float:left"] {
  /* on annule le positionnement flottant par défaut */
  float: none !important;
  /* on positionne exactement par dessus l'emplacement prévu pour les illustrations */
  position: absolute;
  top: calc(var(--epaisseur-bordure-forums) + var(--epaisseur-bordure-blanche) + var(--epaisseur-bordure-coloree));
  left: calc(var(--epaisseur-bordure-forums) + var(--epaisseur-bordure-blanche) + var(--epaisseur-bordure-coloree));
  /* pour eviter les depassements on va fixer les dimensions */
  height: var(--img-forum-hauteur);
  width: var(--img-forum-largeur);
  -o-object-fit: cover;
  object-fit: cover;
}

.sklmFo_blocListeForums {
  grid-area: 1/2/2/3;
}

.sklmFo_listeForums {
  display: flex;
  flex-wrap: wrap;
  font-size: 0;
}
.sklmFo_listeForums a {
  display: inline-block;
  margin: 1px 5px 1px 0;
  padding: 4px 8px;
  border-radius: 15px;
  color: var(--couleur-ton-gris-clair);
  background: var(--couleur-ton-gris-sombre);
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1;
}

.sklmFo_blocDernierMessage {
  grid-area: 1/3/3/4;
  text-align: right;
}

.sklmFo_dernierMessage {
  line-height: 1.3;
  text-transform: uppercase;
  font-size: 1rem;
  font-style: italic;
}
.sklmFo_dernierMessage a, .sklmFo_dernierMessage strong {
  font-size: 1.3rem;
  text-transform: none;
  font-weight: bold;
}

.sklmFo_blocDernierAuteur {
  grid-area: 1/4/4/5;
}

.sklmFo_avatarAuteur {
  position: absolute;
  height: 150px;
  width: 150px;
  overflow: hidden;
  top: -30px;
  right: -45px;
  border-radius: 100%;
  border: var(--epaisseur-bordure-forums) solid var(--couleur-ton-gris-clair);
  background: var(--img-avatar-defaut) no-repeat;
  background-size: cover;
}
.sklmFo_avatarAuteur img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.sklmFo_blocForumStats {
  grid-area: 4/4/5/5;
  align-self: end;
}

.sklmFo_forumStats {
  text-align: right;
  color: var(--couleur-ton-gris-sombre);
  margin-bottom: 1rem;
}
.sklmFo_forumStats p {
  font-size: 0.9em;
  line-height: 1.5;
  margin: 0;
}
.sklmFo_forumStats strong {
  color: var(--couleur-principale);
}
.postprofile-avatar img {
  border-radius: 0;
}
.avatar-big img {
  border-radius: 0px!important;
  height:600px;
  width:350px;
}
.postprofile-avatar img {    
width: auto!important;
height: auto!important;}

/*  =======================================================================
    Pied de page et QEEL
    ======================================================================= */
.sklmFoot {
  /* Propriétés générales du pied de page */
  font-size: 1.2em;
}
.sklmFoot::before {
  /* image de separation avant le QEEL */
  display: block;
  /* on utilise la même image que le separateur des categories et on la fait tourner */
  content: var(--img-qeel-sep);
  height: var(--img-qeel-sep-hauteur);
  width: var(--img-qeel-sep-largeur);
  /* et on centre tout ça */
  margin: auto;
}

.sklmQeelContent {
  background: var(--img-qeel-bg) top left repeat #000;
  padding: 4rem 2.5rem;
  color: #fff;
  position: relative;
}

/* affichage du titre Qui Est En Ligne (caché par défaut) */
.sklmQeelHeader {
  display: none;
  /* caché par défaut */
  margin-top: 0;
}

.sklmQeelMainData {
  display: flex;
}

.sklmQeelPartenaires {
  margin-top: 1rem;
}

ul.sklmQeelPartenaires_liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
ul.sklmQeelPartenaires_liste li {
  margin: 2px;
}

.sklmQeel_h1 {
  color: var(--couleur-principale);
  margin: 1rem 0;
  font-size: 3em;
  font-style: italic;
}

.sklmQeel_onlineStats {
  flex: 1 0 60%;
  display: flex;
}

.sklmQeel_onlineDataBlock {
  --scrollbar-thumb:#433b3b;
  flex: 1;
  height: 130px;
  margin: 1rem 0;
}

/* Affichage des onglets (AJD & 24H) par défaut (sans JS) */
.sklmQeel_onlineTabs {
  display: none;
}

/* Affichage des onglets quand le JS est activé */
[role=tablist].sklmQeel_onlineTabs {
  display: flex;
  flex-direction: column;
  margin: 1rem 0;
}
[role=tablist].sklmQeel_onlineTabs a {
  display: inline-block;
  padding: 1rem;
  background: #2f2828;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  font-size: 1.4em;
  font-style: italic;
  border: 1px solid transparent;
  width: 100%;
  text-align: right;
}
[role=tablist].sklmQeel_onlineTabs a[aria-selected=true] {
  background: #433b3b;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

[role=presentation].sklmQeel_onlineTab {
  margin-bottom: 0.5rem;
}

/* gestion de l'affichage du contenu des onglets  */
/* affichage de base (sans JS) du contenu des onglets */
.sklmQeel_onlineTabContent {
  background: rgba(0, 0, 0, 0.3);
  padding: 1rem;
  margin: 5px 0;
}
.sklmQeel_onlineTabContent h2 {
  color: var(--couleur-principale);
}

/* quand le contenu de l'onglet est caché */
[aria-hidden=true].sklmQeel_onlineTabContent {
  display: none;
}

/* quand le contenu de l'onglet est affiché */
[role=tabpanel].sklmQeel_onlineTabContent {
  background: none;
  margin: 0 1rem;
  padding: 0;
}
[role=tabpanel].sklmQeel_onlineTabContent > h2 {
  display: none;
}

/* On supprime le saut de ligne parasite de la liste des connectés */
.sklmQeel_connectes-liste > br:first-child {
  display: none;
}

/* Bloc affichage dernier membre inscrit */
.sklmQeel_lastMember {
  flex: 1 0 40%;
  display: flex;
  justify-content: center;
}

/* Gestion de l'affichage de l'avatar du dernier membre inscrit */
.sklmQeel_lastMemberAva {
  order: 1;
  height: 150px;
  width: 150px;
  border: 5px solid #2f2828;
  overflow: hidden;
  margin-right: 2rem;
  /* image de fond si l'avatar du dernier inscrit ne charge pas */
  background: var(--img-avatar-defaut) no-repeat;
  background-size: cover;
}
.sklmQeel_lastMemberAva > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.sklmQeel_lastMemberName {
  order: 2;
  font-size: 0px;
}
.sklmQeel_lastMemberName > h2 {
  text-transform: uppercase;
  font-style: italic;
  font-size: 2.2rem;
  margin-top: 1.5rem;
  color: inherit;
  font-weight: normal;
}
.sklmQeel_lastMemberName > strong {
  font-size: 1.4rem;
  font-style: italic;
}

/* Bloc statistiques membres et messages du forum */
.sklmQeel_forumStats {
  position: absolute;
  top: 0;
  right: 3rem;
  display: flex;
  flex-direction: column;
  transform: translateY(-50%);
}
.sklmQeel_forumStats > span {
  text-align: right;
  font-size: 1.4em;
  text-transform: uppercase;
}
.sklmQeel_forumStats > span:first-child {
  color: #262121;
}


Mon message d'accueil :

Code:
  <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Your Wiccan Forum</title>    <style>
        /* Your existing CSS styles */
        /* ... (Please keep your existing styles here) ... */

        /* Add new styles for the layout */
        .sklmPAColonnes {
            display: flex;
            justify-content: space-between;
        }

        .sklmPA_infosBloc {
            width: 50%; /* Adjust the width as needed for the left block (25% wider) */
        }

        .sklmPA_contexteBloc {
            width: 50
%; /* Adjust the width as needed for the right block (25% wider) */
        }

        .sklmPA_actuBloc {
            width: 40%; /* Adjust the width as needed for the middle block (25% wider) */
        }

        /* Clearfix to prevent content from overlapping */
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>   
<div class="sklmPAColonnes">
                                                        
   <div class="sklmPA_infosBloc sklmPA_colBloc">
                                                               
      <!--                        Your existing content for the left block                        -->                                 
      <!--                        DEBUT: MENU DE NAVIGATION                        -->                                 
      <ul class="sklmPA_navBloc">
                                                                      
         <li>
                                  <a href="https://cauldronofwisdom.forumactif.com/t1-reglements-du-forum">Règlements</a>                     
         </li>
                                                                      
         <li>
                                  <a href="https://cauldronofwisdom.forumactif.com/f4-presentations-des-membres">Présentations</a>                     
         </li>
                                                                      
         <li>
                                  <a href="https://cauldronofwisdom.forumactif.com/f11-guide-de-l-apprenti-sorcier">Guide de l'Apprenti Sorcier</a>                     
         </li>
                                                                      
         <li>
                                  <a href="https://cauldronofwisdom.forumactif.com/d10732517-guide-du-forum">Guide du forum</a>                     
         </li>
                                                                      
         <li>
                                  <a href="https://cauldronofwisdom.forumactif.com/f13-paranormal-documente">Paranormal</a>                     
         </li>
                                                                  
      </ul>
                                                               
      <!--                        FIN: MENU DE NAVIGATION                        -->                                   
      <div class="sklmPA_staffBloc">
                                                                      
         <ul class="sklmPA_staffList">
                                                                             
            <!--                        DEBUT: BLOC STAFF 1                        -->                                         
            <li class="sklmPA_staffItem">
                                                             <img src="https://i.servimg.com/u/f27/20/52/45/74/admin10.png" alt="Rang: Fondatrice" />                                             
               <div class="sklmPA_staffInfo">
                                                                    <strong>Nimue (Vi)</strong>                            <br />                            Fondatrice  <br />                            <a href="https://cauldronofwisdom.forumactif.com/privmsg?mode=post&u=1"><img src="https://i.goopics.net/N90K7.png" alt="MP" title="Envoyer un message privé" /></a>                                             
               </div>
                                                                                
            </li>
                                                                             
            <!--                        FIN: BLOC STAFF 1                        -->                                           
            <!--                        DEBUT: BLOC STAFF 2                        -->                                         
            <li class="sklmPA_staffItem">
                                                             <img src="https://i.servimg.com/u/f27/20/52/45/74/mkjqp10.png" alt="Rang: Pseudo" />                                             
               <div class="sklmPA_staffInfo">
                                                                    <strong>Pseudo du staff</strong>                            <br />                            Admin                            <br />                            <a href="https://cauldronofwisdom.forumactif.com/privmsg?mode=post&u=1"><img src="https://i.goopics.net/N90K7.png" alt="MP" title="Envoyer un message privé" /></a>                                             
               </div>
                                                                                
            </li>
                                                                             
            <!--                        FIN: BLOC STAFF 2                        -->                                           
            <!--                        DEBUT: BLOC STAFF 3                        -->                                         
            <li class="sklmPA_staffItem">
                                                             <img src="https://i.servimg.com/u/f27/20/52/45/74/mkjqp10.png" alt="Rang: Pseudo" />                                             
               <div class="sklmPA_staffInfo">
                                                                    <strong>Pseudo du staff</strong>                            <br />                            Modératrice                            <br />                            <a href="#"><img src="https://i.goopics.net/N90K7.png" alt="MP" title="Envoyer un message privé" /></a>                                             
               </div>
                                                                                
            </li>
                                                                             
            <!--                        FIN: BLOC STAFF 3                        -->                                     
         </ul>
                                                                  
      </div>
                                 
      <div class="sklmPA_infosBloc-l2">
                                   <a class="sklmPA_lienDiscord" href="">                <img alt="Rejoindre notre serveur Discord" src="https://i.servimg.com/u/f27/20/52/45/74/w2a3l10.png" />            </a>                         
         <!--                DEBUT: LISTE DES GROUPES                -->                         
         <ul class="sklmPA_groupesList">
                                                       
            <li class="sklm_gr1">
                             <strong>1</strong> Êtres de lumière             
            </li>
                                                       
            <li class="sklm_gr2">
                             <strong>0</strong> Êtres d'ombre             
            </li>
                                                       
            <li class="sklm_gr3">
                             <strong>0</strong> Wiccan             
            </li>
                                                       
            <li class="sklm_gr4">
                             <strong>0</strong> Otherkin             
            </li>
                                                       
            <li class="sklm_gr5">
                             <strong>0</strong> En quête de soi             
            </li>
                                                       
            <li class="sklm_gr6">
                             <strong>0</strong> Sorcier solitaire           
            </li>
                                                   
         </ul>
                                                
         <!--                FIN: LISTE DES GROUPES                -->                     
      </div>
                                                               
      <!--                        Your existing content for the left block                        -->                             
   </div>
                                                        
   <div class="sklmPA_actuBloc sklmPA_colBloc">
                                                               
      <!--                        Your existing content for the middle block                        -->                                 
      <div class="sklmPA_eventsBloc">
                                                                      
         <h2 class="sklm_hidden">
                                  Les Évènements                     
         </h2>
                                                                      
         <!--                        DEBUT: LISTE DES EVENTS/NEWS                        -->                                     
         <ul class="sklmPA_eventsList sklmScrollbar">
                                                                             
            <li>
                                     01/01/2020 - Dernier event !                     
            </li>
                                                                             
            <li>
                                     01/01/2020 - Dernier event !                     
            </li>
                                                                             
            <li>
                                     01/01/2020 - Dernier event !                     
            </li>
                                                                             
            <li>
                                     01/01/2020 - Dernier event !                     
            </li>
                                                                             
            <li>
                                     01/01/2020 - Dernier event !                     
            </li>
                                                                             
            <li>
                                     01/01/2020 - Dernier event !                     
            </li>
                                                                             
            <li>
                                     01/01/2020 - Dernier event !                     
            </li>
                                                                             
            <li>
                                     01/01/2020 - Dernier event !                     
            </li>
                                                                             
            <li>
                                     01/01/2020 - Dernier event !                     
            </li>
                                                                             
            <li>
                                     01/01/2020 - Dernier event !                     
            </li>
                                                                         
         </ul>
                                                                      
         <!--                        FIN: LISTE DES EVENTS/NEWS                        -->                                 
      </div>
                                                               
      <div class="sklmPA_predefsBloc">
                                                                      
         <h2>
                                  Choose me!                     
         </h2>
                                                                      
         <!--                        DEBUT: LISTE DES PREDEFINIS                        -->                                     
         <ul class="sklmPA_predefsList">
                                                                             
            <li>
                                                             <a href="#"><img src="https://i.goopics.net/lRAdA.png" alt="Nom du personnage" title="Nom du personnage" /></a>                                         
            </li>
                                                                             
            <li>
                                                             <a href="#"><img src="https://i.goopics.net/lRAdA.png" alt="Nom du personnage" title="Nom du personnage" /></a>                                         
            </li>
                                                                             
            <li>
                                                             <a href="#"><img src="https://i.goopics.net/lRAdA.png" alt="Nom du personnage" title="Nom du personnage" /></a>                                         
            </li>
                                                                             
            <li>
                                                             <a href="#"><img src="https://i.goopics.net/lRAdA.png" alt="Nom du personnage" title="Nom du personnage" /></a>                                         
            </li>
                                                                         
         </ul>
                                                                      
         <!--                        FIN: LISTE DES PREDEFINIS                        -->                                 
      </div>
                                                               
      <!--                        Your existing content for the middle block                        -->                             
   </div>
                                                        
   <div class="sklmPA_contexteBloc sklmPA_colBloc sklmScrollbar">
                                                               
      <!--                        Your existing content for the right block                        -->                                 
      <h2 class="sklm_hidden">
                               Le contexte                     
      </h2>
                                                               
      <!--                        DEBUT: CONTENU DU BLOC DE CONTEXTE                        -->                                 
      <p>
                               Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non,                     
      </p>
                                                 
   </div>
</div>
Merci mille fois!!!
BelleFae

BelleFae
Nouveau membre

Messages : 5
Inscrit(e) le : 01/10/2023

https://cauldronofwisdom.forumactif.com
BelleFae a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'apparence du background du forum

Message par Toryudo Mar 3 Oct 2023 - 12:16

Bonjour !

Par défaut, voilà le CSS de html, body :
Code:
html, body {
  background-attachment: scroll;
  background-color: #e8e8e6;
  background-image: url(https://i.servimg.com/u/f27/20/52/45/74/image_11.png);
  color: #5f6b5c;
  font-family: 'Roboto',sans-serif;
  font-size: 10px;
  height: 100%;
  line-height: 1.526;
  text-rendering: optimizeLegibility;
}

Il y a un height: 100% qui impose donc au background d'être d'une hauteur de 100% de la résolution de l'écran (et non pas 100% de la page).
Il faudrait donc rajouter un height: initial sur body pour annuler cet effet.

Il reste ensuite un background: var(--couleur-bg) sur l'élément #wrap donc si vous voulez également annuler cet effet, vous pouvez vous contenter de mettre un background: none sur cet élément #wrap
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1372
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'apparence du background du forum

Message par Chacha Dim 8 Oct 2023 - 9:40

Modifier l'apparence du background du forum UmaslZ4Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69445
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'apparence du background du forum

Message par Chacha Lun 9 Oct 2023 - 8:17

Modifier l'apparence du background du forum 8djze9qBonjour,

Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement !

Ce sujet est archivé afin de ne pas perdre les réponses apportées.
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69445
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum