News Accueil

Terrible

Libre-service de codages pour vos forums


Kit pour forum

par piou le le Sam 31 Mar - 20:04
Hop hop, je suis encore là ! Commande un peu particulière je te l'accorde cette fois : il s'agit de compléter un kit que tu as proposé et de l'adapter légèrement.  

Bon comme c'est une commande un peu spéciale, je peux comprendre si tu ne veux pas la prendre.

Commande de codage



Élément à coder : Kit forum : adapté un code, fiche prédéfini, fiche de lien, suivis rp
Adresse du forum : http://seuls-perdus.forumactif.com
Version du forum : phpBB2

Décrire un peu le code souhaité, son apparence, ses couleurs, etc.
Schéma :  Alors dans l'idée, on aime beaucoup ce kit : http://terrible.forumactif.org/t49-kit-forum-2, mais on souhaiterais pouvoir mettre une image dans les entêtes et qu'elle ne soit pas toujours identique, est-ce que tu pense que tu pourrais modifier le code pour ?
Ensuite, ça serait simplement de compléter le kit avec une fiche de lien, de prédéfini et suivi de rp.
Taille des éléments : Pour les images des posts administratif actuellement elles font  450*125px. Je te mets en exemple le lien de celle du contexte : https://image.noelshack.com/fichiers/2018/13/6/1522519097-image-contexte.png
Ressources : Pour les couleurs, pour l'instant garde celle du kit, une fois que j'aurais décidé qu'elle couleur mettre en dominante j'adapterais moi-même dans le code. Pour la typo, tu pourrais adapter pour mettre celle de la sidebar ? Histoire d'harmoniser un peu le tout.

Autres précisions : Mille merci ? Ah et j'en profite aussi pour te demander, car je suis en train de faire un travail d'harmonisation de typo sur le forum (car mine de rien à force de prendre des codes à droit à gauche c'est un peu le bordel), tu sais comment je peux faire dans mon code pour mettre une typo identique à tout le monde ?
Acceptez-vous que votre commande aille dans le LS ? : Off course :D
par Awful le le Dim 1 Avr - 16:35
Bonjour Piou !

Alors la modification me semble tout à fait possible, mais où souhaites-tu placer l'image ? Au-dessus du titre, en dessous ?

Mille merci ? Ah et j'en profite aussi pour te demander, car je suis en train de faire un travail d'harmonisation de typo sur le forum (car mine de rien à force de prendre des codes à droit à gauche c'est un peu le bordel), tu sais comment je peux faire dans mon code pour mettre une typo identique à tout le monde ?
Comment ça, une typographie identique à tout le monde ? °°

J'attends juste que tu répondes à ces questions et je m'y mets !
par piou le le Dim 1 Avr - 17:31
Contente de savoir que tu approuve la commande !
Du coup bah l'image on pensait la mettre derrière le titre, mais si tu pense que graphiquement ça ne rendra pas joyeux, je pense alors en dessous du titre.

Pour la police eh bien, là on a une typo différente pour le qeel, une pour les titres de catégorie et message et celle de la sidebar. et du menu. Du coup j'aurais aimé harmoniser tout ça et je ne sais pas trop comment faire.
par Awful le le Dim 1 Avr - 22:57
Alors déjà, voilà pour le kit :
http://terrible-commandes.forumactif.com/t2-commande-piou#5
Ça te va, comme ça ?

Ensuite, pour la police, je vois que tu as un petit souci sur ton forum.
Dans ta feuille CSS, tu dois avoir une ligne comme ça :
Code:
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900');
Il faut qu'elle soit au tout début de ta feuille CSS, sinon la police n'est pas importée.

Pour appliquer la police partout, tu dois appliquer la propriété à tous les éléments :
Code:
font-family: 'Source Sans Pro', sans-serif;
par piou le le Dim 1 Avr - 23:13
Ok je vais voir ça pour la typo.

Pour le kit c'est top ! Juste l'image sera obligatoirement la même pour tout le monde où il sera possible de la changer en fonction du message ? ( je pense notamment pour la fiche de présentation, pour les posts administratif à la limite c'est moins important).
par Awful le le Lun 2 Avr - 16:37
J'ai mis la même image partout car je n'avais que celle-là, mais sinon ne t'inquiète pas, tu peux la changer !
Donc, quelques précisions :
- Si tu ne mets pas d'image, le fond vert s'affichera (tu pourras évidemment éditer la couleur dans le CSS)
- La taille idéale de l'image est 450px*125px pour le kit, 292px*125px pour le message d'annonce (le "validé !") et 550px*125px pour la fiche de présentation
- J'ai laissé dans le code l'image que tu m'as donnée, elle est à chaque fois au tout début du code, après <div class="kit-head">

Les codes :
Règlement
Code:
<div class="kit-wrap"><div class="kit"><div class="kit-head"><!--
--><img src="https://image.noelshack.com/fichiers/2018/13/6/1522519097-image-contexte.png"><!--
--><h2>Rules</h2><!--
--><h3>Lorem ipsum dolor sit amet</h3></div></div><div class="kit"><div class="kit-padd"><div class="kit-txt"><!--
--><span class="kit-title">Règle numéro 1</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<span class="kit-title">Règle numéro 2</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div><div class="kit-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Contexte / mesages administratifs
Code:
<div class="kit-wrap"><div class="kit"><div class="kit-head"><!--
--><img src="https://image.noelshack.com/fichiers/2018/13/6/1522519097-image-contexte.png"><!--
--><h2>Contexte</h2><!--
--><h3>Lorem ipsum dolor sit amet</h3></div></div><div class="kit"><div class="kit-padd"><div class="kit-txt"><!--
--><h4>Titre Lorem ipsum</h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div><div class="kit-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Faceclaim
Code:
<div class="kit-wrap kit-faceclaim"><div class="kit"><div class="kit-head"><!--
--><img src="https://image.noelshack.com/fichiers/2018/13/6/1522519097-image-contexte.png"><!--
--><h2>Faceclaim</h2><!--
--><h3>Lorem ipsum dolor sit amet</h3></div></div><div class="kit"><div class="kit-padd"><!--
--><div class="kit-txt"><h4>a, b, c, d</h4><!--
--><div><b>Nom du personnage</b> //  nom de la série // <a href="#">profil</a></div><!--
--><div><b>Nom du personnage</b> //  nom de la série // <a href="#">profil</a></div>
<h4>e, f, g, h</h4><!--
--><div><b>Nom du personnage</b> //  nom de la série // <a href="#">profil</a></div><!--
--><div><b>Nom du personnage</b> //  nom de la série // <a href="#">profil</a></div>
<h4>i, j, k, l</h4><!--
--><div><b>Nom du personnage</b> //  nom de la série // <a href="#">profil</a></div><!--
--><div><b>Nom du personnage</b> //  nom de la série // <a href="#">profil</a></div>
<h4>m, n, o, p</h4><!--
--><div><b>Nom du personnage</b> //  nom de la série // <a href="#">profil</a></div><!--
--><div><b>Nom du personnage</b> //  nom de la série // <a href="#">profil</a></div>
<h4>q, r, s, t</h4><!--
--><div><b>Nom du personnage</b> //  nom de la série // <a href="#">profil</a></div><!--
--><div><b>Nom du personnage</b> //  nom de la série // <a href="#">profil</a></div>
<h4>u, v, w</h4><!--
--><div><b>Nom du personnage</b> //  nom de la série // <a href="#">profil</a></div><!--
--><div><b>Nom du personnage</b> //  nom de la série // <a href="#">profil</a></div>
<h4>x, y, z</h4><!--
--><div><b>Nom du personnage</b> //  nom de la série // <a href="#">profil</a></div><!--
--><div><b>Nom du personnage</b> //  nom de la série // <a href="#">profil</a></div><!--
--></div></div></div><div class="kit-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Annonce
Code:
<div class="kit-wrap kit-annonce"><div class="kit"><div class="kit-head"><!--
--><img src="https://image.noelshack.com/fichiers/2018/13/6/1522519097-image-contexte.png"><!--
--><h2>Validé !</h2><h3>Bienvenue sur le forum</h3></div></div><!--
--><div class="kit"><div class="kit-padd"><div class="kit-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div><div class="kit-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Fiche de présentation
Code:
<div class="kit-wrap kit-app"><div class="kit"><div class="kit-head"><!--
--><img src="https://image.noelshack.com/fichiers/2018/13/6/1522519097-image-contexte.png"><!--
--><h2>Prénom Nom</h2><!--
--><h3>Lorem ipsum dolor sit amet</h3></div></div><!--
--><div class="kit kit-info"><div class="kit-txt"><!--
--><div><span class="kit-title">âge : </span> Lorem ipsum</div><!--
--><div><span class="kit-title">métier : </span> Lorem ipsum</div><!--
--><div><span class="kit-title">groupe : </span> Lorem ipsum</div><!--
--><div><span class="kit-title">nationalité : </span> Lorem ipsum</div><!--
--></div></div><div class="kit"><div class="kit-padd"><div class="kit-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div><!--
--><div class="kit"><div class="kit-padd"><div class="kit-txt"><!--
--><span class="kit-title">Un petit titre</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<span class="kit-title">Un autre petit titre</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div><!--
--><img src="http://via.placeholder.com/100x100" class="kit-avatar" /><!--
--><div class="kit kit-player"><div class="kit-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div><div class="kit-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Le CSS, à coller dans ton PA > Affichage > Couleurs > Feuille de style CSS :
Code:
/* LES COULEURS */
.kit-wrap {
    background: #f6f6f6;
}
.kit-wrap, .kit {
    border: 1px solid #d4d4d4;
}
.kit-head {
    background: #4CCE92;
    height: 125px;
}
.kit-head > img {
    position: absolute;
}
.kit-head h2, .kit-head h3 {
    color: #fff;
    position: relative;
}
.kit-head h2 {
    text-shadow: -1px 1px 0 #40455f;
}
.kit-head h3 {
    text-shadow: -1px 0 0 #40455f;
}
.kit-padd {
    background: #ededed;
}
.kit, .kit-txt, .kit-avatar {
    background: #fff;
}
.kit-txt h4, .kit-title {
    color: #4cce92;
}
.kit-txt h4:after {
    background: #ededed;
}
.kit-faceclaim .kit-txt div,.kit-app .kit-info .kit-txt div {
    border-bottom: 1px solid #d4d4d4;
}
.kit-faceclaim .kit-txt div b,.kit-faceclaim .kit-txt div a {
    color: #aeaeae;
}
.kit-avatar {
    border: 1px solid #d4d4d4;
}
/* STYLE GÉNÉRAL */
.kit-wrap {
    width: 500px;
    margin: 0 auto 20px;
    box-sizing: border-box;
    padding: 20px;
    font-family:'Source Sans Pro', sans-serif;
    position: relative;
}
.kit-wrap a,.kit-wrap a:hover ,.kit-wrap a:active {
    text-decoration: none;
}
.kit {
    padding: 3px;
    margin-bottom: 4px;
}
.kit-head h2, .kit-head h3 {
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.kit-head h2 {
    padding: 50px 0 0;
    font-weight: bold;
    font-size: 24px;
}
.kit-head h3 {
    font-size: 9px;
    padding: 0 0 60px;
    font-weight: normal;
    letter-spacing: 2px;
}
.kit-padd {
    padding: 10px;
}
.kit-txt {
    padding: 40px 60px;
    text-align: justify;
    font-size: 11px;
}
.kit-txt h4 {
    text-align: center;
    margin: 0 0 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 15px;
    position: relative;
}
.kit-txt h4:after {
    content: "";
    height: 1px;
    width: 100px;
    position: absolute;
    bottom: -10px;
    left: calc(50% - 50px);
}
.kit-title {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 8px;
}
.kit-credit {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: -20px;
    left: 0;
}
.kit-credit a {
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 8px;
    text-decoration: none!important;
}
/* ANNONCE */
.kit-annonce {
    width: 300px;
    padding: 0px;
    border: 0;
    background: transparent;
}
.kit-wrap.kit-annonce .kit-head {
    overflow: hidden;
    position: relative;
}
.kit-annonce .kit-head h3 {
    padding: 0 0 20px;
}
.kit-annonce .kit-txt {
    padding: 40px;
}
/* FACECLAIM */
.kit-faceclaim .kit-txt h4 {
    text-align: left;
    border: 1px solid;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    margin: 0 0 20px;
}
.kit-faceclaim .kit-txt h4:after {
    display: none;
}
.kit-faceclaim .kit-txt div {
    margin: 3px 0 0;
    padding: 2px 10px;
}
.kit-faceclaim .kit-txt div b {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: normal;
}
/* FICHE DE PRÉSENTATION */
.kit-app {
    width: 600px;
}
.kit-app .kit-info {
    width: 200px;
    float: left;
    margin-right: 4px;
    height: 300px;
}
.kit-app .kit-info .kit-txt {
    overflow: auto;
    padding: 10px;
}
.kit-app .kit-info .kit-txt div {
    margin: 3px 0 0;
    padding: 2px 10px;
}
.kit-app .kit-info .kit-txt div .kit-title {
    display: block;
    font-weight: normal;
}
.kit-app .kit:nth-child(3) {
    display: inline-block;
    width: 338px;
    height: 300px;
}
.kit-app .kit-info .kit-txt,.kit-app .kit:nth-child(3) .kit-padd,.kit-app .kit:nth-child(3) .kit-txt, .kit-app .kit-player .kit-txt {
    height: 100%;
    box-sizing: border-box;
}
.kit-app .kit:nth-child(3) .kit-txt,.kit-app .kit-player .kit-txt {
    overflow: auto;
    padding: 20px 30px;
}
.kit-avatar {
    padding: 3px;
}
.kit-player {
    display: inline-block;
    height: 100px;
    width: 438px;
    vertical-align: top;
    margin-left: 4px;
}

En ce qui concerne la police de ton forum, j'ai l'impression que FA est très capricieux avec la propriété @import, donc va dans ton PA > Affichage > Couleurs > Feuille de style CSS, cherche la ligne :
Code:
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900');
Supprime-là.

Toujours dans ton PA > Affichage > Templates > Général > overall_header, juste après l'ouverture de la balise, colle :
Code:
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900" rel="stylesheet">
Enregistre et publie le template.

La police devrait mieux fonctionner comme ça maintenant.
par piou le le Lun 2 Avr - 17:01
Alors petit problème, quand j'ai fait la modification pour la typo, la sidebar et la barre d'info/navigation que tu nous avais codé ont disparut Cry forever

Sinon top pour le kit :)
par piou le le Lun 2 Avr - 17:28
Bon j'ai regardé en détail mon template et il semble que le code de la sidebar ne soit plus dedans :/
Du coup je vais devoir la recoder et idem pour la barre de navigation + info. Par contre, comme je n'ai pas accès au commande terminé, pourrais-tu soit déplacer le sujet le temps que je reprenne les codes ou me les recopier ? (et cette fois-ci je vais en faire une copie sur un doc word !) Désolé du coup pour le dérangement >.< Je sais pas ce qu'il s'est passé, ni comment, mais le résultat et là (et je veux bien croire que j'ai fais une erreur, je suis tout sauf infaillible xD)
par Awful le le Lun 2 Avr - 18:36
Aucun souci, ça arrive xD
Parfois il arrive que FA supprime le template qu'on vient de modifier (ça m'est arrivé plusieurs fois, c'est rageant xD). Mieux vaut les enregistrer régulièrement pour toujours avoir un backup.
J'ai redéplacé le sujet, je te laisse tout réinstaller, je crois que tu peux accéder aux demandes d'aides archivées normalement (là où il y avait les modifs pour la sidebar).
Voilà, voilà ! Je te laisse tout remettre en place de ton côté et me dire si tout va bien / tout s'affiche bien.
Quoi qu'il arrive, j'archive toutes les commandes et si jamais tu perdais encore ta barre de navigation, je pourrais toujours te redonner les codes c:
par piou le le Lun 2 Avr - 18:46
Ok, ça me rassure dans un sens de me dire que ce n'est pas moi. Pour la sidebare, c'est bon, il m'a suffit de reprendre le tuto car il n'y avait que la partie template qui avait disparu... Et oui sinon j'avais accès au sujet de problème. Je vais de ce pas réinstaller le reste.

Sinon je viens de mettre en place les codes du kit et c'est top ! Tout fonctionne bien :) Et mon dieu ce que le code est plus léger que l'ancien ! Ça fait du bien, on y voit plus clair !

par Awful le le Mar 3 Avr - 20:54
Tant mieux !

Je ne sais pas si tu verras ce message mais il y a un autre truc que j'aimerais que tu fasses pour optimiser ton code xD

Dans ton PA > Affichage > Couleurs > Feuille de style CSS, en bas, à "Optimiser votre code CSS", coche "non" (je ne sais pas si tu le vois mais la barre sous les titres est décalée, par exemple dans "Résumé météo & ressources". C'est parce que j'utilise la propriété calc et que cette propriété ne fonctionne pas si le CSS est optimisé. Pourquoi ? Va savoir... Un des mystères de FA)
par piou le le Mar 3 Avr - 21:36
Je me disais aussi qu'il y avait un problème dans cette zone ! Merci à toi pour l'info du coup :) (et je vois que tu as un peu regardé le contenu du forum :p Manque plus que les dernières fiches et qu'on fasse les prédéfinis et je pense que le forum pourra ouvrir. OMG )

par piou le le Lun 9 Avr - 18:24
Hey :)

Juste savoir où tu en es avec la suite de cette commande. Si jamais tu bloques sur les idées pour les compléments (fiche de lien, prédéfinis et fiche rps), je peux essayer de te faire des maquettes en me basant sur le style du kit.

Bisous

Ps: je risque de te passer une dernière commande quand celle-ci sera terminée pour le même forum x)

par Awful le le Lun 9 Avr - 19:01
Ah, excuse-moi, j'avais pas tilté que tu voulais que je fasse ces fiches. Je veux bien une maquette du coup, oui.
par piou le le Lun 9 Avr - 19:53
Bon alors tu m'excusera, j'ai un peu fait les maquettes à l'arrache en me basant sur des screens d'écran.... D'où le côté assez brouillons des textes et l'imprécision des alignements.

Du coup pour les liens :
https://image.noelshack.com/fichiers/2018/15/1/1523294613-maquette-fiche-de-lien.png
https://image.noelshack.com/fichiers/2018/15/1/1523294616-liste-des-liens.png Juste là, si tu pouvais coder un scroll quand le texte est plus long que 3 lignes, j'ai eu la flemme de le maquetter je l'avoue...

Pour les Rps c'est aussi en deux morceaux :
https://image.noelshack.com/fichiers/2018/15/1/1523295778-premier-post-fiche-rp.png
https://image.noelshack.com/fichiers/2018/15/1/1523295797-liste-rp.png

Je réfléchis encore pour la fiche de prédéfinis. Dès que j'ai une maquette je te l'envoi.
par Awful le le Mar 10 Avr - 10:14
Okay, super, pourrais-tu juste m'indiquer la largeur de la fiche ?
par piou le le Mar 10 Avr - 11:08
Dans le CSS j'ai passé la largeur général à 500px

Et au passage, j'ai fait la maquette pour les prédéfinis :
https://image.noelshack.com/fichiers/2018/15/2/1523351223-maquette-fiche-predefinis.png
par Awful le le Jeu 12 Avr - 16:24
Hello !
Désolé du temps de réponse, j'étais un peu occupé.
J'ai donc codé tes fiches : http://terrible-commandes.forumactif.com/t2-commande-piou#5

Quelques précisions :

- Pour la fiche du lien, les icônes du bas sont des images en 100*100 dont la taille s'adapte automatiquement. Si tu veux, je peux forcer la taille mais dans le cas échéant, pour éviter une déformation, il vaut mieux choisir des images qui ont toute la même taille.

- Pour la fiche de rp, ta maquette n'était pas à l'échelle. Plutôt que des lignes de trois blocs, j'ai donc codé des lignes de deux blocs, sinon c'était vraiment trop petit.

Est-ce que ça te va ? Tu veux des modifications ?
par piou le le Jeu 12 Avr - 17:28
Pas de soucis, on a chacun nos occupations :)

Sinon c'est tout parfait pour les codes ! Et pour les icônes dans la fiche de lien, oui l'idée est d'avoir que du 100*100, en mode je propose une sélection d’icône pour faciliter l'ajout dans les liens des autres joueurs :D
par Awful le le Mar 17 Avr - 10:16
Mamma mia, je n'avais pas vu ta réponse ;o;
Voici les codes !

Je te redonne TOUT le CSS car j'ai dû ajouter des propriétés au CSS existant, donc ce sera plus facile pour toi de tout remplacer :
Code:
/* LES COULEURS */
.kit-wrap {
    background: #f6f6f6;
}
.kit-wrap, .kit {
    border: 1px solid #d4d4d4;
}
.kit-head {
    background: #4CCE92;
     height: 125px;
}
.kit-head > img {
    position: absolute;
}
.kit-head h2,
.kit-head h3 {
    color: #fff;
    position: relative;
}
.kit-head h2 {
    text-shadow: -1px 1px 0 #40455f;
}
.kit-head h3 {
    text-shadow: -1px 0 0 #40455f;
}
.kit-padd {
    background: #ededed;
}
.kit,
.kit-txt,
.kit-avatar {
    background: #fff;
}
.kit-txt h4,
.kit-title,
.kit-pred > div:first-child > div:first-child h2 {
    color: #4cce92;
}
.kit-txt h4:after {
    background: #ededed;
}
.kit-faceclaim .kit-txt div,
.kit-app .kit-info .kit-txt div,
.kit-pred .kit-info .kit-txt div {
    border-bottom: 1px solid #d4d4d4;
}
.kit-faceclaim .kit-txt div b,
.kit-faceclaim .kit-txt div a {
    color: #aeaeae;
}
.kit-avatar {
    border: 1px solid #d4d4d4;
}
/* STYLE GÉNÉRAL */
.kit-wrap {
    width: 500px;
    margin: 0 auto 20px;
    box-sizing: border-box;
    padding: 20px;
    font-family:'Source Sans Pro', sans-serif;
    position: relative;
}
.kit-wrap a,
.kit-wrap a:hover ,
.kit-wrap a:active {
    text-decoration: none;
}
.kit {
    padding: 3px;
    margin-bottom: 4px;
}
.kit-head h2,
.kit-head h3 {
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.kit-head h2 {
    padding: 50px 0 0;
    font-weight: bold;
    font-size: 24px;
}
.kit-head h3 {
    font-size: 9px;
    padding: 0 0 60px;
    font-weight: normal;
    letter-spacing: 2px;
}
.kit-padd {
    padding: 10px;
}
.kit-txt {
    padding: 40px 60px;
    text-align: justify;
    font-size: 11px;
}
.kit-txt h4 {
    text-align: center;
    margin: 0 0 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 15px;
    position: relative;
}
.kit-txt h4:after {
    content: "";
    height: 1px;
    width: 100px;
    position: absolute;
    bottom: -10px;
    left: calc(50% - 50px);
}
.kit-title {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 8px;
}
.kit-credit {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: -20px;
    left: 0;
}
.kit-credit a {
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 8px;
    text-decoration: none!important;
}
/* ANNONCE */
.kit-annonce {
    width: 300px;
    padding: 0px;
    border: 0;
    background: transparent;
}
.kit-wrap.kit-annonce .kit-head {
    overflow: hidden;
    position: relative;
}
.kit-annonce .kit-head h3 {
    padding: 0 0 20px;
}
.kit-annonce .kit-txt {
    padding: 40px;
}
/* FACECLAIM */
.kit-faceclaim .kit-txt h4 {
    text-align: left;
    border: 1px solid;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    margin: 0 0 20px;
}
.kit-faceclaim .kit-txt h4:after {
    display: none;
}
.kit-faceclaim .kit-txt div {
    margin: 3px 0 0;
    padding: 2px 10px;
}
.kit-faceclaim .kit-txt div b {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: normal;
}
/* FICHE DE PRÉSENTATION */
.kit-app {
    width: 600px;
}
.kit-app .kit-info {
    width: 200px;
    float: left;
    margin-right: 4px;
    height: 300px;
}
.kit-app .kit-info .kit-txt {
    overflow: auto;
    padding: 10px;
}
.kit-app .kit-info .kit-txt div {
    margin: 3px 0 0;
    padding: 2px 10px;
}
.kit-app .kit-info .kit-txt div .kit-title {
    display: block;
    font-weight: normal;
}
.kit-app .kit:nth-child(3) {
    display: inline-block;
    width: 338px;
    height: 300px;
}
.kit-app .kit-info .kit-txt,
.kit-app .kit:nth-child(3) .kit-padd,
.kit-app .kit:nth-child(3) .kit-txt,
.kit-app .kit-player .kit-txt {
    height: 100%;
    box-sizing: border-box;
}
.kit-app .kit:nth-child(3) .kit-txt,
.kit-app .kit-player .kit-txt {
    overflow: auto;
    padding: 20px 30px;
}
.kit-avatar {
    padding: 3px;
}
.kit-player {
    display: inline-block;
    height: 100px;
    width: 438px;
    vertical-align: top;
    margin-left: 4px;
}
/*LIENS*/
.kit-lien {
    width: 500px;
}
.kit-lien .kit:nth-child(3) {
    width: 238px;
}
.kit-lien-img {
    display: flex;
    justify-content: space-between;
}
.kit-lien-img img {
    margin-right: 10px;
    height: 75.6px;
    width: 75.6px;
}
.kit-lien-img img:last-child {
    margin: 0;
}
/*LIEN ITEM*/
.kit-lien-item {
    display: flex;
    flex-wrap: wrap;
}
.kit-lien-item .kit-avatar {
    height: 100px;
}
.kit-lien-item .kit {
    height: 100px;
    flex: 1;
    margin-left: 5px;
    overflow: auto;
    margin-bottom: 5px;
    min-width: 320px;
}
.kit-lien-item .kit:last-child {
    margin-bottom: 0px;
}
.kit-lien-item .kit .kit-txt {
    padding: 20px;
}
/*RPS*/
.kit-wrap.kit-rp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.kit-rp .kit-txt {
    line-height: 13px;
}
.kit-wrap.kit-rp .kit {
    width: calc(100% / 2 - 2px);
    box-sizing: border-box;
}
.kit-rp .kit-txt {
    line-height: 13px;
    padding: 20px;
    height: 150px;
    overflow: auto;
}
.kit-date {
    color: #4cce92;
    margin-bottom: 10px;
}
.kit-date + .kit-title {
    color: #000;
}
/*PREDEFS*/
.kit-pred > div:first-child {
    display: flex;
}
.kit-pred > div:first-child > div:first-child {
    width: 208px;
    margin-right: 4px;
}
.kit-pred > div:first-child > div:first-child .kit-avatar {
    margin-bottom: 4px;
}
.kit-pred > div:first-child > div:first-child h2 {
    text-transform: uppercase;
    padding: 0 15px;
}
.kit-pred .kit-info {
    flex: 1;
}
.kit-pred .kit-padd {
    height: 100%;
    box-sizing: border-box;
}
.kit-pred .kit-info .kit-txt {
    overflow: auto;
    padding: 10px;
    height: 100%;
    box-sizing: border-box;
    max-height: 348px;
}
.kit-pred .kit-info .kit-txt div {
    margin: 3px 0 0;
    padding: 2px 10px;
}
.kit-pred .kit-info .kit-txt div .kit-title {
    display: block;
    font-weight: normal;
}

Et les fiches :

Fiche de liens
Code:
<div class="kit-wrap kit-app kit-lien"><div class="kit"><div class="kit-head"><!--
--><img src="https://image.noelshack.com/fichiers/2018/13/6/1522519097-image-contexte.png"><!--
--><h2>Prénom Nom</h2><!--
--><h3>Lorem ipsum dolor sit amet</h3></div></div><!--
--><div class="kit kit-info"><div class="kit-txt"><!--
--><div><span class="kit-title">âge : </span> Lorem ipsum</div><!--
--><div><span class="kit-title">métier : </span> Lorem ipsum</div><!--
--><div><span class="kit-title">groupe : </span> Lorem ipsum</div><!--
--><div><span class="kit-title">nationalité : </span> Lorem ipsum</div><!--
--></div></div><div class="kit"><div class="kit-padd"><div class="kit-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div><!--
--><div class="kit"><div class="kit-padd"><div class="kit-txt"><!--
--><span class="kit-title">Un petit titre</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<span class="kit-title">Un autre petit titre</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div><!--
--><div class="kit-lien-img"><img src="http://via.placeholder.com/100x100" class="kit-avatar" /><img src="http://via.placeholder.com/100x100" class="kit-avatar" /><img src="http://via.placeholder.com/100x100" class="kit-avatar" /><img src="http://via.placeholder.com/100x100" class="kit-avatar" /><img src="http://via.placeholder.com/100x100" class="kit-avatar" /></div><!--
--><div class="kit-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Fiche de liens deuxième partie
Code:
<div class="kit-wrap kit-lien-item"><!--
--><img src="http://via.placeholder.com/100x100" class="kit-avatar" /><!--
--><div class="kit"><div class="kit-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div><!--
--><img src="http://via.placeholder.com/100x100" class="kit-avatar" /><!--
--><div class="kit"><div class="kit-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div><!--
--><img src="http://via.placeholder.com/100x100" class="kit-avatar" /><!--
--><div class="kit"><div class="kit-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div><!--
--><img src="http://via.placeholder.com/100x100" class="kit-avatar" /><!--
--><div class="kit"><div class="kit-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div><div class="kit-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Fiche de RP
Code:
<div class="kit-wrap"><div class="kit"><div class="kit-head"><!--
--><img src="https://image.noelshack.com/fichiers/2018/13/6/1522519097-image-contexte.png"><!--
--><h2>RPs</h2><!--
--><h3>Lorem ipsum dolor sit amet</h3></div></div><div class="kit"><div class="kit-padd"><div class="kit-txt"><!--
--><span class="kit-title">RPs à prévoir</span>
<b>Nom du joueur ></b> Événement du rp
<b>Nom du joueur ></b> Événement du rp
<b>Nom du joueur ></b> Événement du rp
<b>Nom du joueur ></b> Événement du rp
<b>Nom du joueur ></b> Événement du rp
</div></div></div><div class="kit-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Fiche de RP deuxième partie
Code:
<div class="kit-wrap kit-rp"><!--

--><div class="kit"><div class="kit-padd"><div class="kit-txt"><!--
--><span class="kit-title">Titre du rp</span>
<div class="kit-date">8 juin 2017
ft maxime Chevalier</div><!--
--><span class="kit-title">Statut</span>
Résumé de ce qu'il se passe durant le rp. Si c'est un événement lié au forum ou pas.
</div></div></div><!--

--><div class="kit"><div class="kit-padd"><div class="kit-txt"><!--
--><span class="kit-title">Titre du rp</span>
<div class="kit-date">8 juin 2017
ft maxime Chevalier</div><!--
--><span class="kit-title">Statut</span>
Résumé de ce qu'il se passe durant le rp. Si c'est un événement lié au forum ou pas.
</div></div></div><!--

--><div class="kit"><div class="kit-padd"><div class="kit-txt"><!--
--><span class="kit-title">Titre du rp</span>
<div class="kit-date">8 juin 2017
ft maxime Chevalier</div><!--
--><span class="kit-title">Statut</span>
Résumé de ce qu'il se passe durant le rp. Si c'est un événement lié au forum ou pas.
</div></div></div><!--

--><div class="kit"><div class="kit-padd"><div class="kit-txt"><!--
--><span class="kit-title">Titre du rp</span>
<div class="kit-date">8 juin 2017
ft maxime Chevalier</div><!--
--><span class="kit-title">Statut</span>
Résumé de ce qu'il se passe durant le rp. Si c'est un événement lié au forum ou pas.
</div></div></div><!--

--><div class="kit-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Fiche de prédéfini
Code:
<div class="kit-wrap kit-pred"><!--
--><div><div><img src="http://via.placeholder.com/200x320" class="kit-avatar" /><!--
--><div class="kit"><h2>Prénom Nom</div></div><!--
--><div class="kit kit-info"><div class="kit-padd"><div class="kit-txt"><!--
--><div><span class="kit-title">âge : </span> Lorem ipsum</div><!--
--><div><span class="kit-title">métier : </span> Lorem ipsum</div><!--
--><div><span class="kit-title">groupe : </span> Lorem ipsum</div><!--
--><div><span class="kit-title">nationalité : </span> Lorem ipsum</div><!--
--></div></div></div></div><div class="kit"><div class="kit-padd"><div class="kit-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div><!--
--><div class="kit-lien-item"><!--
--><img src="http://via.placeholder.com/100x100" class="kit-avatar" /><!--
--><div class="kit"><div class="kit-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div><!--
--><img src="http://via.placeholder.com/100x100" class="kit-avatar" /><!--
--><div class="kit"><div class="kit-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div><!--

--><div class="kit-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Mon crédit se répète un peu partout dans toutes les fiches donc éventuellement, si tu trouves cela dérangeant, tu peux le supprimer et le mettre dans la partie "crédits" de ton forum (si tu en as une). La partie à supprimer dans les fiches serait :
Code:
<div class="kit-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div>

Je te laisse tester les codes et me dire si tout fonctionne !
par piou le le Mar 17 Avr - 13:43
Pas de soucis, ça arrive.
Du coup tout est installé et fonctionne parfaitement bien :D
D'ailleurs oui tu es déjà dans les crédits : http://seuls-perdus.forumactif.com/t6-credits, mais aussi dans les partenaires car je risque de te faire une demande à l'ouverture du fo' :p

Bon du coup tout est bon pour cette commande et tu risque de me voir revenir pour une dernière commande, je dois juste prendre le temps de faire la maquette. Promis, après ça je te laisse tranquille !
par Awful le le Mar 17 Avr - 13:55
Génial **
En cas de souci, n'hésite pas à venir me poser des questions !
Et les commandes ne m'embêtent pas du tout, au contraire xD
OMG

Bonne journée !
par Contenu sponsorisé le