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

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

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

Message par ecleasya le Sam 15 Juil 2017 - 22:09

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 Smile)
http://i.imgur.com/sx7Eu7k.png

Voilà voilà Very Happy 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 ♥
avatar

ecleasya
Nouveau membre

Messages : 16
Inscrit(e) le : 14/03/2017

http://asterya.forumgratuit.org/
ecleasya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de bas de catégo différentes pour chaque

Message par Walt le Sam 22 Juil 2017 - 11:00

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 »
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 3316
Inscrit(e) le : 08/09/2015

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

Résolu Re: Image de bas de catégo différentes pour chaque

Message par ecleasya le Sam 22 Juil 2017 - 14:18

Hellow Smile Ma demande est toujours d'actualité ^^
avatar

ecleasya
Nouveau membre

Messages : 16
Inscrit(e) le : 14/03/2017

http://asterya.forumgratuit.org/
ecleasya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de bas de catégo différentes pour chaque

Message par Chacha le Ven 28 Juil 2017 - 10:05

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 »
avatar

Chacha
Modéractif
Modéractif

Masculin
Messages : 54623
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de bas de catégo différentes pour chaque

Message par ecleasya le Ven 28 Juil 2017 - 10:08

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

ecleasya
Nouveau membre

Messages : 16
Inscrit(e) le : 14/03/2017

http://asterya.forumgratuit.org/
ecleasya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de bas de catégo différentes pour chaque

Message par Chacha le Jeu 3 Aoû 2017 - 9:39

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 »
avatar

Chacha
Modéractif
Modéractif

Masculin
Messages : 54623
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de bas de catégo différentes pour chaque

Message par ecleasya le Jeu 3 Aoû 2017 - 17:10

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

ecleasya
Nouveau membre

Messages : 16
Inscrit(e) le : 14/03/2017

http://asterya.forumgratuit.org/
ecleasya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de bas de catégo différentes pour chaque

Message par Lixyr le Mar 8 Aoû 2017 - 13:00

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é.


ABSENTE JUSQU'A MARDI 12 SEPTEMBRE
avatar

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5945
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de bas de catégo différentes pour chaque

Message par ecleasya le Mar 8 Aoû 2017 - 23:39

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

ecleasya
Nouveau membre

Messages : 16
Inscrit(e) le : 14/03/2017

http://asterya.forumgratuit.org/
ecleasya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de bas de catégo différentes pour chaque

Message par Lixyr le Sam 12 Aoû 2017 - 18:26

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é.


ABSENTE JUSQU'A MARDI 12 SEPTEMBRE
avatar

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5945
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de bas de catégo différentes pour chaque

Message par ecleasya le Sam 12 Aoû 2017 - 19:18

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

ecleasya
Nouveau membre

Messages : 16
Inscrit(e) le : 14/03/2017

http://asterya.forumgratuit.org/
ecleasya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de bas de catégo différentes pour chaque

Message par Lixyr le Ven 18 Aoû 2017 - 9:24

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 »


ABSENTE JUSQU'A MARDI 12 SEPTEMBRE
avatar

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5945
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de bas de catégo différentes pour chaque

Message par ecleasya le Sam 19 Aoû 2017 - 19:43

Bonjour, ma demande est toujours d'actualité Smile
avatar

ecleasya
Nouveau membre

Messages : 16
Inscrit(e) le : 14/03/2017

http://asterya.forumgratuit.org/
ecleasya a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image de bas de catégo différentes pour chaque

Message par Milouze14 le Dim 20 Aoû 2017 - 7:02

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>');
});


Wink

a++
avatar

Milouze14
Membre actif

Masculin
Messages : 4773
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de bas de catégo différentes pour chaque

Message par ecleasya le Jeu 24 Aoû 2017 - 22:23

Salut @Milouze14 Smile 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 Mad Aurais-tu une solution ?
avatar

ecleasya
Nouveau membre

Messages : 16
Inscrit(e) le : 14/03/2017

http://asterya.forumgratuit.org/
ecleasya a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image de bas de catégo différentes pour chaque

Message par Milouze14 le Ven 25 Aoû 2017 - 4:21

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++
avatar

Milouze14
Membre actif

Masculin
Messages : 4773
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de bas de catégo différentes pour chaque

Message par ecleasya le Ven 25 Aoû 2017 - 21:35

Hey Smile 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 Surprised c'est hyper intéressant en fait comme information. Du coup ma demande elle est résolu, merci à toi Milouze14 pour ton aide ♥
avatar

ecleasya
Nouveau membre

Messages : 16
Inscrit(e) le : 14/03/2017

http://asterya.forumgratuit.org/
ecleasya 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