Couleur différente pour chaque en-tête catégories

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

Résolu Couleur différente pour chaque en-tête catégories

Message par remybf le Ven 8 Avr 2016 - 16:47

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://hbetaville.forumactif.org

Description du problème

Bonjour/bonsoir,

Je me permets de faire suite au sujet que j'ai lu: http://forum.forumactif.com/t384743-couleur-de-fond-titre-des-categorie-phbb3?highlight=couleur+cat%E9gorie

Voilà je suis également embêter à propos du même sujet, j'ai essayé les codes mais pas moyen. Je suis un php2 moi et non php3 et j'aurais voulu la même chose que ci-dessous.



Soit j'ai fais une bêtise, sois je n'ai rien compris. Du coup j'ai tous enlever et j'attends donc les instructions. Je n'ai modifié aucune template et voici mon CSS:
Code:
/* Vérification disponibilité speudo a l'inscription */
#username_reg {
  color: #a90c0c;
}
#username_reg.okusername {
  color: #2f9122;
}

 
/* Couleurs de fond des catégories */
ul.linklist:not(.navlinks):nth-of-type(1) + div .header {
    background-color: red !important;
}
ul.linklist:nth-of-type(1) + div + div .header {
    background-color: blue !important;
}
ul.linklist:nth-of-type(1) + div + div + div .header {
    background-color: orange !important;
}


/* Affichage avatar du membre */
.fa_avatar {
  width: 25px;
  height: 25px;
  position: relative;
  top: -3px;
  margin-right: 5px;
  border-radius: 3px;
  margin-bottom: -10px;
}

/* Affichage image cadre de réponse */
.sceditor-container iframe, .sceditor-container textarea {
background:url(http://illiweb.com/fa/empty.gif)!important;}

/* Raccourci affichage des liens */
.postbody a {
  display: inline-block;
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}


/* Toolbar */

div#fa_search {display:none!important;} /*suppression bare de recherche */

/* Modification image share toolbar */
a#fa_fb {
background:url('adresse_de_votre_image')no-repeat!important;
}
a#fa_twitter {
background:url('adresse_de_votre_image')no-repeat!important;
}
a#fa_gp {
background:url('adresse_de_votre_image')no-repeat!important;
}
a#fa_mail {
background:url('adresse_de_votre_image')no-repeat!important;
}
a#fa_rss {
background:url('adresse_de_votre_image')no-repeat!important;
}

/* Modification forme toolbar */
div#fa_toolbar {
    background-color: #282828;  /* Couleur de fond */
    border-radius: 0 0 50px 50px;  /* Arrondis les bords de la toolbar */
    box-shadow: 0 0 5px #000000;  /* Affiche une ombre */
    margin: auto;  /* Centre la toolbar */
    width: 98%;  /* Modifie la longueur de la toolbar */
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;  /* Repositionne correctement le contenu de la toolbar */
}


/* Barre de navigation */


/* sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#333;
  border-bottom:1px solid #222 !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}
 
#fa_sticky_nav li { display:inline } /* navlist adjustment */
 
 
/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#CCC;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}
 
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  color:#FFF;
  background-position:0 25px;
}
 
 
/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
  border:1px solid #222;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}
 
#fa_sticky_toggle:hover { background-position:-30px 0 }
 
 
/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #222;
  border-right:0;
  border-top:0;
}
 
 
/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}

/*----()Bouton avertissement rapide ----*/
 
.mod_mess, .adm_mess {
margin: 5px auto;
width: 90%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
 
.mod_mess a.postlink, .adm_mess a.postlink {
color: #FFF !important;
text-decoration: underline !important;
}
 
/* administrateur bb-Code - bloc de message d'enregistrement */
 
.adm_mess {
background: #e54858;
background: -moz-linear-gradient(left, #e54858 0%, #f5b57a 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e54858), color-stop(100%, #f5b57a));
background: -webkit-linear-gradient(left, #e54858 0%, #f5b57a 100%);
background: -o-linear-gradient(left, #e54858 0%, #f5b57a 100%);
background: -ms-linear-gradient(left, #e54858 0%, #f5b57a 100%);
background: linear-gradient(left, #e54858 0%, #f5b57a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e54858", endColorstr="#f5b57a", GradientType=1);
-webkit-box-shadow: 4px 4px 0px 0px #352727;
-moz-box-shadow: 4px 4px 0px 0px #352727;
box-shadow: 4px 4px 0px 0px #352727;
}
 
/* Administrateur bb-Code - mise en page */
.adm_mess .titl {
font-size: 15px;
font-weight: bold;
padding: 5px;
border-bottom: 1px dashed #B60505; 
}
   
/* Administrateur BB-Code - présentation du texte */
.adm_mess .titl + div {
display: block;
margin-left: 10px;
padding: 25px 5px 25px 80px;
background: transparent url(http://i33.servimg.com/u/f33/17/37/83/89/gnome-10.png) no-repeat left center;
}
 
/* Messages BB-Code - bloc de message d'enregistrement */
 
.mod_mess {
background: #5c93f5;
background: -moz-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5c93f5), color-stop(100%, #afcfda));
background: -webkit-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
background: -o-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
background: -ms-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
background: linear-gradient(left, #5c93f5 0%, #afcfda 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5c93f5", endColorstr="#afcfda", GradientType=1);
-webkit-box-shadow: 4px 4px 0px 0px #352727;
-moz-box-shadow: 4px 4px 0px 0px #352727;
box-shadow: 4px 4px 0px 0px #352727;
}
 
/* Messages BB-Code - Un titre */
.mod_mess .titl {
font-size: 15px;
font-weight: bold;
padding: 5px;
border-bottom: 1px dashed #0D4DD3;   
}
   
/* modernité BB-Code - présentation du texte */
.mod_mess .titl + div {
display: block;
margin-left: 10px;
padding: 25px 5px 25px 80px;
background: transparent url(http://i33.servimg.com/u/f33/17/37/83/89/gnome610.png) no-repeat left center; 
}

/* coin forum arrondi */
.bodyline {
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}

@Miettes

Je vous remercie par avance de votre aide et désolé de vous avoir déranger


Dernière édition par remybf le Dim 17 Avr 2016 - 21:27, édité 1 fois

remybf
Nouveau membre

Masculin
Messages : 9
Inscrit(e) le : 07/04/2016

http://hbetaville.forumactif.org
remybf a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Couleur différente pour chaque en-tête catégories

Message par Miettes le Ven 8 Avr 2016 - 17:03

Salut Smile

Déjà, je tiens à le préciser, j'apprécie moyennement de recevoir un MP toutes les demi-journées pour demander de l'aide....

Ceci étant dit, j'aimerai comprendre pourquoi tu as mis la CSS dans une feuille javascript Embarassed

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Couleur différente pour chaque en-tête catégories

Message par remybf le Ven 8 Avr 2016 - 17:12

@Miettes a écrit:Salut Smile

Déjà, je tiens à le préciser, j'apprécie moyennement de recevoir un MP toutes les demi-journées pour demander de l'aide....

Ceci étant dit, j'aimerai comprendre pourquoi tu as mis la CSS dans une feuille javascript Embarassed

Bonjour,

Escusez moi je ne pensais pas l'avoir envoyé plusieurs fois car le message est toujours dans ma boite d'envoie et non dans les messages envoyés. Si j'avais su qu'il y avait un problème a ce niveau, je ne l'aurais pas envoyé plusieurs fois Wink

Pour ce qui est du code je m'y connais très peu alors il est fortement possible qu'il y ai des bêtises.

remybf
Nouveau membre

Masculin
Messages : 9
Inscrit(e) le : 07/04/2016

http://hbetaville.forumactif.org
remybf a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Couleur différente pour chaque en-tête catégories

Message par remybf le Lun 11 Avr 2016 - 14:22

Up

remybf
Nouveau membre

Masculin
Messages : 9
Inscrit(e) le : 07/04/2016

http://hbetaville.forumactif.org
remybf a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Couleur différente pour chaque en-tête catégories

Message par Invité le Lun 11 Avr 2016 - 16:14

Bonjour,

Déjà on peut supprimer cette partie dans votre css:
Code:
/* Couleurs de fond des catégories */
ul.linklist:not(.navlinks):nth-of-type(1) + div .header {
    background-color: red !important;
}
ul.linklist:nth-of-type(1) + div + div .header {
    background-color: blue !important;
}
ul.linklist:nth-of-type(1) + div + div + div .header {
    background-color: orange !important;
}
Car c'est un code pour la version phpbb3 et vous êtes sous phpbb2 et la façon de faire est mauvaise je m'en rend compte.

Bye Wink

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Couleur différente pour chaque en-tête catégories

Message par remybf le Sam 16 Avr 2016 - 15:56

d'accord merci

remybf
Nouveau membre

Masculin
Messages : 9
Inscrit(e) le : 07/04/2016

http://hbetaville.forumactif.org
remybf a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Couleur différente pour chaque en-tête catégories

Message par Invité le Sam 16 Avr 2016 - 16:23

De rien

Donc dans votre panneau d'administration à :

- Forum
- Catégories et forums
- Cliquer sur l'icône de chaque catégorie "edit "
- Nom de la catégorie > Mettez ce code juste AVANT le titre de la catégorie :
Code:
<span class="cat1">
Exemple pour les autres catégories:
Code:
<span class="cat2">
cat2,cat3 etc...

Ensuite dans la gestion des codes javascript sur toutes les pages mettez ce code:
Code:
$(function(){
          $(".cat1").parent().parent().parent().attr('id','cat1');
});
Pour la suite ça se fait de cette façon:
Code:
$(function(){
          $(".cat1").parent().parent().parent().attr('id','cat1');
          $(".cat2").parent().parent().parent().attr('id','cat2');
});
Etc... Et pour la feuille de style CSS:
Code:
.secondarytitle, .secondarytitle ~ th {
background: none !important;
}
/* catégorie 1 */
tr#cat1 {
background-color: red;
}
Toujours pareil pour la suite des catégories c'est la même façon qu'expliqué en haut Wink
La couleur est rouge = red dans le code modifiez cela pour choisir votre couleur.

Ne pas hésiter si besoin d'aide.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Couleur différente pour chaque en-tête catégories

Message par remybf le Dim 17 Avr 2016 - 21:26

c'est nickel vraiment un grand merci

remybf
Nouveau membre

Masculin
Messages : 9
Inscrit(e) le : 07/04/2016

http://hbetaville.forumactif.org
remybf a été remercié(e) par l'auteur de ce sujet.

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


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