[commande codage][Terminé - Nevyin]Commande fiche projet Agrabah

Coucou Ma copine ayant quelques soucis, c'est moi qui vient vers vous pour une commande de fiche de projet Elle devrait pouvoir s'inscrire courant de la semaine normalement :3


Type de commande (modification de templates, en-tête, qeel, mise en page de messages, pub, autres) : Fiche Projet
Pour quel forum : Les forums où est son projet (Bazzart, PRD, Ohana'RT et  ici quand elle pourra s'inscrire)
Maquette graphique/schéma/croquis : https://nsa40.casimages.com/img/2020/04/20/200420024414706772.png
Informations utiles (couleurs, images, etc, …) : Alors en gros, les 4 rectangles sous le titre, ce sont des onglets cliquable. Donc au clique l'onglet s'ouvre Le rectangle tout en bas, c'est la boite de texte. Il faudrait donc du coup qu'il y ait un overflow dessus, sachant que certaines annexes auront beaucoup... mais genre VRAIMENT beaucoup de textes. Et si possible, il faudrait que vous puissiez m'expliquer comment je peux retirer des onglets ou en rajouter (puisque c'est moi qui vais lui modifier le code, elle s'y connait genre absolument pas et risquerait de tout faire bug XD et elle sait pas graph non plus, donc ce truc c'est de moi mdr) afin que je puisse lui modifier selon son annexe (sachant que certaines n'auront pas besoin d'onglets)
[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 ? Eh bien, si ça peut servir à d'autre oui, pourquoi pas
La commande peut-elle être prise en charge par un membre ou uniquement par les râleuses ? Par tous, tout ce que je demande c'est qu'il n'y ait aucun bug Si jamais j'ai oubliée quelque chose n'hésitez pas à le demander

Hello !

Tes annexes seront en page HTML, puis postées en iframe ?

Je pense qu'on a toutes les infos nécessaires, on va attendre de voir si quelqu'un d'autre que moi s'en charge dans les prochains jours, sinon je m'en chargerai mercredi =)

Bises

Hello

De toute façon, il n'y aura pas le choix que de faire cette fiche en iframe parce qu'on ne peut pas mettre de js dans les messages.
Et ça semble relativement "simple" comme code. Je peux m'en charger si tu veux.

J'aurais juste deux questions :
1 : Est-ce que le nom du forum et le texte en haut, c'est en dur sur le fond (fait parti de l'image) ou est-ce que c'est du texte qu'on peut modifier dans le html ?
2 : Est-il possible d'avoir l'image de fond sans les blocs qui sert aux textes et aux onglets ? Les fonds se feront en css et ça permettra de pouvoir en rajouter et en supprimer également

Coucou Oui ce sera en iframe Merci de bien vouloir prendre en charge Nevyin *^*

1 : Ça fait partie de l'image
2 : Oh oui bien sûr pas de soucis Le voici : https://nsa40.casimages.com/img/2020/04/20/200420024408135461.png

Hey, super.
Voici le rendu, est-ce que ça te convient ?
https://plyre.fra.co/h2-fiche-projet-pour-kaerin

Je peux effectuer des modifications si besoin .

Hey ma colocataire adore, c'est parfait '-'

Super. Par contre tu disais vouloir pouvoir ajouter / supprimer des éléments en onglet. Mais si tu veux en ajouter, ça va déformer le contenu. Combien est-ce que vous pensez vouloir en ajouter maximum ? 4 ? Ou plus ? Est-ce que si tu en ajoutes plus, on doit agrandir la fiche ou alors réduire le contenu à l'intérieur ? :p

Coucou Alors si elle en ajoute, ce sera seulement 2 de plus :3

comme ceci : https://nsa40.casimages.com/img/2020/04/21/200421025226540820.png

Hey !

Ca marche. Par contre c'es compliqué de géré la largeur des boutons d'onglets en fonction du nombre qu'ils sont. Du coup je les ai mis de suite à la bonne taille pour quand ils seront 6 au cas où.

Du coup idem, c'est le même lien. Tout est bon pour toi ou tu vois d'autres choses à modifier ?
https://plyre.fra.co/h2-fiche-projet-pour-kaerin

hey Pas de soucis pour la taille c'est normal du coup c'est parfait je trouve rien à redire ou à modifier :3

Super. Alors, voici le code général pour que tu vois à quoi il ressemble :



Bon, tu as toute une partie qui concerne le css et le javascript. Donc je te dirais de ne pas vraiment en tenir compte. Sauf si tu veux en faire des modifs bien-sûr .
Pour savoir comment ça fonctionne, les onglets se trouvent tous dans cette class :


Chaque fois que tu veux créer un nouveau onglet (ou en supprimer un), il faut que tu ajoutes une div à l'intérieur, comme celle-ci :

Chaque onglet possède :
- un "data-link", qui est égal au nom de l'onglet
- La class active (qui ne doit apparaître qu'une fois) pour dire quel onglet doit être actif à l'initialisation.

Et puis il faut également ajouter le contenu correspondant qui se trouve ici :


Donc tout ça ce sont tous les contenus correspondant aux onglets créés plus haut. Pour ce qui est du premier onglet affiché par défaut, il possède un "data-content" qui possède le même nom EXACTEMENT que celui du "data"link" sur l'onglet. C'est comme ça que le lien se fait entre le clique sur un onglet, et l'ouverture du bon contenu.
Ce premier contenu affiché par défaut, il ne possède pas le style="display: none" alors que tous les autres contenus oui. Donc si tu veux ajouter un contenu, il faut rajouter ceci :


Je pense que le code est assez simple si tu t'y connais un peu en codage. Ceci étant dit je resterais bien évidement dispo si tu souhaites un coup de main .

Donc tout ce code tu dois l'afficher dans une page html sur le forum (sais-tu comment faire ?).

Et une fois que tu l'as ajouté sur une page, il va te falloir récupérer le lien de cette page et le copier dans ce bout de code :


Je mettrais du code ce code en libre-service dans la semaine. Si ça peut servir à quelqu'un d'autres . Merci à toi.
Encore une fois, hésite pas si tu as des questions ou quoi.

Coucou :3 oh merci beaucoup pour toutes les explications c'est tout clair pour moi, merci beaucoup encore une fois

Hello par ici

Merci @Nevyn d'avoir pris en charge la commande ^^

@Kaerin, ta commande est terminée du coup ? On peut classer ?

Oui vous pouvez classer Encore une fois merci Nevyin