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.

Le Deal du moment : -50%
-50% Baskets Nike Air Huarache Runner
Voir le deal
69.99 €

    (HALLOW) Catégories sobres, pour Forum One Piece

    Popcorn
    Popcorn
    MasculinAge : 34Messages : 41

    Mer 5 Nov 2014 - 17:37

    Rappel du premier message :

    Ma demande



    Tout d'abord bonjour ou bonsoir, au choix ! Ensuite, merci à celui ou celle qui s'occupera de ma commande, c'est sympa de prendre le temps. Je souhaiterais un Codage Catégorie, c'est quelque chose d'assez sobre, mais comme je n'arrive jamais à trouver ce que je veux, je me tourne vers vous.

    Schéma(s) et Eléments
    Schémas : Schéma Catégorie
    Schéma Forums
    Tailles des éléments : La taille générale du Forum est de 55%, donc pour la largeur des catégories je pensais à quelque chose comme 1000px, de ce fait l'image en tête de catégorie est de 1000px par 109. Concernant l'image "No New, New, Lock" elles font 200x150.
    Pour ce qui est de la taille du Texte, le nom des Catégories sera en 32px. Quant à celui du Forum, je dirais 22px. Pour ce qui est des derniers messages, la taille du texte du forum suffira (Au besoin, on dira 12px s'il en faut une).
    Les bordures feront quant à elle 2px.
    Effets voulus : Tout d'abord, un Arrondis en haut, de chaque côté (Il fait 50px l'arrondis).
    Ensuite, derrière l'image "No New, New, Lock" il y aura le dernier message posté, donc lorsqu'on passe la souris sur l'image, cette dernière ce décale vers la droite pour faire apparaitre le texte qui se cache en dessous, à savoir le dernier message.
    La liste des sujets du Forum seront simplement en liste dans le deuxième cadre (Indiqué "Liste des Sujets" sur le Schéma).
    Sur mon Forum, je n'ai plus le nombre de vues et de message, cela donne quelque chose comme ça "Il y a X messages dans X sujets.", j'aimerais si possible que ce soit pareil sur ces catégories. Elle est tout à droite, alignée au nom du forum (c'est assez discret, donc quelque chose comme 12px). Si ce n'est pas possible, je m'en passerais ou même si c'est gênant, je m'en passerais aussi, pas de soucis.

    Sue le second Schéma, intitulé "Schéma Forum" il s'agit de l'affichage des Forums, j'aimerais simplement que les l'espèce de tableau disparaisse et que ça donne quelque chose de plus Fluide, comme sur le Schéma. Donc plus de traits, simplement une bordure en 2px.
    Version de votre forum : PHPBB2


    Ressources
    Si vous souhaitez des images de fond précises ou des icones etc... mettez-les ici. Attention : ces images seront dans le code mis en libre service.
    Image en tête de Catégorie
    Image "New"
    Image "No New"
    Image "Lock"

    Autres précisions ?
    Sur le premier Schéma, il y a un "Img 500x150" , il s'agit simplement d'un petit codage que je rajouterais après (Dans la description des Catégories). Une image avec une transition, pour cacher la description du Forum, mais ça je devrais pouvoir le faire sans trop de soucis. Néanmoins, lorsque je la met, si elle pouvait être alignée au reste, ce serait nickel, à moins que ça se fasse tout seul ? Au quel cas, ça ira comme ça. C'est déjà bien si j'ai les catégories, je veux pas en rajouter des tonnes.

    Pour finir, bien que je demande tout ça, si quelque chose ne colle pas ou bien ne donne pas le résultat escompté, je vous laisse vous adapter. Tant que ça reste dans l'idée, ça me va. Je veux pas que vous vous preniez la tête à vous arracher les cheveux quand même.

    Si jamais il manque quelque chose ou que vous avez besoin d'un renseignement supplémentaire, n'hésitez pas et bien sûr, encore un grand merci.



    Dernière édition par Popcorn le Mer 3 Déc 2014 - 19:55, édité 1 fois
    Anonymous
    Invité

    Sam 22 Nov 2014 - 19:09

    Du coup je te passe les codes ? Ou tu trouves quelque chose à retoucher ? :O
    Popcorn
    Popcorn
    MasculinAge : 34Messages : 41

    Sam 22 Nov 2014 - 19:46

    Ah non, du tout, c'est nickel ! =D
    Anonymous
    Invité

    Sam 22 Nov 2014 - 20:21

    Espérons que ça reste en place à l'installation !

    Donc, pour le 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 -->
    <div class="cate_titre">{catrow.tablehead.L_FORUM}</div><div class="ensemble_forum1"><img src="http://img11.hostingpics.net/pics/604824ImgHautCat.png" class="illustration_cate" />
      </div>
       <!-- END tablehead -->
       <!-- BEGIN cathead -->
       <!-- END cathead -->
       <!-- BEGIN forumrow --><div class="ensemble_forum">
    <a class="forumlink_name" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> <div class="stats">Il y a {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</div>
     
    {catrow.forumrow.FORUM_DESC}

    <div class="sous_forum"><span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
            <script type="text/javascript">
              jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
            </script></div>

    <div class="derniers_news"><div class="derniers_news_img"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div><div class="derniers_news_description">{catrow.forumrow.LAST_POST}</div></div>
        <div style="clear: both;"></div></div>
       <!-- END forumrow -->
       <!-- BEGIN catfoot -->
       
       <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    <div style="width: 100%; border-bottom: 3px solid #322923;"></div>
    <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
    <link href='http://fonts.googleapis.com/css?family=Julius+Sans+One|Lily+Script+One|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>


    Le CSS :
    Code:
     /* ------------------------------------- CATEGORIES ------------------------------------- */

    /*** MISE EN FORME TITRES CATEGORIES ***/
    .cate_titre h2 {
      text-align: center;
      font-size: 32px;
      font-family: 'Julius Sans One', sans-serif;
      color: #322923;
    }


    /*** MISE EN FORME DU CONTENU ***/
    .ensemble_forum {
      background-color: #EBE6E2;
      border-left: 3px solid #322923;
      border-right: 3px solid #322923;
      position: relative;
      height: 230px;
    }

    .ensemble_forum1 {
      border-radius: 50px 50px 0px 0px;
      border-top: 3px solid #322923;
      border-left: 3px solid #322923;
      border-right: 3px solid #322923;
    }


    /*** ILLUSTRATION QUI SUIT LE TITRE DE CATEGORIE ***/
    .illustration_cate {
      border-radius: 50px 50px 0px 0px;
    }


    /*** MISE EN FORME NOM DU FORUM ***/

    /* SIMPLE */
    a.forumlink_name {
      font-size: 22px;
      font-family: 'Lily Script One', cursive;
      color: #446059;
      position: absolute;
      left: 1.5em;
      margin-top: 20px;
    }

    /* EN HOVER */
    a.forumlink_name:hover {
      color: #769E95;
      text-decoration: none !important;
    }


    /*** MISE EN FORME DES STATISTIQUES ***/

    /* SIMPLE */
    .stats {
      font-size: 14px;
      position: absolute;
      right: 5em;
      font-family: 'Open Sans Condensed', sans-serif;
      margin-top: 30px;
    }

    /* EN HOVER */
    .stats:hover {
      font-weight: bold;
    }


    /*** DESCRIPTION AU SURVOL DE L'IMAGE ***/
    .description {
      width: 500px;
      height: 150px;
      overflow: hidden;
      position: absolute;
      margin-top: 60px;
      left: 2em;
      background-color: #D3D1D1;
    }
       
    .description_img {
      position: relative;
      z-index: 2;
      width: 500px;
      height: 150px;
      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;
    }
       
    .description:hover .description_img {
      margin-left: 500px;
      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;
    }
       
    .description_desc {
      position: relative;
      z-index: 1;
      width: 470px;
      height: 90px;
      margin-top: -140px;
      text-align: justify;
      font-size: 11px;
      color: #446059;
      padding: 15px;
      overflow: auto;
      background-color: #D3D1D1;
    }


    /*** MISE EN FORME DES SOUS-FORUM ***/

    /* POSITIONNEMENT */
    .sous_forum {
      position: absolute;
      margin-top: 39px;
      right: 23em;
      width: 150px;
      height: 120px;
      overflow: auto;
      padding: 15px;
      background-color: #D3D1D1;
      font-family: 'Lily Script One', cursive;
      font-size: 11px;
    }

    /* LIENS SIMPLES*/
    .sous_forum a{
      color: #446059;
    }

    /* LIENS AU SURVOL */
    .sous_forum a:hover {
      color: #769E95;
      text-decoration: none !important;
    }


    /*** DERNIERS MESSAGES AU SURVOL DE L'IMAGE ***/
    .derniers_news {
      width: 200px;
      height: 150px;
      overflow: hidden;
      position: absolute;
      margin-top: 38px;
      right: 2em;
      background-color: #373535;
    }
       
    .derniers_news_img {
      position: relative;
      z-index: 2;
      width: 200px;
      height: 150px;
      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;
    }
       
    .derniers_news:hover .derniers_news_img {
      margin-left: 500px;
      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;
    }
       
    .derniers_news_description {
      position: relative;
      z-index: 1;
      width: 170px;
      height: 50px;
      margin-top: -120px;
      text-align: center;
      font-size: 14px;
      color: #D3D1D1;
      padding: 15px;
      overflow: auto;
      background-color: #373535;
      font-family: 'Lily Script One', cursive;
    }

    /* LIENS SIMPLES */
    .derniers_news_description a {
      color: #D3D1D1;
    }

    /* LIENS AU SURVOL */
    .derniers_news_description a:hover {
      color: #769E95;
      text-decoration: none !important;
    }

    /* ------------------------------------- FIN CATEGORIES ------------------------------------- */


    Et les descriptions de forum :
    Code:
    <div class="description">
        
       <div class="description_img">
            <img src="http://i59.servimg.com/u/f59/17/97/89/15/sans_t10.png" /> 
       </div>
        
       <div class="description_desc">
            Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est. Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est. Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est. 
       </div>
    </div>
       
    <div style="clear: both;">
    </div>
    Popcorn
    Popcorn
    MasculinAge : 34Messages : 41

    Dim 23 Nov 2014 - 20:15

    C'est nickel ! Je viens de l'installer sur mon Forum de Test, il ne me reste plus qu'à tout préparer pour mettre ça sur mon Forum RP.

    Un grand merci pour le temps que tu m'as consacré, c'est parfait !
    Anonymous
    Invité

    Dim 23 Nov 2014 - 21:33

    A la bonne heure Very Happy
    Je posterai le LS dés que j'aurai 5 minutes.

    Bonne continuation alors Wink
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 1 Déc 2014 - 4:03

    Hey!

    Popcorn> si ta demande est complète, n'oublie pas de mettre l'icône "terminé" Wink

    Halloween> it's awesome *o*



    Contenu sponsorisé


      La date/heure actuelle est Mer 8 Mai 2024 - 21:59