[Commande codage] [Terminé - Valou] Bestiaire pour Esméria - Terminé

Coucou Comme je ne sais pas coder, je me tourne vers vous :3

Type de commande (modification de templates, en-tête, qeel, mise en page de messages, pub, autres) : Une fiche de bestiaire ou les images vont changer à chaque bestiole x)
Pour quel forum : https://esmeria.forumactif.com/
Maquette graphique/schéma/croquis : https://nsa40.casimages.com/img/2020/04/01/200401061231187109.png
Informations utiles (couleurs, images, etc, …) : Couleurs au pif, elles vont changer en fonctione de la bestiole Images au pif aussi, mais je vous fournis déjà celles mises là xD La grande image est en opacité 50% sur un fond de couleur ecf2fd, le texte région est de couleur 32356e et les autres textes sont de couleurs 242445. Pour la police, ici celle utilisé est une polie sur dafont et je sais qu'il existe un code pour ça mais je me souviens plus ._. Donc du coup vous pouvez prendre la police Arial je chercherai de mon côté des polices
https://nsa40.casimages.com/img/2020/04/01/200401061413736375.png
https://nsa40.casimages.com/img/2020/04/01/200401061413560705.png
[Pour les modifications de templates] Version du forum (PhpBB2, PhpBB3, PunBB, Invision, ModernBB ou AwesomeBB) : //
Le code pourra-t-il être mis en libre service ensuite ? Non sorry
La commande peut-elle être prise en charge par un membre ou uniquement par les râleuses ? Oui avec plaisir

Merci d'avance x)

Coucou @Kaerin !

Merci pour ta commande ici

Comme tu laisses le choix aux membres de prendre en charge la demande, on va la laisser quelques jours

Pour le bas de la fiche, il est coupé net, c'est normal ? Il y a quelque chose en dessous ou pas ?

Bises

Coucou, je vais tenter de la faire, faut bien se lancer dans le grand bain ! Bon je garantie pas le résultat par contre

Je plaisante, je vais faire au mieux !

Super @Valou712 Merci pour la prise en charge, et si tu as un souci ou si tu veux qu'on vérifie que le code est clean avant que tu le rendes, on peut faire une parenthèse dans la formation pour vérifier tout ça
(j'avoue que je voulais la proposer en exos sur une formation )

Recoucou, alors j'ai un soucis pour l'image en fond avec une opacité, je sais pas trop comment m'y prendre !

Code:

<style type="text/css">.bestbg {width:504px; height:700px; background-color: #ecf2fd; margin:auto;position: relative;} .besttitre {width:504px; text-align:center; font-family:arial; font-size:45px; color:#32356e; position:absolute; top:25px;} .bestimgb{position:absolute; top:80px; left:20px;} .besttxt{position:absolute; font-family:arial; font-size:20px;color:#242445; text-transform:uppercase; left:260px; top:150px;line-height:40px;}</style>
<div class="bestbg"><div class="besttitre">Région</div><div class="bestimgb"><img src="https://nsa40.casimages.com/img/2020/04/01/200401061413560705.png"/></div><div class="besttxt">nom de la créature<br/>dangerosité<br/>habitat<br/>population</br>domptable<br/>loot</div></div>

Coucou
@Valou712 , ton code est pas mal du tout, même si l'abus des position:absolute me parait compliquer le truc. (par exemple pour le titre, tu peux juste lui mettre un line-height et des marges pour le placer, sans le position absolute )

pour l'image de fond, l'idéal serait que celle fournie soit déjà en transparence @Kaerin, si tu peux ?
Sinon ça va réduire l'opacité de tout

EDIT : Valou, ton image n'a pas besoin d'être dans une div, tu peux simplifier le coder en appliquant ta classe directement à l'image
Vraiment ton code est très lisible sinon on va juste faire une technique pour le rendre vraiment aéré après

Ah oui pas de soucis, voilà avec l'opacité

https://nsa40.casimages.com/img/2020/04/02/200402032915396929.png

Cooool ! Merci pour l'image avec l'opacité

Du coup j'en suis là : (je poste juste le code, sinon ça fait conflit avec le visuel du précédent)

Code:

<style type="text/css">.bestbg {width:504px; height:504px; background-color: #ecf2fd;background-image: url("https://nsa40.casimages.com/img/2020/04/02/200402032915396929.png") ; margin:auto;position: relative;} .besttitre {text-align:center; font-family:arial; font-size:45px; color:#32356e;line-height:45px; padding-top: 15px;} .bestimgb{position:absolute; top:80px; left:20px;} .besttxt{position:absolute; font-family:arial; font-size:20px;color:#242445; text-transform:uppercase; left:260px; top:150px;line-height:40px;}</style>
<div class="bestbg"><div class="besttitre">Région</div><img class="bestimgb" src="https://nsa40.casimages.com/img/2020/04/01/200401061413560705.png"/><div class="besttxt">nom de la créature<br/>dangerosité<br/>habitat<br/>population</br>domptable<br/>loot</div></div>

Pour le conflit de visuel, hésite pas à mettre le précédent en "code" pour que Kaerin puisse voir le vrai rendu

@Valou712 il me semble que ton code est nickel, il est propre et répond à la demande Sauf pour l'image de fond, qui doit être modifiée selon l'animal mais là, pour pouvoir faire au mieux, il faut qu'on sache quelque chose
Juste une petite question pour @Kaerin : ça sera posté sur ton propre forum, on est d'accord ? Donc la CSS sera dans le panneau d'admin ?

Oui ce sera bien sur mon fofo, le css en panneau d'admin ^^

super, du coup @Valou712, on va faire un truc que j't'ai toujours dit d'éviter : l'image de fond on va la mettre dans le HTML avec l'attribut "style" tu vois ou pas ?

@Kaerin, les couleurs seront les mêmes quelque soit l'animal ou ça doit aussi changer ?

Du coup je poste le visuel ici :

Et hop, voici le dernier code :

Code:

<style type="text/css">.bestbg {width:504px; height:504px; background-color: #ecf2fd; margin:auto;position: relative;} .besttitre {text-align:center; font-family:arial; font-size:45px; color:#32356e;line-height:45px; padding-top: 15px;} .bestimgb{position:absolute; top:80px; left:20px;} .besttxt{position:absolute; font-family:arial; font-size:20px;color:#242445; text-transform:uppercase; left:260px; top:150px;line-height:40px;}</style>
<div class="bestbg" style="background-image: url('https://nsa40.casimages.com/img/2020/04/02/200402032915396929.png');"><div class="besttitre">Région</div><img class="bestimgb" src="https://nsa40.casimages.com/img/2020/04/01/200401061413560705.png"/><div class="besttxt">nom de la créature<br/>dangerosité<br/>habitat<br/>population</br>domptable<br/>loot</div></div>

Non ça va changer selon l'animal

Coucou @Kaerin , voici donc le CSS que tu pourras ajouter dans ton CSS via le panneau admin :

Code:

.bestbg {
width:504px;
height:504px;
background-color: #ecf2fd;
margin:auto;position: relative;
}

.besttitre {
text-align:center;
font-family:arial;
font-size:45px;
color:#32356e;
line-height:45px;
padding-top: 15px;
}

.bestimgb{
position:absolute;
top:80px;
left:20px;
}

 .besttxt{
position:absolute;
font-family:arial;
font-size:20px;
color:#242445;
text-transform:uppercase;
left:260px;
top:150px;
line-height:40px;
}

Ensuite voici le code de ta fiche, pour changer la couleur du texte lorsqu'il le faudra, il faudra juste que tu indiques la couleur désirée dans les parties style="color:...;" (il y en a 2). J'espère que tout est clair (et que je n'ai rien oublié), si tu as des questions n'hésite pas !

Code:

<div class="bestbg" style="background-image: url('https://nsa40.casimages.com/img/2020/04/02/200402032915396929.png');"><!--

--><div class="besttitre" style="color:#32356e;">Région</div><!--

--><img class="bestimgb" src="https://nsa40.casimages.com/img/2020/04/01/200401061413560705.png"/><!--

--><div class="besttxt" style="color:#242445;">nom de la créature
dangerosité
habitat
population
domptable
loot</div></div>

Merci Valou et merci pour les explications

EDIT : oups, Valou, tu as oublié la description de la bestiole sous l'image.

Kaerin a écrit:Merci Valou et merci pour les explications

EDIT : oups, Valou, tu as oublié la description de la bestiole sous l'image.

Coucou, alors je pense que tu as oublié de le mentionner dans la commande (sur la maquette il n'y a pas de texte descriptif), elle doit aller ou cette description ?

Mince je suis désolé, j'étais certaine de l'avoir écris T.T on va laisser comme ça, je vais juste rallonger la hauteur un peu et coller le texte dans un div sous l'image

Hihi c'est pour ça que j'avais demandé

Pour le bas de la fiche, il est coupé net, c'est normal ? Il y a quelque chose en dessous ou pas ?

On peut te l'ajouter @Kaerin, sans souci. Dis juste à Valou où le faire et comment, elle pourra te faire le tout en harmonie

Coucou @Mäven Non c'est bon ne t'en fais pas au final je préfère comme ça XD

ça marche, du coup on archive @Kaerin ?

Yep vous pouvez archiver

Super
Merci à @Valou712 pour la prise en charge