[FAQ] Personnaliser sa description

[Khelsiin]

Voilà, je t'ai envoyé un mail, Rium.

Je te remercie d'avoir pris le temps de me répondre.

[Maëlle]

Bonjour tout le monde,

Je me permet de partager avec vous ma dernière tentative de page de description. C'est un modèle de description sans prétention mais ça peut intéresser du monde. Je me suis pas mal inspiré de ce que j'ai vu de plus joli à droite à gauches sur les descriptions des copains donc si ça ressemble à quelque chose que vous avez déjà vu, c'est normal ! Le code (à personnaliser) ressemble à ça :

Béryl Jaspenimbes

J'ai utilisé ton code, que j'ai légèrement réadapté à ma sauce.
Merci.
Je suis trop mauvais en CSS et j'ai aucun goût. Mais grâce à toi, ceci ne se verra pas sur mon perso.

Un très grand merci à tous les deux. A Béryl, d'abord, pour la super base que tu nous as partagée , qui permet de se lancer dans une illustration personnalisée de qualité, sans maîtriser pour autant HTML et les CSS - le bons sens, la rigueur et la patience suffisent. A Mélendis, pour ton témoignage d'adaptation possible de ce charabia pour les néophytes en la matière : oui, on peut profiter d'un cadre costaud sans se taper une formation aux langages du Web, et changer les couleurs, les formes, les polices, les images... Ensuite, pour ces changements, il faut surfer un peu sur Internet pour obtenir le code HTML de chaque machin, quand même, mais on s'y fait.

Grâce à vous deux, et aussi au long fil de discussion des autres (merci aussi), j'ai eu la gnaque pour m'accrocher toute la journée, avec la tentation régulière de m'adresser à Rium - mais non : pas besoin ! - et en sortir finalement un beau résultat toute seule. Je passe d'une image bidouillée en avatar avec texte en-dessous - c'est ce que j'ai eu pendant presque dix ans d'ODC -, à ça ! (Rdv en jeu pour en voir davantage.) Trop bien. Trop contente.

[Mélendis Oximort]

Avec plaisir

Effectivement, avec quelques bases en HTML/CSS (ou tuto sur le net), on arrive très facilement à mettre notre touche perso à la base solide de Béryl Jaspenimbes.

Je suis déçu, je vais devoir attendre de te croiser EJ

[Cornelius]

Bonjour, j'ai lue l’entièreté de ce forum (pas en détail) mais j'ai compris une grosse partie. Donc j'ai plusieurs questions :
- Dans la modification de description j'ai vu un truc galerie des portraits à quoi cela correspond ?
- Quelqu'un a un site ou un document qui résume le code Html/Css qui peu être utile ?
- Et quelqu'un a un moyen d'avoir une bonne image pour ma description ou s'il faut que j'aille sur déviant art et les autres sites du genre.

[Rium]

- Dans la modification de description j'ai vu un truc galerie des portraits à quoi cela correspond ?

Il s'agit d'une série d'images pour ceux qui veulent utiliser un de ces portraits pour illustrer leur personnage.

- Quelqu'un a un site ou un document qui résume le code Html/Css qui peu être utile ?

Pas vraiment… En même temps, rien ne t'oblige à utiliser du HTML. Tu peux faire un simple texte.

- Et quelqu'un a un moyen d'avoir une bonne image pour ma description ou s'il faut que j'aille sur déviant art et les autres sites du genre.

En effet, il faut fouiller le net pour trouver une image qui pourrait te correspondre.

[Gun'Dra]

- Quelqu'un a un site ou un document qui résume le code Html/Css qui peu être utile ?

Yo !
C'est pas vraiment un résumé mais c'est segmenté correctement.
https://www.w3schools.com/css/default.asp https://www.w3schools.com/html/default.asp

[Harriet Sourameau]

Salutations !

Juste un petit mot pour remercier Béryl Jaspenimbes dont je me suis permis d'utiliser le code.

[Béryl Jaspenimbes]

Salutations !

Juste un petit mot pour remercier Béryl Jaspenimbes dont je me suis permis d'utiliser le code.

Ne le remercie pas trop fort quand même, il risquerait de se réveiller.

[Azaenor]

Petit exemple en lien avec la question du discord :

Code : Tout sélectionner

<!--

1.BORDURES DROITE/GAUCHE 
--><center><fieldset style="border: 0px; border-bottom: 0px; width: 1200px; min-height: 900px; border-radius: 10px; padding: 0px; padding-left: 10px; padding-right: 10px; margin: 10px; margin-left: 20px;"><!--

2.IMAGE DE FOND
--><fieldset style="border: 4px solid #ff8ffd; width: auto; min-height: 800px; padding: 0px; border-radius: 0px; background-image: url('https://img.freepik.com/photos-gratuite/jelly-worms-guimauves_23-2147689711.jpg?w=1380&amp;t=st=1683555123~exp=1683555723~hmac=367ec0b61abd26f955e0ef193fa371ead0cfaef9b0a3095985394b9dafd4b641');"><!-- 

3.NOM DU PERSONNAGE
-->
<div style="float: left; position: relative; bottom: -50px; padding: 10px; font-family: cardinal; color: #088a08; text-align: justify; font-size: 18px; line-height: 1.1; border-radius: 80px; border-top-left-radius: 80px; border-top-right-radius: 80px; opacity: 1; width: 40%; height: auto; margin: 5px; margin-left: 260px; margin-top: 10px;"><center>
<div style="font-size: 50px; color: #ff8ffd; font-family: cardinal, Old London, cloister black; font-weight: bold; text-shadow: 5px 10px 10px #000000; margin-top: https://www.paintingmania.com/arts/henri-martin/large/village-street-235_41159.jpg?version=16.12.09 -20px;"><span style="font-size: 85px;">Roi-Sorcier d'Angmar</span></div>
</center></div>
<!--

3.IMAGE DU PERSONNAGE
-->
<div style="float: left; background-image: url('https://www.worldanvil.com/uploads/images/4b92257c13ca71c6095e8234afabdc81.jpg'); background-size: 480px; border: 5px solid #ffffff; width: 360px; height: 590px; margin-left: 15px; border-radius: 180px; border-top-left-radius: 180px; border-bottom-left-radius: 180px; margin: 40px; margin-top: 50px; box-shadow: 0px 10px 20px black;">&nbsp;</div>
<!--

4.DESCRIPTION DU PERSONNAGE
-->
<div style="float: right; background-color: rgba(500, 50, 500, 0.4); border: 2px solid #ffffff; padding: 25px; font-family: georgia; color: #ffffff; line-height: 1.1; border-radius: 20px 200px 200px 20px; opacity: 1; font-size: 1.2em; box-shadow: black 0px 10px 20px; width: 50%; height: 500px; margin: 70px 40px 40px; text-align: justify;">
<h2 style="text-align: center;">- Anciennement humain -</h2>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Dumque ibi diu moratur commeatus opperiens, quorum translationem ex Aquitania verni imbres solito crebriores prohibebant auctique torrentes, Herculanus advenit protector domesticus, Hermogenis ex magistro equitum filius, apud Constantinopolim, ut supra rettulimus, populari quondam turbela discerpti. quo verissime referente quae Gallus egerat, damnis super praeteritis maerens et futurorum timore suspensus angorem animi quam diu potuit emendabat.</p>
<p>Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat.</p>
<p>&nbsp;</p>
</div>
</fieldset></fieldset></center>

[Azaenor]

Voilà, j'ai refait de 0 le précédent code pour le rendre plus automatique, notamment sur son adaptation aux différentes tailles d'affichage. Le code est donc un peu plus complexe, mais j'ai essayé de mettre de notes et des commentaires un peu partout. Évidement il est possible de changer toutes les couleurs, en effet, elles sont en RGBA donc vous trouverez facilement sur internet des palettes de couleurs qui vous donnent les codes correspondants. J'en ai profité pour rendre la fiche plus passe partout, donc basiquement il ne vous reste plus qu'à changer les codes couleurs, changer le nom du perso, la race et la description, ajouter une image de fond et une image de profil via des liens URL et l'affaire est bonne.

Si vous avez des soucis, n'hésitez pas à me contacter, idem si vous trouvez des erreurs dans le code.

Cette fiche est inspiré de celle de Béryl Jaspenimbes

EDITE 25.07.2023:
- J'ai corrigé quelques points concernant les backgrounds

EDITE 27.07.2023:
- Pour ceux qui ne sont pas à l'aise de toucher le code directement dans leur description, je vous conseille d'utiliser un éditeur HTML en ligne, par exemple https://www.tutorialspoint.com/online_html_editor.php. En effet, ce genre d'éditeur permet d'une part de voir simplement les diverses parties du code et de s'y retrouver plus facilement (car il les affiche avec des couleurs distinctes) et d'autre part d'avoir une représentation visuelle de ce que créer le code. Attention cependant pour ce dernier point, il y a de légères différences d'affichage du résultat du code entre ce genre d'outils et Odyssee. Je vous conseille donc de bien vous assurer en jeu que les modifications que vous avez faites sont ok(typiquement les espacements).
- J'ai corrigé quelques points dans le code HTML (Ajout de marges pour le texte et arrondissement du cadre extérieur).

Code : Tout sélectionner

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Styles pour les conteneurs */

    /* Style pour le conteneur extérieur */
    .outer-container {
      width: 92vw; /* Ajustement de la largeur selon écran */
      max-width: 1200px; /* Largeur maximale */
      max-height: 1200px; /* Hauteur maximale */
      min-width: 600px; /* Largeur minimale */
      min-height: 400px; /* Hauteur minimale */
      height: auto; /* Ajustment de la hauteur automatique */
      display: flex; /* Active le modèle de disposition flexbox */
      flex-direction: column; /* Disposition verticale des containers */
      align-items: center; /* alignement du conteneur extérieur */
      justify-content: flex-start; /* alignement du contenu */
      border: 3px solid rgba(255, 255, 255, 1.0); /* Ajoute le cadre */
      border-radius: 5px; /* Ajoute les coins arrondis */
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ajoute l'ombre */
      padding: 20px; /* Espacement interne */
      background-image: url("https://miro.medium.com/v2/resize:fit:1100/format:webp/1*AtkkTkSLk6Jd0nwVqifzeQ.jpeg"); /* URL de l'image de fond */
      background-size: cover; /* Type de remplissage du fond d'écran */
      margin-top: 0px; /* Déplace le conteneur vers le haut */
    }
    
    /* Style pour le conteneur central */
    .middle-container {
      width: 100%; /* Occupe toute la largeur disponible */
      min-width: 600px; /* Largeur minimale */
      background-color: rgba(255, 255, 255, 0.0); /* Couleur de l'arrière fond du conteneur central */
      padding: 20px; /* Espacement interne */
      display: flex; /* Active le modèle de disposition flexbox */
      align-items: center; /* Centrage vertical */
      justify-content: center; /* Centrage vertical */
    }
    
    /* Style pour le premier conteneur interne 1 */
    .inner-container1 {
      background-color: rgba(255, 255, 255, 0.0); /* Couleur de l'arrière fond du conteneur interne 1 */
      padding: 10px; /* Espacement interne */
      flex-grow: 4; /* Capacité de croissance d'un flex item */
      flex-basis: 40%; /* Spécifier la taille initiale d'un flex item */
      margin-right: 5px; /* Marge droite */
      display: flex; /* Active le modèle de disposition flexbox */
      align-items: center; /* Centrage vertical */
      justify-content: center; /* Centrage horizontal */
    }
    
    /* Style pour le deuxième conteneur interne 2 */
    .inner-container2 {
      background-color: rgba(255, 255, 255, 0.0); /* Couleur de l'arrière fond du conteneur interne 2 */
      padding: 10px; /* Espacement interne */
      flex-grow: 6; /* Capacité de croissance d'un flex item */
      flex-basis: 60%; /* Spécifier la taille initiale d'un flex item */
      margin-left: 15px; /* Marge gauche */
      margin-right: 5px; /* Marge droite */
      text-align: justify; /* Mise en forme du texte */
      border: 3px solid rgba(255, 255, 255, 1.0); /* Ajoute le cadre */
      border-radius: 50px; /* Ajoute les coins arrondis */
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ajoute l'ombre */
      background-color: rgba(80, 60, 10, 0.6); /* Ajoute un fond transparent */
    }
    
    /* Style pour l'image dans le premier conteneur interne */
    .inner-container1 img {
      width: 100%; /* Largeur de l'image dans le container */
      border: 3px solid rgba(255, 255, 255, 1.0); /* Ajoute le cadre */
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ajoute l'ombre */
      border-radius: 250px; /* Rayon des angles */
    }
    
    /* Style pour le nom du personnage */
    h1 {
      color: rgba(255, 255, 255, 1.0); /* Couleur du nom */
      text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.9); /* Ajoute une ombre */
      text-align: center; /* Mise en forme du texte */
      font-size: 60px; /* Changer la taille de la police */
      font-family: "Georgia", sans-serif; /* Utilisation de la police "Cardinal" */
      font-weight: bold; /* Met en gras */
      margin-bottom: 10px; /* Marge haute */
      margin-down: 10px; /* Marge basse */
    }
    
    /* Style pour la "race" */
    h2 {
      color: rgba(255, 255, 255, 1.0); /* Couleur du nom */
      text-align: center; /* Mise en forme du texte */
      font-size: 24px; /* Change la taille de la police */
      font-family: "Georgia", serif; /* Utilisation de la police "Georgia" */
      margin-top: -5px; /* Marge haute */
      margin-bottom: -5px; /* Marge basse */
      margin-left: 15px; /* Marge gauche */
      margin-right: 15px; /* Marge droite */
      line-height: 1; /* Interligne réduit */
    }
    
    /* Style pour les paragraphes */
    p {
      color: rgba(255, 255, 255, 1.0); /* Couleur du texte */
      font-size: 16px; /* Taille de la police en pixels */
      font-family: "Georgia", serif; /* Utilisation de la police "Georgia" */
      margin-left: 15px; /* Marge gauche */
      margin-right: 15px; /* Marge droite */
    }
  </style>
</head>
<body>
  <div class="outer-container">
    <!-- Début du conteneur extérieur -->
    <!-- Nom du personnage -->
    <h1>Nom du personnage</h1>
    <div class="middle-container">
      <!-- Début du conteneur central -->
      <div class="inner-container1">
        <!-- Début du premier conteneur interne -->
        <!-- URL de l'image de profil -->
        <img src="https://www.worldanvil.com/uploads/images/4b92257c13ca71c6095e8234afabdc81.jpg" alt="Image du personnage">
      </div>
      <!-- Fin du premier conteneur interne -->
      
      <div class="inner-container2">
        <!-- Début du deuxième conteneur interne -->
        <h2>- Race -</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo est vitae congue lobortis. Vestibulum venenatis, enim nec mollis varius, velit nunc eleifend justo, vel bibendum mi elit ac risus. </p><p>Cras viverra dapibus diam, nec egestas leo pretium at. Phasellus iaculis congue odio non sagittis. Quisque fringilla quam quis lorem vulputate, id rhoncus quam tristique. Aliquam erat volutpat. </p><p>Fusce at leo in arcu aliquet posuere vel at arcu. Proin eleifend nisl in risus sagittis sagittis. Nullam volutpat euismod tortor, vitae feugiat neque vulputate vel. Sed ultricies diam vitae metus ullamcorper malesuada. </p><p>Duis consequat massa sit amet nunc finibus, sed laoreet felis congue. Pellentesque nec nulla ac metus iaculis interdum. Cras efficitur risus quis erat sollicitudin, vel tempor ligula fringilla. </p>
      </div>
      <!-- Fin du deuxième conteneur interne -->
    </div>
    <!-- Fin du conteneur central -->
  </div>
  <!-- Fin du conteneur extérieur -->
</body>
</html>