Commandes de codage (fermé)
    Message le Sam 1 Avr - 12:12

    Commandes

    Bienvenue à toi dans cette humble boutique. (:

    Ce sujet est dédié aux commandes de codage. Je réalise principalement des commandes de template mais les autres codes (sujets, fiches, etc.) peuvent également être réalisés. Je peux mettre du temps à réaliser un code, aussi mon nombre de commandes est-il limité. Pensez à vérifier dans les derniers messages postés le nombre de places restantes.
    Update 27.05.2017 : je ne prends désormais qu'une seule commande par semaine. Vérifiez le statut de la boutique (ouvert ou fermé) pour savoir si j'ai une place ou non.


    A savoir

    • Je peux réaliser des templates pour toute version de forum (phpBB, invision, punBB).
    • J'essayerai dans la mesure du possible de respecter l'esthétique de votre forum.
    • Je peux réaliser des onglets, des boutons cliquables et des effets de survol sans problème, tant que vous me précisez quelles sont vos attentes.
    • Je ne graphe pas, donc toutes les images que vous souhaitez voir dans le code doivent être fournies lors de la commande. Sinon, j'utiliserai les images de base proposées par Forumactif.
    • Ce que je code est destiné à votre usage personnel. Vous pouvez donc le réutiliser sur d'autres forums que celui proposé, cela ne me dérange pas du tout. En revanche, si vous ne l'utilisez pas dans le mois qui suit votre commande, je me réserve le droit de le proposer en libre service. De même, merci de ne le redistribuer sans mon accord. ;)
    • J'accepte toutes les commandes qui respectent le formulaire et les conditions posées, mais me réserve le droit de refuser si je n'ai pas les compétences techniques nécessaires à la réalisation de la commande ou si votre forum est connu pour avoir un passif de plagiat.
    • Un template ou un sujet = une commande. Vous pouvez passer plusieurs commandes à la suite pour le même forum, mais n'en abusez pas non plus, il faut aussi laisser un peu de place aux autres. :) Vous pouvez désormais demander jusqu'à trois templates différents lors d'une commande, à condition que ce soit pour le même forum.

    Les conditions

    • Pour toute commande dédiée à un forum, il doit être ouvert ; si ce n'est pas le cas, le projet doit être bien avancé.
    • Le formulaire proposé ci-dessous est obligatoire, mais peut être modifié si vous le désirez.
    • Vous devez obligatoirement fournir une maquette présentant vos attentes (une simple image réalisée avec Paint suffit) et fournir les images à intégrer s'il y en a. Vous pouvez ensuite ajouter toutes les précisions nécessaires, et si vous me fournissez quelques codes couleurs et les polices de votre forum, c'est mieux. Plus vous êtes précis, plus vous avez des chances que cela corresponde à vos attentes.

    Des exemples

    Voici quelques exemples de réalisation de template (certaines pouvant être anciennes) : messages (1), messages (2), messages (3), début de catégories, colonne

    Et pour les sujets (tous les codes ne sont pas complets cela dit) : sujet (1), présentation (1), présentation (2), présentation (3), début de présentation

    Ces codes ont été réalisés pour un usage personnel ou à titre d'entraînement, au niveau esthétique il est donc possible de faire des choses très différentes. :)


    Formulaire

    N'oubliez pas de supprimer les indications en italique. ;)


    Code:
    <h2>Commande</h2>
    <b>Type de commande :</b> réponse <i>(template, sujet, fiche, etc.)</i>
    <b>Lien du forum :</b> réponse <i>(si commande de template, sinon supprimez cette ligne)</i>
    <b>Maquette(s) :</b> réponse
    <b>Image(s) à insérer :</b> réponse <i>(si vous n'en avez pas, supprimez cette ligne)</i>
    <b>Précisions :</b> réponse <i>(couleurs, polices, informations spécifiques à savoir, exigences, etc.)</i>
    Message le Dim 9 Avr - 13:53
    Salut salut!!! Comme promis, je reviens :dummy:  Pour mon forum cette fois-ci! Qui est toujours en première phase de développement haha.

    Commande


    Type de commande : fiche de présentation
    Maquette(s) : par ici ♥️
    Image(s) à insérer : cette image (format 200x495 si jamais)
    Précisions :les couleurs utilisées sont: vert ; #79b088 gris clair ; #d8d8d8 gris foncé ; #2c2c2c et la typo c'est du arial en 11, tout simplement. black italic pour les titres, black simple pour les sous-titres. j'aimerais aussi qu'il y ait un scroll automatique pour les section "identité" et "survie", et pas de scroll pour les autres parties. si c'est possible un scroll pas trop voyant? j'ai fais du 575x950 mais la longueur c'était au pif, donc c'est pas grave si ça change. pour le texte met n'importe quoi pour remplir, je m'en occuperais hihi ♥️

    si c'est possible, j'aimerais faire une deuxième commande, parce que je pense qu'elle est toute simple et rapide et qu'elle va avec la première, sinon j’attendrais c'est pas grave!

    Commande


    Type de commande : présentation de post
    Maquette(s) : par là ♥️
    Précisions : même couleurs et même typo, sauf que le titre est à 30px au lieu de 11. il me faut la possibilité de rajouter des sous-titres si besoin.

    Voilà voilà! Un grand merci d'avance, comme la dernière fois, tu pourras mettre les codes en libre service si tu veux, et n'hésite pas à insérer ton copyright quelque part surtout! Si tu acceptes de faire les deux commandes d'un coup, tu peux commencer par celle que tu veux, et comme ça ne presse pas, prends tout ton temps  :meow:

    edit ; oh! je viens seulement d'y penser, si un jour je change de thème, du coup je vais sans doute changer les couleurs de ces posts, au moins le vert. et du couuup, ya pas un petit truc dans le codage qui pourrait faire que si je le change une fois quelque part ça le change partout? j'ai déjà vu ça sur un forum mais je sais plus où. enfin si tu sais pas tant pis je changerai à chaque fois, c'est juste un petit détail!

    edit 11/04 ; entre temps j'ai fais les maquettes pour les fiches de liens huhu, mais je te harcèle pas (encore) avec ça c:





    Message le Mar 11 Avr - 10:20
    Hello, je viens passer commande dans ta merveilleuse boutique :lovely: J'adore ce que tu fais (et j'en suis surtout incapable :bave: )
    Pour ne pas trop te surcharger je commande juste mes Catégories chez toi et mes autres éléments chez d'autres personnes, je ne voudrais pas trop en demander :pong:

    Commande


    Type de commande : Template Catégories
    Lien du forum : http://langzyliah.forumactif.org/
    Maquette(s) :
    Clic!:
    Précisions :Quelque chose de neutre, gris, blanc, noir.. De toute façon je sais un peu bidouiller les codes donc je saurais modifier. Pour la typo, du Cinzel et comme les maquettes le montrent j'aimerais un petit effet d'opacité sur l'image afin de voir la description. Et même si je pense que c'est "évident", quand nous aurons beaucoup de sous forums, que ça se mette à la ligne xD

    Merci beaucoup d'avance, j'ai hâte de voir ce que tu vas faire :miou:
    Message le Mar 11 Avr - 14:31
    Bonjour à vous deux. :kyaaa:
    Je prends vos commandes sans problème, mais je mettrai peut-être un peu de temps à tout faire. Dans tous les cas je vais essayer de faire en sorte à ce que d'ici jeudi soir au plus tard vous ayez chacun un essai. :miou:

    Zizi, je vais commencer par ta présentation de post vu que ce sera un peu plus court à faire. Comme ça je pourrai me consacrer ensuite à ta présentation (ta maquette est magnifique je dois dire :ooooh: )

    Elih, merci pour tes compliments. :lovely:  Si j'ai un peu de temps plus tard tu pourras éventuellement passer une seconde commande, il n'y a pas de problème. ;)


    EDIT : voilà déjà le post de présentation. Le texte est adapté à la couleur du forum du coup. (pour ce qui est des couleurs, j'adapterai le code à la fin, quand j'aurai tout fait) (du coup tu peux déjà me passer ta rs, je m'en occuperai)

    Titre
    sous-titre

    Donec quam diam, molestie a laoreet in, dignissim a eros. Vestibulum blandit bibendum turpis, a venenatis est tristique in. Donec ac metus sem. Fusce a vulputate diam. Fusce eu consectetur turpis. Donec placerat vitae enim nec varius. Praesent quis laoreet leo, a pharetra massa. Morbi et risus eu quam fermentum hendrerit. Donec blandit ultrices scelerisque. Phasellus malesuada commodo tortor, a suscipit sem fringilla sit amet. Nam congue luctus consectetur. Pellentesque rhoncus dignissim metus eget tempor.


    Donec quam diam, molestie a laoreet in, dignissim a eros. Vestibulum blandit bibendum turpis, a venenatis est tristique in. Donec ac metus sem. Fusce a vulputate diam. Fusce eu consectetur turpis. Donec placerat vitae enim nec varius. Praesent quis laoreet leo, a pharetra massa. Morbi et risus eu quam fermentum hendrerit. Donec blandit ultrices scelerisque. Phasellus malesuada commodo tortor, a suscipit sem fringilla sit amet. Nam congue luctus consectetur. Pellentesque rhoncus dignissim metus eget tempor.

    Message le Jeu 13 Avr - 19:45
    Me revoilà. :ooooh:
    Du coup j'avais déjà posté une première partie pour toi Zizi, je ne sais pas si tu as vu. Normalement je peux commencer la présentation demain. :haha:

    Pour Elih, voici ce que ça donne comme structure : http://sept-cinq-zero.forumactif.org/
    L'image utilisée est de 500 pixels. La hauteur actuelle est de 115 pixels. Mais évidemment ces tailles sont adaptables.
    Je n'ai pas mis la description jusqu'en haut, car j'avais peur qu'en recouvrant le titre du forum, ce soit moins pratique pour tes utilisateurs mais si tu préfères, je m'arrange pour qu'il n'y ait aucun conflit. :miou:

    Encore désolé pour le temps que cela prend, j'ai été malade cette semaine et ça m'a vidé de mon énergie. =/
    Message le Jeu 13 Avr - 20:31
    Oh non je n'avais pas vu! Zut alors =^= Mais c'est super hiiii merci ♥️

    Du coup pour ma RS ça ce passe par ici!
    edit ; j'ai oublié de te filer l'image pardon! du coup c'est rajouté dans le lien normalement.
    et donc comme tu peux le voir sur la deuxième maquette pour les liens, l'image est en noir et blanc et quand on la survole ya le carré transparent qui apparaît! magie :dummy: c'est possible ça d'ailleurs, de faire en sorte que les images se mettent automatiquement en noir et blanc? (taille : 240x240 px)

    Merci merciiii :dummy:





    Message le Ven 14 Avr - 11:21
    Woaw je n'avais pas vu, merci c'est absolument parfait comme ça, c'est exactement ce que j'avais en tête !

    Merci beaucoup <3
    Message le Sam 15 Avr - 16:02
    Me revoilà !

    Zizi aucun souci pour cet effet de survol !
    Du coup la présentation est quasi achevée (il manque la mise en page des barres de défilement mais étant sur firefox je le ferai bientôt, promis)
    Prénom Nom
    Identité

    Surnom(s) ; écrire ici

    Donec quam diam, molestie a laoreet in, dignissim a eros. Vestibulum blandit bibendum turpis, a venenatis est tristique in. Donec ac metus sem. Fusce a vulputate diam. Fusce eu consectetur turpis. Donec placerat vitae enim nec varius. Praesent quis laoreet leo, a pharetra massa. Morbi et risus eu quam fermentum hendrerit. Donec blandit ultrices scelerisque. Phasellus malesuada commodo tortor, a suscipit sem fringilla sit amet. Nam congue luctus consectetur. Pellentesque rhoncus dignissim metus eget tempor. Donec quam diam, molestie a laoreet in, dignissim a eros. Vestibulum blandit bibendum turpis, a venenatis est tristique in. Donec ac metus sem. Fusce a vulputate diam. Fusce eu consectetur turpis. Donec placerat vitae enim nec varius. Praesent quis laoreet leo, a pharetra massa. Morbi et risus eu quam fermentum hendrerit. Donec blandit ultrices scelerisque. Phasellus malesuada commodo tortor, a suscipit sem fringilla sit amet. Nam congue luctus consectetur. Pellentesque rhoncus dignissim metus eget tempor. Donec quam diam, molestie a laoreet in, dignissim a eros. Vestibulum blandit bibendum turpis, a venenatis est tristique in. Donec ac metus sem. Fusce a vulputate diam. Fusce eu consectetur turpis. Donec placerat vitae enim nec varius. Praesent quis laoreet leo, a pharetra massa. Morbi et risus eu quam fermentum hendrerit. Donec blandit ultrices scelerisque. Phasellus malesuada commodo tortor, a suscipit sem fringilla sit amet. Nam congue luctus consectetur. Pellentesque rhoncus dignissim metus eget tempor.

    Survie

    Intitulé ; réponse
    Donec quam diam, molestie a laoreet in, dignissim a eros. Vestibulum blandit bibendum turpis, a venenatis est tristique in. Donec ac metus sem. Fusce a vulputate diam. Fusce eu consectetur turpis. Donec placerat vitae enim nec varius. Praesent quis laoreet leo, a pharetra massa. Morbi et risus eu quam fermentum hendrerit. Donec blandit ultrices scelerisque. Phasellus malesuada commodo tortor, a suscipit sem fringilla sit amet. Nam congue luctus consectetur. Pellentesque rhoncus dignissim metus eget tempor. Donec quam diam, molestie a laoreet in, dignissim a eros. Vestibulum blandit bibendum turpis, a venenatis est tristique in. Donec ac metus sem. Fusce a vulputate diam. Fusce eu consectetur turpis. Donec placerat vitae enim nec varius. Praesent quis laoreet leo, a pharetra massa. Morbi et risus eu quam fermentum hendrerit. Donec blandit ultrices scelerisque. Phasellus malesuada commodo tortor, a suscipit sem fringilla sit amet. Nam congue luctus consectetur. Pellentesque rhoncus dignissim metus eget tempor. Donec quam diam, molestie a laoreet in, dignissim a eros. Vestibulum blandit bibendum turpis, a venenatis est tristique in. Donec ac metus sem. Fusce a vulputate diam. Fusce eu consectetur turpis. Donec placerat vitae enim nec varius. Praesent quis laoreet leo, a pharetra massa. Morbi et risus eu quam fermentum hendrerit. Donec blandit ultrices scelerisque. Phasellus malesuada commodo tortor, a suscipit sem fringilla sit amet. Nam congue luctus consectetur. Pellentesque rhoncus dignissim metus eget tempor.

    Psychologie

    Donec quam diam, molestie a laoreet in, dignissim a eros. Vestibulum blandit bibendum turpis, a venenatis est tristique in. Donec ac metus sem. Fusce a vulputate diam. Fusce eu consectetur turpis. Donec placerat vitae enim nec varius. Praesent quis laoreet leo, a pharetra massa. Morbi et risus eu quam fermentum hendrerit. Donec blandit ultrices scelerisque. Phasellus malesuada commodo tortor, a suscipit sem fringilla sit amet. Nam congue luctus consectetur. Pellentesque rhoncus dignissim metus eget tempor. Donec quam diam, molestie a laoreet in, dignissim a eros. Vestibulum blandit bibendum turpis, a venenatis est tristique in. Donec ac metus sem. Fusce a vulputate diam. Fusce eu consectetur turpis. Donec placerat vitae enim nec varius. Praesent quis laoreet leo, a pharetra massa. Morbi et risus eu quam fermentum hendrerit. Donec blandit ultrices scelerisque. Phasellus malesuada commodo tortor, a suscipit sem fringilla sit amet. Nam congue luctus consectetur. Pellentesque rhoncus dignissim metus eget tempor. Donec quam diam, molestie a laoreet in, dignissim a eros. Vestibulum blandit bibendum turpis, a venenatis est tristique in. Donec ac metus sem. Fusce a vulputate diam. Fusce eu consectetur turpis. Donec placerat vitae enim nec varius. Praesent quis laoreet leo, a pharetra massa. Morbi et risus eu quam fermentum hendrerit. Donec blandit ultrices scelerisque. Phasellus malesuada commodo tortor, a suscipit sem fringilla sit amet. Nam congue luctus consectetur. Pellentesque rhoncus dignissim metus eget tempor.

    Histoire

    Donec quam diam, molestie a laoreet in, dignissim a eros. Vestibulum blandit bibendum turpis, a venenatis est tristique in. Donec ac metus sem. Fusce a vulputate diam. Fusce eu consectetur turpis. Donec placerat vitae enim nec varius. Praesent quis laoreet leo, a pharetra massa. Morbi et risus eu quam fermentum hendrerit. Donec blandit ultrices scelerisque. Phasellus malesuada commodo tortor, a suscipit sem fringilla sit amet. Nam congue luctus consectetur. Pellentesque rhoncus dignissim metus eget tempor. Donec quam diam, molestie a laoreet in, dignissim a eros. Vestibulum blandit bibendum turpis, a venenatis est tristique in. Donec ac metus sem. Fusce a vulputate diam. Fusce eu consectetur turpis. Donec placerat vitae enim nec varius. Praesent quis laoreet leo, a pharetra massa. Morbi et risus eu quam fermentum hendrerit. Donec blandit ultrices scelerisque. Phasellus malesuada commodo tortor, a suscipit sem fringilla sit amet. Nam congue luctus consectetur. Pellentesque rhoncus dignissim metus eget tempor. Donec quam diam, molestie a laoreet in, dignissim a eros. Vestibulum blandit bibendum turpis, a venenatis est tristique in. Donec ac metus sem. Fusce a vulputate diam. Fusce eu consectetur turpis. Donec placerat vitae enim nec varius. Praesent quis laoreet leo, a pharetra massa. Morbi et risus eu quam fermentum hendrerit. Donec blandit ultrices scelerisque. Phasellus malesuada commodo tortor, a suscipit sem fringilla sit amet. Nam congue luctus consectetur. Pellentesque rhoncus dignissim metus eget tempor.

    Pseudo

    le texte ici



    Elih voici donc le code (si jamais tu veux le modifier tu peux le faire) :
    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>

    <div class="cates">
    <!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="titre-cate">{catrow.tablehead.L_FORUM}</div><div class="fond-cate">
     <!-- END tablehead -->
     <!-- BEGIN forumrow -->
      <div class="cate">
        <div class="titre-description">
          <h3>
            <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
          </h3>
          {catrow.forumrow.FORUM_DESC}
        </div>
        <div class="last-post">
          <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          <br />
          {catrow.forumrow.LAST_POST}
        </div>
      </div>
      
      <div class="cate">
        <div class="sous-forum">
          {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </div>
        <div class="suj-mes">
          {catrow.forumrow.TOPICS} sujets {catrow.forumrow.POSTS} messages
        </div>
      </div>
     
     
     

     
     <!-- END forumrow -->
     <!-- BEGIN catfoot -->
     <!-- END catfoot -->
      <!-- BEGIN tablefoot --></div>
    <!-- END tablefoot --><!-- END catrow -->
    </div>

    Code:
    /* fond blanc des catégories */
    .cates {
      width: 800px;
      padding: 30px;
      background: #FFF;
      margin: 0 auto;
    }
    /* titre des catégories */
    .titre-cate {
      background: #BFBFBF;
      height: 30px;
      border-radius: 50px 50px 0 0;
      text-transform: uppercase;
      position: relative;
    }
    .titre-cate h2 {
      position: absolute;
      text-align: center;
      width: 100%;
      top: -7px;
      margin: 0;
      font-weight: 700;
      font-size: 15px;
      line-height: 1;
      font-family: Cinzel, Arial, sans-serif;
    }
    /* couleur de fond des catégories */
    .fond-cate {
      padding: 30px;
      background: #000;
      margin-bottom: 20px;
    }
    /* disposition des cases */
    .cate {
      background: #BFBFBF;
      display: flex;
      margin: 10px 0;
    }
    /* bloc contenant le titre et la description */
    .titre-description {
      width: 500px;
      position: relative;
      font-size: 12px;
      padding-top: 15px;
      float: left;
      height: 100px;
      background: #FFF;
      overflow: hidden;
    }
    /* titre du forum */
    .titre-description h3 {
      font-family: Cinzel, sans-serif;
      font-size: 15px;
      margin: 0;
      position: absolute;
      top: 0;
      left: 0;
      transition: all 1s;
    }
    /* image de la description */
    .titre-description img[alt] {
      margin-top: -15px;
    }
    /* description */
    .description {
      background: rgba(120,120,120,.7);
      position: absolute;
      width: 100%;
      top: 115px;
      left: 0;
      overflow: auto;
      height: 97px;
      text-align: justify;
      font-size: 12px;
      text-transform: uppercase;
      transition: all 1s;
    }
    .titre-description:hover .description {
      top: 18px;
    }
    /* bloc texte de la description */
    .description p {
      padding: 0 10px;
      margin: 10px 0;
    }
    /* dernier message posté */
    .last-post {
      text-align: center;
      flex: 1;
      height: 80px;
      padding: 10px;
      font-size: 11px;
    }
    .last-post > img {
      margin-bottom: 10px;
    }
    /* titre du sujet */
    .last-post a[title] {
      text-transform: uppercase;
    }
    /* liste des sous forums */
    .sous-forum {
      width: 490px;
      position: relative;
      font-size: 12px;
      padding: 5px;
      float: left;
      background: #FFF;
      text-transform: uppercase;
    }
    /* nombre de sujets et messages */
    .suj-mes {
      text-align: center;
      flex: 1;
      padding: 10px;
      font-size: 11px;
    }
    Message le Sam 15 Avr - 18:05
    Wooaa t'es allé vite! C'est super joliiii :ooooh: gros bisous :lovely:





    Message le Sam 15 Avr - 19:45
    Heeey !

    Merci beaucoup pour le code :kyaaa:

    Mais je viens de tester sur mon forum de test juste ici et la description n'apparaît pas du tout. C'est moi qui ait mal copié quelque chose peut-être? :ooooh:

    Les sous-forums n'apparaissent pas non plus... :nuu:
    Message le Sam 22 Avr - 11:24
    Heeey !

    Merci beaucoup pour le code :kyaaa:

    C'est parfait ! Je te préviendrais dés qu'il sera installé :bummy:
    Message le Dim 30 Avr - 20:04
    ET VOILA comme promis j'ai pu tout faire ce week-end. :ooooh:

    D'abord la previem pour la rs (jsp pourquoi les couleurs ne fonctionnent pas sur ce forum mais normalement c'est bon) :

    Pseudo


    info. info. info. info.

    Lui/Elle


    Texte de description ici

    Liens souhaités


    Texte de description ici

    Journal des rps


    www. nom du rp ft. nom du personnage X ou V
    www. nom du rp ft. nom du personnage X ou V
    www. nom du rp ft. nom du personnage X ou V
    www. nom du rp ft. nom du personnage X ou V








    Et voici tous les codes. :miou:
    D'abord le CSS, j'ai mis en haut les couleurs puis les polices avec des commentaires si tu veux modifier. J'ai gardé des classes séparées, comme ça, tu peux adapter chaque code si tu le modifies :
    Code:
    /* Images */
    /* fond image présentation */
    .img-presentation {
      background: url('http://i.imgur.com/Vpr6tUN.png');
    }

    /* Couleurs */
    /* fond vert + texte blanc */
    /* bordure bas post, survie, irl, titre de la rs */
    .bordure, .survie-presentation, .irl-presentation, .fond-nom-rs {
      background: #79b088;
      color: #FFF;
    }

    /* fond gris foncé + texte gris clair */
    /* titre d'un post, caractère, description rs, texte d'un lien */
    .titre, .psychologie-presentation, .description-rs, .texte-lien {
      background: #2c2c2c;
      color: #d8d8d8;
    }

    /* fond gris clair */
    /* fond d'un post, de la présentation, de la rs, des liens */
    .post-contenu, .presentation, .rs, .liens {
      background: #d8d8d8;
    }

    /* fond foncé + texte vert */
    /* fond du titre de la présentation */
    .haut-presentation {
      background: #2c2c2c;
      color: #79b088
    }

    /* bordure verte */
    /* bordure sous le titre de la présentation */
    .haut-presentation {
      border-bottom: 5px solid #79b088;
    }

    /* texte gris foncé */
    /* histoire */
    .histoire-presentation {
      color: #2c2c2c;
    }

    /* texte blanc */
    .titre-liens {
      color: #FFF;
    }

    /* texte vert */
    /* liens vers rps, survol avatar d'un lien */
    .journal-rp a, .survol-lien {
      color: #79b088;
    }

    /* Polices */
    /* titre d'un post */
    .titre {
      text-transform: lowercase;
      font: 900 30px/1.2 Arial, sans-serif;
    }

    /* titre de la rs, des liens, pseudo d'un lien */
    .titre-nom-rs, .titre-liens, .pseudo-lien {
      text-transform: uppercase;
      font: 900 30px/1.2 Arial, sans-serif;
    }


    /* titre de la présentation */
    .haut-presentation {
      text-transform: uppercase;
      font: 900 20px/1.2 Arial, sans-serif;
    }

    /* sous-titre d'un post */
    .sous-titre {
      text-transform: uppercase;
      font: italic 700 15px/1.2 Arial, sans-serif;
    }

    /* sous titre de la présentation, de la rs */
    .titre-presentation, .sous-titre-rs {
      font: italic 900 12px/1 Arial, sans-serif;
      text-transform: uppercase;
    }

    /* Posts */
    .post1 {
      width: 500px; margin: 0 auto !important;
    }
    .titre {
      text-align: center;
      padding: 20px;
    }
    .post-contenu {
      padding: 15px 10px 30px;
      text-align: justify;
    }
    .sous-titre {
      padding-bottom: 3px;
      border-bottom: 2px solid;
      text-align: right;
    }
    .post-contenu p {
      font: 11px/1.3 Arial, sans-serif;
      margin: 0;
      text-indent: 1cm;
    }
    .post-contenu p + br {
      display: none;
    }
    .bordure {
      height: 20px;
    }

    /* Présentation */
    .presentation {
      width: 575px;
      margin: 0 auto;
      font: 11px/1.2 Arial, sans-serif;
      text-align: justify;
    }
    .haut-presentation {
      padding: 100px 50px 20px;
      text-align: right;
    }
    .post-presentation {
      display: flex;
    }
    .img-presentation {
      width: 200px;
      height: 495px;
      overflow: hidden;
    }
    .img-presentation + div {
      flex: 1;
    }
    .identite-presentation {
      margin-right: 20px;
      padding: 15px;
    }
    .identite-presentation p {
      height: auto;
      max-height: 260px;
      overflow: auto;
      padding: 0 5px;
    }
    .titre-presentation {
      text-align: right;
      padding-bottom: 3px;
      border-bottom: 3px solid;
    }
    .survie-presentation {
      padding: 15px 35px 15px 15px;
    }
    .presentation- b {
      text-transform: lowercase;
      font-weight: 700;
    }
    .survie-presentation p {
      height: auto;
      max-height: 115px;
      overflow: auto;
      padding: 0 5px;
    }
    .psychologie-presentation {
      padding: 15px 35px;
    }
    .histoire-presentation {
      padding: 15px 35px;
    }
    .irl-presentation {
      padding: 15px 35px;
    }

    /* Rs */
    .rs {
      width: 550px;
      margin: 0 auto;
      text-align: justify;
    }
    .nom-rs {
      display: flex;
    }
    .image-rs {
      width: 300px;
      height: 100px;
      overflow: hidden;
    }
    .fond-nom-rs {
      padding: 10px 20px;
      flex: 1;
      height: 80px;
    }
    .titre-nom-rs {
      border-bottom: 2px solid;
      text-align: right;
      margin: 0;
      font-style: italic;
    }
    .info-rs {
      text-align: center;
      font-weight: 700;
    }
    .description-rs {
      padding: 20px;
    }
    .sous-titre-rs {
      margin: 0 0 10px;
      border-bottom: 2px solid;
      text-align: right;
      margin-top: 10px;
      padding-bottom: 3px;
    }
    .journal-rp {
      padding: 20px;
    }

    /* Messages liens */
    .liens {
      width: 550px;
      margin: 0 auto;
    }
    .titre-liens {
      margin: 0;
      padding: 20px;
      text-align: center;
    }
    .lien {
      display: flex;
    }
    .image-lien {
      width: 240px;
      height: 240px;
      overflow: hidden;
      position: relative;
    }
    .image-lien img {
      min-width: 240px;
      min-height: 240px;
      transition: all 1s;
    }
    .image-lien:hover img {
      filter: grayscale(1);
    }
    .survol-lien {
      transition: all 1s;
      width: 160px;
      height: 160px;
      padding: 20px;
      top: 20px;
      left: 20px;
      position: absolute;
      background: rgba(255,255,255,.7);
      text-align: center;
      display: flex;
      opacity: 0;
    }
    .image-lien:hover .survol-lien {
      opacity: 1;
    }
    .survol-lien div {
      margin: auto;
    }
    .pseudo-lien {
      border-bottom: 2px solid;
      margin: 0 0 10px;
    }
    .survol-lien span {
      font-weight: 700;
    }
    .texte-lien {
      flex: 1;
      padding: 20px;
    }
    .texte-lien p {
      height: 200px;
      overflow: auto;
      margin: 0;
      padding: 0 5px;
      font-size: 11px;
      text-align: justify;
    }
    .lien:nth-child(odd) .image-lien {
      order: 2;
    }

    Le code pour les posts :
    Code:
    <div class="post1"><div class="titre">Titre</div><!--
    --><div class="post-contenu"><div class="sous-titre">sous-titre</div>
    <p>Paragraphe 1</p>
    <p>Paragraphe 2</p></div><!--
    --><div class="bordure"></div></div>

    La présentation :
    Code:
    <div class="presentation"><div class="haut-presentation">Prénom Nom</div><!--

    --><div class="post-presentation"><div class="img-presentation"></div><div><!--

    --><div class="identite-presentation"><div class="titre-presentation">Identité</div>
    <p><b>Surnom(s) ;</b> écrire ici.</p></div><!--

    --><div class="survie-presentation"><div class="titre-presentation">Survie</div>
    <p><b>Intitulé ;</b> réponse</p></div><!--

    --></div></div><div class="psychologie-presentation"><!--
    --><div class="titre-presentation">Psychologie</div>
    <p>Le texte ici</p><!--
    --></div><!--
    --><div class="histoire-presentation"><!--
    --><div class="titre-presentation">Histoire</div>
    <p>Le texte ici</p><!--
    --></div><!--
    --><div class="irl-presentation"><!--
    --><div class="titre-presentation">Pseudo</div>
    <p>le texte ici</p><!--
    --></div><!--
    --></div>

    Premier post rs :
    Code:
    <div class="rs"><!--

    --><div class="nom-rs"><!--
    --><div class="image-rs"><img src="http://placehold.it/300x100" alt="" /></div><!--
    --><div class="fond-nom-rs"><div class="titre-nom-rs">Pseudo</div>
    <div class="info-rs">info. info. info. info.</div></div><!--
    --></div><!--

    --><div class="description-rs"><div class="sous-titre-rs">Lui/Elle</div>
    Texte de description ici

    <div class="sous-titre-rs">Liens souhaités</div>
    Texte de description ici</div><!--

    --><div class="journal-rp"><div class="sous-titre-rs">Journal des rps</div>
    <a href="">www.</a> nom du rp ft. <em>nom du personnage</em> [color=#ff0000]X[/color] ou [color=#00cc66]V[/color]
    <a href="">www.</a> nom du rp ft. <em>nom du personnage</em> [color=#ff0000]X[/color] ou [color=#00cc66]V[/color]
    <a href="">www.</a> nom du rp ft. <em>nom du personnage</em> [color=#ff0000]X[/color] ou [color=#00cc66]V[/color]
    <a href="">www.</a> nom du rp ft. <em>nom du personnage</em> [color=#ff0000]X[/color] ou [color=#00cc66]V[/color]</div><!--

    --></div>

    Second message rs :
    Code:
    <div class="liens"><div class="titre-liens">Hommes</div><!--

    --><div class="lien"><div class="image-lien"><!--
    --><img src="http://i.imgur.com/o9QhbJ9.png" alt="" !><!--
    --><div class="survol-lien"><div><!--
    --><div class="pseudo-lien">Pseudo</div><!--
    --><span>info. info. info. info.</span><!--
    --></div></div><!--
    --></div><!--
    --><div class="texte-lien"><p>Le texte ici</p></div><!--
    --></div><!--

    --><div class="lien"><div class="image-lien"><!--
    --><img src="http://i.imgur.com/o9QhbJ9.png" alt="" !><!--
    --><div class="survol-lien"><div><!--
    --><div class="pseudo-lien">Pseudo</div><!--
    --><span>info. info. info. info.</span><!--
    --></div></div><!--
    --></div><!--
    --><div class="texte-lien"><p>Le texte ici</p></div><!--
    --></div><!--

    --></div>

    Code pour rajouter un lien :
    Code:
    --><div class="lien"><div class="image-lien"><!--
    --><img src="http://i.imgur.com/o9QhbJ9.png" alt="" !><!--
    --><div class="survol-lien"><div><!--
    --><div class="pseudo-lien">Pseudo</div><!--
    --><span>info. info. info. info.</span><!--
    --></div></div><!--
    --></div><!--
    --><div class="texte-lien"><p>Le texte ici</p></div><!--
    --></div><!--


    Voilà, encore pardon pour le délai. =/
    Message le Lun 1 Mai - 18:10
    Bonjour !

    Commande


    Type de commande :  template catégories (template, sujet, fiche, etc.)
    Lien du forum : https://www.schoolgraph.com/ (si commande de template, sinon supprimez cette ligne)
    Maquette(s) : http://www.zupimages.net/up/17/18/ah0h.png
    Image(s) à insérer : Haut de catégorie: http://zupimages.net/up/17/18/aedy.png
    Bas de catégorie: http://zupimages.net/up/17/18/fd0s.png
    Image new old & lock du statut de fourm, les images sont à mettre directement dans les boutons forumactif donc il faudrait juste prévoir les emplacements dans les templates à gauche comme sur le schéma, si je me trompe dites-le moi ^^
    Et l'avatar du dernier posteur c'est généré automatiquement aussi par variable je crois, donc pas besoin ^^
    Précisions :  Les couleurs sont:
    le bleu pastel du bloc catégorie: #91a7d0
    le bleu turquoise du nom de catégorie et du titre de sujet + vues et messages : #5cc9e0
    Le beige des blocs de forums: #fcdcba
    Le violet pâle des descriptions, pseudo du dernier posteur et scrollbar: #b47a76
    hover des liens au survol: #1f68bf
    Les polices de texte: Arial pour les descriptions de forums, les liens des sous-forums, la date et l'heure du dernier sujet répondu
    Et "Wild Creatures" pour toutes les polices plus importantes comme montré sur le schéma.
    J'ai mis sur le schéma les effets voulus, donc un hover sur les liens des sous-forums au survol en #1f68bf mais aussi au survol de l'avatar du dernier posteur l'avatar deviendrait noir et blanc ça serait vraiment sympa si possible ^^ Ensuite j'aimerai bien un hover passant du bleu turquoise sans survol sur le nom du forum (sur le schéma le gros titre "nom du sous-forum" - je me suis trompée - au #f15c5f rose dès que l'on survole le nom du forum en bleu.
    (couleurs, polices, informations spécifiques à savoir, exigences, etc.)
    C'est à peu près tout, si besoin d'informations autres n'hésite pas, je crois avoir tout mis sur le schéma :) Merci et à bientôt !





    Message le Ven 5 Mai - 9:52
    Coucou! Merci meeerci beaucoup, je m'en fiche du retard, je suis juste toute contente que quelqu'un veuille bien prendre de son temps pour coder pour moi :dummy: Désolée pour la lenteur de ma réaction, mais j'ai été occupée ces derniers temps. Du coup me voici pour te remercier!

    J'ai simplement une ptite question ; je dois faire quoi avec le CSS du coup? Je ne sais pas où le mettre et je me doute bien que rien ne sera complet sans, c'est juste que voilà, je suis un peu une noob de forumactif au niveau du codage et tout alors me voilà un peu perdue @_@

    edit ; @Halloween m'est venu en aide hihi c'est bon!
    > du coup les codes de rs sont supers! et la fiche ya des petits soucis d'écart qui du coup décale l'image et fait un trou dans la compo, mais je pense que je peux régler ça toute seule. si jamais j'y arrive pas je t'enverrai un petit mp je pense ♥️





    Message le Ven 26 Mai - 12:07
    Bonjour !

    Dviryx je vais t'envoyer un mp, j'ai fermé temporairement la boutique pour cause d'absence. ;)
    Zizi toutes mes excuses de ne pas avoir assuré jusqu'au bout. :/ Si jamais n'hésite pas à me contacter. ><

    Je reprends du service d'ici un jour ou deux, j'ai en effet eu de gros contretemps irl qui m'ont empêché de consacrer du temps au codage et quelques soucis de navigateur qui m'ont posé problème pour me connecter, mais je suis de retour. ;)


      La date/heure actuelle est Sam 21 Oct - 10:45