Problème avec code pour mettre un cadre dans Derniers Messages

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

En cours Problème avec code pour mettre un cadre dans Derniers Messages

Message par lilas le Jeu 8 Sep 2016 - 23:03

Bonjour forum

Je désire modifier le design de la colonne Derniers Messages dans le même style que pour la description des forums :



J'ai présentement ceci :



Je désire ceci tout en conservant le titre du sujet, la date, le pseudo et l'icône :



- Un fond de couleur avec bords arrondis et un léger padding
- Pouvoir placer une petite image en haut du cadre
- Avec la possibilité de remplacer la couleur de fond par une image selon mes besoins.

J'espère que je suis claire... Siffleur

J'utilise ce tuto : http://forum.forumactif.com/t346456-phpbb2-mettre-un-cadre-dans-les-derniers-messages
à partir de l'étape 3 qui donne ce code sans spécifier où le placer dans le template index_box :
EDIT
Le code que je ne savais pas où placer et que j'ai oublié de vous mettre... :O:
Code:
 <div class="cadre1">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.
<br /><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>

Mon fichier template index_box :
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="4" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></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">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" 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">
        <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}>
        <div class="stats_cate infos-stats"><span class="nb">{catrow.forumrow.TOPICS}</span> sujet<span>s</span> contenant <span class="nb">{catrow.forumrow.POSTS}</span> message<span>s</span></div>
        <div class="description">{catrow.forumrow.FORUM_DESC}</div>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
      </td>
      <td style="min-width: 150px;" class="row3 over" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
      </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 -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Merci d'avance

Lunette












Dernière édition par lilas le Sam 10 Sep 2016 - 23:27, édité 1 fois

lilas
*****

Féminin
Messages : 610
Inscrit(e) le : 07/08/2004

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

En cours Re: Problème avec code pour mettre un cadre dans Derniers Messages

Message par lilas le Sam 10 Sep 2016 - 6:07

Mr. Green Petit up du samedi

Gloups

lilas
*****

Féminin
Messages : 610
Inscrit(e) le : 07/08/2004

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

En cours Re: Problème avec code pour mettre un cadre dans Derniers Messages

Message par Milouze14 le Sam 10 Sep 2016 - 6:59

Hello lilas,
hum il y a un tit soucis ici:
Code:

<td style="min-width: 150px;" class="row3 over" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
      </td>

Tu as une fermeture de trop:
Code:

<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>

Voici la partie corrigée:

Code:

 <td style="min-width: 150px;padding:0px;" class="row3 over" align="center" valign="middle" height="50">
            <div class="cadre1">
            <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
       
                <!-- BEGIN avatar -->
                <div style="width: 200px;"></div>
                <span class="lastpost-avatar"style="float:none !important;">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->
            </div>
          </td>

Un peu plus haut et affin de régler un soucis d'affichage lors de la visualisation des modos du fofo,
j'ai ajouté ici à la class .gensmall un style
Code:
 
<span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>

Code:

<span class="gensmall"style="position: absolute;margin-top: -16px;">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>



Ce style te permettra de ne pas voir de ligne fantôme dans la colonne derniers messages.

Et pour finir ici:
Code:

<span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>

Ceci correspond à l'affichage de l'avatar , le soucis est que tu as un float left dans la c.s.s de base ,
ce qui a tendance a faire foirer la structure de cette partie.
J'ai donc modifié ainsi la valeur float

Code:

<span class="lastpost-avatar"style="float:none !important;">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>

Vu que tu as une cellule mentionnant un centrage l'avatar sera lui aussi placé au centre:

Pour remédier à ce petit désagrément, tu peux la placer à gauche comme ceci:
Code:

<span class="lastpost-avatar"style="float:none !important;margin-left:-120px;">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>

Ou à droite comme ceci:
Code:

<span class="lastpost-avatar"style="float:none !important;margin-left:120px;">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>

Code:

<td style="min-width: 150px;padding:0px;" class="row3 over" align="center" valign="middle" height="50">



Ton template corrigé dans sa totalité avec l'avatar à gauche :
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="4" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
         
      </tr>
      <!-- END tablehead -->
      <!-- BEGIN cathead -->
      <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></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">&nbsp;</td>
      </tr>
      <!-- END cathead -->
      <!-- BEGIN forumrow -->
      <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" 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">
            <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}>
            <div class="stats_cate infos-stats"><span class="nb">{catrow.forumrow.TOPICS}</span> sujet<span>s</span> contenant <span class="nb">{catrow.forumrow.POSTS}</span> message<span>s</span></div>
            <div class="description">{catrow.forumrow.FORUM_DESC}</div>
            <span class="gensmall"style="position: absolute;margin-top: -16px;">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
          </td>
          <td style="min-width: 150px;padding:0px;" class="row3 over" align="center" valign="middle" height="50">
            <div class="cadre1">
            <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
       
                <!-- BEGIN avatar -->
                <div style="width: 200px;"></div>
                <span class="lastpost-avatar"style="float:none !important;margin-left:-120px;">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->
            </div>
          </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 -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


a++



Milouze14
+ Hyperactif +

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

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

En cours Re: Problème avec code pour mettre un cadre dans Derniers Messages

Message par lilas le Dim 11 Sep 2016 - 0:25

Wow Milouze, c'est la grande forme chez-vous !!!!
Merci d'avoir mis les explications, j'ai tout pris en note...

Pour les 2 </td> j'aurais dû remarqué qu'il n'y avait qu'une ouverture... Rolling Eyes

1) Cependant, petit soucis : L2s titres des sous-forums grimpent dans la description du forum et s'étalent
jusqu'à l'extérieur des bordures du forum.



2) Aussi, j'aimerais que le cadre soit à 4 pixels des bordures du haut et du bas de la cellule.
J'ai joué dans le CSS selon mes connaissances (limitées) :
Code:
/** Cadre autour colonne Derniers Messages **/

.cadre1 {
background-color:#eae5eb;
-moz-border-radius: 10px;  /** Mozilla **/
-webkit-border-radius: 10px;  /** Chrome & Safari **/
border-radius:10px;  /** Coins Arrondis **/
border: 1px solid #a69fb3;
font-size: 16px;
padding:4px;
 margin:4px;
/**  font-family: Arial; **/
}

Belle fin de journée forum

flower

lilas
*****

Féminin
Messages : 610
Inscrit(e) le : 07/08/2004

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

En cours Re: Problème avec code pour mettre un cadre dans Derniers Messages

Message par Milouze14 le Dim 11 Sep 2016 - 10:12

Hello lilas,

Pour les sous forums, je me suis donc amusé à les masquer et au survol de la description
ces derniers apparaitront.
En cas ou tu n'aurais de sous forums , un texte affichera "Il n'y a pas de sous forum".

Pour cela on va remplacer tout ton template par ce contenu:
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="4" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
             
          </tr>
          <!-- END tablehead -->
          <!-- BEGIN cathead -->
          <tr>
              <!-- BEGIN inc -->
              <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></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">&nbsp;</td>
          </tr>
          <!-- END cathead -->
          <!-- BEGIN forumrow -->
          <tr>
              <!-- BEGIN inc -->
              <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" 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">
                <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}>
<div class="stats_cate infos-stats"><span class="nb">{catrow.forumrow.TOPICS}</span> sujet<span>s</span> contenant <span class="nb">{catrow.forumrow.POSTS}</span> message<span>s</span></div>
           
<div class="description gensmall">{catrow.forumrow.FORUM_DESC}</div>
 <div id="M14_sousfofo"class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>   
             
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
 
</span>
   
              </td>
              <td style="min-width: 150px;padding:0px;" class="row3 over" align="center" valign="middle" height="50">
                <div class="cadre1">
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
           
                    <!-- BEGIN avatar -->
                    <div style="width: 200px;"></div>
                    <span class="lastpost-avatar"style="float:none !important;margin-left:-120px;">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                    <!-- END avatar -->
                </div>
              </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 -->
        </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


Penses a enregistrer les modifications en cliquant respectivement sur et



Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:
Code:

/*on masque les sous fofos*/
#M14_sousfofo{display:none;}




Puis tu cette class :
Code:

div.description
{
ta css
}

Ne touches à rien sur le contenu du style de cette class, on va juste changer :
Code:
div.description
Par:
Code:
div.description ,#M14_sousfofo

Tu peux aussi ajouter ceci afin de que la police soit adéquate dans les deux blocs:
Code:
  font-size:12px;

Puis on finit par le petit script:
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Coches sur l'index.

Déposes ceci:
Code:

$(function(){

$('.description.gensmall').closest('tr').hover(function(){
$(this).find('.hierarchy').next().next().toggle();
$(this).find('.hierarchy').next().next().next().toggle();
});
$('#M14_sousfofo.gensmall:empty').html('<center>Il n\'y a pas de sous forum</center>');
});

Penses à cliquer sur le bouton

Tu pourras préciser quel(s) bloc(s) désires tu avoir à 4px du haut et du bas stp et de fournir
la css complète de ton fofo, cela m'évitera d'aller à la pêche sur ton fofo Wink .

a++






Milouze14
+ Hyperactif +

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

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

En cours Re: Problème avec code pour mettre un cadre dans Derniers Messages

Message par lilas le Lun 12 Sep 2016 - 4:31

cheers Tout est rentré dans l'ordre pour les sous-forums, masqués, ils s'affichent bien au survol de la souris  thumleft
Milouze a écrit:Tu pourras préciser quel(s) bloc(s) désires tu avoir à 4px du haut et du bas stp

Voici l'effet désiré pour la cellule "Derniers Messages" :



Je désire que le cadre couvre toute la surface de la cellule (pas seulement autour des titres, dates, pseudos et icônes)
avec un pading de 4px tout le tour, donc aussi un pading pour le top et un autre pour le bottom...

Merci pour votre temps Milouze et belle nouvelle semaine forum

Lunette

lilas
*****

Féminin
Messages : 610
Inscrit(e) le : 07/08/2004

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

En cours Re: Problème avec code pour mettre un cadre dans Derniers Messages

Message par Milouze14 le Lun 12 Sep 2016 - 15:39

Hello lilas,

dans cette class:
Code:
.cadre1 {
background-color:#eae5eb;
-moz-border-radius: 10px;  /** Mozilla **/
-webkit-border-radius: 10px;  /** Chrome & Safari **/
border-radius:10px;  /** Coins Arrondis **/
border: 1px solid #a69fb3;
font-size: 16px;
padding:4px;
 margin:4px;
/**  font-family: Arial; **/
}


Remplaces le :
Code:
 margin:4px;

par :
Code:

 margin:0px;

a++

Milouze14
+ Hyperactif +

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

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

En cours Re: Problème avec code pour mettre un cadre dans Derniers Messages

Message par lilas le Lun 12 Sep 2016 - 20:38

cheers Milouze,
Je crois que mes tites flèches vous ont induit en erreur confused
Je veux que le cadre remplisse la cellule avec un padding de 4 pixels en haut, en bas et sur les côtés...
afin de ne pas laisser un vide comme l'exemple ci-dessous...



Merci, belle fin de journée forum

Gloups


lilas
*****

Féminin
Messages : 610
Inscrit(e) le : 07/08/2004

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

En cours Re: Problème avec code pour mettre un cadre dans Derniers Messages

Message par Milouze14 le Mar 13 Sep 2016 - 16:36

Hello lilas,
le soucis vient de la description qui a min-height alors la porte est ouverte pour la déformation.

On peut avec un petit bouton qui au clic affichera les sous fofos,
pour cela on va modifier le template et une partie de la c.s.s.

Le template modifié:

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="4" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
             
          </tr>
          <!-- END tablehead -->
          <!-- BEGIN cathead -->
          <tr>
              <!-- BEGIN inc -->
              <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></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">&nbsp;</td>
          </tr>
          <!-- END cathead -->
          <!-- BEGIN forumrow -->
          <tr>
              <!-- BEGIN inc -->
              <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" 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">
                <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}>
<div class="stats_cate infos-stats">
<span class="nb">{catrow.forumrow.TOPICS}</span> sujet<span>s</span> contenant
  <span class="nb">{catrow.forumrow.POSTS}</span> message<span>s</span>
                <div class="M14_btnsousFofo"title="Afficher masquer les sous forums">&hearts;</div>
                </div>
           
<div class="description gensmall">{catrow.forumrow.FORUM_DESC}</div>

 <div id="M14_sousfofo"class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>   
             
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
 
</span>
   
              </td>
              <td style="min-width: 150px;padding:0px;" class="row3 over" align="center" valign="middle" height="50">
                <div class="cadre1">
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
           
                    <!-- BEGIN avatar -->
                    <div style="width: 200px;"></div>
                    <span class="lastpost-avatar"style="float:none !important;margin-left:-120px;">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                    <!-- END avatar -->
                </div>
              </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 -->
        </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


Le script modifié:

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

$(function(){
$('.M14_btnsousFofo').click(function(){
$(this).closest('td').find('.description,#M14_sousfofo').toggle();
});
$('#M14_sousfofo.gensmall:empty').html('<center>Il n\'y a pas de sous forum</center>');

});






Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

supprimes cette class :

Code:
div.description

supprimes cet id:

Code:
#M14_sousfofo

supprimes cette class:

Code:
.stats_cate

et remplaces par:

Code:

/*On positionne le bouton*/
.M14_btnsousFofo{cursor:pointer;float:right;width: 11px;height: 11px;}

div.description
{

  -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #eae5eb;
    border: 1px solid #a69fb3;
    border-radius: 10px;
    color: #000;
    font-size: 16px;
    margin: 4px;
    height: 30px;
    overflow-y:auto;
    padding: 4px;
    text-align: center;
    text-indent: 6px;
    width: 96%;
  font-size:12px;
}
#M14_sousfofo
{
   
  display:none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #eae5eb;
    border: 1px solid #a69fb3;
    border-radius: 10px;
    color: #000;
    font-size: 16px;
    margin: 4px;
    min-height: 30px;
    padding: 4px;
    text-align: center;
    text-indent: 6px;
    width: 96%;
  font-size:12px;
}
.stats_cate {
    font-size: 11px;
    padding: 5px;
    text-align: right;
    position: absolute;
    line-height: 16px;
    margin-top: -20px;
    margin-right: 30px;
    margin-left: 300px;
}



Le bouton dans le template est représenté par ce code html:
Code:
   
<div class="M14_btnsousFofo"title="Afficher masquer les sous forums">&hearts;</div>


Et voilou, tu ne devrais plus avoir de déformation et le contenu de la cellule sera bien plus stable Wink

a++

Milouze14
+ Hyperactif +

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

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

En cours Re: Problème avec code pour mettre un cadre dans Derniers Messages

Message par lilas le Mer 14 Sep 2016 - 5:12

houlala, encore du boulot Mr. Green
Je viens de rentrer (23:10 ici ) et un trop plein de vino... geek
Je remets à demain l'exercice... Rolling Eyes

Merci

Lunette

lilas
*****

Féminin
Messages : 610
Inscrit(e) le : 07/08/2004

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

En cours Re: Problème avec code pour mettre un cadre dans Derniers Messages

Message par lilas le Ven 16 Sep 2016 - 0:57

cheers Milouze

C'est fait mais quelques petites choses à corriger...

J'ai supprimé le " min-height:30px; " mais ne change rien...pour la hauteur du cadre des descriptions et des derniers messages.
On dirait qu'il y a un autre appel qui contredit la fonction ailleurs. Je dis peut-être une bêtise  geek
J'ai augmenté jusqu'à 100 px la hauteur du cadre des descriptions mais les cadres des derniers messages ne suivaient pas...
Je ne veux pas de scroll dans la description des forums...
Description des forums qui ont perdu la couleur de fond.

J'aime bien le bouton pour afficher/masquer les sous-forums. Je garde.

Les stats (3 sujets contenant 13 messages) sont centrés et "écrasés" (avant, à droite sous la ligne pointillée sous le titre du forum.
Tant qu'à les déplacer, je les voudrais sous le pseudo dans le cadre des Derniers Messages, svp.

Une petite virée sur mon fofo vous donnera une meilleure idée du visuel.

Merci Milouze, bonne nuit forum,

Gloups

lilas
*****

Féminin
Messages : 610
Inscrit(e) le : 07/08/2004

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

En cours Re: Problème avec code pour mettre un cadre dans Derniers Messages

Message par lilas le Mer 21 Sep 2016 - 18:00

I love you J'ai encore des petites corrections à faire pour améliorer le visuel mais je manque de temps ces jours-ci.
Svp, ne fermer pas mon sujet.

Lunette Gloups

EDIT
Mon beau Milouze, en suivant vos directives et en remplaçant mon template par le vôtre,
le forum a perdu Centrer les messages - La citation rapide -
Les pseudos à 2 ou 3 mots s'affichent à nouveau sur 2 ou 3 lignes
Contour oblique des avatars s'affichent en noir pour les membres réguliers ce qui n'était pas le cas avant...
Panneau latéral gauche disparu
Pied de page personnalisé disparu
What a Face Je n'ai pas encore tout tester... Mr. Green

Bon pas trop grave, j'ai gardé les derniers CSS et templates d'avant cette modification, avec un peu de temps et de patience, je devrais pouvoir en corriger quelques uns...

Pour les prochains jour, je fais la nounou auprès des enfants d'une amie, donc pas le moment pour jouer dans les fichiers...

Quand ce sera fait, je reviens donner le résultat.

Merci et bonne nuit forum

I don't want that



lilas
*****

Féminin
Messages : 610
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas 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