image differente fond forum

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

Résolu image differente fond forum

Message par serbe71 le Dim 28 Juil 2013 - 11:46

bonjour a tous,

lien de mon forum
http://automobile-atelier.forumactif.org/

je souhaiterais savoir comment faire pour mettre une image de fond differente pour chaque forum a la place du gris

j ai fais ci dessous un croquis explicatif


merci a tous

serbe71
Nouveau membre

Messages : 28
Inscrit(e) le : 21/01/2013

http://automobile-atelier.forumactif.org/
serbe71 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image differente fond forum

Message par MlleAlys le Dim 28 Juil 2013 - 16:29

bonjour !
Alors, j'ai bien quelque chose à proposer, mais c'est un peu du bidouillage, alors peut être que quelqu'un aurait mieux... =S

Voilà le principe : on va utiliser la pseudo-class css :nth-child(N) pour désigner la ligne par sa place dans l'élément parent.
Donc d'abord il faut la place de la catégorie, puis la place de la ligne dans cette catégorie :

Les catégories ont pour class .forabg, et la première catégorie (AUTOMOBILE ATELIER ET VOUS) est le 6ième élément. Donc pour désigner cette catégorie, on va utiliser div.forabg:nth-child(6). Puis ça augmente régulièrement : la deuxième catégorie est à la place 7, la troisième place 8, etc.

Pour désigner les lignes, je vais utiliser .topiclist.forums li.row là c'est plus facile, puisque la place de la ligne correspond au numéro de la ligne en fait. ;)Par exemple pour désigner la deuxième ligne d'une catégorie : .topiclist.forums li.row:nth-child(2).

Enfin, on utilise la propriété background-image: url(URL DE L'IMAGE); pour ajouter une image de fond à l'élément désigné. Par exemple, pour mettre une image en fond du deuxième forum de la troisième catégorie, je vais mettre ce code dans mon css :
Code:
/* ceci est un commentaire pour s y retrouver; troisieme categorie deuxieme forum*/
div.forabg:nth-child(8) .topiclist.forums li.row:nth-child(2) {
  background-image: url(URL DE L'IMAGE);
}

Voilà en gros la solution que j'ai trouvée ! ^^" Ce qui n'est pas forcément des plus pratiques si tu modifies par la suite la structure de l'index (en modifiant les templates, ou bien en ajoutant des forums ou des catégories, etc) : il faudra alors sans doute modifier les numéros...

Bref, sinon : Est-ce qu'au moins ça fonctionne ?  =X

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: image differente fond forum

Message par serbe71 le Dim 28 Juil 2013 - 17:46

salut,
tout d'abord un grand merci, c est top sa marche nickel
une petite question complementaire
comment faire pour que l image se dimensionne automatique suivant la resolution de l'écran

merci encore

serbe71
Nouveau membre

Messages : 28
Inscrit(e) le : 21/01/2013

http://automobile-atelier.forumactif.org/
serbe71 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image differente fond forum

Message par Self le Dim 28 Juil 2013 - 17:52

Bonsoir.

Il suffit d'ajouter :
Code:

width:100%;
height:100%;

Dnas le code que vous à donner MlleAlys.

Bonne soirée =) .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

Résolu Re: image differente fond forum

Message par MlleAlys le Dim 28 Juil 2013 - 18:13

c'est une image en background, alors j'utiliserais plutôt background-size: 100%; Wink
Vous pouvez l'ajouter à chaque code, comme ceci (si je reprends mon exemple plus haut) :
Code:
div.forabg:nth-child(8) .topiclist.forums li.row:nth-child(2) {
  background-image: url(URL DE L'IMAGE);
  background-size: 100%;
}
Ou bien en mettre un général et donc ne pas être obligé de le remettre dans chaque :
Code:
.topiclist.forums li.row {
  background-size: 100%;
}

Avec background-size: 100%; l'image prend toute la largeur de l'élément. Pour qu'elle s'adapte aussi en hauteur (mais au risque de la déformer dans ce cas), il suffit d'ajouter un deuxième 100% Wink :
background-size: 100% 100%;

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: image differente fond forum

Message par serbe71 le Dim 28 Juil 2013 - 19:26

ok,
merci beaucoup pour l'aide apporter ::pourtoi:: 

serbe71
Nouveau membre

Messages : 28
Inscrit(e) le : 21/01/2013

http://automobile-atelier.forumactif.org/
serbe71 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image differente fond forum

Message par MlleAlys le Dim 28 Juil 2013 - 19:27

de rien ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys 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