Aide pour installation des catégories

[Lisouille]

Bonjour

J'aimerais actuellement changer les catégories de ce forum en ceci :

Spoiler:

La dernière case toute à droite correspond aux derniers messages et la cloche à l'icone de nouveau messages. Sachant que j'aimerai que le cadre en brun clair soit dépendant pour chaque forum. Un peu comme il été réussi dans cette aide.
En suivant le lien que j'ai donné au-dessus, vous verrez ce que j'ai réussi à faire. Mais je n'arrive pas à faire un fond indépendant pour chaque forum comme dans mon image.
Cependant, comme je suis incapable de coder sans partir d'une maquette graphique au départ, je l'avais déjà fait en image. Ensuite, je l'ai fait réalisé à l'aide de div et de table. Je mets mon code en hide pour éviter des vols de codes tout de même. Comme ceci :


Je l'ai ensuite transposé en CSS avec des class :
CSS :

HTML :


A l'heure, j'ai lu une bonne vingtaine de tutoriels sur "comment modifier ses catégories", mais je n'arrive à rien comme vous pourrez le constater en regardant mon forum.
Donc voilà, j'espère que vous pourrez m'aider à installer ces catégories
Merci d'avance à ceux qui se pencheront sur mon problème ♥

[MlleAlys]

bonjour,
je poste pour voir les codes... en espérant pouvoir aider ^^"

[Lisouille]

Merci à toi

[MlleAlys]

Bon,
j'ai commencé à faire quelque chose mais ce n'est pas fini, mais j'ai repris votre code html, juste un peu corrigé dans la structure, et j'ai remplacé les textes par les variables correspondantes, les boucles, etc, pour que ça reste le plus près possible du template d'origine.
Ce qui nous donne comme template (entier) ceci :



J'ai du coup également modifié le css :


Il est encore à compléter et à régler sur les détails bien entendu =s

Est-ce que globalement ça fonctionne ? ^^"

[Lisouille]

Bonsoir

Je te remercie vraiment, le résultat obtenu pour le moment est presque exactement celui que je voulais :O
Il ne reste plus que les réglages niveau CSS à faire

Je vais étudier ce que tu as fait d'ailleurs, ça me permettra de comprendre comment tu as réussi

Alors, pour répondre à ta question, oui ça fonctionne globalement :)Il n'y as qu'un seul problème, un fond noir est apparu derrière chaque catégorie :

Mais je n'arrive pas à trouver d'où il vient :S

(Par contre, pour te remercier, je te mettrai dans les crédits de mon forum. Veux-tu un nom spécial ou le pseudo que tu as ici ? )

Merci beaucoup

[MlleAlys]

Oh !
il s'agit du fond noir attribué à .forumline, c'est vrai que j'ai oublié de modifié cette partie ! ><"

Dans le template, il y a, juste en dessous de <!-- BEGIN tablehead --> , il y a cette ligne là :

Code:

<div class="forumline categorie" width="100%" border="0" cellspacing="1" cellpadding="0">

c'est la première balise de la div contenant la catégorie. Tu peux remplacr cette ligne par :

Code:

<div class="categorie">

(oui oui, tout le retse ne sert à rien, c'est parce que j'ai changé table par div et j'ai oublié de modifier le reste, désolée ><"

Et je vois en plus que je n'ai pas mis les commentaires sur le css... Bon, les noms des classes sont à peu près explicites donc ça devrait aller, s'il y a un souci tu peux me demander, juste ce passage à la troisième ligne :

Code:

margin: 20px 0;

c'est la marge des tableaux correspondant aux lignes pour les forums, et 20px est donc l'écart entre ces lignes, valeur que tu peux modifier si tu veux les rapprocher ou les écarter


(oh et, merci, MlleAlys c'est très bien    )

[Lisouille]

Bonjour

Merci, le fond noir à disparu C'est très joli maintenant je trouve
Pa contre, il y a un petit problème que j'ai remarqué quand j'ai voulu tester l'icone derniers messages   

Serait-il possible de la décaler vers le haut, pour qu'elle soit bien plus dans le coin ?

Merci beaucoup encore

[MlleAlys]

c'est ce passage là dans le css, que je n'ai pas touché par rapport à celui donné ^^ :

Code:

div.imagenewmessage {
    position:absolute;
    top: -15px;  
    right: -15px;
    width : 48px;
    height : 66px;
}

modifiez la valeur de "top" ^^
AH !
Je viens de me rendre compte que j'ai oublié un détail : Firefox ne prend pas en compte la position relative sur les cellules de tableau, contrairement à Chrome, et donc les images des nouveaux messages ne vont pas s'afficher correctement sur ce navigateur, il faut modifier un peu le css pour corriger ça ><" :

Ajoutez ce code au css:

Code:

div.newmessage {
    position: relative;
}

Puis dans cette partie :

Code:

td.case_nouveaumessage_categorie {
    position:relative;
    width : 125px;
    text-align:center;
}

Vous pouvez retirer position:relative; ce qui donne :

Code:

td.case_nouveaumessage_categorie {
    width : 125px;
    text-align:center;
}

Il faudra du coup régler à nouveau la position de l'image à partir du premier code indiqué, en modifiant les valeurs de "top" et de "right" ^^"



( Edit : Il me semble en examinant votre forum que vous avez gardé le tout premier css, je suis désolée si ce n'était pas clair, vous pouvez le supprimer puisque celui que j'ai donné est complet par rapport au résultat souhaité =s )

[Lisouille]

(Re)Bonjour

Ah oui   C'est ma faute aussi, je l'aurais supprimé si je l'avais vu en fait :S Pour tester, je ne l'avais pas mis entre mes balises commentaires pour les catégories mais tout en bas du CSS, du coup j'avais oublié d'effacer le CSS test

Je te remercie vraiment pour ton aide, et vais de ce pas faire mes crédits où y figurera ton nom Merci beaucoup encore ♥

[MlleAlys]

de rien ! ^^