image entête des catégories

Page 2 sur 2 Précédent  1, 2

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

Résolu image entête des catégories

Message par thaom melcrudak le Dim 13 Avr 2014 - 21:23

Rappel du premier message :

Bonjour ! Je sais qu'il y a plusieurs tuto sur le sujet mais étant donné que mon template index_box est modifié, je ne trouve pas la réponse à ma question.

Phpbb2/google chrome/ fondatrice / css et templates modifiés www.ildir.purforum.com

Bon alors voila : J'aimerais mettre une image en remplacement du titre de mes catégories de LA MÊME LARGEUR que le forum, c’est-à-dire 850 px. Sauf que j'en suis incapable, je suis bloquée par la ligne de séparation des derniers messages postés. Y a t-il un moyen de garder cette cellule tout en retirant la séparation? Le forum s'élargit lorsque je mets mon image de la même largeur que lui. La zone d'entête des catégories serait remplacée par des images de la même largeur que le forum. Enfin c'est ce que je souhaite.

voici une capture d'écran de la zone
Spoiler:

Merci beaucoup de votre aide

Voici mon template

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall">{LAST_VISIT_DATE}<br />
 {CURRENT_TIME}<br />
 </span>
 <!-- END switch_user_logged_in -->
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>
                      
                      <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">


<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="145"><div style="width:145px;"></div></th>

</tr>
<!-- END tablehead -->
 <!-- BEGIN cathead -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.cathead.inc.INC_CLASS}" width="40"><img src="{SPACER}" height="0" width="40" /></td>
 <!-- END inc -->
 <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
 <h{catrow.cathead.LEVEL} class="hierarchy">
 <span class="cattitle">
 <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
 </span>
 </h{catrow.cathead.LEVEL}>
 </td>
 <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
 </tr>
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.forumrow.inc.INC_CLASS}" width="45"><img src="{SPACER}" height="0" width="45" alt="." /></td>
 <!-- END inc -->
 <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </td>
 <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
                    <span class="forumlink">
                      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
        
                   </span>
                 </h{catrow.forumrow.LEVEL}></td><td style="padding-left: 40px; text-align: right;" class="gensmall"></td></tr></tbody></table>
 <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
 <span class="gensmall">
        <span class="gensmall" id="subforums">
          <!-- BEGIN switch_moderators_links -->
          {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
          <!-- END switch_moderators_links -->
          <div style="font-weight : normal">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
        </span>
        <script type="text/javascript">
        jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');
        </script>
 </td>
 <td class="row3 over" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                  </td>
 </tr>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
 </tr>
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


Dernière édition par thaom melcrudak le Lun 14 Avr 2014 - 20:39, édité 1 fois

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image entête des catégories

Message par Milouze14 le Lun 14 Avr 2014 - 18:05

Re,

il faut trouver l'astuce pour détacher cette image du forum et tu n'aura plus ce soucis de décalage  Wink  .

Je teste actuellement.....  Wink  .

a++

Milouze14
+ Hyperactif +

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

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

Résolu Re: image entête des catégories

Message par Milouze14 le Lun 14 Avr 2014 - 18:37

Re,

Il va falloir trouver le forum qui englobe les sous forums puis dans la description de ce dernier ,
insérer un identifiant .

Exemple avec un forum se nommant Forum1

Code:

<div id="M14_Cat1">Forum1</div>

Penses a cliquer sur  :enreg: 

Pour la css , il faut donc supprimer la couleur de fond noire car tu l'as mentionné plus haut:
Code:
.M14_cat1 {background:transparent;}

Ensuite pour le Javascript il faut supprimer tout le contenu donné et insérer
ceci pour le premier forum qui englobe des sous-forums:

Code:

//LA PREMIERE CATEGORIE
$( document ).ready(function() {
$('#page-body').find('#M14_Cat1').closest('.forumline').before('<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th class="M14_cat1" width="100%" nowrap="nowrap" colspan="5"><img src="http://i55.servimg.com/u/f55/17/74/42/60/epheme10.jpg" align="absmiddle"/></th>
</tr>
</table>
');
});


a++

Milouze14
+ Hyperactif +

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

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

Résolu Re: image entête des catégories

Message par AenigmA le Lun 14 Avr 2014 - 18:49

Bonsoir,
Pour Philippe :
Il y a bien 7 (sept) catégories, mais pas dans l'ordre 1-4-2-7-8-9-5

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image entête des catégories

Message par Milouze14 le Lun 14 Avr 2014 - 18:53

Salut Laurent,

si tu regarde bien le premier forum qui apparait:

Archives du savoir

Quand tu passes le curseur , tu vois que c'est un forum et non une catégorie  Wink  ,
puis vient se greffer une ribambelle de sous forums  Very Happy  .

a++

Milouze14
+ Hyperactif +

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

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

Résolu Re: image entête des catégories

Message par AenigmA le Lun 14 Avr 2014 - 18:59

Je sais que dans les catégories il y a des forums, c'est seulement vu ta question pour l'ordre des catégories.

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image entête des catégories

Message par Milouze14 le Lun 14 Avr 2014 - 19:01

Re Laurent,
@AenigmA a écrit:
Je sais que dans les catégories il y a des forums, c'est seulement vu ta question pour l'ordre des catégories.

ok merci à toi , mais on tourne en rond avec ces forums et sous forums ,
il aurait fallut le renseigner dès le départ  Wink  .

a++

Milouze14
+ Hyperactif +

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

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

Résolu Re: image entête des catégories

Message par Neptunia le Lun 14 Avr 2014 - 19:07

@ Philippe

Les descriptions de catégorie sont sous cette forme
<span class=timg>Éphéméride</span><img style="display:none" src=http://i55.servimg.com/u/f55/18/63/92/92/tryu112.png />

N'y aurait il pas moyen de déclencher ton script sur le contenu du span plutôt que sur la présence d'une URL ??

Neptunia
+ Hyperactif +

Féminin
Messages : 10399
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image entête des catégories

Message par Milouze14 le Lun 14 Avr 2014 - 19:21

Salut AoF-Neptune,

Les descriptions de catégorie sont sous cette forme

Avec ceci
Code:
<span class="timg">[color=#ff0000]Éphéméride[/color]</span>


N'y aurait il pas moyen de déclencher ton script sur le contenu du span plutôt que sur la présence d'une URL ??

et ce javascript

Code:
     
 //LA PREMIERE CATEGORIE
        $( document ).ready(function() {
        $('#page-body').find('.timg').closest('.forumline').before('<table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
        <th class="M14_cat1" width="100%" nowrap="nowrap" colspan="5"><img src="http://i55.servimg.com/u/f55/17/74/42/60/epheme10.jpg" align="absmiddle"/></th>
        </tr>
        </table>
        ');
        });


Çà doit fonctionner  Wink  .

a++

Milouze14
+ Hyperactif +

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

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

Résolu Re: image entête des catégories

Message par thaom melcrudak le Lun 14 Avr 2014 - 19:27

Je crois que je ne comprends plus rien Razz  Embarassed 


Dernière édition par thaom melcrudak le Lun 14 Avr 2014 - 19:34, édité 1 fois

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image entête des catégories

Message par Milouze14 le Lun 14 Avr 2014 - 19:31

Re,

@thaom melcrudak a écrit:
C'est simplement pour dire que la largeur de mon forum n'est pas de 850 donc inévitablement les images ne fonctionneront pas...nous ignorons comment cela a pu nous échapper, je vais tenter le coup avec des images de la bonne taille...aie aie aie...
Merci pour ce travail de votre part, je vous tiens au courant.

Ton forum a une largeur en px ?
Il faut impérativement passer en pourcentage pour éviter toutes déformations éventuelles  Wink 

a++




Milouze14
+ Hyperactif +

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

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

Résolu Re: image entête des catégories

Message par Neptunia le Lun 14 Avr 2014 - 19:33

Je pense que non. Toutes ses catégories ont pour class timg.

Je me demandais surtout s'il n'y avait pas moyen d'utiliser les descriptions que thaom melcrudak a déjà mise en place.

Là si je comprends bien, à chacune de ses descriptions de catégories il faudrait rajouter un identifiant M14_catX

Neptunia
+ Hyperactif +

Féminin
Messages : 10399
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image entête des catégories

Message par Milouze14 le Lun 14 Avr 2014 - 19:43

Re,
AoF-Neptune a écrit:
Je pense que non. Toutes ses catégories ont pour class timg.

Je me demandais surtout s'il n'y avait pas moyen d'utiliser les descriptions que thaom melcrudak a déjà mise en place.

Là si je comprends bien, à chacune de ses descriptions de catégories il faudrait rajouter un identifiant M14_catX

Je parlais juste pour l'astuce, ensuite oui il faut trouver le forum qui englobe
les sous forums puis attribuer une class

On repart à zéro  Very Happy .

Le forum qui englobe d'autre forums:

Code:

<span class="timg">Éphéméride</span>
puis :
Code:

<span class="timg1">Les royaumes humains</span>


Ainsi de suite:

puis le javascript pour Éphéméride:
Code:

$( document ).ready(function() {
$('#page-body').find('.timg').closest('.forumline').before('<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="100%" nowrap="nowrap" colspan="5"style="background:transparent;"><img src="LE LIEN DE L IMAGE" align="absmiddle"/></th>
</tr>
</table>
');
});


puis le javascript pour Les royaumes humains:
Code:

$( document ).ready(function() {
$('#page-body').find('.timg1').closest('.forumline').before('<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="100%" nowrap="nowrap" colspan="5"style="background:transparent;">><img src="LE LIEN DE L IMAGE" align="absmiddle"/></th>
</tr>
</table>
');
});


Le background a été défini en transparent dans la javascript afin de ne voir que l'image  Wink .

a++




Milouze14
+ Hyperactif +

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

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

Résolu Re: image entête des catégories

Message par Milouze14 le Lun 14 Avr 2014 - 19:46

Re,

@thaom melcrudak a écrit:Je crois que je ne comprends plus rien Razz Embarassed 


Courage Thaom  Very Happy .

a++

Milouze14
+ Hyperactif +

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

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

Résolu Re: image entête des catégories

Message par thaom melcrudak le Lun 14 Avr 2014 - 19:59

Je me demande...Cela fonctionne mais est-ce possible de mettre cette image dans l'emplacement du titre? Puisque là c'est au-dessus. Si c'est possible ! Sinon merci beaucoup ^^

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: image entête des catégories

Message par Milouze14 le Lun 14 Avr 2014 - 20:01

Re,

si tu veux déposer l'image dans le titre ,
tu auras une déformation chère amie  Wink  .

a++

Milouze14
+ Hyperactif +

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

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

Résolu Re: image entête des catégories

Message par thaom melcrudak le Lun 14 Avr 2014 - 20:39

Merci à tous ! Je vais pouvoir continuer de mon côté. Smile Sujet résolu.

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 2 Précédent  1, 2

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