AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-39%
Le deal à ne pas rater :
Pack Home Cinéma Magnat Monitor : Ampli DENON AVR-X2800H, Enceinte ...
1190 € 1950 €
Voir le deal

    Catégorie restangle +avatar du dernier posteur

    Zomega
    Zomega
    FémininAge : 33Messages : 31

    Sam 26 Déc 2015 - 18:06

    Ma demande



    Bonjour,

    Je me permet de faire appel à votre aide généreuse car depuis hier soir 21h, je tente en vain de me dépatouiller avec mon codage très moche et incompréhensible.

    Je souhaiterais améliorer un codage que j'avais fait il y a longtemps (très longtemps... quand j'étais encore plus nulle) et en l'améliorant en y ajoutant l'avatar du dernier posteur.

    Je souhaiterais aussi coder le titre de la catégorie que je souhaiterais superposer à mon entête et faire en sorte que l'image que je compte mettre, se réduise quand on va dans un forum.

    Schéma(s) et Eléments
    Schémas : à la base, ça ressemblait à ça. Catégorie restangle +avatar du dernier posteur 337379Capture

    et je voudrais un truc comme ça:
    Catégorie restangle +avatar du dernier posteur 773789schema


    Tailles des éléments : 740px de largeur et sans doute 150px de hauteur ?
    Effets voulus : juste de l'opacité sur l'avatar du dernier posteur qui s'éclaicie quand on passe la souris desss.
    Version de votre forum : PHPBB2

    Ressources
    étant donné que la largeur était fixe dans mon ancien codage, je n'en ai pas. Mais je peux en faire si besoin

    Autres précisions ?
    J'aimerais bien pouvoir régler la hauteur du cadre sous le titre du forum... pleaaaaase
    • Revenir en haut
    Zomega
    Zomega
    FémininAge : 33Messages : 31

    Mer 30 Déc 2015 - 13:45

    Bonjour,

    ma demande est toujours d'actualité :)
    • Revenir en haut
    Zomega
    Zomega
    FémininAge : 33Messages : 31

    Lun 4 Jan 2016 - 19:21

    Bonjour,

    ma demande est toujours d'actualité :)
    • Revenir en haut
    Aki'
    Aki'
    FémininAge : 27Messages : 258

    Mer 13 Jan 2016 - 13:24

    Salut !

    Je veux bien tester, mais il me faut le template de tes catégories ainsi que le CSS associé. Par contre je ne comprends pas trop l'histoire du titre de catégorie
    • Revenir en haut
    Zomega
    Zomega
    FémininAge : 33Messages : 31

    Ven 15 Jan 2016 - 15:11

    Bonjour !!! Merci merci beauuuuucoup !!!
    Pour l'entête en fait, j'ai un cadre autour. Du coup, je voulais que le titre de la catégorie (qui n'est pas sur le schéma, soit visible au dessus de mon haut de cat*

    voici pour le index box
    Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
       <tr>
              <td><center><div class="palink"><a class="pc01" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> -
                <a class="pc01" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> -
                <a class="pc01" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
                </div></center></td>
          
       </tr>
    </table>
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <center><div class="cathead"></div><div class="catbody">
    <table class="forumline" width="100%" border="0" cellspacing="10" cellpadding="0">
      <tr>
          <th 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>
      </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 valign="top" width="100%" height="80">
     
    <table>
    <tr>
    <td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
      <td style="background-color: #e08e90;"><a class="titreforum" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></td>
    </tr><tr>
      <td class="cadre2"><center><div class="description4">{catrow.forumrow.TOPICS} SUJETS | {catrow.forumrow.POSTS} MESSAGES<br><br>
        {catrow.forumrow.LAST_POST}</div></center></td><td><div class="cadre"><div style="width: 500px; height: 120px; overflow:auto; padding: 00px;">{catrow.forumrow.FORUM_DESC}</div></div></td>
    </tr>
    </table>  <center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</center>
     <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>
      </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><div class="catfoot"></div>
    <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
     

    et le css
    Code:

    /******* NAVIGATION DEBUT *******/

    a.mainmenu {
      font-family: Squada One;
      font-size: 14px;
      letter-spacing:1px;
      padding-right: 10px;
      vertical-align: middle;
      padding-bottom: 2px;
      text-transform:uppercase;
    }


    #navigation{
      z-index: 999;
      width: 100%;
      position: absolute;
    position: fixed;
      margin-top:-5px;
      margin-left:-7px;
      background-color: #e7e2dc;
      border-bottom:#fff 2px solid;
    height:20px;
      padding-top: 3px;
      padding-bottom: 4px;
      font-text : center;

    }


    #navig a {color :#408593; text-decoration: none;}
    #navig a:hover {color :#efcf93; text-decoration: none;}
            
    a.mainmenu img { /*retire les images de la barre de navigation*/
      display:none;
    }





    /******** APPARENCE GENERALE, CATEGORIES ET FORUMS ********/

    /**** Header ****/
    body
    {
    background-image: url('http://img11.hostingpics.net/pics/41785892fd.png');
    background-position: top center;
    background-size: 1200px;
    background-repeat: repeat-y;
    background-color: #e7e2dc;
    background-attachment: scroll !important;
    }



    /**** l'encadrement principal et cadres divers ****/
    .bodyline {
    background: rgb(0,98,117); /* Old browsers */
    background: -moz-linear-gradient(top, rgb(0,98,117) 0%, rgb(124,192,188) 47%, rgb(124,192,188) 47%, rgb(190,212,190) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,98,117)), color-stop(47%,rgb(124,192,188)), color-stop(47%,rgb(124,192,188)), color-stop(100%,rgb(190,212,190))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgb(0,98,117) 0%,rgb(124,192,188) 47%,rgb(124,192,188) 47%,rgb(190,212,190) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgb(0,98,117) 0%,rgb(124,192,188) 47%,rgb(124,192,188) 47%,rgb(190,212,190) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgb(0,98,117) 0%,rgb(124,192,188) 47%,rgb(124,192,188) 47%,rgb(190,212,190) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgb(0,98,117) 0%,rgb(124,192,188) 47%,rgb(124,192,188) 47%,rgb(190,212,190) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006275', endColorstr='#bed4be',GradientType=0 ); /* IE6-9 */lter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006275', endColorstr='#bed4be',GradientType=0 ); /* IE6-9 */
    }



    th.thBottom, th.thCornerL, th.thCornerR, th.thHead, th.thLeft, th.thRight, th.thSides, th.thTop, td.catLeft, td.spaceRow{
    border: none;}


    /**** titre de catégorie ****/
    .secondarytitle {
     min-height: 80px;
      text-align: center;}

    th.secondarytitle .txt-title {
    display: none;
        font-size: 30px !important;
        color: #BC7D75 !important;
        font-family: "Cabin Condensed",sans-serif !important;
    }

    th.secondarytitle img {
        display: inline !important;
      margin-top:-30px;
    }



    /**** les forums ****/


    .cathead
    {
      background: url('http://img11.hostingpics.net/pics/875770hautcat.png') top center no-repeat;
      width: 748px;
      height: 85px;
      margin: auto; /*Permet de centrer la partie du corps*/
    }

    .catbody
    {
      background: url('http://img11.hostingpics.net/pics/474824fondcat.png') center repeat-y;
      width: 748px;
      margin: auto;

    }

    .catfoot
    {
      background: url('http://img11.hostingpics.net/pics/706005bascat.png') bottom center no-repeat;
      width: 748px;
      height: 85px;
      margin: auto;
    }


        /*Cadres Description*/


        .cadre {
        color:  #b29c99;

        margin-right: 00px;
        width: 500px;
        height: 90px;
        text-align:justify;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-right: 10px;
        background-color:#fdf1d7;
        font-size: 10px;
        line-height: 9px;
        }

        .cadrebis {
        color:  #b29c99;
        margin-left: 03px;
        margin-right: 00px;
        width: 500px;
        height: 85px;
        text-align:justify;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 10px;
        background-color:#fdf1d7;
        font-size: 10px;
        }


        .titreforum {
        color: #ffffff !important;
        font-family: 'Fjalla One', sans-serif;
        font-size: 25px;
        font-weight: normal;
        text-transform: lowercase;
        text-align: left;
        letter-spacing: -2px;
        width: 330px;
        height: 15px;
        padding: 5px 10px;
        margin-top: -5px;
        }


        /*Cadres Description 2*/


        .cadre2 {
          align: justify;
          font-family: 'Fjalla One', sans-serif;
          width: 180px;
          height: 60px;
        text-align:center;
          font-weight: 9px;
          font-size: 11px;
          margin-left: 15px;
        background-color: #ffd3c1;
        padding: 10px;
        text-transform: uppercase;  
        }



        .description{
        width:350px;
        height:80px;
        padding: 3px;
        font-family: arial;
        font-size: 10px;
        text-transform: uppercase;
        background-color: #fefbf2;}

        .description2{
        width:100px;
        height:65px;
        padding: 3px;
        font-family: arial;
        font-size: 10px;
        background-color: #fefbf2;}


        .description3{
        width:350px;
        height:80px;
        padding: 3px;
        font-family: arial;
        font-size: 10px;
        background-color: #fefbf2;}

        .description4{
        width:100px;
        height:75px;
        padding: 2px;
        font-family: arial;
        font-size: 10px;
        background-color: #fefbf2;
        line-height: 9px;
        }

        /*code titre*/
        .titrefiche{
        font-family: arial;
        font-size: 20px;
        text-transform: uppercase;
        color: #c2d554;}

        /* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */


        .cate
        {
          width: 100px;
          height: 82px;
          overflow: hidden;
        border-left: 1px solid #d6edc8;
        border-right: 1px solid #d6edc8;
        border-top: 1px solid #d6edc8;
        border-bottom: 1px solid #d6edc8;
        font-family: arial;
        font-size: 10px;
        text-transform: uppercase;
        background-color:#fefbf2;
        line-height: 10px;
        }
        .cate_img
        {
          position: relative;
          z-index: 2;
          width: 100px;
          height: 100px;
          margin-left: 0px;
            transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .cate:hover .cate_img
        {
        margin-left: 100px;
        transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .cate_description
        {
          position: relative;
          z-index: 1;
          width: 100px;
          height: 80px;
          margin-top: -80px;
          text-align: left;
          font-size: 10px;
          padding: 2px;
          overflow: auto;
        }

    .forumline{background-image: url("http://img11.hostingpics.net/pics/593331fondcat.png");
    border:#dfd3c0 0.5px solid;
    padding:10px}

    .symbol { display:inline-block;
    font-family: Segoe UI Symbol;
    font-size: 22px;
    }

    .forumlink {
    font-family: 'Great Vibes', cursive;
      font-size:32px;
      text-transform:none;
    margin-bottom: -11px;
    display: inline-block;
    margin-top: 3px;
    text-shadow: 2px 2px 1px #D8D3CB;}

    .lastpost-avatar {
    display:block;
    float: right;
      margin-top: 20px;
    }

     
    .lastpost-avatar {
    display:block;
    float: right;
      margin-top: 20px;
    }

    .lastpost-avatar img {
      height: 88px;
      width: 55px;
      background-color:#fff8f0;
      border:#F5CC9D 1px solid;
        padding: 2px;
      border-radius: 0px;
      opacity: 0.6;
      filter: alpha(opacity=50);
      transition-duration: 0.7s;}

    .row3Right .lastpost-avatar img, .row1 .lastpost-avatar img{ /*image a coté des sujets*/
      width: 33px;
      height: 53px;}

    .lastpost-avatar img:hover{
      opacity: 0.9;
      transition-duration: 0.7s;}


    /** les différents boxs **/
    .fowD1 {
      width:98%px;
      max-height: 70px;
      overflow: auto;
      background-color:#3f302a;
      border-top:#a99b8b 1px solid;
      border-left:#543e39 0.5px solid;
      border-right:#543e39 0.5px solid;
      border-bottom:#543e39 0.5px solid;
      padding:3px;}

    .fowD2 {
      display:block;
       opacity: 0.6;
      letter-spacing: 1px;
      font-variant: small-caps;
      font-family: Oswald;
      font-size:8px;
      background-color:#543e39;
    }

    .fowD2:hover {
      opacity: 1;
      transition-duration: 0.7s;
    }

    .fowD3 {
      width:160px;
      background-color:#3f302a;
      border-top:#a99b8b 1px solid;
      border-left:#543e390.5px solid;
      border-right:#543e39 0.5px solid;
      border-bottom:#543e39 0.5px solid
    margin-top: 14px;
    }

    .fowD4 { /*nombre de sujet et message*/
      padding-top:3px;
       margin-top: 20px;
      max-height: 70px;
      padding-bottom:3px;
      background-color:#543e39;}







    oasis {text-transform: uppercase;
    font-weight: bold;
    font-family: arial;
    font-size:11px;}




    /******* PROFIL *******/
    .name {display:block;
      text-transform: uppercase;
    font-weight: bold;
    font-family: arial;
    font-size:11px;
    margin-top:5px;}

    .rank {
      display:block;
      margin-top:-22px;
      margin-bottom: -20px;
      letter-spacing: 1px;
      text-transform: uppercase;
      text-align: center;
      font-family: Ubuntu Mono,cursive;
      font-size: 10px;}

    .profil_global {
      display:block;
      background-color:#f0eadf;
    border:#dfd3c0 0.5px solid;
    }

    #barbapapa { /* Encadrement global des 2 divs */
        position:relative;
        width:206px;
        height:326px;
        border:none; /* La vilaine bordure rouge */
        overflow:hidden; /* Permet de cacher ce qui dépasse */
    }


    .avatar_box {
      border:1px solid #f1f4d8;
      padding:2px;
      background-color:#f0eadf;
      -webkit-transition: 1s all ease-in-out;
      -moz-transition: 1s all ease-in-out;
      -ms-transition: 1s all ease-in-out;
      -o-transition: 1s all ease-in-out;
      transition: 1s all ease-in-out;
      -webkit-transform: rotate(0deg) scale(1) skew(0deg) translateX(0px);
      -moz-transform: rotate(0deg) scale(1) skew(0deg) translateX(0px);
      -ms-transform: rotate(0deg) scale(1) skew(0deg) translateX(0px);
      -o-transform: rotate(0deg) scale(1) skew(0deg) translateX(0px);
      transform: rotate(0deg) scale(1) skew(0deg) translateX(0px);
      z-index: 1;
      position: absolute;
      top: 0px;
      left: 0px;
    }


    #barbapapa:hover > .avatar_box {
     opacity: 0; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; -ms-transition: 1s all ease-in-out; -o-transition: 1s all ease-in-out; transition: 1s all ease-in-out; -webkit-transform: rotate(0deg) scale(2) skew(0deg) translateX(0px); -moz-transform: rotate(0deg) scale(2) skew(0deg) translateX(0px); -ms-transform: rotate(0deg) scale(2) skew(0deg) translateX(0px); -o-transform: rotate(0deg) scale(2) skew(0deg) translateX(0px); transform: rotate(0deg) scale(2) skew(0deg) translateX(0px);
    }

    .infos_box {
        background:#f0eadf;
        position:absolute;/* Laissez comme ceci */
        top:0;/* Laissez comme ceci */
        left:0;/* Laissez comme ceci */
        width: 100%;/* Laissez comme ceci */
        height:326px;/* Laissez comme ceci */
        z-index:0;/* La position par rapport à l'autre div qui contient les infos (ici en dessous)*/
     -webkit-transform: rotate(0deg) scale(1) skew(0deg) translateX(0px); -moz-transform: rotate(0deg) scale(1) skew(0deg) translateX(0px); -ms-transform: rotate(0deg) scale(1) skew(0deg) translateX(0px); -o-transform: rotate(0deg) scale(1) skew(0deg) translateX(0px); transform: rotate(0deg) scale(1) skew(0deg) translateX(0px); -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; -ms-transition: 1s all ease-in-out; -o-transition: 1s all ease-in-out; transition: 1s all ease-in-out;
    }

    #barbapapa:hover > .infos_box {
      opacity:1;/* Lorsque la souris passe sur la div #englob, on augmente l'opacité des infos */
      margin-left:0px;/* et on décale cette div à 0px (position par défaut) */
    }

    .info_prof {
      margin-top:3px;
      display:block;
      width:98%;
      background-color:#f5f0e7;
      border:#dfd3c0 0.5px solid;
      padding-left:4px;
      margin-left: -1px;
    }

    .label{
      text-transform: uppercase;}

    .info_prof img{
      display: block;
      border: 1px solid #dfd3c0;
      background-color: #f2ede3;
      border-radius: 2px;
      padding: 3px;
      width: 180px;
      margin: auto;}

      
    /** feuille de personnage **/

    .rpgsheetbr{text-align:justify!important;
    font-family:time new roman;
    font-size:12px;
      padding : 15px;
      display: block;}

    .postdetails.poster-profile textarea, input, select {  
      width:200px;
      background-color:#f5f0e7;
      border:#dfd3c0 0.5px solid;}

    .postdetails.poster-profile a {
      display:block;
      text-align:center;
      color: #B51F8C; font-family: Oswald;}


    /******* APPARENCE GENERAL DES MESSAGES ET SON CONTENU *******/

    /******* navigation en-tête de messages *******/
    .nav img {max-height: 80px; background-color:none;}
    .nav, .nav1 { display:inline-block;
      vertical-align:middle;
    }

    .nav1 {background-image: url("http://image.noelshack.com/fichiers/2015/42/1444765233-haut-de-cat2.png");
    width: 740px;
    height: 102px;
    margin-top: -15px;}

    a.nav2 {
        background-color: #f0eadf;
      padding:3px; display:inline-block;
    }

    a.nav2 img {
    max-height: 80px; background-color:none;
    }

    /******* fin *******/


    /******* MESSAGES *******/

    div.postbody{
    padding: 10px;}

    b1 { /*encadrement message*/
      display: block;
      background-color:#f2ede3;
      border: #dfd3c0 0.5px solid;
      padding: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;}

    /**** font style ****/
    wolfy {
      color:#2dbfb7;
      letter-spacing: 1px;
      text-transform: uppercase;
      text-align: center;
      font-family: Ubuntu Mono,cursive;
      font-size: 10px;
      line-height:8px;}
    banana{color: #2DB38F; font-family: Oswald;}
    peach{color: #B51F8C; font-family: Oswald;}
    taken {font-family: Oswald;}
    reservation {color: #cca00e; font-family: Oswald;}
    scena {color: #0eccbc; font-family: Oswald;}

    title{color:#c01476;
      display:block;
      font-family: 'Great Vibes', cursive;
      font-size:32px;
      text-align:center;
      width:100%;
      margin-top:10px;}

    sub {color:#d6c8b4;
      display:block;
      font-family: 'Roboto', sans-serif;
      font-size:10px;
      margin-left: auto;
      margin-right: auto;
      text-align:center;
      width:90%;
      text-transform: uppercase;
      margin-top:-20px;
     border-bottom:1px solid #2dbfb7;}

    num {color:#c01476;
       display:block;
      font-family: 'Roboto', sans-serif;
      text-transform: uppercase;
      font-size:42px;
      text-align:left;
      margin-top:-35px;
      opacity:0.5;
    width: 30px;
    height: 30px;
    background-color: #f9f8f5;
    border: #F0ECD4 0.5px solid;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;}

    sub1 {color:#2DB38F;
      display:block;
      font-family: 'Oswald';
      text-transform:uppercase;
      font-size:20px;
      text-align:left;
      margin-left:35px;
      width:100%;
      margin-top:10px;
    opacity:0.8;}

    list1 {display:block;margin-left:25px;}


    /**** FICHE DE PRESENTATION ****/
    /** carte roomie et effet rotation **/
    .ceffect{
      position: relative;
      width: 457px;
      height: 365px;
      margin-bottom: 2px;}

    cfront, cback{
      display: block;
      background-color:#f2ede3;
      box-shadow: 0px 0px 60px 1px #e7decf inset!important;
      border: #dfd3c0 0.5px solid;
      padding: 10px;
      border-radius: 10px;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      -webkit-transition: transform 1s;
      transition: transform 1s;
      text-align: center;}

    cback{
      transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    }

    .ceffect:hover cfront{
      transform: rotateY(-180deg);
      -webkit-transform: rotateY(-180deg);}

    .ceffect:hover cback{transform: rotateY(0);
      -webkit-transform: rotateY(0);
    }

    /** les utilités pour le contenu présentation **/
    a1 {
      display:block;
      margin-left:auto;
      margin-right:auto;
      margin-top:-12px;
      width:80%;
      background-color:#f5f0e7;
      border: solid 0.5px #dfd3c0;
      padding:0px;
      text-align:center;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-family: Ubuntu Mono,cursive;
      font-size:10px;}

    .cimg{
      border: 1px solid #dfd3c0;
      background-color: #f2ede3;
      border-radius: 2px;
      padding: 3px;
      opacity: 0.7;
      transition-duration: 0.7s;}

    .cimg:hover{
      border: 1px solid #dfd3c0;
      opacity: 1;
      transition-duration: 0.7s;}

    .ccarac{
      font-family: Ubuntu Mono,cursive;
      letter-spacing: 1px;
      text-transform: uppercase;
      text-align: center;}

    .cbox{
      background-color:#f5f0e7;
      padding: 7px;
      border-top: solid 0.5px #dfd3c0;
      border-bottom: solid 0.5px #dfd3c0;
      line-height: 12px;}

    .cboxt{
      margin-top: 4px;
      height: 160px;
      overflow: auto;
      text-align: justify;}

    .pbox{
      box-shadow: 0px 0px 60px 1px #e7decf inset!important;
      border: solid 1px #dfd3c0;
      background-color: #f2ede3;
      border-radius: 2px; padding: 7px;}

    .pboxt{
      max-height: 300px;
      overflow: auto;
      line-height: 12px;
      text-align: justify;}


    /**** images cf sujets groupes ****/


    .iright2 {
      float: right;
      margin-left: 6px;
        border: 1px solid #2dbfb7;
      background-color: #f2ede3;
      border-radius: 5px;
      padding: 3px;
      opacity: 0.7;
      transition-duration: 1.5s;
    }

    .iright2:hover{
      opacity: 1;
      transition-duration: 1.5s;
    }

    .ineutral {
      margin-left: 6px;
        border: 1px solid #c01476;
      background-color: #f2ede3;
      border-radius: 5px;
      padding: 3px;
      opacity: 0.7;
      transition-duration: 1.5s;
    }

    .ineutral:hover{
      opacity: 1;
      transition-duration: 1.5s;
    }

    /** adopt un coloc **/
    a2{display:inline-block; width:90px; margin-right:4px;}
    a3 {margin-top:-50px;display:block; width:100%;
      background-color:#f5f0e7; border:#dfd3c0 0.5px solid;
      padding:0px; text-align:center;
      margin-left:auto; margin-right:auto;
      letter-spacing: 1px; text-transform: uppercase;
      font-family: Ubuntu Mono,cursive; opacity:0.9; font-size:10px;}



    /*SUJET*/
    .msg_global {
        display:block;
      background-color:#f0eadf;
    border:#dfd3c0 0.5px solid;
        padding:2px;
      text-align:justify;
    }

    .postdetails01 {
    color:#51b69b;
      letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    font-family: Ubuntu Mono,cursive;
      font-size: 11px;
      text-align:justify;

    }

    .postdetails02 {
    color:#b13079;
      letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    font-family: Ubuntu Mono,cursive;
      font-size: 9px;}

    hr { border:#e5dac7 0.5px solid;}

    .row3Right {
    border: none !important;
    background-color: none !important;
    }

    .catBottom {
    border: none !important;
    background-color: none !important;
    }

    .catHead {
    border: none !important;
    margin-top:0px;
    background-color: none !important;
    -moz-border-radius:10px 10px 0px 0px;
    border-radius:10px 10px 0px 0px;
    }

    .thLeft {
    border: none !important;
    background-color: none !important;
    }

    .thRight {
    border: none !important;
    background-color: none !important;
    color: #46252d;
      
    }








    /** LIENS CODES PA DEBUT **/
    .palink {display-block;
      background-color:#f1ebdf;
    border-bottom:#2db38f 1px solid;
    border-left:#dfd3c0 1px solid;
    border-right:#dfd3c0 1px solid;
    border-top:#dfd3c0 1px solid;
      width:98%;
      font-family: Ubuntu Mono,cursive;
      font-size: 10px;
      text-align:center;margin:10px;padding:3px;}
    a.pc01:link {text-transform:uppercase;font-size:11px;}
    a.pc01:hover {text-transform:uppercase;font-size:11px;}
    /** LIENS CODES PA FIN **/

    /** QEEL DEBUT **/
    .qeel_img {
    display:block;
      background-image:url('http://image.noelshack.com/fichiers/2015/41/1444596850-qeel.png');
      width:740px;
      height:120px;
      margin-left:auto;
      margin-right:auto;
      background-repeat:no-repeat;
    }

    .qeel_groupe_table {
      width: 430px;
    background-color: #ebe4d6;
    height: 110px;
    margin-bottom: 10px;
    border-top: #2DB38F 2px solid;
    border-left: #DFD3C0 0.5px solid;
    border-right: #DFD3C0 0.5px solid;
    border-bottom: #DFD3C0 0.5px solid;
    }

    .qeel_groupe_gauche, .qeel_groupe_droite {
    font-family: 'Oswald'; text-transform:uppercase;
    margin-bottom: 10px;
    line-height: 16px;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;}

    .qeel_groupe_gauche {
      width: 160px;
    }
    .qeel_groupe_droite {
    width: 200px;
    }

    childhood_dream {color:#0B98D9; text-shadow: 2px 2px 1px #D8D3CB;}
    playground {color:#7CBD1B;text-shadow: 2px 2px 1px #D8D3CB;}
    knows_you_the_best {color:#F2A100;text-shadow: 2px 2px 1px #D8D3CB;}
    will_be_yours {color:#5b23f7;text-shadow: 2px 2px 1px #D8D3CB;}
    with_love {color:#F02480;text-shadow: 2px 2px 1px #D8D3CB;}


           /**INFOBULLES QEEL**/

    div.infobulle1, div.infobulle2, div.infobulle3, div.infobulle4, div.infobulle5 {
      position: relative;
      cursor:pointer;
    }

    div.infobulle1 > div, div.infobulle2 > div, div.infobulle3 > div, div.infobulle4 > div, div.infobulle5 > div{
      display: none; /* ceci masque l'infobulle */
    }

    div.infobulle1:hover, div.infobulle2:hover, div.infobulle3:hover, div.infobulle4:hover, div.infobulle1:hove5 {
      background: none; /* correction d'un bug IE */
      z-index: 500;
    }

    /* Lorsqu'on survole le contenu du bloc */
    div.infobulle1:hover > div, div.infobulle2:hover > div, div.infobulle3:hover > div, div.infobulle4:hover > div, div.infobulle5:hover > div {
      display: block;
       position: absolute;
        left: 232px;
        width:265px;
       color:#38352A;
      font-family: 'Tahoma', 'arial', 'calibri';
      font-size:11px;
    text-align:justify;
       padding: 3px;
      opacity:0.8;
    background-color: #ebe4d6;
    border-top: #2db38f 2px solid;
    border-left: #DFD3C0 0.5px solid;
    border-right: #DFD3C0 0.5px solid;
    border-bottom: #dfd3c0 0.5px solid;
    }

    div.infobulle1:hover > div {top: -10px;}
    div.infobulle2:hover > div {top: -25px;}
    div.infobulle3:hover > div {top: -41px;}
    div.infobulle4:hover > div {top: -58px;}
    div.infobulle5:hover > div {top: -74px;}


    .QEEL01, .QEEL02{
      color:#38352A;
      font-family: 'Tahoma', 'arial', 'calibri';
      font-size:11px;
    text-align:justify;
    display:block;
      position: relative;  
      overflow:auto;
      padding:5px;
    background-color: #F1EBDF;
    border-bottom: #2db38f 2px solid;
    border-left: #DFD3C0 0.5px solid;
    border-right: #DFD3C0 0.5px solid;
    border-top: #dfd3c0 0.5px solid;
    }

    .QEEL01 {
    float:left;
      width:355px;
      height:160px; }

    .QEEL02 {
      float:right;
    width: 355px;
      height: 160px;  
      margin-bottom: 30px;
    }


    .qeeltexted {
      display: block;
      position: relative;
      width:500px;
      overflow:auto;

      font-family: 'century gothic', Tahoma,Verdana serif;
      color:#0E2433;
      font-size:11px;
      text-align:justify;
      margin-top: 15px;
    }
    /** QEEL FIN **/



    /****** SELECTION CODES SPOILER CITATION & CO ******/

    .selectCode {
      float:right;
      font-family: tahoma;
      font-weight: bold;
      color: #5C5C59;
      font-size: 11px;
      cursor:pointer;
    }

    div.cont_code { clear: right; }

    .code { color:#5C5C59;
      padding:4px;
     display:block;
      background-color:#f5f0e7;
      border:#dfd3c0 1px solid;
    }

    .quote { padding:4px;
      display:block;
      background-color:#f5f0e7;
      border:#dfd3c0 1px solid;
      padding-top:10px;
      padding-bottom:10px;
      padding-left:30px;
      padding-right:30px;
      background-image:url(http://image.noelshack.com/fichiers/2015/39/1442939320-open1.png), url(http://image.noelshack.com/fichiers/2015/39/1442939320-close1.png);
      background-position:top left,bottom right;
      background-repeat:no-repeat,no-repeat;
    }
      
      .spoiler_content,.spoiler_closed {
       display:block;
      background-color:#f5f0e7;
      border:#dfd3c0 1px solid;
      }
      
    .spoiler{ color:#;}
    /** SELECTION CODES FIN **/


    /**CHATBOX**/

    body.chatbox {
      background-color:#ebe4d6;
      border-top:#2db38f 2px solid;
      border-left:#dfd3c0 0.5px solid;
      border-right:#dfd3c0 0.5px solid;
      border-bottom:#dfd3c0 0.5px solid;
    }

    #chatbox_header {background-color:#e4dbcb;}
    #chatbox_members {border-right: 1px dotted #dfd3c0;}
    #chatbox_footer {margin-bottom: 8px;}

    /** EDiTEUR DE MESSAGE DEBUT  **/

    /*--- Bloc réponse rapide ---*/
     
    .sceditor-container.ltr.sourceMode {background-color: #f5f0e7 !important;padding:2px;}
    .sceditor-container.ltr.wysiwygMode {background-color: #f5f0e7 !important;padding:2px;}
     
    /*---  Partie supérieur contenant les outils ---*/
     
    div.sceditor-toolbar {
    background-color: #f0eadf !important;
    }
     
    /*---  Partie texte area : fond ---*/
     
    .sceditor-container iframe, .sceditor-container textarea {
    background-color: #f5f0e7 !important;
    text-align:justify;
    margin:0 !important;
    line-height: 16px;
    color: #5C5C59 !important;
    font-size:11px !important;
      padding:2px;
    }
     
    /*---  Groupe de boutons ---*/
     
    div.sceditor-group {
    background-color: #e7decf !important; }
     
    /*---  Boutons ---*/
     
    a.sceditor-button {
    }
     
    /*---  Boutons sélectionnés ---*/
     
    a.sceditor-button.hover {
    background-color: #f5f0e7 !important;
    }

    /** EDiTEUR DE MESSAGE FIN  **/

    /** Compteur de mot **/
    .word-count {background-color:#f5f0e7;
    font-family: Ubuntu Mono,cursive;
      font-size: 12px;
      display:block;
    text-align: center;}


     /** Suprime  "Dernière édition par... le" **/
      tr.post span.gensmall { display: none; }

    /** BOUTON HAUT/BAS **/

    .bouhautbas {
                bottom: 40px;
                right: 100px; /* remplacez left par right pour afficher les boutons à droite */
                position: fixed;
                z-index: 100;
            }

    /** Liens du forum **/
          a:link {color:#9a1f65; text-decoration: none;text-shadow: 1px 1px 0 #; }
    a:visited {color:#9a1f65; text-decoration: none;text-shadow: 1px 1px 0 #;}
    a:hover{color:#c01476;text-decoration: none !important; text-shadow: 1px 1px 0 #;
      transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -htm-transition: 0.2s;
    -webkit-transition: 0.2s;}

    a { text-decoration: none;}
    a:hover { text-decoration: none; }
    • Revenir en haut
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Lun 25 Jan 2016 - 13:26

    Hello!
    Toujours d'actualité? ^^


    Dernière édition par NyoTheNeko le Lun 25 Jan 2016 - 14:53, édité 1 fois



    • Revenir en haut
    Zomega
    Zomega
    FémininAge : 33Messages : 31

    Lun 25 Jan 2016 - 14:09

    Bonjour,

    Oui ma demande est toujours d'actualité :)
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 4 Fév 2016 - 3:12

    Hello!

    Toujours d'actualité? Essaie de upper au moins une fois par semaine pour qu'on sache que c'est toujours d'actualité Wink



    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 14 Fév 2016 - 5:03

    N'ayant pas de nouvelles depuis 20 jours, j'archive.



    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Dim 28 Avr 2024 - 20:06