Tuto modifier le CSS pour que ça fasse un design différent pour votre catégorie
-------------------------------------------------------------------------------------
1. Design du forum Explications (sinon passer au point 2)
D'abord, on va chercher le nom de la catégorie qu'on veut modifier. Pour l'exemple, on voudra modifier le forum F1 :
- Spoiler:
- Spoiler:
On va juste prendre c8, qui va designer le nom de la catégorie. Le CSS va toucher la catégorie, et les catégories et forums qui en découleront, donc on a juste à prendre c8 c'est tout.
On va aller ensuite dans le CSS
Panneau d'admin -> affichage -> Image & couleurs -> couleurs -> feuille de style CSS
On cherche un endroit, qu'on entours de balise commentaire pour s'y retrouver sinon c'est le bordel
rappel :
- Code:
-
/* commentaire à écrire entre ces crochets */
- Spoiler:
On va ajouter là dedans
- Code:
-
.body-c8 {
}
(ça indique qu'on va modifier le body de c8. )
On va rajouter une image de fond (
https://img.macg.co/2018/7/macgpic-1532973534-174281475292912-sc1-jpt.jpg ) :
- Code:
-
.body-c8 {
background-image: url("https://img.macg.co/2018/7/macgpic-1532973534-174281475292912-sc1-jpt.jpg"); /* Image de fond */
}
On peut ajouter diverses lignes en fonction :
La position (ici centre haut)
- Code:
-
background-position: center top;
Pour que l'image ne se répète pas, si ça arrive...
- Code:
-
background-repeat: no-repeat;
On va ajouter une bannière maintenant. La bannière est designée par #i_logo. ( On va utiliser cette image :
https://i.servimg.com/u/f58/20/09/32/22/p9g3um12.png )
- Code:
-
.body-c8 #i_logo {
background-image: url("https://i.servimg.com/u/f58/20/09/32/22/p9g3um12.png");
}
Donc pour le moment on à ça :
- Spoiler:
Ce qui donne ça :
- Spoiler:
-------------------------------------------------------------------------------------
2.On va modifier maintenant les couleurs du texte, du fond des catégories... Dans les screens en rouge, ce qui est modifié
On peut également s'aider de ce lien :
https://forum.forumactif.com/t274033-les-principaux-identifiants-css-phpbb2-phpbb3* Cadre après le background, mais avant le forum
- Code:
-
.body-c8 .bodyline { background: rgba(255,0,0, 0.80); }
mettre la couleur en rgba permet de mettre de la transparence (ici 0.80). Il y a juste à taper generateur couleur rgba pour avoir votre couleur
- Spoiler:
* ça modifie des petits textes à droite à gauche
- Code:
-
.body-c8 .gen {color: #FF0000;}
.body-c8 .genmed {color: #FF0000;}
- Spoiler:
* D'autres petits textes
- Code:
-
.body-c8 .gen {color: #FF0000;}
- Spoiler:
* Couleur d'autres textes (pas d'images j'ai la flemme c'est assez explicite)
- Code:
-
.body-c8 a:link {color: #459649;} /* Couleur texte en lien */
.body-c8 a:visited {color: #5CB060;} /* Couleur texte en lien déjà visité */
.body-c8 a:hover {color: #2B722E;} /* Couleur texte survolé */
.body-c8 a:active {color: #459649;} /* Couleur texte quand on clic dessus */
* Couleur de nom de catégorie
- Code:
-
.body-c8 .secondarytitle {color: #2D7230;} /* Couleur Nom de la catégorie */
.body-c8 .secondarytitle h2 {color: #2D7230;} /* Couleur Nom de la catégorie */
- Spoiler:
* background color : jaune, color: bleu
- Code:
-
.body-c8 th {background-color: #FFFF00; color: #0000FF;}
- Spoiler:
* Texte navigation
- Code:
-
.body-c8 .nav {color: #FF0000;}
- Spoiler:
* Bordures
- Code:
-
.body-c8 .forumline {background-color: #FF0000;}
- Spoiler:
* Interieur cellules
- Code:
-
.body-c8 td.row1 {background-color: #FF0000 ;}
- Spoiler:
* Interieur cellule 2
- Code:
-
.body-c8 td.row2 {background-color: #FF0000;}
- Spoiler:
* Interieur cellule 3
- Code:
-
.body-c8 td.row1.over {background-color: #FF0000;}
- Spoiler:
*Interieur cellule 4
- Code:
-
.body-c8 td.row3.over {background-color: #FF0000;}
- Spoiler:
*Change la couleur de l'interieur de la cellule 4 quand on passe sa souris dessus (pas de screen)
- Code:
-
.body-c8 td.row3.over:hover {background-color: #FF0000;}
* Interieur de cellules mais... Autrement
- Code:
-
.body-c8 td.row3 {background-color: #FF0000;}
- Spoiler:
*Couleur fond catégorie
- Code:
-
.body-c8 .catBottom {background-color: #FF0000;}
- Spoiler:
-------------------------------------------------------------------------------------
3. Changer les icônes nouveau message, pas de nouveau message, forum verrouillé..... à copier coller. ( En fait ça cherche dans le body l'element qui s'appelle liendelimage.png, et on lui donne un background (l'image qu'on veut lui donner), puis une taille (pour afficher le background). C'est pour ça qu'a la base il faut une image transparente et petite dans les paramètres du forum, pour qu'on puisse modifier ça dans le css et que l'image de base ne nous dérange pas. )
On peut donc faire ça ensuite pour tout ce qui est annonce, post-it... Mais aussi les mini bouton genre supprimer un message, citation etc.
Je mets que les 3 boutons principaux pour le moment.
3.1 Nouveau message - Code:
-
/* ----------IMAGE NOUVEAU MESSAGE c8 ------------ */
.body-c8 img[src="https://i.servimg.com/u/f62/19/44/45/05/new10.png"] {
background-image: url(" LIEN IMAGE DE L ICONE NOUVEAU MESSAGE");
background-repeat: no-repeat;
height: HAUTEUR NOUVELLE IMAGEpx;
width: LARGEUR NOUVELLE IMAGEpx;
}
3.2 Pas de nouveau message - Code:
-
/* ----------IMAGE PAS DE NOUVEAU MESSAGE c8------------ */
.body-c11 img[src="https://i.servimg.com/u/f62/19/44/45/05/nonew10.png"] {
background-image: url(" LIEN IMAGE DE L ICONE PASDE NOUVEAU MESSAGE ");
background-repeat: no-repeat;
height: HAUTEUR NOUVELLE IMAGEpx;
width: LARGEUR NOUVELLE IMAGEpx;
}
3.3 Forum verrouillé - Code:
-
/* ----------IMAGE FORUM VERROUILLE c8------------ */
.body-c11 img[src="https://i.servimg.com/u/f62/19/44/45/05/verrou10.png"] {
background-image: url("LIEN IMAGE DE L ICONE FORUM VERROUILLE ");
height: HAUTEUR DE LIMAGEpx;
width: LARGEUR DE LIMAGEpx;
background-repeat: no-repeat;
}
Accueil 
