Image de bas de catégo différentes pour chaque

[ecleasya]

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 : (lien masqué, vous devez poster pour le voir)

Description du problème

Voilà, j'ai trouvé le code et tout pour mettre une image en tant que haut et bas. Cependant, avec la commande de graphisme que ma co-fondatrice a passé pour le forum, on a plusieurs haut et plusieurs bas (un de chaque par catégorie en fait). J'ai réussie à bidouiller des codes pour pouvoir faire en sortes de superposer deux images sur les haut de catégories (parce qu'on a également une image pour le titre de celle-ci) ainsi que mettre une image différente dessous chaque titre de catégories, mais par contre le bas, c'est genre mission impossible. J'ai cherché un peu dans tout les sens, mais j'ai vraiment rien trouvé :/


Voici mon css :

Code:

/* DÉBUT CATÉGORIES */
/* HAUT CATEGORIE */
.tleCAT{
margin:10px auto 0;
width:811px; text-align:right;
background:url(image.png);  /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2{
margin:0; padding:10px 25px 10px 0;
font-size:36px; text-transform:uppercase; font-style:italic; letter-spacing:2px;
font-family:Fjalla One; color:white; /* MODIFIABLE */
}
/* CONTENU CATEGORIE */
.mdlCAT {
margin-left:-3px; width:811px; /* MODIFIABLE */
  margin-top:-10px;
}
/* BAS CATEGORIE */
.btmCAT {
margin:auto; width:811px; height:50px;
background:url(image.png); /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM {
margin:auto; width:781px; height:180px; overflow:hidden;
background:#DEDEDE; /* MODIFIABLE */
}
/* BLOC NOMBRE SUJETS & MESSAGES / TITRE FORUM */
.tleFRM {
width:770px; height:25px; padding-top:5px; padding-right:25px;
text-align:right; font-size:18px; text-transform:uppercase; letter-spacing:1px;
background:white; /* MODIFIABLE */
}
/* TITRE FORUM */
.tleFRM a{
font-family:Fjalla One; color:black !important; /* MODIFIABLE */
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {
position:absolute; margin-top:3px; padding-left:25px;
text-transform:uppercase; font-size:11px;
color:#191919; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
#descFRM img{
position:absolute; margin-top:-20px; margin-left:-415px;
width:780px; height:150px;
opacity:0.7;
}
/* ICÔNES FORUM */
.imgFRM {
position:relative;z-index:3;
display:inline-block; vertical-align:top; margin-top:23px; margin-left:15px;
width:75px; height:103px;
}
/* SOUS-FORUMS */
.sfFRM {
position:relative; z-index:3;
display:inline-block; vertical-align:top; margin:20px 0 0 15px;
width:130px; height:100px; padding:5px; overflow:auto;
background:#CCC; /* MODIFIABLE */
opacity:0.3; transition:opacity 0.65s ease; -webkit-transition:opacity 0.65s ease;
}
.FRM:hover .sfFRM {
opacity:1;
}
/* LIEN SOUS-FORUM */
.sfFRM a{
font-size:14px; font-family:Fjalla One; text-transform:uppercase; color:black !important; /* MODIFIABLE */
}
/* BLOC DESCRIPTION */
#descFRM {
display:inline-block; margin:20px 10px 0;
width:320px; height:175px; overflow:hidden; text-align:center;
}
/* DESCRIPTION FORUM */
.descFRM {
position:relative; z-index:3; margin:auto;
width:305px; height:100px; padding:5px; overflow:auto;
font-size:11px; text-align:justify;
background:white; color:black; /* MODIFIABLE */
opacity:0.3; transition:opacity 0.65s ease; -webkit-transition:opacity 0.65s ease;
}
.FRM:hover .descFRM {
opacity:1;
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
position:relative; z-index:4;
display:inline-block; vertical-align:top; margin-top:20px;
width:180px; height:85px; padding-top:25px; overflow:hidden;
text-align:center; font-family:Fjalla One;
font-size:16px; background:white; color:black; /* MODIFIABLE */
opacity:0.3; transition:opacity 0.65s ease; -webkit-transition:opacity 0.65s ease;
}
.FRM:hover .lmsgFRM {
opacity:1;
}
/* TITRE DERNIER MESSAGE FORUM */
.lmsgFRM a {
text-transform:uppercase;
}
/* TAILLE AUTEUR DERNIER MESSAGE FORUM */
.lmsgFRM .gensmall {
font-size:16px; /* MODIFIABLE */
}
/* FIN CATÉGORIES */

Et mon template :

Code:

<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css">
 
  <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
    <div class="mdlCAT"><!-- END tablehead -->
 
    <!-- BEGIN cathead -->
    <!-- END cathead -->
 
    <!-- BEGIN forumrow -->
    <div class="FRM"><div class="tleFRM"><div class="nbFRM">{catrow.forumrow.TOPICS} sujets  ▼ {catrow.forumrow.POSTS} messages</div><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><script type="text/javascript">$('.sfFRM').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script><div id="descFRM">{catrow.forumrow.FORUM_DESC}</div><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div></div>
    <!-- END forumrow -->
 
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
  </div><div class="btmCAT"></div>
    <!-- END tablefoot --><!-- END catrow -->

Je ne sais pas s'il existe un code pour réussir à faire cela ou non, mais je vous remercierai, peut importe votre réponse ♥


Pour vous aidez, voici un des bas de catégories (si vous réussissez à bidouiller quelque chose, vous pourrez mettre la même image partout, je me chargerai de les changer une par une )
https://i.imgur.com/sx7Eu7k.png

Voilà voilà En espérant que vous pourrez m'aider avec mes deux problèmes, parce que je vous avoue que je suis sur le point de m'arracher les cheveux là XD

En vous remerciant d'avance,
Ecleasya ♥

[Walt]

Attention, cela fait plus 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 12h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[ecleasya]

Hellow Ma demande est toujours d'actualité ^^

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[ecleasya]

Bonjour !
Je recherche toujours une solution à mon problème oui

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[ecleasya]

Bonjour Ma demande est toujours d'actualité oui ^^

[Lixyr]

Où en-est votre problème ? Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône RÉSOLU en éditant votre premier message, Votre problème est toujours d'actualité, dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté.

[ecleasya]

Bonjour, je recherche toujours une solution à mon problème

[Lixyr]

Où en-est votre problème ? Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône RÉSOLU en éditant votre premier message, Votre problème est toujours d'actualité, dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté.

[ecleasya]

coucou, je recherche toujours quelqu'un pour me dire comment faire ^^'

[Lixyr]

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[ecleasya]

Bonjour, ma demande est toujours d'actualité

[Invité]

Hello ecleasya,

on peut en ajoutant une class à la désignation de la catégorie (dans ton P.A) comme ceci:

Code:

<span class="M14_Cat_1">Premiere catégorie</span>

Puis le script:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mets un titre explicite.
Coches sur l'index.


Déposes ceci:

Code:


$(function(){
$('span.M14_Cat_1').closest('div').next().after('<div><img src="http://i.imgur.com/sx7Eu7k.png"/></div>');
});


Penses à cliquer sur le bouton VALIDER




Voilà le fonctionnement pour une catégorie.
Pour la deuxième:

Code:

<span class="M14_Cat_2">Deuxième catégorie</span>

On modifiera le script ainsi:

Code:


$(function(){
$('span.M14_Cat_1').closest('div').next().after('<div><img src="http://i.imgur.com/sx7Eu7k.png"/></div>');
$('span.M14_Cat_2').closest('div').next().after('<div><img src="LIEN DE L IMAGE"/></div>');
});


a++

[ecleasya]

Salut @Milouze14 Alors c'est parfait, mais il y a un tout petit hic, l'image veut pas se placer comme je le veux XD Elle est décalé à gauche et impossible de la bouger. Et je ne peux pas ajouter de texte dans le titre de catégorie parce que je n'ai plus d'espace pour ça. Et j'ai essayé de le corriger en passant par le css, mais ça ne modifie rien Aurais-tu une solution ?

[Invité]

Hello ecleasya,

ton image à une largeur de 800px et son conteneur (780px) :

Code:


.FRM {
    background: #DEDEDE;
    height: 180px;
    margin: auto;
    overflow: hidden;
    width: 780px;
}


Si tes images ont toujours la même largeur, teste ce script stp:

Code:


$(function(){
$('span.M14_Cat_1').closest('div').next().after('<div style="margin-left:92px;"><img src="http://i.imgur.com/sx7Eu7k.png"/></div>');
$('span.M14_Cat_2').closest('div').next().after('<div style="margin-left:92px;"><img src="LIEN DE L IMAGE"/></div>');
});


a++

[ecleasya]

Hey Ouais en fait le 780 je n'ai pas eu le choix sinon le corps des catégories est trop grand pour les deux images de haut et de bas (étrangement XD). Sinon ce script fonctionne nickel chrome, je ne savais même pas que l'on pouvait y mettre du css c'est hyper intéressant en fait comme information. Du coup ma demande elle est résolu, merci à toi Milouze14 pour ton aide ♥