Hola ! Me revoilà !
Promis, je t'ai pas stalké jusqu'à voir les commandes ouvertes, tu es passé sur notre forum poster tes news (d'ailleurs tes nouveaux codes sont vraiment géniaux, merci de toujours les partager !), du coup ma co-fonda a dit "FONCE". Me voilà donc avec une commande beaucoup trop longue, je m'en excuse d'avance
Je te mets donc chaque partie concernée entre spoiler, histoire que tu puisse t'y retrouver (et si ça te dérange modifie mon message hein) : je viens te quémander une modification du titre/header du forum, une PA, une liste des sujets et un affichage des profils (sur la page même et dans les sujets, si possible), bref, j'abuse, hésite pas à me le dire si ça fait beaucoup trop
Si jamais tu trouves qu'on abuse beaucoup trop de ta générosité, n'hésite pas à me le faire savoir, je me sens mal de te demander un travail aussi colossal, mais merci d'avance d'être arrivé au bout de la lecture de cette looongue commande. Et si il manque des choses n'hésite pas à me le faire savoir, mais je viens de passer un moment à rédiger tout ça alors j'espère qu'il ne manque rien. En plus je ne suis même pas sûre que ce que je t'ai demandé soit faisable, je croise les doigts
Voilà, du love de notre part~
Promis, je t'ai pas stalké jusqu'à voir les commandes ouvertes, tu es passé sur notre forum poster tes news (d'ailleurs tes nouveaux codes sont vraiment géniaux, merci de toujours les partager !), du coup ma co-fonda a dit "FONCE". Me voilà donc avec une commande beaucoup trop longue, je m'en excuse d'avance
Je te mets donc chaque partie concernée entre spoiler, histoire que tu puisse t'y retrouver (et si ça te dérange modifie mon message hein) : je viens te quémander une modification du titre/header du forum, une PA, une liste des sujets et un affichage des profils (sur la page même et dans les sujets, si possible), bref, j'abuse, hésite pas à me le dire si ça fait beaucoup trop
- Header/titre:
Commande de codage
Élément à coder : Aménagement du titre du forum sur la bannière et petit menu (si c’est faisable encore une fois !)Adresse du forum : http://the-holiday-scam.forumactif.com/Version du forum : phpBB2Plusieurs choses en une, parce que je ne savais pas où caser la demande de menu (sur la PA ça augmentait les dimensions du coup tu risquais de ne plus t’y retrouver, etc) : la première c’est ce dont je t’ai parlé, un titre avec un sous-titre en écriture et non en image, comme sur ton forum, du coup, séparés par un trait ; la deuxième ce serait un menu qui resterait sur toutes les pages, avec des icônes renvoyant aux pages clefs du forum (dans l’ordre : contexte, règlement, index, partenaires et annonces), avec, tout à droite, un petit menu dépliable (je ne sais pas si c’est le terme, qui afficherait ce qui se trouve en général entre la PA et les catégories du forum (top des posteurs, etc), histoire de rendre ça un poil joli (si ce n’est pas possible tant pis, je virerai tout ça à la main xD). Si c'est possible (j'ai l'impression de demander la Lune en vrai), le fil d'Ariane du forum viendrait s'afficher juste sous le menu orange. Schéma : https://i.imgur.com/meAL6LR.pngTaille des éléments : L’image bannière fait 920x418px au total, la bande blanche 720x2px (elle est donc située à 100px des bords de l’image) et la bande orange 920x51px. Les cadres allant vers des liens sur le forum ont un trait de 1px, et font 37x37px (ils sont donc situés à 7px des bords bas et haut de la bande orange). Ils sont centrés au milieux de celle-ci, et espacés entre eux par 20px. Est-il possible d’avoir un effet de flou au survol de ces cases ? Lorsque l’on survolerait ces icônes s’afficherait un petit texte dans un encadré de 15px de hauteur en tout, avec un cadre intérieur de 1px (ce serait faisable que ce petit cadre bouge avec la souris ?).
Est-ce que le titre "The Holiday Scam" pourrait voir ses lettres s'espacer légèrement au survol ?
Pour ce qui est du « bouton » à droite, le cadre comprenant « liens utiles » fait 70x20px, avec un trait de 1px. Il est situé à 2x du bord gauche et inférieur de la bande orange. Ouvert, il affiche 3 options, des cases de 106x18 (je me suis plantée sur le schéma, pardon xD) avec le texte aligné sur la droite. La couleur d’une de ces option, au survol, changerait le fond de couleur d’orange vers bleu.
Est-il possible d’afficher ▼ quand le menu est fermé, et ▲ quand il est ouvert ?
Si c'est possible, est-ce que le fil d'Ariane du forum pourrait être affiché juste en dessous de la barre orange ? Cela consisterait en une bande verte de 920x28px, qui afficherait les liens du forum, séparés par une image de > (ou un symbole, je n'ai pas vraiment d'idée concernant le fonctionnement de cet élément).Ressources :
Polices :
- Le titre : Nemoy (https://fontlibrary.org/en/font/nemoy) #ffffff avec un effet d'ombre vers la droite en #f4f4f4 (244,244,244) > 40px
- Le sous-titre : Cedarville Cursive (https://fonts.google.com/specimen/Cedarville+Cursive) #ffffff> 20px
- Le contenu des intitulés des icônes : Poiret One (https://fonts.google.com/specimen/Poiret+One) #000000 > 10px
- « Liens utiles » : Poiret One #ffffff > 12px
- Les liens en question & le fil d'Ariane : Raleway (https://fonts.google.com/specimen/Raleway) #ffffff (dans l’idéal est-ce que tu pourrais forcer la police à rester blanche en toute occasion pour que la couleur de base des liens ne s’affiche pas ?) > 10px
Images :
- La bannière (920x418) : https://i.imgur.com/9U3pakl.png ;
- Les icones (33x33) : https://i.imgur.com/F6PFDXP.png (contexte), https://i.imgur.com/ZNniv82.png (règlement), https://i.imgur.com/DhVcRoD.png (index), https://i.imgur.com/ZSMCKxH.png (partenaires) et https://i.imgur.com/mpAGKXX.png (annonces) ;
- Le ">" séparant les liens du fil d'Ariane (14x14) : https://i.imgur.com/IWAzOBG.png.
Couleurs :
- La bande orange : #F6BD80 (246,189,128)
- La partie bleue au survol : #dbe7e6 (219,231,230)
- Le fil d'Ariane en vert : #99AA99 (153,170,153)Autres précisions : Comme j’ai une bande verte en haut de mon forum, le mieux serait de pouvoir descendre la bannière de 50px, pour qu’elle soit visible dans son intégralité.Acceptez-vous que votre commande aille dans le LS ? : Yep.
- PA:
Commande de codage
Élément à coder : Une petite PA s’il te plait c:Adresse du forum : http://the-holiday-scam.forumactif.com/Version du forum : phpBB2Ce serait une PA d’en tout 900*450, composées de plusieurs petits blocs que je vais te détailler ci-dessous. Schéma : https://i.imgur.com/OXOFGuH.png (le fond gris est celui du forum, sans fond ça donnerait ça : https://i.imgur.com/BrzS3ap.png).Taille des éléments :
- Contexte : 300x241 (la ligne de 1px de couleur verte est comprise dans les 300). Ce serait un bloc de texte, avec une scrollbar, mais tu n’es pas obligé de la coder, on a celle de base du forum~
- Les news : un bloc de 300x80 avec si possible 4 images qui défileraient (défilement que l’on pourrait « contrôler » avec les flèches à droite et à gauches, en 30x30).
- Liens : 6 blocs en 90x25 (une longueur qui peut être changée en fonction des marges de chaque côté, je crois m’être plantée), séparés du contexte et de l’image à droite par 10 px, et en deux colonnes, et de même chaque bloc est espacé de celui du dessous/dessus par 10px. Il y a cependant 8px entre les deux blocs du dessous (les derniers : « prédéfinis »/« le coin des invités ») et ceux « We need them » et « vos esclaves adorées ». Est-ce qu’un effet sur le texte peut étirer ce dernier légèrement ?
- Prédéfinis : le titre, « We need them » se trouve dans un cadre de 190x25, et surplombe un bloc de 190x205, dans lequel se trouvent 9 images en 55x55. En bas du bloc clair se trouve une image en 132x22, centrée. Au survol, les images sont un peu opacifiées, pour afficher le nom du prédef et le lien vers sa fiche.
- Staff : le titre, « vos esclaves bien aimées » se trouve par-dessus un bloc de 364x25 vert. 6 px en dessous se trouvent 2 images avec les personnages du staff, en 180x70. Avec un survol qui floute en partie ces images (comme sur la sidebar que tu nous as fait ?) s’affiche le pseudo, le rôle, ainsi que deux images en 20x20 pour les mps et le profil.
- Membres à l’honneur : deux images de 127x90px sont affichées ici, à 9px des liens du forum, et séparées par 8px (l’image à gauche est donc 3px du bord des 900px de la largeur totale). Un survol fait apparaître un bandeau en 127x20 (ce serait possible de le faire apparaître avec un glissement vers la gauche ?) avec le pseudo du membre mis à l’honneur, et opacifie légèrement l’image.
- News : il s’agit d’un bloc composé en 2 parties, situé à 17px de des images du staff, et 9 du bloc des prédefs. La première partie, à droite, est le bloc du titre, en 20x112. La seconde est un bloc de 156x112, où l’on peut voir défilé des nouvelles rédigées, grâce à une scrollbar. La date des nouveautés est encadrée par un petit ovale vert de 53x11px : il y a ensuite une partie avec un titre court, suivie d’un passage de texte, puis on enchaîne sur une autre annonce.
- Top-sites : à 4 px du bloc clair des nouvelles se trouve le cadre comprenant le titre du vote, vert, en 180x20. 7 px en-dessous de ce bloc vert se trouvent 3 icones de vote, en 30x30, centrées sur les 180px. Elles renvoient vers les top-sites.
- Boutique : il s’agit d’une image en 180x45, située 10px en-dessous des icônes pour voter. Elle renvoie vers un lien sur le forum.
- Partenaires : une barre orange en 900x62 affiche les images grisées de 14 partenaires, en 50x50, avec, au bout, une icône en 50x50 elle aussi. Les marges partant des bords droit et gauche de la bande orange font 19px. Survoler les partenaires révèle les couleurs des boutons, et affiche une infobulle avec le nom du partenaire, qui bouge avec la souris (comme sur ton footer je crois), d'une hauteur de 15px (ce qui comprend la bordure blanche) et avec le texte centré au moins à 4px des bords droit et gauche.Ressources :
Polices :
- Contexte : en raleway (https://fonts.google.com/specimen/Raleway) de 12px, et de couleur #616161 (97,97,97).
- Liens : en Cedarville Cursive (https://fonts.google.com/specimen/Cedarville+Cursive) de couleur blanche (#ffffff).Si l’étirement est possible au survol, est-ce qu’il est possible d’assombrir la couleur vers du #EFEFEF (239,239,239) ? Si non, aucun souci !
- Prédéfinis : le titre, en blanc aussi, serait en Covered By Your Grace (https://fonts.google.com/specimen/Covered+By+Your+Grace) en 22px, avec, si c’est possible, l’effet de relief que tu nous a fait sur le code des sujets récent. Le nom des prédefs, finalement, devrait être affiché au survol en Poiret One (https://fonts.google.com/specimen/Poiret+One), et en #3B3B3B(59,59,59).
- Staff : le titre serait également en blanc et en Covered By Your Grace (avec ou sans l’effet relief en fonction de tes possibilités). Au survol de l’image, le pseudo apparaîtrait en Cedarville Cursive de couleur #477A5A (71,122,90), et le rôle en Poiret One de 14px en #7B7B7B(123,123,123).
- Membres à l’honneur : le pseudo du membre serait affiché en blanc, avec la police Nemoy Ultra-Light (https://fontlibrary.org/en/font/nemoy), en 11px.
- News : comme pour les autres blocs verts, le titre serait en blanc et Covered By Your Grace. Pour ce qui est du court titre, c’est en Cedarville Cursive de couleur #087470 (8,116,112). Le texte est en Raleway et #555555 (85,85,85).
- Top-sites : idem pour le titre (blanc+ Covered By Your Grace).
- Partenaires : dans la bulle info, le texte est en Raleway blanc.
Images :
- News (si tu peux/veux bien les faire défiler je t’en fournirai d’autre, si besoin est) :https://i.imgur.com/b4Mku9w.png (une image), https://i.imgur.com/Q558DfF.png (flèche gauche) et https://i.imgur.com/IWAzOBG.png (droite) ;
- Prédefs : https://i.imgur.com/uSHSqDQ.png (une image de base pour toutes les cases), https://i.imgur.com/9lCxaYK.png (« voir plus ») et https://i.imgur.com/eqoxLRv.png (la petite image en bas) ;
- Staff : https://i.imgur.com/qzpjnWB.png ; les boutons : https://i.imgur.com/qA3nJnk.png (profil) et https://i.imgur.com/bjkxeNU.png (mp) ;
- Membres à l’honneur : https://i.imgur.com/elfCWcG.png ;
- Top sites : https://i.imgur.com/gg0Nhta.png, https://i.imgur.com/yH6FCpa.png et https://i.imgur.com/85qayST.png ;
- La boutique : https://i.imgur.com/MieCDOl.png (une image vierge) ;
- Partenaires :https://i.imgur.com/HRSBdD7.png et https://i.imgur.com/ThkE5w1.png (le bouton +) ;
Toutes les images sont redimensionnés selon les tailles que je t’ai indiqué plus haut~ c:
Couleurs :
- Les blocs de couleur verte sont en : #087470 (8,116,112) ;
- Les blocs blanc/gris : #F8F8F8 (248,248,248) ;
- Le fond des partenaires : #F7BE81 (247,190,129) ;
- Le fond de l’info-bulle « nom du partenaire » : #79C189 (121,193,137) ;Autres précisions : Mhm je pense que c’est tout, je t’ai fait un énorme pavé omg, j’espère qu’au moins je suis claire dans mes propos, bon courage pour ta lecture xDDDAcceptez-vous que votre commande aille dans le LS ? : Bien sûr, si quelqu’un en veut~
- Liste des sujets:
Commande de codage
Élément à coder : La liste de sujets (enfin si c’est possible)Adresse du forum : http://the-holiday-scam.forumactif.com/Version du forum : phpBB2En soi, le forum fait 920 px, la liste des sujets devrait avoir une largeur exacte de 850px, elle serait divisée en deux parties : les notes/annonces (je l’ai vu sur quelques forums récemment, je ne pensais pas ça possible, mais c’est quand même plus sympa et clair) et les sujets normaux. Dans la longueur, ben ça dépend du nombre de sujet. Ensuite, les données des sujets seraient séparées en 4parties : l’avatar du dernier posteur, le titre/auteur/descriptions/pages, les icones new/old/lock et le dernier message avec le nombre de vues/réponses. Schéma : https://i.imgur.com/yfzkjKy.png avec un fond gris qui est déjà celui du forum (le forum est en 920px).Taille des éléments :
La partie des titres : elle est composée d’une image, située à 180px de la bordure grise droite et 201 de la gauche, qui fait 539x147px. Collée en dessous des 147px se trouve une barre de 850x8px bleue, qui fait office de séparation entre le titre et les sujets. Elle se trouve centrée à 10px de chaque extrémité de la bordure grise. Au milieu se trouve le titre, dont je te détaille les propriétés plus bas.
- La partie avatar : l’intégralité du rond (avatar+cercle) fait 130x130px, avec un cadre rond de 5px. Est-il possible d’avoir un effet de rotation de l’avatar à 360°, juste pour le fun, si tu peux/veux ? x)
- La partie du titre : la base serait un rectangle en 520x60px, avec, à droite, une bordure bleue de 5x60px, et à gauche un demi-triangle (awi j’ai pas fini de t’embêter avec mes drapeaux) qui entre de 60px à l’intérieur du rectangle, histoire d’avoir un joli truc tout symétrique. 8px en dessous du titre se trouverait une barre de 90x2px orange, si c’est possible.
- La partie description (10px en-dessous): séparée elle-même en deux, elle est composée de la description d’un côté, et de l’auteur avec les pages de l’autres. Pour séparer les deux se trouve une barre de 2px pile sur les 260px du milieu du rectangle blanc (qui en fait 520, barre bleue comprise). Située à 10px du haut et du bas de l’élément blanc, elle faut donc 2x40px. Pour ce qui est du texte de l’auteur et des pages, il faudrait qu’ils soient placés de sorte à être pile à 60px de la fin du rectangle (au début du demi-triangle donc), si c’est pas clair tu me dis xD
- Icones des nouveaux messages : c’est là que je ne suis pas du tout sûre que ce soit faisable, et si ça l’est, sur la forme que ça doit prendre. Mon idée serait d’avoir une image en 130x70px (le fond, avec les feuilles de palmiers), à située à 5px du bloc des données du sujet, et de celui avec le dernier messages/etc, opacifiée légèrement et coupée en triangle encadré de blanc, sur lequel on viendrait faire apparaître les icônes des sujets (nouveau, etc). Si ce n’est pas possible, est-ce qu’on pourrait garder le triangle, et du coup faire de l’intégralité de l’image (cadre+image+icone) l’icône des sujets ? Je ne sais pas si c’est super compréhensible dis comme ça xD
- Dernier message : il s’agit d’un bloc bleu en 160x60px, aligné sur la fin des 850px de la bande bleue au-dessus (donc à comprenant la date du dernier post, ainsi que l’auteur de ce dernier (dont l’avatar est affiché à gauche), avec le petit bouton pour aller au post. 10px en dessous de lui, et 10px au dessus du bloc des vues/réponses, il y aurait une ligne en 140x2px blanche.
- Vues/réponses : elles aussi à 5px du triangle, et alignées elles aussi sur la bande bleue (à 35px de la fin de la bordure grise), elles sont séparées par 10px, et forment 2 blocs de 75x40px. Le texte, s’il est trop long, peut-il revenir à la ligne comme sur certaine des cases ? Sinon tu peux les agrandir à ta guise c:
NB : tous les textes sont séparés des barres verticales bleues et oranges (descriptions) par 10px. Les sujets sont séparés entre eux par 30px. Enfin, il y a 27px entre les sujets dans « notes/annonces » et l’image de la liste des topics normaux.
- Une bande verte : en 920x28, située 20px en dessous du dernier sujet, et 20px au-dessus des cadres oranges du bas, elle séparerait la liste des sujets des 3 boutons oranges, eux d'une hauteur de 30px, d'une largeur variant (le texte est centré à 10px des bords droits et gauche des cadres oranges) et espacés entre eux de 20px aussi. Ces éléments sont entrés au milieu des 920px du forum.Ressources :
Police :
- Le titre : Nemoy (https://fontlibrary.org/en/font/nemoy) en #66BAB7 (102,186,183) > 30px ;
- Annonce/Note : Nemoy, de la même couleur > 16px ;
- Titre des sujets : Poiret One en uppercase si possible (https://fonts.google.com/specimen/Poiret+One) en #616161(97,97,97) > 16px ;
- Auteur du sujet/Nombre de pages : idem mais sans les majuscules ;
- Description : Poiret One, de la même couleur > 13px ;
- Date/auteur dernier post et nombre de vues/réponses : Cedarville Cursive (https://fonts.google.com/specimen/Cedarville+Cursive) > 16px.
Images :
- Poissons (539x147) : https://i.imgur.com/gurZ3zG.png ;
- Icônes (40x40) : https://i.imgur.com/CMyVmdr.png (verrouillé), https://i.imgur.com/igowDTT.png (verrouillé non lu), https://i.imgur.com/7NZ0jOA.png (nouveau) et https://i.imgur.com/FMIhjRe.png déjà vu ;
- Le fond des icônes, le triangle (79x36) : https://i.imgur.com/c3jeGAt.png ;
Les couleurs :
- La barre sous le titre : #66BAB7 (102,186,183) ;
- Le cadre de l’avatar, le fond des données des sujets et la barre à droite entre le dernier post et les vues/réponses : #ffffff ;
- Le bloc du dernier message : #DBE7E6 (219,231,230) ;
- Les 2 blocs vues/réponses, et les lignes oranges sous le titre et entre la description et les infos et les boutons du bas : #F7BE81 (247,190,129) ;
(- Opacité de l’image en triangle ? Je ne sais pas si c’est utile, mais j’ai utilisé une image blanche que j’ai fait transparaître à 50%) ;
- La barre verte en bas : #99AA99 (153,170,153)Autres précisions : Si il faut changer quoi que ce soit (si le triangle est pas possible par exemple), aucun souci on peut parfaitement partir sur un truc plus… raisonnable xDAcceptez-vous que votre commande aille dans le LS ? : Toujours oui~
- Le profil:
Commande de codage
Élément à coder : Adresse du forum : http://the-holiday-scam.forumactif.com/Version du forum : phpBB2Ce serait un profil en onglet, d'une largeur de 800px, composé d'un header avec une bannière commune à l'ensemble des membres, sur laquelle s'afficherait leur pseudo/rang et une image qu'ils pourraient choisir, et qui (si possible) se retrouverait dans ma commande suivante, dans l'affichage du profil dans les sujets.
NB : si jamais ce n'est pas possible dis le moi, j'avais pensé à un truc moins compliqué au début.Schéma : Onglet 1 : https://www.zupimages.net/up/18/24/1b1o.png // Onglet 2 : https://www.zupimages.net/up/18/24/8bl7.png // Onglet 3 : https://www.zupimages.net/up/18/24/th0f.png // Onglet 4 : https://www.zupimages.net/up/18/24/2osq.png.Taille des éléments :
Le général (header et partie gauche)
- Image d’en-tête : 800x150, avec deux zones de texte, l’une alignée sur la gauche (Pseudo) et l’autre sur la droite (Rang), les deux séparées par une ligne située à 14px de la marge de droite (comme le texte du Pseudo) et d’une taille de 623x2. Sur la droite se trouverait une image en 140x140 choisie par le membre.
- « Hors/En ligne » : il s’agit d’un cadre vert de 200x60px, situé à 12px de l’image d’en tête, 12px de l’image de l’avatar et 14px du bord gauche du cadre bleu. Si c’est possible, cela prendrait la forme d’un drapeau, avec un triangle qui entrerait de 31px dans le bloc (je ne suis peut-être pas claire ? XD)
- Avatar : en 200x400, l’image est à 12px du cadre vert au-dessus, 14px du bord gauche comme du cadre bleu, et 28px du cadre blanc des 3 images juste en-dessous. Ces 3 images (« sujets »/« messages »/« mp ») font chacune 31x31px, et sont centrées dans des cadres de 35px de côté (les bordures font 1px de largeur). Les cadres sont centrés dans un bloc entre l’avatar, le bas, le bord bleu gauche et le cadre vert à droite de 228x2px ; ils sont séparés les uns des autres de 15px.
- La partie de droite t composée d'un cadre gris de 447x400px, et d'un autre cadre, avec les onglets, de 100x400px, pour un total de 547x400px. Le contenu du cadre gris varie en fonction de l'onglet, tandis que les onglets, en 100x100px (sans séparateur) affichent en leur centre des icônes en 30x30px. Les carrés et les icones changent de couleur s'ils sont actifs ou non : l'onglet actif est en gris (le même que le cadre à gauche) avec une icône verte, et les autres en vert avec une icône grise. Une infobulle permettrait de connaître le titre de l'onglet au survol de l'icône (il s'agirait d'un rectangle vert de 21px de hauteur, avec une bordure vert plus foncé comprise dans cette mesure, et un texte centré à l'intérieur en uppercase et dont la largeur varierait en fonction de la taille du texte : « chara, irl, inventaire, un petit mot »).
Premier onglet
- 1er bloc (infos) en 447x261 : ce bloc contiendrait les informations de base remplies par le membre dans des cadres blancs de 419x30, dont l'intitulé se trouverait dans des cadres oranges de 76x30px (en comptant la bordure blanche), et la partie remplie par le membre en 344x30px (en comptant les bordures, dont une en commun avec le cadre orange). Les cadres sont situés à 9px du haut du cadre gris, et 14px de ses bords droits et gauches. Une scrollbar s'affiche si le nombre d'informations remplies va au-delà de 8. Ces blocs (les 149x30px) pourraient-ils s'agrandir dans la hauteur si le champ est rempli au-delà des 334 px de large ?
- 2e bloc (xp/liens) : 20px sous le 1er bloc se trouve la zone avec la barre d'xp (que tu m'as d'ailleurs codé), composé d'un bandeau titre en 125x38px. Ce bandeau est séparé de 14px par la barre d'xp (d'une longueur de 280px pour la séparer elle aussi de 14px du bord droit du cadre gris) et du bouton "modifier" situé 9px sous la barre d'xp.
- Les 3 icônes : 15px sous le bandeau de l'expérience, et 14px au-dessus du bord inférieur du cadre gris se trouvent 3 icônes en 42x42px dans un encadré blanc de 52x52px (d'une bordure de 1px). Ces 3 cadres sont centrés sur toute la largeur du bloc gris, et espacés entre eux par 25 px. Le 1er renvoie à la présentation du membre, le 2nd à son "journal", le 3e est pour les admins, c'est l'e-mail, et n'est donc pas visible par les autres membres.
Deuxième onglet
Encore cette fois, seule la partie grise est modifiée, et elle est composée de deux parties de 200px chacune (situées à 14px de tous les bords du cadre gris, et séparées entre elles par 22px, soit 11px de marge pour le bas de la partie supérieure et le haut de celle inférieure) : celle avec les "statistiques", et celle avec le "about", deux titres compris dans des bandeaux bleus de 419x20px avec un titre blanc aligné sur la droite (à 20px du bord du bandeau bleu). 14px sous chaque bandeaux se trouvent les même cadres blancs que ceux du 1er onglet ; ils sont cependant en 2 formes pour la partie supérieure car les cadres oranges ont 2 largeurs différentes : 111x30 pour les 2 premiers et 30x30 pour les 2 autres (en comptant la bordure blanche).
De la même manière, est-il possible de mettre des scrollbar dans le cas où des informations se rajouteraient ? Seules 4 seraient visibles sans le scroll du coup.
Troisième onglet
On retrouve le même cadre gris, et le même bandeau titre, mais cette fois avec un autre cadre, blanc, de 419x338px, situé à 14px de tous les bords du cadre gris. A l'intérieur se trouvent des cadres de 64x64px (avec une bordure grise de 2px) contenant des images modifiées par les admins en 56x56px. Ces cadres sont à 14px des marges du forum, et espacés de sorte à être centrés au milieu des 419px. Ils sont 4 par ligne.
Je ne sais pas si c'est possible (comme tout le reste tu me diras), mais peut-on afficher une infobulle informant de ce qu'est l'objet représenté par l'image ? Je n'en suis pas du tout sûre vu que je n'ai pas vu de champ sur forumactif pour le faire, mais peut-être que le codage le permet. Si c'est possible, cette infobulle (en orange avec une bordure blanche, de 20px de hauteur).
Quatrième onglet (on en voit le bout)
C'est cette fois une zone entièrement consacrée à une saisie de texte de la part des membres. Elle est composée du même bandeau qu'avant, et d'un cadre blanc aux même dimensions que le précédent (419x338px) et à la même taille (14px des bords de celui gris). Dans ce cadre en est un autre, à 14px de ses bords également, de 391x310px et dont la bordure est bleue comme le bandeau de titre. Et rebelote le texte se trouve lui-même à 14px des bords de ce cadre-ci, avec une scrollbar qui s'affiche si le texte dépasse les dimensions de la zone de texte.Ressources :
Police :
- Nemoy (https://fontlibrary.org/en/font/nemoy) : pseudo (couleur variant selon le groupe), rang (#ffffff), expérience et inventaire > 30px ;
- Poiret One (https://fonts.google.com/specimen/Poiret+One) : en/hors ligne (en uppercase) > 28px ;
- Raleway (https://fonts.google.com/specimen/Raleway) : contenu des zones de texte et des informations (en blanc quand c'est sur un fond orange > 14px ;
- Bangers (https://fonts.google.com/specimen/Bangers) : les titres dans les bandeaux > 21px.
Images :
- Vagues (800x150) : https://i.imgur.com/n2u6O1u.png ;
- Image à droite (140x140) : ce serait cool si elle pouvait automatiquement être remplie par celle-ci > https://i.imgur.com/nKcCffX.png, mais si c’est pas possible, tant pis. Tiens si jamais ça peut te servir je t’en file une vide : https://i.imgur.com/i7duD09.png ;
- Les boutons sous l’avatar (31x31) : https://i.imgur.com/gE88dwX.png (sujets ouverts), https://i.imgur.com/HmfACVk.png (messages postés) et https://i.imgur.com/CYBLNtd.png (envoyer un mp) ;
- Les boutons des onglets (42x42) : en blanc (menu : https://i.imgur.com/w2xurXl.png, crâne : https://i.imgur.com/WbDvK4n.png,
sac : https://i.imgur.com/lJRajI2.png et éclair : https://i.imgur.com/VLpIvUK.png) et en vert comme je ne sais pas comment fonctionne un codage comme celui-ci (menu : https://i.imgur.com/Z6SQnbJ.png, crane : https://i.imgur.com/vlzrpxL.png, sac : https://i.imgur.com/LdrB9EN.png et éclair : https://i.imgur.com/eP4U49v.png) ;
- Les boutons de liens en 42x42 : https://i.imgur.com/38Nyn6Z.png (présentation), https://i.imgur.com/SuSWGS0.png (journal) et https://i.imgur.com/cfPUCmT.png (mail) ;
- Avatar (200x400) : si jamais tu en as besoin, voici une image vierge https://i.imgur.com/PKHaQMq.png ;
- Les deux icônes dans le 2e onglet (24x24) : https://i.imgur.com/5f7ujGx.png (crayon) et https://i.imgur.com/BE9QGXG.png (coquillage).
Couleurs :
- Le fond du profil : #DBE7E6 (219,231,230) ;
- Le fond gris et le cadre des carrés de l'inventaire : #F4F2F5 (244,242,245) ;
- Le fond des blocs verts : #087470 (8,116,112) ;
- Le fond des cases oranges : #F4F2F5 (244,242,245) ;
- Le fond des bandeaux avec les titres, du cadre et de la scrollbar du dernier onglet : #66BAB7 (102,186,183) ;
- Tous les titres, ainsi que le rang sont en #ffffff (de même que la barre qui sépare ces deux derniers textes), et le contenu des zones de texte remplies par les membres sont de la couleur de base du forum.Autres précisions : Voici les screen de ce qu'affichent les profils : https://i.imgur.com/p5ADdv5.png // https://i.imgur.com/FlS4Pp9.png (je crois que c'est juste mais je peux me tromper). Enfin, si ça peut t'aider, je me suis inspiré de ce petit truc : https://slytherindaily.tumblr.com/nav (tu pourras mieux visualiser l'effet d'onglet).Acceptez-vous que votre commande aille dans le LS ? : Of course.
- L'affichage du profil dans les sujets:
Commande de codage
Élément à coder : le contenu de l'affichage du profil dans les sujets (d'ailleurs de chez toi, c'est Silence).Adresse du forum : http://the-holiday-scam.forumactif.com/Version du forum : phpBB2Ton code de base est superbe, mais je voulais savoir si c'est possible de le modifier, de sorte à y faire apparaître une image (celle en 140x140px insérée dans l'en-tête du profil si possible, mais avec un redimensionnement automatique à 100x100px) et à modifier les encadrés des informations. Schéma : le rendu final : https://i.imgur.com/rWCTCSL.png (avec le fond : https://i.imgur.com/VIveBJv.png) et la position par rapport à l'avatar pour te donner une meilleure idée : https://i.imgur.com/7u1Flpj.png.Taille des éléments :
L’image totale fait 200x400, comme l’avatar, à l’intérieur, au survol, on garderait le même cadre de 5px gris que tu as mis, mais est-il possible d’y ajouter quelques modifs ?
- Un rectangle de ce même gris en 190x65 à l’intérieur du cadre (si tu veux le mettre par-dessus ou en dessous (je ne suis peut-être pas claire haha) la taille passe à 200x70).
- Une image en 100x100, située à 20px de la marge top, et centrée sur les 200px de largeur, encadrée par un cercle de 5px de trait (ou un cercle rempli de gris en 110x110px, je ne sais pas comment ça fonctionne).
- Cases infos : ils sont tous en 91x20 (cadres inclus > sans le cadre de 1px ils sont en 89x18), ils se trouvent 20px en dessous du cadre gris de l’image, soit à 144px du cadre de 200x400, à 3px des marges grises gauche et droite. Les uns par rapport aux autres, ils sont séparés en colonne (droite/gauche) par 2px, et en ligne (dessus/dessous) par 3px. Est-il possible de les faire augmenter en hauteur si ce qui est écrit à l'intérieur dépasse du cadre, tout en laissant le texte de l'intitulé dans le cadre gris bien centré au milieu de ce dernier ?
- La ligne : je l’ai prise d’une capture d’écran de l’affichage actuel du profil, elle n’est pas à changer en apparence, sauf si tu pouvais faire en sorte qu’elle se trouve à 10px des éléments au-dessus et en-dessous d’elle (si tu peux pas, aucun souci !).Ressources :
Police : tout est en Poiret One, en 12px.
Images :
- Si l’image peut être la même que sur le profil (celle en 140x140) mais redimensionnée : https://i.imgur.com/tJenScd.png.
- Si elle ne peut pas l’être et qu'elle doit être différente : https://i.imgur.com/gQksCdQ.png.
Couleurs :
- Le cadre gris/le rectangle et le rond autour de l’image : #D7D7D7 (215,215,215).
- Les cases infos : le fond de ceux à gauche est en #A7A7A7 (167,167,167) alors que celui de ceux à droite est transparent (ou en #ffffff). Dans les deux cas, un cadre d’un trait de 1px en #F4F2F5 (244,242,245) les entoure.Acceptez-vous que votre commande aille dans le LS ? : Bien sûr.
Si jamais tu trouves qu'on abuse beaucoup trop de ta générosité, n'hésite pas à me le faire savoir, je me sens mal de te demander un travail aussi colossal, mais merci d'avance d'être arrivé au bout de la lecture de cette looongue commande. Et si il manque des choses n'hésite pas à me le faire savoir, mais je viens de passer un moment à rédiger tout ça alors j'espère qu'il ne manque rien. En plus je ne suis même pas sûre que ce que je t'ai demandé soit faisable, je croise les doigts
Voilà, du love de notre part~