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
Page 1 sur 1 • Partagez
Modifier l'apparence du background du forum
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>
Re: Modifier l'apparence du background du forum
Bonjour !
Par défaut, voilà le CSS de html, body :
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
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
Re: Modifier l'apparence du background du forum
Bonjour, 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 » |
Re: Modifier l'apparence du background du forum
Bonjour, 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. |
Sujets similaires
» Redimensionnement automatique du background du forum
» Impossible de modifier le Background Color de la Navbar
» "-webkit-background-clip" ne fonctionne pas sur mon forum
» Problème d'affichage d'un background en fond de forum
» background fond de forum
» Impossible de modifier le Background Color de la Navbar
» "-webkit-background-clip" ne fonctionne pas sur mon forum
» Problème d'affichage d'un background en fond de forum
» background fond de forum
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
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum