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 à ne pas rater :
Xiaomi Mi Smart Camera 2K Standard Edition (design compact / support ...
11.39 €
Voir le deal

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

    Popcorn
    Popcorn
    MasculinAge : 34Messages : 41

    Mer 5 Nov 2014 - 17:37

    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
    Popcorn
    Popcorn
    MasculinAge : 34Messages : 41

    Dim 9 Nov 2014 - 12:37

    Petit up, mais j'imagine que tout le monde est pas mal occupé, mais je veux pas sombrer dans les abysses ^^
    Anonymous
    Invité

    Mar 11 Nov 2014 - 14:34

    Hey !

    Par "liste de sujets", tu entends les sous-forum ? :O Et ça me parait immense 1 000px pour le contenu que tu proposes Oo
    Popcorn
    Popcorn
    MasculinAge : 34Messages : 41

    Mar 11 Nov 2014 - 17:25

    Bonsoir ! Oui, la "Liste des sujets" c'est les sous-forums, désolé.
    Bah en fait... j'ai une PA avec une image au dessus qui fait déjà 1050 de large, donc je pensais partir sur 1000 pour pas que ça change trop. Parce que j'ai l'image "new, no new, lock" qui fait 200px de large, il y a les cadre des sous forums et après il y une image de 500px de large pour présenter le Forum (Comme l'Administration, les Présentations,...).
    Après, si tu penses qu'il vaut mieux voir à réduire... je peux, c'est à dire que je me rends pas forcément compte des dimensions finales, puisque le schéma est fait plus ou moins à l'échelle.

    Merci d'avoir pris le temps de me répondre en tout cas.
    Anonymous
    Invité

    Mar 11 Nov 2014 - 17:31

    Je vais tenter alors :3
    Dans tous les cas, je peux réduire l'image par le biais du codage, donc ...

    J'essaie de finir au plus vite !
    Popcorn
    Popcorn
    MasculinAge : 34Messages : 41

    Mar 11 Nov 2014 - 17:34

    Oui, n'hésite pas à adapter si cela ne va pas, la taille de l'image peut varier ce n'est pas un souci en soit.

    Merci beaucoup, c'est super sympa.
    Anonymous
    Invité

    Mar 11 Nov 2014 - 17:39

    Juste une question, cette illustration, c'est la même pour chaque catégorie, non ? Et quand les forum se suivent, ça donne bien ça grossièrement ? Pour les couleurs, une idée ou à ma guise ? :3
    Popcorn
    Popcorn
    MasculinAge : 34Messages : 41

    Mar 11 Nov 2014 - 19:07

    Bah, grossièrement oui, il y a le "border" autour qui continue, sinon c'est tout.
    Bah niveau couleurs, oui, je te laisse faire comme tu le sens. Logiquement ce sera blanc, mais comme le reste de mon thème n'est pas terminé, ça n'a pas d'importance =).
    Anonymous
    Invité

    Mer 12 Nov 2014 - 21:52

    Pour le moment, j'en suis . J'ai un peu de mal avec les couleurs comme tu peux le voir u.u
    Je pense terminer demain.
    Popcorn
    Popcorn
    MasculinAge : 34Messages : 41

    Mer 12 Nov 2014 - 23:13

    Ah j'aime beaucoup ! J'ai hâte de voir le résultat final, mais c'est déjà du très bon boulot =)
    Popcorn
    Popcorn
    MasculinAge : 34Messages : 41

    Lun 17 Nov 2014 - 18:28

    Bonsoir ! Petit passage éclair, pour savoir où ça en est ? Loin de moi l'idée de te presser, je veux juste pas être oublié ^^' Tu es surement très occupée, donc j'veux pas paraitre insistant.
    Anonymous
    Invité

    Lun 17 Nov 2014 - 19:13

    Non non, tu fais bien de relancer ! Je rencontre une petite difficulté dont j'ai du mal à trouver l'origine, je continue de chercher, rassure-toi.

    Bonne soirée :)
    Popcorn
    Popcorn
    MasculinAge : 34Messages : 41

    Lun 17 Nov 2014 - 20:00

    Ok pas de soucis, bon courage dans ce cas !
    Anonymous
    Invité

    Sam 22 Nov 2014 - 17:24

    Hey !

    J'ai résolu le beug d'apparence des sous-forum :3
    Par contre pour la mise en forme des sujets, ça ne se joue pas au niveau du codage : dans les couleurs il te suffit de mettre la même couleur pour les bordures et pour le fond :3
    Popcorn
    Popcorn
    MasculinAge : 34Messages : 41

    Sam 22 Nov 2014 - 19:03

    Bonsoir !
    Oh, c'est cool ! Désolé de t'avoir donné autant de mal, je ne pensais pas ^^'
    En tout cas, c'est cool si tu as réussie =)
    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 Jeu 28 Mar 2024 - 17:12