Les loups de Thiercelieux
forum RPG fantasy
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.
03 fevLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

03 fevLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac odio tempor orci dapibus ultrices in iaculis nunc sed.

03 fevDébut de la construction du forum !
Le deal à ne pas rater :
Réassort du coffret Pokémon 151 Électhor-ex : où l’acheter ?
Voir le deal

Conversations par textos — Fonctionnement & libre-service

Le Maire
Messages :
99
Points :
263
Date d'inscription :
03/03/2019
Compte fondateur
Compte fondateur
Compte fondateur
{ Le Maire }
Mar 26 Mar - 21:24
Conversations sms
Bienvenue au XXIe siècle !
Comme s'il s'agissait de la vraie vie, ton personnage peut totalement être pourvu d'un téléphone et interagir avec les autres personnages dans cette partie-ci du forum. Cela compte comme du rp, tant que vous vous assurez de suivre nos petites directives !

Ton propre téléphone : il s'agit pour toi d'ouvrir un nouveau sujet, de lui donner le titre que tu veux (que ce soit "Ne pas déranger" ou "téléphone de bidule"). Un seul sujet peut être ouvert par personne, ce qui signifie que si tu voulais faire une distinction entre un numéro privé et un perso, ce n'est pas possible dans les fait (mais libre à toi de faire une distinction inrp !).

Envoyer un sms : pour envoyer un sms, tu dois poster DANS LE SUJET SMS DE TON PARTENAIRE (ouai, des majuscules au cas où ce serait pas clair et histoire que tu ne dises pas "mais je savais pas wsh" quand tu recevras notre petit mp de staff rageux /mur).

On récapitule : pour avoir un téléphone, tu dois ouvrir un nouveau sujet, dans lequel les personnes souhaitant te parler peuvent poster, tandis que toi, pour leur répondre, tu dois aller poster dans leur sujet.

Libre service : à la suite, le staff vous propose des exemples de codes pour ces sms, mais il en existe plein d'autre sur les divers fora de libre service ! Nous t’encourageons à poster dans ton premier topic le code des sms avec lequel LES AUTRES devront poster, pour maintenir un minimum de cohérence.

Pour chaque exemple de libre-service, nous te proposons une version "contacts" pour que tu recense tes liens et une "sms". Toutes les couleurs peuvent être changées et si jamais la taille ne te convient pas, n'hésite pas à modifier ce que tu juges nécessaire.

Tu peux également passer une commande dans la partie du forum concernée, nul doute que l'admin codeur maso ou un membre viendra réaliser tes rêves !
Le Maire
Messages :
99
Points :
263
Date d'inscription :
03/03/2019
Compte fondateur
Compte fondateur
Compte fondateur
{ Le Maire }
Mar 26 Mar - 22:14
On te propose ci-dessous un premier kit, sur un fond blanc, complètement modifiable et divisé en deux parties. Si tu as le moindre problème avec ce code, n'hésite pas à te rendre dans la partie graphique, ou à contacter @Nayden Louviers.

Kit n°1 │ 1ère partie

15:08
Edit
Contacts
Prénom Nom
Prénom Nom
Prénom Nom
Prénom Nom
Prénom Nom
Prénom Nom
Prénom Nom
Prénom Nom
Prénom Nom
86%
15:08mardi 26 mars


Explications : code n°1
Cellphone blanc // Partie contacts
Images : les images sont automatiquement redimensionnées, aussi tu peux mettre n'importe laquelle, tant que sa taille dépasse les 202px de large et 356px de hauteur (pour un rendu optimal, n'hésite pas à doubler ces valeurs ! Les images des contacts sont en 40x40px, mais n'hésite pas doubler également cette taille, le redimensionnement est automatique.

Pour changer l'image de fond, c'est dans la class ".cellback" :

Code:
background-image: url(une image en 202x356 minimum);

Pour enlever toute la partie du fond (si c'est useless kwa), il faut supprimer cette partie du code :

Code:
<div class="cellback"><div class="cellhead"><i class="fas fa-signal"></i><i class="fas fa-wifi"></i><div>pourcentage<i class="fas fa-battery-three-quarters"></i></div></div><div class="cellhour">heure<span>jour XX mois</span></div></div></div>

Icones : si tu souhaites changer la vision de la batterie (ou d'une autre icone), tu peux la remplacer par une autre, disponibles sur Font Awesome. Celle concernée, pour la batterie, est la suivante :

Code:
<i class="fas fa-battery-three-quarters"></i>

Couleurs : le rouge utilisé est celui du forum : #f1604b.

Ajouter un nouveau contact : il te suffit de trouver cette partie :

Code:
<div class="cellcont"><div class="celf"><div class="cellimg"><img src="une icone en 40x40 minimum"/></div><div class="cellid">Prénom Nom<div><a href="URL du profil/sujet téléphonique du contact"><i class="fas fa-info"></i></a></div></div></div></div>

Puis de c/c ce code juste après les 3 premières <*/div>

Code:
<div class="celf"><div class="cellimg"><img src="une icone en 40x40 minimum"/></div><div class="cellid">Prénom Nom<div><a href="URL du profil/sujet téléphonique du contact"><i class="fas fa-info"></i></a></div></div></div>

L'intégralité du code :

Code:
<div class="lgcell"><div class="cellbg"><div class="celltop"><div><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-wifi"></i></div>heure<div><i class="fas fa-battery-three-quarters"></i></div></div><div class="cellheader"><div> Edit</div>Contacts <div><a href="http://la-nuit-tombe.forumsrpg.com/u2" title="Nayden pour Thiercelieux"><i class="fas fa-plus"></i></a></div></div><div class="cellcont"><div class="celf"><div class="cellimg"><img src="une icone en 100x100px"/></div><div class="cellid">Prénom Nom<div><a href=" URL du profil/sujet téléphonique du contact"><i class="fas fa-info"></i></a></div></div></div></div><div class="cellback"><div class="cellhead"><i class="fas fa-signal"></i><i class="fas fa-wifi"></i><div>pourcentage<i class="fas fa-battery-three-quarters"></i></div></div><div class="cellhour"><div>heure<span>jour XX mois</span></div></div></div></div></div>

<style>.lgcell a {color: #f1604b;} .lgcell {display:block; background-image: url(https://www.zupimages.net/up/19/13/o092.png); width: 300px; height:500px; background-size: cover; margin: auto;} .cellback {background-image: url(une image en 202x356 minimum); background-position:center; background-size: cover;height:356px; width:202px; border-radius: 3px; z-index:1;-webkit-transition: all 0.4s ease-out;transition: all 0.4s ease-out; position:absolute;top:0; pointer-events: none;}.cellbg:hover .cellback{transform:scale(1.5); opacity: 0;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.cellbg {height:356px; width:202px; background: #FFF; margin:49px; margin-top:77px; position:absolute; border-radius: 3px; overflow:hidden;}.cellhead {font-family: Raleway; font-weight:600; color: #fff;text-shadow: 1px 1px rgba(0, 0, 0, 0.1); font-size: 12px; padding:5px; padding-right:10px;} .cellhead div {float:right} .cellhead .svg-inline--fa {margin-left: 5px;}.cellhour {height:50%; text-align:center;flex-wrap: wrap; justify-content: center;align-items: center; display:flex; font-family: Poiret One; color: #fff;text-shadow: 2px 2px rgba(0, 0, 0, 0.1); font-size:50px;width: 100%;}.cellhour span {font-size:12px; font-family: Quicksand; display:block; margin-top:20px;font-weight: 500;} .celltop {padding:5px;text-align:center;flex-wrap: wrap; justify-content: center;align-items: center;font-size:10px; font-family: Raleway; font-weight:800;} .celltop div:first-child {float:left; margin-right:-30px;} .celltop div:last-child {float:right} .celltop .svg-inline--fa {font-size:5px; margin-right:1px;}.celltop .svg-inline--fa:last-child {font-size:9px;margin-left:4px;}.cellheader {background: #fff; padding:5px;line-height:30px; border-bottom:1px solid #ececec;text-align:center;flex-wrap: wrap; justify-content: center;align-items: center; font-size:12px; font-family:Raleway; font-weight:700; padding-top:0px; padding-bottom:0px;} .cellheader div {color: #f1604b; font-weight:600; cursor: crosshair;} .cellheader div:first-child {float:left;margin-right:-15px;} .cellheader div:last-child {float:right;} .cellheader div .svg-inline--fa {margin-top: 8px;font-size: 13px;} .cellcont {height:297px; overflow:auto;}.cellcont::-webkit-scrollbar{width: 5px;}.cellcont::-webkit-scrollbar-track{background: #F9F9F9;} .cellcont::-webkit-scrollbar-thumb{background:#D2D2D2; border-radius: 5px;}.celf {display:flex;background: #fff;}.cellimg img {width:40px; height:40px; border-radius: 100%; margin-top:5px; margin-left:10px;}.cellid {border-bottom: 1px solid #D2D2D2; width:100%; margin:7px; margin-bottom:0px; padding-top:10px; margin-right:3px; font-family: Raleway; font-size:12px; font-weight:600; color: #363636;}.cellid div {float:right; margin-top:2px;}.cellid .svg-inline--fa {background: #fff; font-size:8px; padding:4px 6.5px; border-radius: 100%; color: #f1604b; border:1px solid #f1604b; margin-right:2px;display:flex;}</style>


Kit n°1 │ 2e partie

15:08
Prénom N.
Aujourd'hui 10:15
Un message ici
Un autre ici
Et un un poil plus long ici
Aujourd'hui 12:48
Un message ici
Un autre ici
Et un un poil plus long ici histoire de voir quand ça déborde hahaha.
Aujourd'hui 10:15
Hop !
Pour voir quand le scroll fonctionne.
86%
15:08mardi 26 mars


Explications : code n°1
Cellphone blanc // Partie sms
Images : les images des différents messages sont en 30x30 pixels, mais tu peux excéder cette taille, elles seront automatiquement redimensionnées.

Pour changer l'image de fond, c'est dans la class ".cellback" :

Code:
background-image: url(une image en 202x356 minimum);

Pour enlever toute la partie du fond (comme plus haut), il faut supprimer cette partie du code :

Code:
<div class="cellback"><div class="cellhead"><i class="fas fa-signal"></i><i class="fas fa-wifi"></i><div>pourcentage<i class="fas fa-battery-three-quarters"></i></div></div><div class="cellhour">heure<span>jour XX mois</span></div></div></div>

Ajouter un nouveau message : il te suffit de trouver cette partie du code :

Code:
<div class="msg"><div class="texl"><img src="une icone en 30x30px minimum"></div><div class="txt-left"><div>Un message de l'expéditeur.</div></div></div>

Et d'y c/c la suivante juste après la première fermeture <*/div> de la fin :

Code:
<div class="txt-left"><div>Un message du propriétaire du téléphone.</div>

C'est la même chose pour les sms du propriétaires du téléphone, mais il faut trouver cette partie :

Code:
<div class="msg"><div class="txt-right"><div>Un message du propriétaire du téléphone.</div></div>

Et y c/c entre les deux <*/div> à la fin le code suivant :

Code:
<div class="txt-right"><div>Un message du propriétaire du téléphone.</div>

L'intégralité du code :

Code:
<div class="lgcell"><div class="cellbg"><div class="celltop"><div><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-wifi"></i></div>heure<div><i class="fas fa-battery-three-quarters"></i></div></div><div class="cellheader"><div><i class="fas fa-chevron-left"></i></div>Prénom N. <div><i class="far fa-trash-alt"></i></div></div><div class="cellcont"><div class="textails">heure</div><div class="msg"><div class="texl"><img src="une icone en 30x30px minimum"></div><div class="txt-left"><div>Un message de l'expéditeur.</div></div></div><div class="textails">date heure</div><div class="msg"><div class="txt-right"><div>Un message du propriétaire du téléphone.</div></div><div class="texr"><img src="une icone en 30x30px minimum"></div></div></div><div class="cellback"><div class="cellhead"><i class="fas fa-signal"></i><i class="fas fa-wifi"></i><div>pourcentage<i class="fas fa-battery-three-quarters"></i></div></div><div class="cellhour"><div>heure<span>jour XX mois</span></div></div></div></div></div>

<style>.lgcell a {color: #f1604b;} .lgcell {display:block; background-image: url(https://www.zupimages.net/up/19/13/o092.png); width: 300px; height:500px; background-size: cover; margin: auto;}.cellback {background-image: url(une image en 202x356 minimum); background-position:center; background-size: cover;height:356px; width:202px; border-radius: 3px; z-index:1;-webkit-transition: all 0.4s ease-out;transition: all 0.4s ease-out; position:absolute;top:0; pointer-events: none;}.cellbg:hover .cellback{transform:scale(1.5); opacity: 0;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.cellbg {height:356px; width:202px; background: #FFF; margin:49px; margin-top:77px; position:absolute; border-radius: 3px; overflow:hidden;}.cellhead {font-family: Raleway; font-weight:600; color: #fff;text-shadow: 1px 1px rgba(0, 0, 0, 0.1); font-size: 12px; padding:5px; padding-right:10px;} .cellhead div {float:right} .cellhead .svg-inline--fa {margin-left: 5px;} .cellhour {height:50%; text-align:center;flex-wrap: wrap; justify-content: center;align-items: center; display:flex; font-family: Poiret One; color: #fff;text-shadow: 2px 2px rgba(0, 0, 0, 0.1); font-size:50px;width: 100%;}.cellhour span {font-size:12px; font-family: Quicksand; display:block; margin-top:20px;font-weight: 500;} .celltop {padding:5px;text-align:center;flex-wrap: wrap; justify-content: center;align-items: center;font-size:10px; font-family: Raleway; font-weight:700;} .celltop div:first-child {float:left; margin-right:-30px;} .celltop div:last-child {float:right} .celltop .svg-inline--fa {font-size:5px; margin-right:1px;}.celltop .svg-inline--fa:last-child {font-size:9px;margin-left:4px;}.cellheader {background: #fff; padding:5px;line-height:30px; border-bottom:1px solid #ececec;text-align:center;flex-wrap: wrap; justify-content: center;align-items: center; font-size:12px; font-family:Raleway; font-weight:700; padding-top:0px; padding-bottom:0px;} .cellheader div {color: #f1604b; font-weight:600; cursor: crosshair;} .cellheader div:first-child {float:left;margin-right:-15px;} .cellheader div:last-child {float:right;} .cellheader div .svg-inline--fa {margin-top: 8px;font-size: 13px;} .cellcont {height:297px; overflow:auto;}.cellcont::-webkit-scrollbar{width: 5px;}.cellcont::-webkit-scrollbar-track{background: #F9F9F9;} .cellcont::-webkit-scrollbar-thumb{background:#D2D2D2; border-radius: 5px;} .textails {text-align:center; color: #CCC; font-family: Quicksand; font-size:8px; margin:5px;}.msg {display:flex;}.txt-left, .txt-right {font-family:Raleway; font-size:12px; flex:1; text-align:justify;}.txt-left {margin-right:5px;}.txl {float:left;width:60px;}.texl img {width:30px; height:30px; border-radius: 100%; margin: 0px 5px;}.txt-left div {background: #efefef; margin-bottom:3px; padding:5px; border-radius: 10px;border-bottom-left-radius: 0px;border-top-left-radius: 0px; padding-left:10px;}.txt-left div:first-child {border-top-left-radius: 10px;}.txt-left div:last-child {border-bottom-left-radius: 10px;}.txt-right {margin-left:5px;}.txt-right div {background: #f1604b; margin-bottom:3px; padding:5px; border-radius: 10px;border-bottom-right-radius: 0px;border-top-right-radius: 0px;color: #fff; padding-right:10px;}.txt-right div:first-child {border-top-right-radius: 10px;}.txt-right div:last-child {border-bottom-right-radius: 10px;}.txr {float:right;width:60px;}.texr img {width:30px; height:30px; border-radius: 100%;margin: 0px 5px;}</style>
Le Maire
Messages :
99
Points :
263
Date d'inscription :
03/03/2019
Compte fondateur
Compte fondateur
Compte fondateur
{ Le Maire }
Mar 26 Mar - 23:26
Voici un second kit, sur fond noir, complètement modifiable et divisé en deux parties. Si tu as le moindre problème avec ce code, n'hésite pas à te rendre dans la partie graphique, ou à contacter @Nayden Louviers.

Kit n°2 │ 1ère partie

15:08
Edit
Contacts
Prénom Nom
86%
15:08mardi 26 mars


Explications : code n°2
Cellphone noir // Partie contacts
Images : les images sont automatiquement redimensionnées, aussi tu peux mettre n'importe laquelle, tant que sa taille dépasse les 202px de large et 356px de hauteur (pour un rendu optimal, n'hésite pas à doubler ces valeurs ! Les images des contacts sont en 40x40px, mais n'hésite pas doubler également cette taille, le redimensionnement est automatique.

Pour changer l'image de fond, c'est dans la class ".cellback" :

Code:
background-image: url(une image en 202x356 minimum);

Pour enlever toute la partie du fond, il faut supprimer cette partie du code :

Code:
<div class="cell2back"><div class="cell2head"><i class="fas fa-signal"></i><i class="fas fa-wifi"></i><div>86%<i class="fas fa-battery-three-quarters"></i></div></div><div class="cell2hour"><div>15:08<span>mardi 26 mars</span></div></div></div>

Icones : si tu souhaites changer la vision de la batterie (ou d'une autre icone), tu peux la remplacer par une autre, disponibles sur Font Awesome. Celle concernée, pour la batterie, est la suivante :

Code:
<i class="fas fa-battery-three-quarters"></i>

Couleurs : le rouge utilisé est celui du forum : #f1604b.

Ajouter un nouveau contact : il te suffit de trouver cette partie :

Code:
<div class="cell2cont"><div class="celf2"><div class="cell2img"><img src="une icone en 40x40 minimum"/></div><div class="cellid2">Prénom Nom<div><a href="URL du profil/sujet téléphonique du contact"><i class="fas fa-info"></i></a></div></div></div></div>

Puis de c/c ce code juste après les 3 premières <*/div>

Code:
<div class="celf2"><div class="cell2img"><img src="une icone en 40x40 minimum"/></div><div class="cellid2">Prénom Nom<div><a href="URL du profil/sujet téléphonique du contact"><i class="fas fa-info"></i></a></div></div></div>

L'intégralité du code :

Code:
<div class="lgcell2"><div class="cell2bg"><div class="cell2top"><div><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-wifi"></i></div>heure<div><i class="fas fa-battery-three-quarters"></i></div></div><div class="cell2header"><div>Edit</div>Contacts<div><a href="http://la-nuit-tombe.forumsrpg.com/u2" title="Nayden pour Thiercelieux"><i class="fas fa-plus"></i></a></div></div><div class="cell2cont"><div class="celf2"><div class="cell2img"><img src="une icone en 40x40 minimum"/></div><div class="cellid2">Prénom Nom<div><a href="URL du profil/sujet téléphonique du contact"><i class="fas fa-info"></i></a></div></div></div></div><div class="cell2back"><div class="cell2head"><i class="fas fa-signal"></i><i class="fas fa-wifi"></i><div>XX%<i class="fas fa-battery-three-quarters"></i></div></div><div class="cell2hour"><div>heure<span>jour XX mois</span></div></div></div></div></div>

<style>.lgcell2 a {color: #f1604b;} .lgcell2 {display:block; background-image: url(https://www.zupimages.net/up/19/13/7mh9.png); width: 240px; height:500px; background-size: cover; margin: auto;} .cell2back {background-image: url(une image en 202x356 minimum); background-position:center;background-size: cover;height:368px; width:208px;-webkit-transition: all 0.4s ease-out;transition: all 0.4s ease-out; position:absolute;top:0; pointer-events: none;} .cell2bg:hover .cell2back{transform:scale(1.5); opacity: 0;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;} .cell2bg {height:366px; width:206px; background: #FFF; margin:17px; margin-top:70px; position:absolute; border-radius: 3px; overflow:hidden;} .cell2head {font-family: Raleway; font-weight:600; color: #fff;text-shadow: 1px 1px rgba(0, 0, 0, 0.1); font-size: 12px; padding:5px; padding-right:10px;} .cell2head .svg-inline--fa {margin-left: 5px;} .cell2head div {float: right;} .cell2hour {height:50%; text-align:center;flex-wrap: wrap; justify-content: center;align-items: center; display:flex; font-family: Poiret One; color: #fff;text-shadow: 2px 2px rgba(0, 0, 0, 0.1); font-size:50px;width: 100%;}.cell2hour span {font-size:12px; font-family: Quicksand; display:block; margin-top:20px;font-weight: 500;}  .cell2top {padding:5px;text-align:center;flex-wrap: wrap; justify-content: center;align-items: center;font-size:10px; font-family: Raleway; font-weight:800;} .cell2top div:first-child {margin-right:-30px;float:left;} .cell2top div:last-child {float:right;} .cell2top .svg-inline--fa {font-size:5px; margin-right:1px;} .cell2top .svg-inline--fa:last-child {font-size:9px;margin-left:4px;} .cell2header {background: #fff; padding:5px;line-height:30px; border-bottom:1px solid #ececec;text-align:center;flex-wrap: wrap; justify-content: center;align-items: center; font-size:12px; font-family:Raleway; font-weight:700; padding-top:0px; padding-bottom:0px;} .cell2header div {color: #f1604b; font-weight:600; cursor: crosshair;} .cell2header div:first-child {margin-right:-15px;float:left;} .cell2header div:last-child {float:right;} .cell2header div .svg-inline--fa {margin-top: 8px;font-size: 13px;} .cell2cont {height:height:314px; overflow:auto;} .cell2cont::-webkit-scrollbar{width: 5px;} .cell2cont::-webkit-scrollbar-track{background: #F9F9F9;} .cell2cont::-webkit-scrollbar-thumb{background:#D2D2D2; border-radius: 5px;} .celf2 {display:flex;background: #fff;} .cell2img img {width:40px; height:40px; border-radius: 100%; margin-top:5px; margin-left:10px;} .cellid2 {border-bottom: 1px solid #D2D2D2; width:100%; margin:7px; margin-bottom:0px; padding-top:10px; margin-right:3px; font-family: Raleway; font-size:12px; font-weight:600; color: #363636;} .cellid2 div {float:right; margin-top:-3px;} .cellid2 .svg-inline--fa {background: #fff; font-size:8px; padding:4px 6.5px; border-radius: 100%; color: #f1604b; border:1px solid #f1604b; margin-right:2px;display:flex;}</style>


Kit n°2 │ 2e partie

15:08
Prénom N.
Aujourd'hui 10:15
Un message ici
Un autre ici
Et un un poil plus long ici
Aujourd'hui 12:48
Un message ici
Un autre ici
Et un un poil plus long ici histoire de voir quand ça déborde hahaha.
Aujourd'hui 10:15
Hop !
Pour voir quand le scroll fonctionne.
86%
15:08mardi 26 mars


Explications : code n°2
Cellphone noir // Partie sms
Images : les images des différents messages sont en 30x30 pixels, mais tu peux excéder cette taille, elles seront automatiquement redimensionnées.

Pour changer l'image de fond, c'est dans la class ".cellback" :

Code:
background-image: url(une image en 202x356 minimum);

Pour enlever toute la partie du fond (comme plus haut), il faut supprimer cette partie du code :

Code:
<div class="cell2back"><div class="cell2head"><i class="fas fa-signal"></i><i class="fas fa-wifi"></i><div>86%<i class="fas fa-battery-three-quarters"></i></div></div><div class="cell2hour"><div>15:08<span>mardi 26 mars</span></div></div></div>

Ajouter un nouveau message : il te suffit de trouver cette partie du code :

Code:
<div class="msg2"><div class="texl2"><img src="une icone en 30x30px minimum"></div><div class="txt2-left"><div>Un message de l'expéditeur.</div></div></div>

Et d'y c/c la suivante juste après la première fermeture <*/div> de la fin :

Code:
<div class="txt2-left"><div>Un message du propriétaire du téléphone.</div>

C'est la même chose pour les sms du propriétaires du téléphone, mais il faut trouver cette partie :

Code:
<div class="msg2"><div class="txt2-right"><div>Un message du propriétaire du téléphone.</div></div>

Et y c/c entre les deux <*/div> à la fin le code suivant :

Code:
<div class="txt2-right"><div>Un message du propriétaire du téléphone.</div>

L'intégralité du code :

Code:
<div class="lgcell2"><div class="cell2bg"><div class="cell2top"><div style="float:left;"><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-circle"></i><i class="fas fa-wifi"></i></div>15:08<div style="float:right;"><i class="fas fa-battery-three-quarters"></i></div></div><div class="cell2header"><div><i class="fas fa-chevron-left"></i></div>Prénom N. <div><i class="far fa-trash-alt"></i></div></div><div class="cell2cont"><div class="textails2">heure</div><div class="msg2"><div class="texl2"><img src="une icone en 30x30px minimum"></div><div class="txt2-left"><div>Un message de l'expéditeur.</div></div></div><div class="textails2">date heure</div><div class="msg2"><div class="txt2-right"><div>Un message du propriétaire du téléphone.</div></div><div class="texr2"><img src="une icone en 30x30px minimum"></div></div></div><div class="cell2back"><div class="cell2head"><i class="fas fa-signal"></i><i class="fas fa-wifi"></i><div style="float:right">86%<i class="fas fa-battery-three-quarters"></i></div></div><div class="cell2hour"><div>15:08<span>mardi 26 mars</span></div></div></div></div></div></div>

<style>.lgcell2 {display:block; background-image: url(https://www.zupimages.net/up/19/13/7mh9.png); width: 240px; height:500px; background-size: cover; margin: auto;} .cell2back {background-image: url(une image en 202x356 minimum); background-position:center;background-size: cover;height:368px; width:208px;-webkit-transition: all 0.4s ease-out;transition: all 0.4s ease-out; position:absolute;top:0; pointer-events: none;} .cell2bg:hover .cell2back{transform:scale(1.5); opacity: 0;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.cell2bg {height:366px; width:206px; background: #FFF; margin:17px; margin-top:70px; position:absolute; border-radius: 3px; overflow:hidden;}.cell2head {font-family: Raleway; font-weight:600; color: #fff;text-shadow: 1px 1px rgba(0, 0, 0, 0.1); font-size: 12px; padding:5px; padding-right:10px;}.cell2head i {margin-left: 5px;} .cell2hour {height:50%; text-align:center;flex-wrap: wrap; justify-content: center;align-items: center; display:flex; font-family: Poiret One; color: #fff;text-shadow: 2px 2px rgba(0, 0, 0, 0.1); font-size:50px;width: 100%;}.cell2hour span {font-size:12px; font-family: Quicksand; display:block; margin-top:20px;font-weight: 500;} .cell2top {padding:5px;text-align:center;flex-wrap: wrap; justify-content: center;align-items: center;font-size:10px; font-family: Raleway; font-weight:800;}.cell2top div:first-child {margin-right:-30px;}.cell2top i {font-size:5px; margin-right:1px;}.cell2top i:last-child {font-size:9px;margin-left:4px;}.cell2header {background: #fff; padding:5px;line-height:30px; border-bottom:1px solid #ececec;text-align:center;flex-wrap: wrap; justify-content: center;align-items: center; font-size:12px; font-family:Raleway; font-weight:700; padding-top:0px; padding-bottom:0px;color: #363636;}.cell2header div {color: #f1604b; font-weight:600; cursor: crosshair;}.cell2header div:first-child {margin-right:-15px; float:left;}.cell2header div:last-child {float:right;}.cell2cont {height:307px; overflow:auto;}.cell2cont::-webkit-scrollbar{width: 5px;} .cell2cont::-webkit-scrollbar-track{background: #F9F9F9;} .cell2cont::-webkit-scrollbar-thumb{background:#D2D2D2; border-radius: 5px;}.textails2 {text-align:center; color: #CCC; font-family: Quicksand; font-size:8px; margin:5px}.msg2 {display:flex;}.txt2-left, .txt2-right {font-family:Raleway; font-size:12px; flex:1; text-align:justify;}.txt2-left {margin-right:5px;}.txl2 {float:left;width:60px;}.texl2 img {width:30px; height:30px; border-radius: 100%; margin: 0px 5px;}.txt2-left div {background: #efefef; margin-bottom:3px; padding:5px; border-radius: 10px;border-bottom-left-radius: 0px;border-top-left-radius: 0px; padding-left:10px;}.txt2-left div:first-child {border-top-left-radius: 10px;}.txt2-left div:last-child {border-bottom-left-radius: 10px;}.txt2-right {margin-left:5px;}.txt2-right div {background: #f1604b; margin-bottom:3px; padding:5px; border-radius: 10px;border-bottom-right-radius: 0px;border-top-right-radius: 0px;color: #fff; padding-right:10px;}.txt2-right div:first-child {border-top-right-radius: 10px;}.txt2-right div:last-child {border-bottom-right-radius: 10px;}.txr2 {float:right;width:60px;}.texr2 img {width:30px; height:30px; border-radius: 100%;margin: 0px 5px;}</style>
{ Contenu sponsorisé }
Sujets similaires
-
» Libre service & explications — Liens & historiques
» Conversations par emails — Fonctionnement
» Conversations téléphoniques — Fonctionnement
» John Kleist — humain // libre
» Sunniva Leminem — Berserk // libre
Vous ne pouvez pas répondre aux sujets dans ce forum