[FAQ] Personnaliser sa description

Répondre

Smileys
:D :) ;) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :| :mrgreen: :geek: :ugeek:

Les BBCodes sont désactivés
Les smileys sont activés

Revue du sujet
   

Étendre la vue Revue du sujet : [FAQ] Personnaliser sa description

Re: [FAQ] Personnaliser sa description

par Torrun » 05 janv. 2024, 19:44

Merci Azaenor !
Ceux qui galèrent apprécieront ;)

Re: [FAQ] Personnaliser sa description

par Azaenor » 04 janv. 2024, 12:51

Et voilà comme demandé par certains une version ultra-simple et sobre pour ceux qui ne veulent pas trop galérer en HTML (je sais qu'il y en a ;) )
ici, il y a juste à compléter les parties texte (Nom du PJ, race et description) et mettre un lien vers votre image.
Newfiche.JPG
Newfiche.JPG (175.59 Kio) Vu 387 fois

Code : Tout sélectionner

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Styles CSS pour la mise en forme */
        body {
            text-align: center; /* Aligner le texte au centre */
        }
        h1 {
            text-align: center;
            font-size: 50px; /* Changer la taille de la police */
            font-family: "Georgia", sans-serif; /* Utilisation de la police "Georgia" */
            margin-top: -70px; /* Décalage de la marge supérieure */
            margin-bottom: -2px; /* Décalage de la marge inférieure */
        }
        h2 {
            text-align: center;
            font-size: 25px; /* Changer la taille de la police */
            font-family: "Georgia", sans-serif; /* Utilisation de la police "Georgia" */
            font-style: italic; /* Mettre en italique */
            margin-bottom: -2px; /* Décalage de la marge inférieure */
        }
        p {
            text-align: justify; /* Justifier le texte */
            max-width: 700px; /* Largeur maximale du paragraphe */
            margin: 0 auto; /* Centrer le paragraphe */
        }
        img {
            display: block; /* Pour s'assurer que l'image est centrée */
            margin: 0 auto; /* Centrer l'image */
            margin-bottom: -5px; /* Marge basse */
        }
    </style>
</head>
<body>
<!-- Balises HTML pour le contenu -->
<h1>Nom du personnage</h1>
<h2>- Race -</h2>
<!-- Image du personnage avec lien -->
<img src="https://i0.wp.com/donjonetdragon.fr/wp-content/uploads/2022/08/ro%CC%82deur-de-classe-dans-lunivers-de-dnd.jpeg?resize=564%2C741&ssl=1" width="auto" height="500" border="2">
<!-- Paragraphe de description -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut gravida quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac ex ac eros volutpat consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Nulla facilisi. Proin fermentum diam vel nulla fermentum, sed venenatis elit aliquet. Maecenas condimentum vitae lorem id bibendum. Quisque sed ligula elit. Vivamus fringilla, ligula ut scelerisque faucibus, lacus velit dictum elit, vel pulvinar odio risus a nunc. Suspendisse potenti. Sed consectetur metus vel turpis tristique tincidunt. Sed consequat tortor ut ex tristique, quis fermentum libero aliquet.</p>
</body>
</html>
Et voilà une seconde version un peu différente, mais toujours simple à utiliser :
Newfiche2.JPG
Newfiche2.JPG (108.73 Kio) Vu 381 fois

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Fiche de personnage</title>
  <style>
    /* Styles CSS pour la mise en forme */

    /* Styles généraux pour le corps de la page */
    body {
      font-family: Arial, sans-serif; /* Police de caractères par défaut */
      background-color: #f4f4f4; /* Couleur d'arrière-plan de la page */
      text-align: center; /* Centrer le texte dans la page */
      color: #333; /* Couleur principale du texte */
    }

    /* Styles pour la fiche du personnage */
    .fiche {
      width: 700px; /* Largeur de la fiche */
      overflow: hidden; /* Gestion de l'overflow */
      margin: 0px auto; /* Centrage horizontal de la fiche */
      margin-top: -150px; /* Décalage de la fiche vers le haut */
    }

    /* Styles pour l'image de l'avatar */
    .avatar {
      width: 200px; /* Largeur de l'image */
      height: 200px; /* Hauteur de l'image */
      border-radius: 50%; /* Forme arrondie de l'image */
      margin: 10px; /* Marge autour de l'image */
      float: left; /* Alignement de l'image à gauche */
      border: 2px solid #f4f4f4; /* Couleur de la bordure identique à celle de l'arrière-plan */
    }

    /* Styles pour les détails du personnage */
    .details {
      margin-left: 120px; /* Marge à gauche */
      text-align: center; /* Centrer le texte */
    }

    /* Style pour le titre du personnage */
    h1 {
      font-weight: bold; /* Texte en gras */
      margin-top: -30px; /* Marge en haut du titre */
      font-size: 40px; /* Taille du titre */
      font-family: "Georgia", sans-serif; /* Police du titre */
      margin-bottom: -5px; /* Ajustement de la marge inférieure */
    }

    /* Style pour le sous-titre (race) du personnage */
    h2 {
      font-style: italic; /* Texte en italique */
      margin-bottom: 15px; /* Marge en bas du sous-titre */
      font-size: 25px; /* Taille du sous-titre */
      font-family: "Georgia", sans-serif; /* Police du sous-titre */
      margin-top: 0px; /* Décalage de la marge supérieure */
      margin-bottom: -20px; /* Ajustement de la marge inférieure */
    }

    /* Style pour les paragraphes de description */
    p {
      clear: both; /* Efface tout alignement flottant précédent */
      padding: 10px; /* Espace intérieur des paragraphes */
      text-align: justify; /* Justifier le texte */
      max-width: 700px; /* Largeur maximale des paragraphes */
      margin: 0 auto; /* Centrer les paragraphes */
      margin-bottom: 0px; /* Ajustement de la marge inférieure */
    }
  </style>
</head>
<body>

<!-- Contenu de la fiche de personnage -->
<div class="fiche">
  <!-- Image de l'avatar du personnage -->
  <img class="avatar" src="https://i0.wp.com/donjonetdragon.fr/wp-content/uploads/2022/08/ro%CC%82deur-de-classe-dans-lunivers-de-dnd.jpeg?resize=564%2C741&ssl=1" alt="Avatar du personnage">

  <!-- Détails du personnage -->
  <div class="details">
    <!-- Titre du personnage -->
    <h1>Nom du personnage</h1>
    <!-- Sous-titre (race) du personnage -->
    <h2>- Race -</h2></div>
  <!-- Description du personnage -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut gravida quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac ex ac eros volutpat consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p><p>Nulla facilisi. Proin fermentum diam vel nulla fermentum, sed venenatis elit aliquet. Maecenas condimentum vitae lorem id bibendum. Quisque sed ligula elit. Vivamus fringilla, ligula ut scelerisque faucibus, lacus velit dictum elit, vel pulvinar odio risus a nunc. Suspendisse potenti. Sed consectetur metus vel turpis tristique tincidunt. Sed consequat tortor ut ex tristique, quis fermentum libero aliquet.</p>
</div>

</body>
</html>

Re: [FAQ] Personnaliser sa description

par Azaenor » 03 août 2023, 08:10

Non non, pas de souci, c'est fait pour ça ! Il faut juste bien mettre le texte de la description de ton perso et changer a minima l'image de profil parce qu'on n'est pas tous des Nazguls :lol:
C'est vraiment un code que j'ai fait exprès pour donner quelque chose clef en main pour ceux qui le veulent.
Après si tu as un peu de temps, c'est sympa de personnaliser un peu, genre changer la couleur des cadres, la couleur du fond en dessous du texte, etc.

Re: [FAQ] Personnaliser sa description

par Hyacinte » 02 août 2023, 18:51

Bonsoir ! Je me suis permise de copier-coller ton code pour faire la fiche de mon perso. Ca ne dérange pas ? J'ai trouvé le résultat juste incroyable !

Re: [FAQ] Personnaliser sa description

par Azaenor » 01 août 2023, 13:33

Et un point complémentaire qui m'a été demandé: l'ajout d'un média dans la description. Vous l'aurez peut-être vu si vous avez essayé de le faire, certaines fonctions HTML sont bloquées sur le site. Le but de ses blocages était d'éviter le lancement automatique de médias sur les fiches, surtout pour les gens qui ont des petites connections. Malgré tout, il existe quelques solutions qui permettent d'ajouter des médias sans gêner les gens qui, d'une part, ont de petites connexions ou d'autre part ne veulent pas de musique/vidéo qui se lance seule.

Comme l'approche diffère un peu, j'ai séparé les ajouts de son/musique aux ajouts de vidéos.

Ajoute de son

Le but est d'ajouter une musique ou un son d'ambiance à votre description. Ici, il faudra que votre son soit disponible en mp3. via un lien URL. Ce n'est par exemple pas le cas d'une vidéo youtube, mais par exemple un son qui vient d'une bibliothèque de son (comme https://lasonotheque.org/), ou même d'un son que vous avez hébergé à l'instar de ce que j'ai décrit pour les images. En effet, il est possible d'envoyer un son sur VOTRE discord (max. 25 Mo) et d'en récupérer le lien.

Code : Tout sélectionner

<head>
    <title>Lecture de son MP3 avec barre de lecture personnalisée</title>
    <style>
        /* Personnalisation de la couleur du lecteur audio */
        audio {
            background-color: rgba(0, 0, 0, 0.0); /* Couleur de fond avec une opacité de 0.5 */
            color: white; /* Couleur du texte */
            border: 3px solid rgba(0, 0, 0, 0.3); /* Bordure avec une opacité de 0.8 */
            border-radius: 50px; /* Coins arrondis */
            width: 250px; /* Largeur du lecteur audio */
            height: 25px; /* Hauteur du lecteur audio */
        }
        
        /* Personnalisation des contrôles audio */
        audio::-webkit-media-controls-panel {
            background-color: rgba(0, 0, 0, 0.1); /* Couleur de fond des contrôles avec une opacité de 0.2 */
            border-radius: 10px; /* Coins arrondis */
            padding: 5px; /* Espacement intérieur */
        }
    </style>
</head>
<body>
    <!-- Balise audio pour la lecture du son -->
    <audio controls>
        <source src="https://lasonotheque.org/UPLOAD/mp3/1445.mp3" type="audio/mpeg">
        Votre navigateur ne prend pas en charge l'élément audio.
    </audio>
</body>
Ce qui pourrait donner quelque chose comme ça:

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 -->
    <head>
    <title>Lecture de son MP3 avec barre de lecture personnalisée</title>
    <style>
        /* Personnalisation de la couleur du lecteur audio */
        audio {
            background-color: rgba(0, 0, 0, 0.0); /* Couleur de fond avec une opacité de 0.5 */
            color: white; /* Couleur du texte */
            border: 3px solid rgba(0, 0, 0, 0.3); /* Bordure avec une opacité de 0.8 */
            border-radius: 50px; /* Coins arrondis */
            width: 250px; /* Largeur du lecteur audio */
            height: 25px; /* Hauteur du lecteur audio */
        }
        
        /* Personnalisation des contrôles audio */
        audio::-webkit-media-controls-panel {
            background-color: rgba(0, 0, 0, 0.1); /* Couleur de fond des contrôles avec une opacité de 0.2 */
            border-radius: 10px; /* Coins arrondis */
            padding: 5px; /* Espacement intérieur */
        }
    </style>
</head>
<body>
    <!-- Balise audio pour la lecture du son -->
    <audio controls>
        <source src="https://lasonotheque.org/UPLOAD/mp3/1445.mp3" type="audio/mpeg">
        Votre navigateur ne prend pas en charge l'élément audio.
    </audio>
</body>
  </div>
  <!-- Fin du conteneur extérieur -->
</body>
</html>
Évidement, il est possible de le mettre ailleurs dans la fiche au besoin.
Quoi qu'il en soit, c'est une technique simple sur ça mise en place, peut-être moins pour trouver un fichier .mp3 en ligne.

Ajouter une vidéo

L'intérêt principal de la vidéo est d'ajouter du son et dans certains cas de l'image pertinent avec la description de votre personnage.
Ici le code est plus simple, mais son usage est un peu plus compliqué. En effet, il ne suffit pas de juste copier-coller le lien URL d'une vidéo YouTube pour que ça marche. Il faudra récupérer l'ID de la vidéo et remplacer cet ID dans le lien URL du code HTML.

Code : Tout sélectionner

<!-- Balise object pour intégrer une vidéo YouTube. Attention il faut mettre l'ID youtube et non juste l'HTML -->
<object 
    width="400"
    height="225"
    style="border:none"
    data="https://www.youtube.com/embed/EOA1wBw_Jt4?autoplay=1&start=0&loop=1&controls=1&theme=dark&rel=0"
></object>
Pour cet exemple l'ID de la vidéo est "EOA1wBw_Jt4". Vous trouver ce code en fin dans l'adresse URL de la vidéo youtube. toujours dans notre cas le lien complet serait "https://www.youtube.com/watch?v=EOA1wBw_Jt4"

Ici aussi, on peut évidemment modifier le positionnement de la vidéo, mais un code de fiche possible serait par exemple :

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 -->
    <!-- Balise object pour intégrer une vidéo YouTube. Attention il faut mettre l'ID youtube et non juste l'HTML -->
<object 
    width="300"
    height="150"
    style="border:none"
    data="https://www.youtube.com/embed/EOA1wBw_Jt4?autoplay=1&start=0&loop=1&controls=1&theme=dark&rel=0"
></object>
  </div>
  <!-- Fin du conteneur extérieur -->
</body>
</html>
Voilà pour les petits exemples. Après, il est possible moyennement un peu de travail de faire plus joli et mieux intégré, mais le but de ses petits tutos est de faire simple pour que tout le monde puisse jouer avec sa fiche perso.
Fichiers joints
Exemple avec lecteur audio.png
Exemple avec lecteur audio.png (1.9 Mio) Vu 1808 fois
Exemple avec lecteur video.png
Exemple avec lecteur video.png (2.11 Mio) Vu 1808 fois

Re: [FAQ] Personnaliser sa description

par Azaenor » 28 juil. 2023, 15:21

Finalement un petit point sur le stockage des images

Odyssée ne permet pas de stocker des photos autres que celle que vous pouvez ajouter sur la partie droite de la modification de fiche.

Donc dans le cas où vous voulez faire une fiche perso plus complexe en ajoutant plusieurs images par exemple, il y a diverses solutions/situations.
  • Votre image vient du web, dans ce cas pas besoins de stockage particulier, plus qu'à faire référence à l'URL de l'image dans votre code HTML de la fiche perso
  • Vous avez créé une image par X technique exposée précédemment. Dans ce cas, il vous faut trouver un moyen d'héberger sur le web votre image pour en récupérer son URL afin de l'ajouter dans le code de la fiche perso. Voici quelques outils :
    • https://discord.com/, et oui en plus de rejoindre le discord du jeu, vous pouvez aussi vous créer votre propre serveur discord gratuitement et y stocker vos illustrations en les ajoutant dans un canal. Attention, il s'agit bien de mettre votre image sur VOTRE serveur et non celui du jeu (il est interdit de donner votre image sur notre discord, car il s'agit d'une information RP). Une fois fait plus qu'à clic droit sur l'image et copier le lien.
    • https://www.flickr.com/, site d'artiste, principalement photographes. Il est donc possible d'y mettre vos images et d'en retirer un lien utilisable.
Quel que soit le stockage choisi, attention au droit d'auteur si vous n'avez pas fait vous-même l'image.

De manière générale, je vous conseille de jouer sur la redondance des supports pour vos images. Il n'est pas rare que pour limiter les tailles des serveurs, certains services retirent des images périodiquement et ça serait dommage de perdre la vôtre. Pour ça, je vous conseille de stocker vos images sur plusieurs solutions précédemment présentées, mais aussi de manière hors web. Par exemple sur un disque dur, une clef USB ou même par mail ou cloud privé. Ça évitera la mauvaise surprise en cas de disparition.

Ici aussi, si vous avez d'autres techniques/approches, n'hésitez pas à les partager avec les autres.

Re: [FAQ] Personnaliser sa description

par Azaenor » 28 juil. 2023, 15:20

J'ai aussi eu de nombreuses questions sur comment trouver des images d'illustrations pour son personnage. Je vais vous en faire un résumé des plus courants ci-dessous :
  • Faire soi-même : Rien de tel, si on a un peu de talent, que de dessiner soi-même son personnage (sur papier ou en digital). Le résultat dépendra de votre habileté, mais est "gratuit".
  • Graphiste et illustrateur/illustratrice : Très bonne solution, possible de demander exactement ce que l'on veut, par contre cela coute évidemment et c'est normal. Vous pouvez passer soit par un contact direct de quelqu'un qui travaille dans votre région, soit passer par des sites de mise en relation d'artistes avec des acheteurs. Par exemple https://www.fiverr.com/ en cherchant par exemple "character design". Coté prix, ça peut aller d'une vingtaine d'euros à plusieurs centaines en fonction du service
  • Le web : Peut être le plus simple, la recherche Google. Cette solution ne permet généralement pas d'avoir une image parfaite de votre PJ, mais une approche en cherchant un peu. D'expérience, les recherches en anglais donnent de meilleurs résultats et les mots clefs type sont par exemple "DnD character" ou encore "medieval fantasy character". À cela, il vous faudra évidemment ajouter quelques précisions complémentaires (race, classe, etc). Une bonne source d'image est par exemple https://www.pinterest.fr/ sur lequel on retrouve un très grand nombre d'illustrations de personnages pour des JDRs.
  • "Software": Ici, je veux parler de programme ou application de character design. Il en existe pas mal, tous plus ou moins payant. Les résultats peuvent être plus ou moins bons, mais c'est souvent très limité dans le style. Pour n'en citer qu'un https://www.heroforge.com/ vous permet de faire gratuitement des personnages, mais il faudra payer pour avoir une version haute définition.
  • IA : Le petit nouveau des solutions pour faire l'image de son personnage. Ici, on joue avec des IA génératrices d'images comme par exemple https://www.midjourney.com/ à qui on demande de faire du character design. La plupart des IA ont un nombre de générations gratuit, soit par compte, soit par jour. Après ça devient payant. Si je parle de Midjourney, que je connais, vous avez droit à 25 générations gratuites limité au bon vouloir de l'utilisation des serveurs (utilisation gratuite uniquement quand les serveurs ne sont pas trop occupés avec les gens qui payent). Si vous avez une idée précise en tête et que vous n'êtes pas connaisseur de ce genre d'outil et de son fonctionnement, il vous faudra plus de 25 générations pour arriver à vos fins. J'ai fait une mini stat sur mes dernières générations (alors que je maitrise correctement l'outil) je suis environ entre 15-20 générations pour avoir une image qui me plait et qui correspond à ce que j'ai en tête. Donc, on passe vite par la case portefeuille pour avoir quelque chose qui nous plait. En effet, plus ce que vous voulez obtenir est précise, plus ça sera compliqué pour l'IA de le réaliser. Si vous voulez juste un elfe mâle avec des cheveux blancs et vêtu en vert, quelques générations suffiront. Par contre, si vous voulez un elfe mâle avec des cheveux blancs et vêtu en vert, un pantalon noir, une ceinture dorée, un arc, un carquois en cuir, des yeux bleus, etc, là, ça sera plus compliqué parce que les IA ne prennent en compte qu'un nombre limité de requêtes. Et même après de nombreuses générations, il est parfois nécessaire de passer par la case Photoshop, Paint.net ou autre pour affiner le résultat.
Voilà un résumé rapide. Pour avoir les meilleurs résultats et plus cohérent avec votre personnage, je vous conseille de passer par des artistes ou par vous si vous en êtes un.

En second choix, la recherche d'images existantes sur le web. Ça peut être relativement long pour trouver la perle, mais il y a tellement de chose existante qu'on finit presque toujours par trouver.

Si vous avez du temps et que l'IA ne vous fait pas peur, je vous le conseille en troisième choix. Ça peut prendre du temps, ça coute un peu et le résultat n'est que rarement exactement ce que vous voulez malgré des qualités d'images impressionnantes. Par contre, je ne parle pas ici de "pour ou contre les IA" et le vol du travail des artistes. C'est un autre sujet, mais dont il faut être conscient.

Et en dernier, je mettrais tout ce qui est logiciel ou application. Je trouve perso que les résultats soient un peu pauvres visuellement Par contre, c'est pratique et relativement simple d'usage. C'est un peu le jeu de "on habille une poupée".

Si vous avez des bons plans, n'hésitez pas à en faire part dans ce thread. En fonction, je modifierai mon message pour ajouter d'autres solutions.

Re: [FAQ] Personnaliser sa description

par Azaenor » 14 juil. 2023, 09:55

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>
Fichiers joints
Exemple fiche.png
Exemple fiche.png (1.88 Mio) Vu 811 fois

Re: [FAQ] Personnaliser sa description

par Azaenor » 08 mai 2023, 15:27

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>

Re: [FAQ] Personnaliser sa description

par Béryl Jaspenimbes » 05 mai 2022, 01:23

Harriet Sourameau a écrit : 25 avr. 2022, 20:46 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. :roll:

Haut