Image intégrée dans le cadre des catégories

[emc2]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://forumfrance.forumactif.fr/

Description du problème

Bonjour,
En me promenant sur les forums forumactif, je suis tombé sur un qui avait intégré une image en background, différente dans chaque catégorie. Malheureusement, je n'ai pas eu la présence d'esprit de mémoriser ce site.
Donc si l'on pouvait m'expliquer comment intégrer une image de fond dans chacune des catégories cela m'intéresse énormément.
Merci par avance

[mdlettrage]

Coucou, voici une solution que j'avais lue et mémorisée en cas de besoin

Dans le CSS, tu ajoutes :

Code:

a.cattitle span, .secondarytitle h2 span, .table-title h2 span, .maintitle h2 span, .page-title h2 span { display: none; }
a.cattitle img, .secondarytitle h2 img, .table-title h2 img, .maintitle h2 img, .page-title h2 img { display: inline!important; }

Dans la gestion des catégories, tu mets ceci comme titre :

Code:

<center><span>titre de la catégorie</span><img style="display:none" src="http:// ....l'adresse de l'image .... .gif" /></center>

Cela devrait résoudre ta demande en attendant que quelqu'un te propose peut-être une solution plus "propre"

[emc2]

Ce code marche parfaitement bien pour coller une image de fond là ou se trouve le titre de la catégorie. Mais je souhaiterais mettre une image en arrière plan sur toute la catégorie. De cette manière j'aurais mon image en fond et les forums de cette catégorie par dessus.
Désolé, je me suis mal exprimé dans le premier post. Et merci pour ta réponse, elle sera sûrement mise à profit également.

[emc2]

Uping !

[Kumo]

Bonjour, je me permet d'intervenir car je pense avoir la solution à votre problème grâce au code donné par Don Vito Corleone dans ce sujet: https://forum.forumactif.com/t384743-couleur-de-fond-titre-des-categorie-phbb3#3237312

Il suffit de l'adapter non pas pour avoir une couleur en fond, mais une image.

Insérer ce code dans votre CSS:

Code:


ul.linklist:not(.navlinks):nth-of-type(1) + div {
    background: url(URL de votre image)
}

ul.linklist:not(.navlinks):nth-of-type(1) + div + div {
    background: url(URL de votre image)
}


Il vous suffit alors de placer l'url de vos images entre parenthèse.
Ici le résultat ne touchera que les deux premières catégories (selon votre hiérarchie), pour continuer il suffit de rajouter un "+ div" à chaque fois que vous recollez le code.

J'espère que cela vous à aidé et que je n'ai pas mal fait d'intervenir ici .

[emc2]

Je vais essayer ça certainement d'ici à deux ou trois jours. Je reviendrais commenter ensuite.
En tout cas merci pour la proposition.

[emc2]

Cela fonctionne bien. il faut maintenant que j'adapte les dimensions de l'image au forum et le tour est joué.
Toutefois, je ne sais pas comment je peux sélectionner la bonne catégorie. En effet, le code détermine les deux première catégorie, hors, j'ai besoin de coller l'image background sur la troisième et la cinquième catégorie. Tel que je suis obligé de mettre une image sur la 1ere, la 2eme pour enfin pouvoir en mettre une sur la 3eme. j'ai pensé à mettre des images transparentes, mais je suppose que l'on peut mieux faire par soucis d'alléger le CSS non ?

[Kumo]

Comme je le disais, il faut jouer avec les "+ div".

Si vous voulez seulement mettre une image sur la troisième et cinquième catégorie, essayez avec ce code:

Code:

ul.linklist:not(.navlinks):nth-of-type(1) + div + div + div {
    background: url(URL de votre image)
}
 
ul.linklist:not(.navlinks):nth-of-type(1) + div + div + div + div + div {
    background: url(URL de votre image)
}

[emc2]

Ok, je n'avais pas pigé !!!! Bon sang, mais c'est bien sûr !! Merci pour tout, c'est juste un plaisir de croiser des gens qui donnent des coups de mains comme ça, pour le plaisir de partager. Je vous assure, c'est du bonheur après une journée de taf en milieu humainement agressif.
Je balise en "résolu" Et encore une fois merci beaucoup.

[Kumo]

Pas de soucis, on m'aide aussi dans d'autre sujet donc je trouve cela normal d'aider en retour