Bonjour,

Petit up !

Merci

Coucou Tsukasa !

J'ai vu que pour l'instant tu l'avais dans la feuille de personnage. Sans te proposer un code, je peux te dire de jeter un coup d'oeil à cette astuce par Onyx : Comment mettre un lien/un smiley/un BBcode dans un champ du profil

Cela te permettrait "sans code" d'obtenir un résultat similaire à ce que tu veux ! :)
Tu rajoutes un champ du profil de type Zone de texte (tout est expliqué dans le tuto), et à l'intérieur tu mettras du bbcode comme ceci :

Code:

[img]http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png[/img] ◆ [img]http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png[/img] ◆ [img]http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png[/img]

Du coup il te faudrait faire 2 champs !
Un qui s'affiche seulement dans le profil, et un qui s'affiche seulement dans les messages (avec juste 4 images + le lien vers le profil pour en voir plus) ^^
Cela demandera aux admins / modo de copier / coller aux 2 endroits les nouveaux badges/succès, mais c'est une méthode assez facile! :)

J'ai expliqué vraiment vite fait, mais surtout n'hésite pas à poser des questions <3

Bonjour Nihil !

Merci de ton message et de ces explications !
J'ai donc testé tout ceci, cela fonctionne, mais ce n'est pas tout à fait le rendu espéré. Là en fait cela fait effectivement « champ de profil » et c'est donc un peu listé avec les autres informations.

L'idée en fait c'était d'inclure comme un nouvel élément dans ce profil, à part, et modifiable pour chaque membre (donc oui ça ressemble effectivement au système des champs) mais sans qu'il y ait de titre affiché (ici les succès/récompenses). Sur le coup je me suis dit c'est comme intégrer une page dans une page (je sais pas si c'est clair dit comme ça XD).
Bien sûr j'imagine deux « pages » différentes pour garder l'équilibre et l'esthétique dans le profil.

Ensuite vu le code mis dans le profil de fo test, ce serait plutôt mis à côté du nom du membre et du rang (mais ça si je comprends le système d'avant... enfin on va voir o/).

Bref si jamais tu as une idée de la démarche à suivre, que je puisse tenter par moi-même du moins !
Merci <3

Si je comprends bien le système te convient, ce que tu cherches à faire maintenant, ce sont 2 choses supplémentaires :

1. Déplacer le champ de profil à un autre endroit que "avec les autres champs"
   
2. Pouvoir personnaliser le champ (par exemple en enlevant le titre qui te dérange)

Si oui, c'est totalement possible, d'ailleurs si tu regardes dans les autres demandes de LS de la section, je crois que c'est ce que font Onyx et Elenthil dans 2 autres demandes :)

Pour qu'on puisse te guider un peu mieux, je pense qu'il faudrait que tu rajoutes le lien de ton forum test, avec les champs visibles en invité (pour qu'on puisse voir :p) et que dises précisément ce que tu cherches à faire comme placement :3

Oui c'est exactement ça :)
Merci de mettre des mots sur mes explications douteuses 8D

Alors voici le forum test
(je retirerai le lien sitôt ceci fini en revanche o/ - les codes sont des LS et pas de moi, je précise tout de même :O)
Normalement c'est visible en invité, dis-moi si tu ne vois pas (on ne sait jamais).

Voici une capture du profil des messages (en grand cette fois-ci).
En regardant le placement du pseudo (ici Admin) et le rang, je pensais qu'on pouvait tenter de placer quelques succès entre ceux-ci et les petits icons du profil (profil, mp, mail etc). En revanche quand on y regarde de plus près, si jamais le pseudo est long, ça risque de faire désordre... *perplexe*
Bref, l'idéal serait probablement en bas du profil de gauche (juste au-dessus du rang symbolisé par cette image : http://www.aht.li/2880857/BLSJT5.png ) - j'ai laissé le champ profil des récompenses que tu avais proposé ainsi que celui d'avant par le biais de la feuille de personnage, mais on peut tout faire sauter hein XD.
Sinon dans le profil (cette capture), et bien à voir si on peut faire la même chose, à la place du grand bandeau noir de la feuille de personnage ou alors en-dessous.

Dans la personnalisation, peut-on « tout faire » ? C'est à dire personnaliser comme on peut personnaliser un message (avec html & cie, enlever les cadres...).
Merci

(PS : dois-je mettre le l'icône "en cours" ?)

Oh, on commence à croiser partout les LS de Crush Crush Crush et le design est facile à reconnaitre :p

Dans les messages je vois bien apparaitre le champ récompense, mais pas dans le profil :)

Tsukasa a écrit:Dans la personnalisation, peut-on « tout faire » ? C'est à dire personnaliser comme on peut personnaliser un message (avec html & cie, enlever les cadres...).

Eh bien hum, on peut faire pas mal de choses oui, si tu avais un schéma de ce que tu veux ça serait peut-être plus simple

Du coup je vais prendre la demande de LS je pense, tu peux mettre l'icone en cours et préciser [Nihil] dans le titre du sujet ^^
Précision : si un autre codeur voulait prendre cette demande, qu'il se manifeste, je ne mords pas o/

Pourrais-je avoir ton template viewtopic_body ainsi que ton CSS associé s'il te plait ?

En effet :y:
C'est bon c'est modifié, j'avais simplement oublié de cocher la case profil --'

Merci en tout cas de prendre la demande
Donc j'ai tenté de schématiser x)
Profil dans les messages - Profil

Donc pour la partie succès, j'aurais souhaité que l'on ne voit que les icônes à afficher (pas de cadre ni rien). Pour le schéma (le premier), je suis un peu perdu pour l'emplacement, donc il y en a trois (succès 1, succès 2, succès 3), et là je demande ton avis, lequel serait le plus harmonieux etc à placer ? Sachant qu'une quantité limitée serait affichée et qu'il faudrait cliquer pour tout afficher.
Pour la personnalisation générale (taille du titre des descriptions etc), n'ayant pas le thème actuellement, je me débrouillerai plus tard.

Pour la deuxième capture (profil), donc il y a la case succès/récompenses en bas (sur le fo test c'est exactement l'emplacement de la feuille de personnage, qui est restée d'ailleurs 8D) et sinon également mettre les rangs - écrits ; ils ne sont pas indiqués sur le profil donc. (enfin c'est sur le schéma en noir ! 8D).

J'oubliais ! Pardon x) Si jamais je veux conserver la feuille de personnage, notamment pour l'affichage dans les messages, est-ce possible ? (au cas où...).

Alors le template viewtopic_body :

Spoiler:

Pour le CSS, par « associé », ce sont donc ceux associés aux profils (messages et simple ?) ?
Le CSS (dans les messages) :

Spoiler:

Le CSS (profil) :

Spoiler:

Merci beaucoup, n'hésite pas pour les questions !

Hello :)

Sorry sorry, avec la chaleur j'ai du mal à me motiver de réfléchir

Pour ma part je préfère la position 2, donc à gauche ^^
En haut j'ai peur que ça "casse" le design un peu, et à droite on risque d'avoir l'impression que c'est relié au profil, mais au message

Juste pour préciser, tu veux afficher des images seulement, ou bien une image + une description ? Je suis un peu perdue car tu parles de "rang" ensuite plus loin. >_<
Il faut qu'on se mette d'accord sur un "vocabulaire" (à quoi correspond quoi) pour être sûre de bien se comprendre ♥︎

Tu pourras garder sans soucis ta feuille de personnage o/ et pour le CSS, je voulais bien dire ça :)

Bonjour ~
Il n'y a pas de souci voyons, prends ton temps et végète bien devant le ventilo 8D

Va pour la gauche, cela paraît le mieux en effet ! o/

Et bien les images, et quand on laisse un peu la souris dessus ça affiche la "description" enfin du moins le succès (genre on laisse la souris sur la rose du dessus, ça affiche "a cueilli cinq roses" XDD /sort/).
Aaah je me suis mal exprimé pardon
Sur la deuxième capture du profil (pas celui dans les messages), j'ai ajouté rangs (écrits) en noir, c'est quelque chose qui n'est pas dans le code de base et dont j'aimerais qu'il soit ajouté à l'emplacement indiqué sur la capture.
J'entends par "rang écrit" le titre du rang, comme dans les messages par exemples (en dessous du pseudo), l'image du rang étant dans un endroit totalement différent (en dessous de la descript avatar) ce qui m'a fait dire ça... Langage bizarre, pardon

Merci et désolé 8D

Haaan, je comprends mieux , je pensais que le rang écrit avait quelque chose à voir avec le système de succès, j'étais perdue xD

Je n'avais pas capté qu'il fallait une description aussi qui s'affiche, du coup la technique du simple champ comme ça dans le profil ne marche pas, on va devoir un peu complexifier.
Je pense que ce j'avais fait pour ce topic pourrait être similaire à ce dont tu as besoin : [Nihil] Système de badge

La manière dont ça fonctionne est expliquée dans ce message

En résumé 2s :
On avait quelque part une liste de badge avec des "noms de code". Par exemple "rose05"
Ensuite, dans le profil du membre, plutot que mettre une image, tu mettais le texte "rose05;".
Puis le code fait sa petite histoire et transforme ça en une zone bien mise en page.

Bien entendu il faudrait adapter. Par exemple dans son cas, il voulait afficher tous les badges et mettre en surbrillance les badges obtenus. Si tu lis la conversation, il donne le lien de son forum où tu peux regarder ce que ça donne sur son profil.
Du coup toi, on se contenterait d'afficher les badges obtenus ^^

Dis moi si tu comprends mon charabia ou pas trop xD

Pardooon *rampe*

D'accord, je comprends, je viens de lire le topic.
Ça complexifie mais ça simplifie en même temps... enfin c'est un point de vue xD (notamment l'expression du succès par "rose05;" par exemple).

Ce type de système l'a l'air très bien
Et donc si j'ai bien compris, le code est "fixé" grâce au js ?
En tout cas si on peut partir sur ça ce serait super, merci ~ 

Rhaaa, j'avais oublié ce topic, je suis désolée désolée >-<

J'ai pas trop compris ce passage là :

Tsukasa a écrit:Et donc si j'ai bien compris, le code est "fixé" grâce au js ?

Je vais commencer par faire l'affichage sur la page du profil simple du coup. J'ai vu que tu avais mis le CSS de ton code, pourrait-on avoir le code du template aussi sitouplé ?

Au fait, si tu remarques qu'après 4 ou 5 jours je ne réponds plus mais je suis active ailleurs sur le forum, hésite surtout pas à upper, j'ai tendance à vite oublier cette section parfois

Coucou !
Non il n'y a pas de souci ! Je n'osais pas up, comme on est en juillet/août tout ça

Alors euh comment dire... Bref peu importe, je pense avoir compris de toute façon ! Sorry XD

Ah voici le template du profil simple, désolé <.< :

Spoiler:

Merci beaucoup pour ton temps

Top ! Faut vraiment pas avoir peur de upper tous les 5 / 6 jours, je suis une petite tête, faut taper dessus <3. Quand je suis trop occupée, au pire je vais pas te bouffer, juste te dire que je pense à toi mais que j'ai pas trop le temps.

Je commence à coder, et pour qu'on soit 2 à travailler, je te donne un petit truc à faire

Est ce que sur ton forum test, dans ton profil tu pourrais créer un champ que tu appelles "Badges obtenus" ou quelque chose comme ça ?
Ensuite dedans, tu rajoutes le nom des badges comme je l'explique dans mon message. Il faut que le champ soit visible dans la page du profil simple :)
Hésite pas à relire le sujet que j'avais mis en exemple, j'explique aussi dessus comment faire. Tu peux inventer le nom des badges que tu veux (amuse toi bien xD)

Comme ça, grâce aux Outils de débug du navigateur, je pourrai vérifier directement si ça marche bien sur ton forum

Bonjour ! Désolé du retard de ma réponse n_n
Cool j'aime bien tenter de coder *-*

J'ai donc créé le champ de profil ("Succès obtenus") et en revanche mis seulement six noms de badge (je suis en pleine création, j'ai avancé sur pas mal de choses mais pas mal de noms ne sont pas encore définis donc... <.< - de plus je travaille sur papier -).

Il fallait bien mettre les noms de badge dans le contenu par défaut ?
Sinon dois-je également créer la page html évoquée ?
Désolé pour ces questions intempestives  ><

Bonsoir !

Dernier post le 2 août, nous sommes le 7, je me permets un petit UP, désolé .__.

Merci

Haaan, sorry, j'ai eu une semaine de malade, un truc complètement fou, je up juste pour dire que je suis encore en vie et que je m'y mets dès que possible !

Tsukasa a écrit:J'ai donc créé le champ de profil ("Succès obtenus") et en revanche mis seulement six noms de badge (je suis en pleine création, j'ai avancé sur pas mal de choses mais pas mal de noms ne sont pas encore définis donc... <.< - de plus je travaille sur papier -).

Il fallait bien mettre les noms de badge dans le contenu par défaut ?

Alors, les noms des badges ne sont pas à mettre dans le contenu par défaut, mais dans le profil du membre ^^
Le but c'est que quand je clique sur le profil d'un jour, je puisse voir la zone "Succès obtenus" et son contenu. Vérifie qu'en invité je peux bien voir le champ :)

Tsukasa a écrit:Sinon dois-je également créer la page html évoquée ?

Alors il y a 2 choix, soit on passe par une page HTML, soit on met le code directement dans le template du profil simple.
J'étais partie pour mettre le code directement dans le template, mais en fait c'est embêtant car cela signifie que seul l'admin fondateur peut modifier les badges & leur description u-u

Ne t'en fais pas, il n'y a pas le feu !
Sorry too pour le retard >_<

Donc c'est fait, normalement le champ est visible pour les invités, et les noms ont été mis dans le profil (donc Admin, le seul "membre" actuel x).

D'accord, il faut donc mieux passer par le biais de la page html.
Y a t-il un modèle particulier ? J'ai vu que dans l'autre sujet, elle l'avait bien fait elle-même :)

Alors pour la page HTML (Modules > HTML > Gestion des pages HTML) :

Il faut en créer une nouvelle en mode avancé (le bouton de droite), et changer dans les options "Oui" pour "Voulez-vous utiliser le haut et le bas de page de votre forum ?"

Dedans on met ceci :

Code:

<div class="badges-profil">
    <div class="p-badge rose01">
        <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
        <div class="p-badge-description">Description description ROSE 01</div>
    </div>
    <div class="p-badge rose02">
        <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
        <div class="p-badge-description">Description description ROSE02</div>
    </div>
    <div class="p-badge rose03">
        <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
        <div class="p-badge-description">Description description ROSE03</div>
    </div>
    <div class="p-badge prim01">
        <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
        <div class="p-badge-description">Description description prim01</div>
    </div>
    <div class="p-badge prim02">
        <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
        <div class="p-badge-description">Description description prim02</div>
    </div>
    <div class="p-badge harpe04">
        <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
        <div class="p-badge-description">Description description harpe04</div>
    </div>
    <div class="p-badge viola05">
        <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
        <div class="p-badge-description">Description description viola05</div>
    </div>
    <div class="p-badge beat06">
        <div class="p-badge-illu"><img src="http://download.seaicons.com/icons/debi-dawn/valentine/32/rose-icon.png" alt="Nom du badge" /></div>
        <div class="p-badge-description">Description description beat06</div>
    </div>
</div>

Pourquoi on partage le haut et le bas du forum ? On pourrait faire une page HTML simple directement, mais ça voudrait dire copier le CSS sur la page HTML ET sur le forum (à chaque changement il faudrait modifier les 2 pour voir le résultat sur la page HTML), donc autant faire simple.

En parlant de CSS, dans le CSS du forum on ajoute donc ceci :

Code:

/* BADGES DANS LES PROFILS */
.p-badge {
  position: relative;
  width: 32px;
  height: 32px;
  display:inline-block;
  vertical-align: middle;
}

/* style de la boite de description */
.p-badge-description {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 5;
  
  background: #4aa3df;
  color: white;
  padding: 5px 10px;
  width: 200px;
  border-radius: 3px;
  
  /* effet survol */
  transition: all 300ms;
  opacity: 0;
  visibility: hidden;
}

/* on fait apparaitre la description au survol */
.p-badge:hover .p-badge-description {
  opacity: 1;
  visibility: visible;
}

/* bloc qui contient tous les badges */
.badges-profil {
  background: #2f2b2b;
  padding: 10px;
  margin: 20px auto;
}

/* Par défaut on masque les badges dans le profil */
.badges-page-profil .p-badge {
  display: none;
}

/* on affiche seulement les badges actifs */
.badges-page-profil .p-badge.badge-actif {
  display: inline-block;
}
/* FIN DANS LES PROFILS */

J'ai fait un style pas spécialement beau vraiment vite fait, tu peux changer sans soucis le CSS pour autre chose :nuu:

Voilà j'ai fini pour les explications de la page HTML, est ce que tu pourras en donner le lien ensuite sitouplé ? <3

Ensuite, dans le template du profil simple, il faut repérer cette là :

Code:

<!-- BEGIN switch_rpg -->

Et juste avant, on va mettre :

Code:

<!-- bloc qui contiendra les badges du profil -->
<div class="badges-page-profil"></div>

Ensuite, il ne restera plus qu'un petit code javascript à mettre et voilà

Bonjour Nihil ;3

Merci pour les explications, c'est bien clair *-*
Voici la page html créée : http://chinablue.forumactif.org/h1-succes
(ça marche bien, css ajouté également !). Modification également faite au niveau du template du profil simple !

Ce n'est pas un souci pour le CSS, ce n'est pas le plus compliqué, et puis de toute façon il faudrait qu'il soit accordé au futur thème *fera ça après*

Merci beaucoup, dis-moi si tu vois bien tout, que ça fonctionne bien..

Bonjour Nihil !
Un petit UP après quelques jours o/

Sorry pour le retard >-<

Mon code JS bug, mais je comprends pas trop pourquoi
Il ne détecte pas les badges après le second sur la page HTML T_T

Je me demande si ça ne vient pas de cette petite erreur dans la page HTML :

Code:

<div class=" p-badge-description"="" />Description description ROSE02
      </div>

Ca devrait être comme ça :

Code:

<div class="p-badge-description" />Description description ROSE02
      </div>

Est ce que tu peux me prévenir quand tu fais la petite modification s'il te plait <3

Pas de problème Nihil o/

D'accord, ça a été modifié.
J'ai aussi rajouté des slashs, après le "p-badge-description" et avant le > de chaque description, pour suivre ce que tu viens de donner, il n'y en avait pas.

Dis-moi si ça marche et merci o/

Oh bordel, j'avais pas vu le /, il faut l'enlever, ça cause un bug aussi xD
Je pense que le navigateur l'a ajouté car il était absolument paumé >-<

Du coup, tous les :

Code:

 <div class="p-badge-description" />

Sont :

Code:

 <div class="p-badge-description" >

Pourquoi ? En fait, une balise s'ouvre et se ferme :

Code:

<div> </div>

Sauf certaines balises, par exemple image, qui sont autofermantes :

Code:

<img />

Hier, j'ai regardé le code source et j'ai copié / coller ce qu'il y avait dans le navigateur

Code:

<div class=" p-badge-description"="" />

Et il y avait un combo de bug, ça aurait du être ceci tout simplement, sorry ^^' :

Code:

<div class="p-badge-description">