*RESOLU* [PHPBB2] Zoom

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

*RESOLU* [PHPBB2] Zoom

Sujet résolu le Sam 27 Mai 2017 - 20:33
Ptite_Perle
avatar
Nouveau membre

MessagePtite_Perle

  • 16px
  • 24px
  • Zoom
Coucou,

J'ai essayée votre astuce de zoom; qui ce trouve ici: https://www.milouze14.com/t28508-phpbb2-afficher-un-zoom-avec-transitions-sur-les-derniers-sujets#583874

J'ai aucun effet de zoom :(

Amicalement


Dernière édition par Ptite_Perle le Lun 29 Mai 2017 - 14:07, édité 1 fois

Re: *RESOLU* [PHPBB2] Zoom

Sujet résolu le Dim 28 Mai 2017 - 6:07
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Ptite_Perle,

Prends le temps de lire le règlement de l'entraide s'il te plait, je ne vois pas le script sur ton forum  clin oeil .
Pour le règlement, il spécifie que si un script ne fonctionne pas, il faut donner le template concerné etc etc.


-Staff du Forum Milouze14-




Pour toute information,merci de contacter un Membre du Staff

Il faudra donner les renseignements demandés ci-dessous entre les balises code:

La feuille de style:

Le template index_box:
Affichage/Templates/Général/index_box

Le template topics_list_box:
Affichage/Templates/Général/topics_list_box



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* [PHPBB2] Zoom

Sujet résolu le Dim 28 Mai 2017 - 10:25
Ptite_Perle
avatar
Nouveau membre

MessagePtite_Perle

  • 16px
  • 24px
  • Zoom
Coucou

Milles excuses.

Donc voici le lien du tuto pour l'effet zoom: https://www.milouze14.com/t28508-phpbb2-afficher-un-zoom-avec-transitions-sur-les-derniers-sujets#583874

Je l'es essayé sur mon forum de test: http://forumtest.forumh.biz/

J'ai mit le javascript dans le module est créer un javascript: je l'es nommée: zoomImage
J'ai validée sur toutes les pages.
Code:

$(function(){
    $('.secondarytitle , th:contains("Réponses")').closest('.forumline').attr('id','M14_hover');
    $('#M14_hover.forumline td.row3.over, #M14_hover.forumline td.row3Right').attr('title','Cliquez pour agrandir').click(function(e){
    e.stopPropagation();
    $(this).attr('id','M14_Zoom').attr('title','Cliquez pour fermer');
    $('#M14_Zoom').click(function(){
    $(this).removeAttr('id','M14_Zoom');
    });
    });});
Dans mon css j'ai ajouté votre code:

Code:
*--------------------- Zoom messages ------------------- */

    /* Les cellules zoomees*/
    td#M14_Zoom
    {
    padding:5px;
    border:5px solid white;
    z-index:999;
    box-shadow: 3px 3px 10px 2px black;
    border-Radius:6px;
    cursor:pointer;
    -webkit-transform: rotate(360deg) scale(2);
    -moz-transform: rotate(360deg) scale(2);
    -o-transform: rotate(360deg) scale(2);
    -ms-transform: rotate(360deg) scale(2);
    transform: rotate(360deg) scale(2);
    }
    /*L apparence des couleurs et tailles de police*/
    td#M14_Zoom a.gensmall ,td#M14_Zoom .gensmall{font-size:15px;}
    /*On depose les transitions sur tous les styles*/
    td.row3.over,  td.row3Right
    {
    cursor:pointer;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }

*--------------------- Fin Zoom messages ------------------- */
     [/spoiler]

Le BBcode est autorisé sur mon forum, et le javacscript est bien activé.

Ma feuille de style au complet:
[spoiler="Mon CSS"]#page-body
{
  width: 920px;
  margin: auto;
}
.forumline
{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #ffefaf;
  border: 1px dotted #3c7d2a;
  box-shadow: 0px 0px 5px #595959;
  -moz-box-shadow: 0px 0px 5px #595959;
  -o-box-shadow: 0px 0px 5px #595959;
  -htm-box-shadow: 0px 0px 5px #595959;
  -webkit-box-shadow: 0px 0px 5px #595959;
}
table
{
  width: 100%;
  margin: auto;
}
a.nav img
{
  width: 300px;
}

/* Titre qui bouge catégorie */
.forumlink
{
display: block;
  color: red; /* Couleur de départ */
text-align: left;
transition: all 1s; /* Durée de la transition, mettez les mêmes valeurs partout, ça sera plus facile */
-moz-transition: all 1s;
-webkit-transition: all 1s;
}
a.forumlink:hover
{
  color: #c18502; /* Couleur d'arrivée */
  margin-left: 15px; /* Décalement ( nombre de px à décaler pour l'arrivée)*/
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
}


* ********************* CODE copier coller ********************* */


.selectCode { float:right; text-transform: uppercase; cursor:pointer; }

/* ********************* FIN CODE copier coller ********************* */


.postdetails.poster-profile img {
max-width:140px; /* largeur maximale des avatars */
min-width:1px; /* largeur minimale des avatars */
max-height:140px; /hauteur}

.signature_div img {

max-height:250px;
max-width:600px;
}


 .page-title
    {
    text-align: center;
    }


body
{
background-image: url(http://nsa37.casimages.com/img/2017/04/02/170402061739521423.jpg); top left repeat-y #d6c5ac;
}


#i_logo {
    margin-top: -10px;
    }


.bodylinewidth
{
width: 950px;
  margin: -10px auto;
  padding: 5px;
  background: #d0e4e9;
  border: 1px dotted #4fdc29;
  box-shadow: 0px 0px 10px #3b433a;
  -o-box-shadow: 0px 0px 10px #3b433a;
  -moz-box-shadow: 0px 0px 10px #3b433a;
  -htm-box-shadow: 0px 0px 10px #3b433a;
  -webkit-box-shadow: 0px 0px 10px #3b433a;
}


    /* Début*/

      .dreampa {
      width: 100%;
      border-radius: 0px;
      background: #;
      margin: 5px;
      box-shadow: 0px 0px 2px 0px #777; /* Ombre de la boîte de la PA */
    }
    .dreampa a {
      color: #000; /* Couleur des liens */
      transition: all ease 1s;
      -moz-transition: all ease 1s;
      -webkit-transition: all ease 1s;
      -ms-transition: all ease 1s;
      -o-transition: all ease 1s;
    }
    .dreampa a:hover {
      font-style: italic;
      color: #000000; /* Couleur des liens de la PA au survol */
    }

    /* TITRES SPAN ET P */
    .patitre {
      font-family: 'Oswald', sans-sérif;
      font-size: 16px;
      font-variant: small-caps;
      color: #000; /* Couleur des sous-titres de la PA */
    }
    .patitre:hover {
      letter-spacing: 2px;
      transition: all ease 1s;
      -moz-transition: all ease 1s;
      -webkit-transition: all ease 1s;
      -ms-transition: all ease 1s;
      -o-transition: all ease 1s;
    }
     
    /* DIV LIENS IMPORTANTS EN-TÊTE */
    .head {
      border-bottom: 3px dotted #b0c4b8; /* Bordure pointillée sous les liens en en-tête */
      text-align: center;
      font-family: 'Oswald', sans-sérif;
      font-size: 20px;
      font-variant: small-caps;
    }
  
    /* TABLEAU PRINCIPAL DE LA PA */
    .dreampa table {
      border-spacing: 10px;
      margin: -5px 5px;
    }
    .dreampa td {
      box-shadow: 0px 0px 5px 0px #21271e; /* Ombre qui borde les différentes cellules de la PA */
      border-radius: 5px;
      padding: 5px;
      vertical-align: top;
    }
    /* CELL WHERE TO FIND ME */
    .contact {
      width: 300px;
      height: 30px;
      text-align: center;
      font-size: 14px;
      font-family: 'Oswald', sans-serif;
      font-variant: small-caps;
    }
    .contact span {
      display: none;
    }
    .contact a:hover span {
      display: none; /* On masque l'infobulle. */
    }
    .contact a:hover {
      background: none; /* Correction d'un bug d'Internet Explorer. */
      z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */ 
    }
    .contact a:hover span {
      display: inline; /* On affiche l'infobulle. */
     
      position: absolute;
     
      color: #000000; /* Couleur du texte de l'infobulle */
     
      border-radius: 5px;
      padding: 5px;
      border: 1px dotted #21271e; /* Bordure de l'infobulle */
     
      background: #aed8e7; /* On change la couleur du fond. */
      text-align: center; /* On aligne le texte dans l'infobulle. */
    }
    /* CELL PA INFO */
    .painfo {
      padding: 0px 0px;
      vertical-align: middle !important;
      background: url();
      width: 200px;
      overflow: hidden;
      box-shadow: none !important;

      background: #ffefaf url('') no-repeat center center; /* Image de la fille au milieu à modifier soi-même ou à enlever */
    }


    /* BLOC DES INFOS */
    div#pamove {
      opacity: 0; 
      width: 250px;
      height: 380px;
      transition: all ease 1s;
      background: #;
      border-radius: 5px;
      padding: 1px;
      text-align: justify;
    }
    .painfo:hover div#pamove {
      opacity: 1; 
    }
    /* CELL PA TUTORIELS DIV ET CELL PA DERNIERS CODES/VAVAS/ICONS/GIFS DIV */
    .patuto div, .palast div {
      margin-left: 10px;
      text-align: justify;
    }
    /* LIENS DIV PA TUTOS ET DERNIERES CREAS */
    .patuto a, .palast a {
      color: #000000 !important; /* Couleur des liens de la PA (ne pas enlever le !important) */
    }
    .patuto a:hover, .palast a:hover {
      color: #045300 !important; /* Couleur des liens de la PA au survol (ne pas enlever le !important) */
    }
    /* CELL PA LAST + PA TUTO */
    .palast, .patuto {
      width: 200px;
    }
 

#i_logo
{
 width: 940px;
  }




           .categories {
      margin: auto;
      width: 880px;
      background:transparent;
      }
      table.categories td a {
      color:#767675;
      transition:color linear 0.2s;
      -webkit-transition:color linear 0.2s;
      }
      table.categories td a:hover {
      color:#4a8e00;
      transition:color linear 0.2s;
      -webkit-transition:color linear 0.2s;
      }
      table.categories td.newpost {
      border-radius:20px 20px 20px 20px;
      padding-left:10px;
      background-image:url('http://nsa38.casimages.com/img/2017/04/05/170405063034147967.jpg');
      border: 3px dotted #e19a00;
      height:105px;
      width:200px;
      }
      table.categories td span.lastpost {
      height:56px;
      width:127px;
      overflow:visible;
  font-size: 12px;
      }
      table.categories td.descriptions {
      border-radius:20px 20px 20px 20px;
      padding-right:40px;
      width:450px;
      background-image:url('http://nsa38.casimages.com/img/2017/04/05/170405063034147967.jpg');
      border: 3px dotted #e19a00;
      height:105px;
      }
      table.categories div.description {
      padding:5px;
      margin:5px 0px 5px 0px;
      overflow:auto;
      height:40px;
      text-align:justify;
      }
      table.categories div.forumlink {
      text-align:center;
      }
      .categories div.forumlink a{
      font-size:18px;
      color:#767675;
      font-family:'Cookie';
      }
      table.categories div.details {
      text-align:center;
      }
      table.categories div.lastpost-avatar {
      height:105px;
      width:75px;
      background-image:url('http://nsa38.casimages.com/img/2017/04/05/170405063034147967.jpg');
      border: 3px solid #e19a00;
      }
      table.categories div.lastpost-avatar img {
      height:105px;
      width:75px;
      padding: auto;
      margin: auto;
      }

    #av_quickreply img {
        left: 15px;
        position: relative;
        top: 35px;
    }

    .BOITE1 {
    width:250px; /*--Largeur à éditer en fonction de la taille de ton forum (en px ou %)--*/
    height:800px;/*--Hauteur à changer en fonction de ton texte--*/
    box-shadow:0px 2px 5px black; /*--Ombre de ta boite--*/
    -moz-box-shadow:0px 2px 5px black;
    -webkit-box-shadow:0px 2px 5px black;
    border-radius:10px; /*--Arrondi des QUATRES angles--*/
    -moz-border-radius:2px;
    -webkit-border-radius:10px;
    /*-----------------------------------------------Note :----------------------------------------
      Pour préciser un angle par rapport aux autres il faut mettre "10px 10px 10px 10px"
      et éditer celui ou ceux voulus.
    ---------------------------------------------------------------------------------------------*/
    
    position:fixed; /*--Position de la boite : Fixe--*/
    TOP : 50px; /*--Position à partir du haut--*/
    right: 30px;
    Background-color:#d1e4ea; /*--Couleur de fond : supprimer pour mettre en transparent--*/
    padding:5px;/*--Marge intérieure générale--*/
    padding-top:4px;/*--Marge intérieure du haut, éditée "à la place" de la bordure générale--*/
    text-align:justify; /*--Alignement du texte : "right" -> droite ; "left" -> Gauche ; "justify" -> justifié . --*/
    Color: BLACK ; /*--Mettre un nom de couleur (ex:BLACK) ou un code couleur (ex:#000000), pour changer le couleur du texte--*/
    }

    .CADRE1{
    height:26px;
    margin-bottom:5px; /*--marge extérieure du cadre - en bas--*/
    box-shadow:0px 2px 5px black;
    -moz-box-shadow:0px 2px 5px black;
    -webkit-box-shadow:0px 2px 5px black;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    text-align:center;
    padding:5px;
    background-color: #fce693 ;
    color: #000000 ; /*--Couleur du texte */
    font-family: GEORGIA ; /*--Typo du titre souhaité--*/
    font-size: 14px ;  /*--Taille de la typo--*/
   
   
    }
   
   /* ---------------------------
toolbar
---------------------------------*/
     #fa_toolbar {
        background-color: transparent !important;  /* Rend transparent le fond principal */
    }
    #fa_right {
        background-color: #86e5e7;  /* Couleur de fond */
        border-radius: 0 0 40px 40px;  /* Arrondis les bords */
        padding-left: 10px;  /* Règle la marge intérieure gauche */
        padding-right: 10px;  /* Règle la marge intérieure droite */
        position: relative;  /* Permet de décaler la toolbar */
        right: 20px;  /* Décale la toolbar de la droite */
    }
    
    #fa_left {
        background-color: #86e5e7;  /* Couleur de fond */
        border-radius: 0 0 0 40px;  /* Arrondis les bords */
        position: relative;  /* Permet de décaler la toolbar */
        left: 20px;  /* Décale la toolbar de la gauche */
        margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */
        padding-left: 10px;  /* Règle la marge intérieure gauche */
        padding-right: 10px;  /* Règle la marge intérieure droite */
    }
    
    #fa_search {
        background-color: #86e5e7;  /* Couleur de fond */
        margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */
        padding-left: 10px;  /* Règle la marge intérieure gauche */
        padding-right: 10px;  /* Règle la marge intérieure droite */
    }
    
    #fa_share {
        background-color: #86e5e7;  /* Couleur de fond */
        border-radius: 0 0 40px;  /* Arrondis les bords */
        position: relative;  /* Permet de décaler la toolbar */
        left: -20px;  /* Décale la toolbar de la gauche */
        margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */
        padding-left: 10px;  /* Règle la marge intérieure gauche */
        padding-right: 10px;  /* Règle la marge intérieure droite */
    }



/*-----------------------------------------------------
Merci message
------------------------------------------------------*/

    #fa_thanks_message img { vertical-align:middle }
    #fa_thanks_message {
      color:#280;
      font-size:16px;
      font-weight:bold;
      text-align:center;
      background-color:#DFD;
      border:1px solid #BDB;
      border-radius:6px;
      padding:6px;
      margin:6px;
    }
/*------------------------------------------------------
   Bouton Precedent-suivant
------------------------------------------------------*/

    #navMP>a{
      display:inline-block;
      padding-left:10px;
      padding-right:10px;
      font-size:16px;
      line-height:16px;
      color:#eee;
      background:#BDC8D0;
      text-decoration:none !important;
      border:1px solid #aaa;
    }
    #navMP>a:hover{
      color:#fff;
      background:#CDD8E0;
      text-decoration:none !important;
    }
    #navMP-precedent{
      border-radius:8px 0 0 8px;
    }
    #navMP-suivant{
      float:right;
      border-radius:0 8px 8px 0;
    }
    
    #navMP-precedent::before{
      content:"LIRE LE MESSAGE Précédent"
    }
    #navMP-suivant::before{
      content:"LIRE LE MESSAGE Suivant"
    }

/*-----------------------------------------------

Chatbox Toolbar

-------------------------------------------------*/

                      #fa_chat_container {
              background:#aed8e7;
              border:1px solid #556682;
              border-radius:3px;
              position:fixed;
              right:3px;
              z-index:999;
              overflow:hidden;
              min-width:500px;
              min-height:250px;
              transition:300ms;
            }
            
            #fa_chat {
              border:none;
              width:100%;
              height:100%;
            }
            
            #fa_chat_button {
              color:#FFF;
              line-height:30px;
              margin-left:10px;
              padding:0 5px;
              cursor:pointer;
            }
            
            #fa_chat_button.fa_chat_active {
              color:#333;
              background:#FFF;
            }

/*----------------------------------------------------
Avatar toolbar
-------------------------------------------------------*/

    .fa_avatar {
       width: 30px;
       height: 30px;
       position: relative;
       top: -3px;
       margin-right: 5px;
       border-radius: 3px;
       margin-bottom: -10px;
    }

.fa_avatar {

max-height:40px;
max-width:40px;
}


/*----------------------------------------------------
QEEL
-------------------------------------------------------*/
/*Fond du qeel*/
.qeel_box {
  margin-top: 20px;
  background: #ffefaf;
  border: 2px dotted #fead4e;
  box-shadow: 0px 0px 10px #3f2600;
  border-radius: 25px;
  text-align: left;
}
/*Cellules du qeel*/
.qeel_box_td {
  background: #ffefaf;
  border: dotted 2px #fead4e;
  border-radius: 15px;
  padding: 10px;
  font-size: 13px;
  font-family: Open Sans;
  color: #0b1906;
  text-align: left;
}
/*Ligne pointillée dans les membres connectés et les anniversaires*/
.qeel_line {
  border-top: 2px #fead4e dotted;
  height: 0px;
  margin-top: 5px;
  margin-bottom: 5px;
}

/*Titre du qeel*/
.qeel_title a {
  display: inline-block;
  margin-right: 50px;
  font-size: 32px;
  font-family: Pacifico;
  color: #291900;
  letter-spacing: 0px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Titre du qeel au survol*/
.qeel_title a:hover {
  text-decoration: none!important;
  letter-spacing: 5px;
}

/*Bloc des membres connectés*/
.qeel_box2 {
  padding: 5px;
}
/*Bloc des membres connectés actuellement*/
#loggedlist {
  padding-right: 5px;
  max-height: 5em;
  overflow: auto;
  text-align: justify;
  background: #c9f3f1;
}
/*Les membres connectés récemment*/
#totalconn {
  padding-right: 5px;
  max-height: 5em;
  overflow: auto;
  text-align: justify;
  background: #c9f3f1;
}

/*Les anniversaires aujourdhui*/
#birthtoday {
  height: 133px;
  padding-right: 5px;
  overflow: auto;
  text-align: center;
  background: #c9f3f1;
}
/*Les anniversaires au cours des 7 prochains jours*/
#birthweek {
  height: 134px;
  padding-right: 5px;
  overflow: auto;
  text-align: center;
  background: #c9f3f1;
}

/*Image du milieu*/
.qeel_box4 img {
  width: 250px;
  height: 350px;
  border: solid 1px #3f4511;
  border-radius: 15px;
}

/*Bloc des groupes*/
.qeel_box5 {
  text-align: center;
 
}
/*Groupes*/
.groupes {
  height: 35px;
  text-align: center;
  text-shadow: 1px 1px 1px #3f4511;
  background: #c9f3f1;
}
/*Couleur du groupe 1*/
#groupe1 a, #groupe1 a:hover {
  color: #6c0000;
}
/*Couleur du groupe 2*/
#groupe2 a, #groupe2 a:hover {
  color: #0ba7b5;
}
/*Couleur du groupe 3*/
#groupe3 a, #groupe3 a:hover {
  color: #fc79f3;
}
/*Couleur du groupe 4*/
#groupe4 a, #groupe4 a:hover {
  color: #c7c0a3;
}

/*Couleur du groupe 5*/
#groupe5 a, #groupe5 a:hover {
  color: #000000;
}

/*Description des groupes*/
.qeel_infobulles {
  height: 130px;
  overflow: auto;
  background: #ffefaf;
  border-radius: 10px;
  text-shadow: none;
  color: #0b1906;
  padding: 5px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Description des groupes sans survol*/
#qeel_infobulle1, #qeel_infobulle2, #qeel_infobulle3, #qeel_infobulle4, #qeel_infobulle5{
  position: relative;
  z-index: 1;
  margin-top: -140px;
  opacity: 0;
  filter: alpha(opacity=0);
  transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
}
/*Apparition de la description des groupes*/
#groupe1:hover ~ #qeel_infobulle1, #groupe2:hover ~ #qeel_infobulle2, #groupe3:hover ~ #qeel_infobulle3, #groupe4:hover ~ #qeel_infobulle4,  #groupe5:hover ~ #qeel_infobulle5 {
  opacity: 1;
  filter: alpha(opacity=100);
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}

/*Liste des membres sur la CB*/
#chatters_stats {
  padding-right: 3px;
  max-height: 5em;
  overflow: auto;
  text-align: justify;
}

/*Écriture des aniversaires et des membres connectés récemment*/
#totalconn td.row1, #birthtoday td.row1 {
  background: #c9f3f1;
  padding: 0px;
  display: inline;
}
#totalconn td.row1 span.gensmall, #birthtoday td.row1 span.gensmall {
  font-size: 13px;
  padding: 0px;
  font-family: Open Sans;
  color: #0b1906;
}
/* FIN DU QEEL */

/*------------------------
Enlever le sous lignage
-----------------------------*/

    
    a:hover{text-decoration: none !important;}
    a {text-decoration: none !important;}
    a:link {text-decoration: none;}
    a:visited {text-decoration: none;}


/*-------------------------
encadrer pub forumactif
-------------------------*/


#emptyidcc
{
 border: 2px #e2b54a dotted !important;  /* Exemple à remplacer par le style d'encadrement voulu */
 background:#ffefaf;
    }
 
    /*--------------------- MISE EN FORME DES LISTES DE SUJETS------------------- */
    .bloc_sujets {
      width: 900px;
      margin: auto;
      background: #cceaf4;
  border: 2px dotted #fe9b00;
    }
    
    .bloc_sujets a.topictitle {
      font-family: "Arial", Helvetica, Arial, Sans-serif;
      font-size: 0.8em;
      font-weight: bold;
      color: #898989;
      text-decoration: none;
 
    }
    
    .sujets {
      background: #f9fab2;
  border: 2px dotted #fe9b00;
    }
    
    .topictitle {
      font-variant: small-caps;
      font-size: 10px;
    }
    
    .topictitle .l1 {
      text-decoration: none;
    }
    
    .sujets_auteur {
      display: block;
      width: 200px;
      font-size: 12px;
    }
    
    .sujet_last {
      display: block;
      width: 180px;
      height: 20px;
      background: #f1f0b5;
      font-size: 12px;
  border: 1px dotted #fe9b00;
    }
    
    .sujets_stats {
      width: 900px;
      text-align: right;
    }
    
    .sujets_stats_contenu {
      font-size: 12px;
      color: #a4a4a4;
    }

    /*--------------------- FIN MISE EN FORME DES LISTES DE SUJETS------------------- */




*--------------------- Flux------------------- */
    .sharing-cl {
       overflow:hidden;
       margin:-20px 0 0 0;
       padding:0;
       list-style:none;
       width:550px;
    }
    .sharing-cl a {
       overflow:hidden;
       width:75px;
       height:20px;
       float:left;
       margin-right:20px;
       text-indent:-200px;
       background:url(https://i.servimg.com/u/f82/18/23/88/22/share-10.png) no-repeat;
    }
    a.sh-su {
       background-position:-210px -40px;
    }
    a.sh-feed {
       background-position:-70px -40px;
    }
    a.sh-tweet {
       background-position:-140px -40px;
    }
    a.sh-mail {
       background-position:0 -40px;
    }
    a.sh-digg {
       background-position:-280px -40px;
    }
    a.sh-face {
       margin-right:0;
       background-position:-350px -40px;
    }
    a.sh-mail:hover {
       background-position:0 1px;
    }
    a.sh-feed:hover {
       background-position:-70px 1px;
    }
    a.sh-tweet:hover {
       background-position:-140px 1px;
    }
    a.sh-su:hover {
       background-position:-210px 1px;
    }
    .sh-digg:hover {
       background-position:-280px 1px;
    }
    a.sh-face:hover {
       background-position:-350px 1px;
    }
    #text {
       margin-top:5px;
       font-weight:bold;
       font-family:helvetica,arial,sans-serif;
    }
    #text a {
       text-indent:0;
       height:auto;
       text-align:center;
       font-size:11px;
       padding-top:35px;
       color:#999;
       text-decoration: none;
    }

*--------------------- Fin Flux------------------- */



    table.forumline {
    border:1px dotted;
    }

    /* --------------------------------- NAVIGATION --------------------------------- */

    /* Contient les cercles */
    .bloc_onglet {
      position: fixed;
      top: 100px;
   margin-left: 20px;
    }

    /* Info-bulles */
    .bloc_infobulle {
      z-index: 24;
      text-decoration: none;
      position: relative;
      margin-top: 20px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    /*Image*/
    .bloc_imgbulle {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    /* Triangle noir */
.bloc_anglebulle {
  border: 0 solid transparent;
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-right: 11px solid #83a6b1;
  position: absolute;
  left: -10px;
  top: 45px;
}
    /*Bloc des liens*/
    .bloc_bulle {
      display: none;
      position: absolute;
      top: 0px;
      left: 120px;
      height: 100px;
      width: 150px;
      background: #d1e4ea;
      text-align: center;
      font-weight: none;
      padding: 20px 5px 5px 5px;
      text-align: center;
    }
    .bloc_infobulle:hover .bloc_bulle {
      display: block;
    }
    .bloc_infobulle:hover {
      width: 120px;
    }
    /*Liens*/
    .bloc_infobulle a {
      text-decoration: none !important;
      color: #4370ae;
    }
    .bloc_infobulle a:hover {
      color: #ffffff;
    }


    /*Enlève le contour du cadre de la publicité*/
    #content-container > .tree-col:nth-child(1) > tbody > tr:nth-child(1) > td:nth-child(2) > .forumline:nth-child(1) {
      border: none;
      background-color: transparent;
    }

    /*Enlève la couleur à l'intérieur du cadre de publicité*/
    #content-container > .tree-col:nth-child(1) > tbody > tr:nth-child(1) > td:nth-child(2) > .forumline:nth-child(1) td,
    #content-container > .tree-col:nth-child(1) > tbody > tr:nth-child(1) > td:nth-child(2) > .forumline:nth-child(1) table {
      border: none;
      background-color: transparent!important;
    }


/*--------------------- Fond de messages ------------------- */  

         .bulle{
            background-color : #b9d8e6;
            -moz-border-radius: 20px ;
            -webkit-border-radius:20px;
            -border-radius:20px;
            -khtml-border-radius:20px;
            padding : 5px;
            min-height : 200px;
            border: 2px dotted #fec500;
            }
*--------------------- Fin Fond de messages ------------------- */


       



*--------------------- Zoom messages ------------------- */

    /* Les cellules zoomees*/
    td#M14_Zoom
    {
    padding:5px;
    border:5px solid white;
    z-index:999;
    box-shadow: 3px 3px 10px 2px black;
    border-Radius:6px;
    cursor:pointer;
    -webkit-transform: rotate(360deg) scale(2);
    -moz-transform: rotate(360deg) scale(2);
    -o-transform: rotate(360deg) scale(2);
    -ms-transform: rotate(360deg) scale(2);
    transform: rotate(360deg) scale(2);
    }
    /*L apparence des couleurs et tailles de police*/
    td#M14_Zoom a.gensmall ,td#M14_Zoom .gensmall{font-size:15px;}
    /*On depose les transitions sur tous les styles*/
    td.row3.over,  td.row3Right
    {
    cursor:pointer;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }

*--------------------- Fin Zoom messages ------------------- */
    

    /*code selectionner le contenu*/
            .selectCode { float:right; text-transform: uppercase; cursor:pointer; }

    /*fin*/

    .selectCode { float:right; cursor:pointer;color:#1f2122; }
    .codebox .genmed {color:#1f2122; }
    .code
    {
    color: #1f2122;
    margin-right:2px;
    text-align: left;
    font-size:13px;
    }
    .cont_code
    {
    background-color:#fbfca5;
    color:#1f2122 !important;
    padding-left:5px;
    font-weight:bold;
    }
    .codebox dd
    {
    background:#fbfca5;
    border:3px solid #b3dbe8;
    }
    .spoiler_content {background:#fbfca5;padding:3px ;color:#1f2122 !important;}
    .hidecode dd {color: #1f2122;padding:3px;}
    .codebox.spoiler {color: #1b596d;}
    .quote
    {
    color: #1f2122;
    font-size:11px;
    margin-left: 10px;
    margin-right: 10px;
    padding:3px;
    }

index_box
 
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
      <tr>
          <td valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
           
            <!-- 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 -->
           
            <!-- END switch_user_logged_in -->
          
          </td>
      </tr>
    </table>
 
    <!-- BEGIN catrow --><table width="100%" border="0" cellspacing="7" cellpadding="5" class="categories">
      <!-- BEGIN cathead -->

      <tr>
          <td class="{catrow.cathead.CLASS_CAT}" colspan="3" 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>
      </tr>
      <!-- END cathead -->
      <!-- BEGIN forumrow -->
      <tr>
          <td class="newpost" align="center" valign="middle">
            <span class="lastpost" class="gensmall">{catrow.forumrow.LAST_POST}<br/><span class="gensmall">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages</span></span><div class="details" class="gensmall"></div>
                              </td>                <td align="center" valign="middle">
                <div class="lastpost-avatar"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>
                    </td>
          <td valign="top" class="descriptions">
            <div class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
    <div class="description"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
      <br/>
            <center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</center>
          
                  </td>
              <td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></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 -->




topics_list_box
Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
   var all_checked = true;
   for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
   }
   document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
   for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
   }
}
</script>
<!-- END multi_selection -->

<div class="bloc_sujets">
      <!-- BEGIN multi_selection -->
      <span align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></span>
   <!-- END multi_selection -->
 
   <!-- BEGIN pagination -->
      <span align="right"><span class="gensmall">{PAGINATION}</span></span>
   <!-- END pagination -->
 
   <!-- END header_table --><!-- BEGIN header_row -->
<!-- END header_row -->
 
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
 
 
    <table class="sujets"><tr>
      <!-- BEGIN single_selection -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
      <!-- END single_selection -->
      <td><span class="icones_sujets"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></span></td>
      <!-- BEGIN icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
      <!-- END icon -->
                <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
         <div class="topictitle">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title">
               <a class="topictitle2" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
         </div>
         <!-- BEGIN switch_description -->
         <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </span>
         <!-- END switch_description -->
         <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
         <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
      </td>

      <td class="row3" align="center" valign="middle"><span class="sujets_auteur"><i>écrit par ====>> {topics_list_box.row.TOPIC_AUTHOR}</i></span></td>
      <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap"><span class="sujet_last">{topics_list_box.row.LAST_POST_TIME}<br /> </span></td>
<!-- BEGIN multi_selection -->
      <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
   <!-- END multi_selection -->
   </tr></table>
  <div class="sujets_stats"><span class="sujets_stats_contenu">Vu {topics_list_box.row.VIEWS} fois et a reçu {topics_list_box.row.REPLIES} commantaires(s).</span></div>
   <!-- END topic --><!-- BEGIN no_topics -->
   <table><tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
          </tr></table>
   <!-- END no_topics --><!-- BEGIN bottom --> 

  <br /><br />
<div class="pages"><span class="gensmall">{PAGINATION}</span>
  <span><a href="#top">{L_BACK_TO_TOP}</a> </span></div>
 
<!-- END bottom --><!-- BEGIN footer_table -->
</div><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->


Normalement je n'es rien oubliée , enfin j'espère


Merci pour votre aide


Amicalement

Re: *RESOLU* [PHPBB2] Zoom

Sujet résolu le Dim 28 Mai 2017 - 10:32
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Ok merci,
j'ai édité ton message pour mettre les codes html entre les balise code et non spoiler
Ptite perle, pour les codeurs , c'est plus simple pour la sélection du contenu clin oeil .

Je regarde cela



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* [PHPBB2] Zoom

Sujet résolu le Dim 28 Mai 2017 - 10:36
Ptite_Perle
avatar
Nouveau membre

MessagePtite_Perle

  • 16px
  • 24px
  • Zoom
Merci pour ta réponse rapide.

Pour la prochaine fois, je saurai qu'il pas mettre les codes en spoiler, merci

Amicalement

Re: *RESOLU* [PHPBB2] Zoom

Sujet résolu le Dim 28 Mai 2017 - 10:52
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
De rien Ptite_Perle,
tu peux me tutoyer , je n'aime pas le vouvoiement mdr .



Alors modifies le script ainsi :




Et la c.s.s associée modifiée:
Code:
 
/*-Zoom messages -*/

        /* Les cellules zoomees*/
        td#M14_Zoom
        {
        padding:5px;
        border:5px solid white;
        z-index:999;
        box-shadow: 3px 3px 10px 2px black;
        border-Radius:6px;
        cursor:pointer;
        -webkit-transform: rotate(360deg) scale(1);
        -moz-transform: rotate(360deg) scale(1);
        -o-transform: rotate(360deg) scale(1);
        -ms-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
        }
        /*L apparence des couleurs et tailles de police*/
        td#M14_Zoom a.gensmall ,td#M14_Zoom .gensmall{font-size:15px;}
        /*On depose les transitions sur tous les styles*/
        td.newpost,td.row3Right
        {
        cursor:pointer;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        }

/*Fin Zoom messages*/



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* [PHPBB2] Zoom

Sujet résolu le Dim 28 Mai 2017 - 21:18
Ptite_Perle
avatar
Nouveau membre

MessagePtite_Perle

  • 16px
  • 24px
  • Zoom
Coucou

Merci le code fonctionne :)

Merci pour ta réponse rapide.

Amicalement

Re: *RESOLU* [PHPBB2] Zoom

Sujet résolu le Dim 28 Mai 2017 - 23:04
fascicularia
avatar
Administrateur

Messagefascicularia

  • 16px
  • 24px
  • Zoom
-Staff du Forum Milouze14-



  • Hello 
    Ton problème est-il toujours d'actualité?
    Si ce n'est plus le cas et qu'il est résolu,
    merci de cliquer sur le bouton en haut de page.

Pour toute information,merci de contacter un Membre du Staff



Administrateur des forums



Re: *RESOLU* [PHPBB2] Zoom

Sujet résolu le Lun 29 Mai 2017 - 15:03
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum