(GinKitsune) Système de collection dans les profils

Lun 18 Sep 2017 - 8:48

Vegvisir

Age : 25Messages : 411

Lun 18 Sep 2017 - 8:48

Rappel du premier message :

Ma demande

Bonjour les amis :ange:

Alors voilà, je ne sais pas trop si je peux faire ce type de demande... Mais après tout, c'est quand même du codage pour un élément de forum, alors j'imagine que je peux xD
J'aimerai mettre en forme un endroit sous le profil où je pourrais créer des collections pour les membres. Je m'explique :
Le principe est que quand un membre fait tel action (avoir posté X messages, X rps, X fois dans le flood, participé à une intrigue, etc) il reçoit un trophée qui sera placé dans sa collection en-dessous de son profil, je vous fais un petit schéma plus bas ! Oui, voilà le soucis c'est que j'ai l'impression de carrément plagier NU, et c'est un peu gênant donc je comprendrai si vous refusez pas demande Embarassed

Il y aurait plusieurs collections du style Pierres & cristaux, couleur, plantes, signe astrologique, planète, etc. bref tout ce qui touche à la sorcellerie en réalité comme c'est le thème du forum. C'est fou ce que les choses sont bien faites ! Et lorsque le membre à complété sa collection, il recevrait un petit cadeau ainsi qu'un trophée ultime de la collection :zen:

(Je profite pour dire à ma membre Akie, que si elle passe par ici, qu'elle est prié d'être sous secret professionnel et de n'en parler à personne ! :angry:

)
Bref, je sais pas si j'ai été claire, je vous mets le max d'infos possible ci-dessous !

Schéma(s) et Eléments

Schémas :

État des profils actuels:

Ce que je souhaiterai:

Tailles des éléments : Je ne les connais pas, mais si vous en avez besoin, dites-moi juste où je peux les trouver :chomp:

À part les images de taille 65*65 \o/
Effets voulus : Si possible, juste au passage de la souris avoir le nom du trophée
Version de votre forum : PHPBB2

Ressources

Pour les couleurs utilisées : #FAF5BE pour l'écriture, #5C282C pour le fond, #454545 pour les fonds de sous-titre et un simple noir pour le fond du titre, maintenant libre à vous de mettre les couleurs que vous souhaitez pour le LS, je saurais toujours me dépatouiller ! ^^

Pour l'affichage des profils, j'utilise un LS trouvé sur le site CCCrush et j'ignore si je peux vous le poster ici ou pas ou même s'il vous sera utile, si besoin demandez !

Autres précisions ?

Du coup, j'imagine que chaque code doit être propre à chaque membre, je crois que je ne sais pas dans quelle aventure je me lance xD N'hésitez pas à me demander si vous avez besoin de précisions supplémentaires, ou me dire ce qui ne va pas... Enfin je sais pas, mais si vous avez quelque chose à dire, dites-le !

Dernière édition par CaraDelevngnie le Mar 5 Déc 2017 - 23:41, édité 3 fois

Ven 1 Déc 2017 - 12:16

GinKitsune

Age : 25Messages : 98

Ven 1 Déc 2017 - 12:16

Merci beaucoup Zaw !!! :heart:

Je vais pouvoir m'occuper de ça ^^ !

Lun 18 Déc 2017 - 20:38

Nihil Scar Winspeare

Messages : 5244

Lun 18 Déc 2017 - 20:38

Coucou par ici :)

Ca va, ça avance ? Il y a besoin d'un petit coup de main ? :hudada:

Bonjour, nous sommes sans nouvelles...Ce topic est-il toujours d'actualité ? Merci de nous tenir informés du déroulement de ce problème.
Attention, l'absence de réponse à ce message entrainera l'archivage du topic d'ici une dizaine de jours.

Lun 18 Déc 2017 - 22:10

Vegvisir

Age : 25Messages : 411

Lun 18 Déc 2017 - 22:10

Coucouuu ! Oui c'est toujours d'actualité :friends:

Pour l'instant c'est GinKitsune qui gère tout, donc je ne sais pas si elle a besoin d'aide ou non ^-^

Lun 18 Déc 2017 - 22:44

GinKitsune

Age : 25Messages : 98

Lun 18 Déc 2017 - 22:44

Coucou !

J'avoue me noyer dans le Javacript XDD Tout le reste est fait (et j'espère ne pas avoir mal fait) mais je n'arrive pas à m'en sortir avec le JS ...

Je ne serais pas contre un coup de main :aww:

Si ça ne dérange pas :ange:

Ven 22 Déc 2017 - 21:46

GinKitsune

Age : 25Messages : 98

Ven 22 Déc 2017 - 21:46

Coucou ! Merci d'avoir répondu aussi vite Nihil ♥

Comme sur ce topic, j'ai crée la page html, la zone de texte dans les champs de profils et les nouvelles classes pour chaque badge (et j'espère l'avoir fait correctement).

Mais, lorsque j'utilise ensuite le javascript et que j'essaye de le remplir selon les conseils indiqués ça ne fonctionne pas .. :/ Je me suis sans doute trompée (plusieurs fois) mais je ne sais pas où .. :titanic:

J'ai réessayer depuis le code de base 5 fois mais c'est toujours pas bon ... :wall:

Donc, comme je commence à désespérer, je veux bien un coup de main

Je ne sais pas ce dont vous avez besoin donc je met ce que je pense utile :

- forum test : http://noname18.forumgratuit.be/
- profil avec les badges : http://noname18.forumgratuit.be/u1
- page html des badges : http://noname18.forumgratuit.be/h10-collections-profil
J'ai fait la même zone de texte "Badges obtenus" visible en invité.

Et voici mon JS qui doit être bourré d'erreurs et je m'en excuse :

Code:: /* * SYSTEME DE BADGE * LIBRE SERVICE NEVER UTOPIA */ /* on vérifie si on est bien sur la page de profil */ if (/^\/u\d+$/.test(document.location.pathname)) { var idPage = "10"; /* numéro de la page HTML */ $.get("/h" + idPage + "-", function (data) { /* on récupère le block des badges */ var $badges = $(data).filter("#badges-profil"); /* on attend que notre page soit prête */ $(function () { /* on récupère la zone badge */ var $profilBadges = $("dt:contains('Badges obtenus')").closest("dl"); if ($profilBadges.length > 0) { /* selection des badges du membre */ var badgesUser = $profilBadges.find(".field_uneditable").text(couleursrouge).split(";"); /* pour chaque badge, on ajoute la classe si besoin */ for (var i = 0, l = badgesUser; i < l; i++) { if (badgesUser[i].length > 0) { try { $badges.find("couleursrouge" + badgesUser[i].trim()).addClass("oui").removeClass("non"); } catch (e){ console.log("Système de badge erreur => " + e); } } } /* si la personne ne peut pas éditer le champ, * on le retire la zone */ if ($profilBadges.find(".field_editable").length < 1) { $profilBadges.next().andSelf().remove(); } } /* on ajoute le block en fin de page */ $("#profile-advanced-details").closest("#page-body").after($badges); }); }) }

Merci beaucoup d'avance et merci d'avoir pris le temps de lire mon pavé ^^ ♥

Dim 7 Jan 2018 - 11:35

Vegvisir

Age : 25Messages : 411

Dim 7 Jan 2018 - 11:35

(Toujours d'actu ♥)

Dim 14 Jan 2018 - 21:08

Nihil Scar Winspeare

Messages : 5244

Dim 14 Jan 2018 - 21:08

Oups, j'avais complètement oublié de topic :toto:

Ce sujet peut être utile https://www.never-utopia.com/t64412-resolu-systeme-de-badges-de-nihil

En fait la commande avait été faite pour un forum qui n'était pas en phpbb2, et avec un profil avancé. Dans le sujet au dessus, j'ai fait quelques modifs

Tu peux remplacer :

Code:: var $profilBadges = $("dt:contains('Badges obtenus')").closest("dl");

par :

Code:: var $profilBadges = $("#field_id1");

---
J'ai vu également que tu avais remplacé la ligne :

Code:: var badgesUser = $profilBadges.find(".field_uneditable").text(couleursrouge).split(";");

Normalement il n'y a pas le "couleursrouge", c'est :

Code:: var badgesUser = $profilBadges.find(".field_uneditable").text().split(";");

En gros on lui dit "trouve le texte dans ce champs du profil et découpe le en fonction des points virgules"
J'ai pas touuuut relu encore, mais on peut déjà corriger ça :)

Lun 15 Jan 2018 - 9:18

GinKitsune

Age : 25Messages : 98

Lun 15 Jan 2018 - 9:18

Pas de problème ! On a tous beaucoup de choses à penser :coeur:

Merci beaucoup d'avoir pris le temps de t'en occuper ♥

J'ai fait les modifications que tu m'as demander et je regardais le lien ce soir lorsque j'aurais le temps !

Encore merci ! Bonne semaine ! :)

Sam 20 Jan 2018 - 22:00

GinKitsune

Age : 25Messages : 98

Sam 20 Jan 2018 - 22:00

Jeu 8 Fév 2018 - 16:10

GinKitsune

Age : 25Messages : 98

Jeu 8 Fév 2018 - 16:10

Mar 13 Fév 2018 - 14:56

GinKitsune

Age : 25Messages : 98

Mar 13 Fév 2018 - 14:56

Lun 12 Mar 2018 - 22:47

Nihil Scar Winspeare

Messages : 5244

Lun 12 Mar 2018 - 22:47

Bonjour, nous sommes sans nouvelles...Ce topic est-il toujours d'actualité ? Merci de nous tenir informés du déroulement de ce problème.
Attention, l'absence de réponse à ce message entrainera l'archivage du topic d'ici une dizaine de jours.

Olalala, ce sujet dure depuis tellement longtemps, je suis désolée T___T

Est ce que je pourrais avoir le code complet du template + le nouveau code JS s'il te plait ?

Je copie les liens pour ne pas les perdre :
- forum test : http://noname18.forumgratuit.be/
- profil avec les badges : http://noname18.forumgratuit.be/u1
- page html des badges : http://noname18.forumgratuit.be/h10-collections-profil

Mer 14 Mar 2018 - 22:52

GinKitsune

Age : 25Messages : 98

Mer 14 Mar 2018 - 22:52

Coucou ! Oui c'est toujours d'actu ^^

Pas de problème :3

Voilà le JS :

Code:: /* * SYSTEME DE BADGE * LIBRE SERVICE NEVER UTOPIA */ /* on vérifie si on est bien sur la page de profil */ if (/^\/u\d+$/.test(document.location.pathname)) { var idPage = "10"; /* numéro de la page HTML */ $.get("/h" + idPage + "-", function (data) { /* on récupère le block des badges */ var $badges = $(data).filter("#badges-profil"); /* on attend que notre page soit prête */ $(function () { /* on récupère la zone badge */ var $profilBadges = $("#field_id1"); if ($profilBadges.length > 0) { /* selection des badges du membre */ var badgesUser = $profilBadges.find(".field_uneditable").text().split(";"); /* pour chaque badge, on ajoute la classe si besoin */ for (var i = 0, l = badgesUser.length; i < l; i++) { if (badgesUser[i].length > 0) { try { $badges.find("." + badgesUser[i].trim()).addClass("oui").removeClass("non"); } catch (e){ console.log("Système de badge erreur => " + e); } } } /* si la personne ne peut pas éditer le champ, * on le retire la zone */ if ($profilBadges.find(".field_editable").length < 1) { $profilBadges.next().andSelf().remove(); } } /* on ajoute le block en fin de page */ $("#page-body").after($badges); }); }) }

Et le code complet de quel template ? Celui du profil ?

Jeu 15 Mar 2018 - 12:10

Nihil Scar Winspeare

Messages : 5244

Jeu 15 Mar 2018 - 12:10

Coucou :)

Sorry je passe en vitesse du coup je vais à l'essentiel T_T, je suis désolée >-<. Je voulais parler du template du profil :)

Je sais plus si on en avait posté le lien avant mais il y a ce topic qui peut aider : https://www.never-utopia.com/t62158-badges-sur-profil-simple#947392

Un premier petit truc dans la page HTML c'est qu'il faut entourer l'ensemble des badges par une div avec l'id badges-profil :hudada:

Jeu 15 Mar 2018 - 14:48

GinKitsune

Age : 25Messages : 98

Jeu 15 Mar 2018 - 14:48

Coucou !

J'ai rajouté la div avec l'id "badges-profil" :)

Ah ! D'accord. Donc voici le template du profil :

Code:: <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> <div class="PFIL"><div class="namePFIL">{L_ABOUT_USER}</div> <div class="avPFIL"><div id="adminPFIL"><div><span>{L_ADMINISTRATE_USER} :</span> {ADMINISTRATE_USER}{BAN_USER}</div></div>{AVATAR_IMG}</div> <div class="boxPFIL"><div class="sbjPFIL"><a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a></div><div class="msgPFIL"><a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a></div><div id="lstPFIL"><span>{L_LAST_VISITED} :</span> {LAST_VISIT_TIME}</div><br/> <div class="abtPFIL"><div id="field_id{profile_field.ID}"><div><span class="gen">{profile_field.LABEL}</span> {profile_field.CONTENT}</div></div></div><div id="ktactPFIL"><div class="ktactPFIL">{contact_field.CONTENT}</div></div> </div>  <div class="boxRPG"><div style="float:left; margin:10px;">{RPG_IMAGE}</div>  <span class="gen">{switch_rpg.rpg_fields.F_NAME} : </span> {switch_rpg.rpg_fields.F_VALUE_NEW}<br/>  {U_ADMIN_RPG} </div>  <span class="gen">{L_COMMENTS} :</span><br /><span class="gensmall">{L_MODS_AND_ADMINS}</span> {ADMIN_USER_COMMENT} </div> </table> <br /> <script src="{JS_DIR}jquery/json/jquery.json-1.3.min.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $('[id^=field_id]').each(function(){ if ( $(this).find('.field_editable').is('span, div') ) { $(this).hover(function() { if( $(this).find('.field_editable.invisible').is('span, div') ) { $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>'); $(this).find('.ajax-profil_edit').attr({ alt: "{L_FIELD_EDIT_VALUE}", title: "{L_FIELD_EDIT_VALUE}" }).click(function(){ $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select'); $(this).prev().find('.ajax-profil_valid').attr({ alt: "{L_VALIDATE}", title: "{L_VALIDATE}" }).click(function(){ var content = new Array(); $(this).parent().find('[name]').each(function(){ var type_special = $(this).is('input[type=radio],input[type=checkbox]'); if ( (type_special && $(this).is(':checked')) || !type_special ) { content.push(new Array($(this).attr('name'), $(this).attr('value'))); } }); var id_name = $(this).parents('[id^=field_id]').attr('id'); var id = id_name.substring(8, id_name.length); $.post( "{U_AJAX_PROFILE}", {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"}, function(data){ $.each(data, function(i, item){ $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible'); }); }, "json" ); }); $(this).remove(); }); } },function() { if( $(this).find('.field_editable.invisible').is('span, div') ) { $(this).find('.field_editable').prev().removeClass('ajax-profil_hover'); $(this).find('.ajax-profil_edit').remove(); } }); } }); }); //]]> </script> <iframe style="height: 200%; width: 100%; margin: auto;" src="http://noname18.forumgratuit.be/h10-collections-profil" frameborder="0"></iframe>

Et, j'ai fait les modifs comme proposées sur le topic et ça m'a permit d'enlever des erreurs. Mais ça ne fonctionne toujours pas ... :/
Du coup, voilà mon Js après quelques modifications grâce au lien ^^ :

Code:: /* * SYSTEME DE BADGE * LIBRE SERVICE NEVER UTOPIA */ /* on vérifie si on est bien sur la page de profil */ if (/^\/u\d+$/.test(document.location.pathname)) { var idPage = "10"; /* numéro de la page HTML */ var idChamp = "field_id1"; /* ID du champ à modifier */ $.get("/h" + idPage + "-", function (data) { /* on récupère le block des badges */ var $badges = $(data).filter("#badges-profil"); /* on attend que notre page soit prête */ $(function () { /* on récupère la zone badge */ var $profilBadges = $("#field_id1"); if ($profilBadges.length > 0) { /* selection des badges du membre */ var badgesUser = $profilBadges.find(".field_uneditable").text().split(";"); /* pour chaque badge, on ajoute la classe si besoin */ for (var i = 0, l = badgesUser.length; i < l; i++) { if (badgesUser[i].length > 0) { try { $badges.find("." + badgesUser[i].trim()).addClass("oui").removeClass("non"); } catch (e){ console.log("Système de badge erreur => " + e); } } } /* si la personne ne peut pas éditer le champ, * on le retire la zone */ if ($profilBadges.find(".field_editable").length < 1) { $profilBadges.next().andSelf().remove(); } } /* on ajoute le block en fin de page */ $("#profile-advanced-details").closest("#page-body").after($badges); }); }) }

Encore merci de m'aider ! ♥

Jeu 15 Mar 2018 - 15:02

Nihil Scar Winspeare

Messages : 5244

Jeu 15 Mar 2018 - 15:02

Normalement on y est preeeeesque !

Tout à la fin :

Code:: $("#profile-advanced-details").closest("#page-body").after($badges);

On va remettre comme avant, avec ça :

Code:: $("#page-body").after($badges);

En fait la ligne avec "profile-advanced-details" c'est pour ceux qui activent le profil avancé de forumactif

Il restera une modif en plus que je voudrai faire avant mais déjà ça devrait être un peu mieux

Courage XD

Ven 16 Mar 2018 - 20:39

GinKitsune

Age : 25Messages : 98

Ven 16 Mar 2018 - 20:39

Ouiiiiiii \o/

J'ai fais la modification ^^

Courage à vous aussi ! Et merci beaucoup :aww:

Ven 16 Mar 2018 - 22:09

Nihil Scar Winspeare

Messages : 5244

Ven 16 Mar 2018 - 22:09

On y est presque je crois :hudada:

Le CSS des badges en fait il faut le mettre dans le CSS du forum aussi

Sam 17 Mar 2018 - 14:47

GinKitsune

Age : 25Messages : 98

Sam 17 Mar 2018 - 14:47

ça fonctionne !!!!!!! :omg:

OMG ça y est ! C'est fait :joie:

(désolée pour les emoji mais c'est tellement la joie !)

Merciiiiiiii beaucoup !! C'est juste incroyable ! Vous êtes un vrai ange du codage !

Sam 17 Mar 2018 - 18:35

Nihil Scar Winspeare

Messages : 5244

Sam 17 Mar 2018 - 18:35

Contente de voir que c'est bon :hudada:

(et tu peux me tutoyer ;___; )
Je continue de surveiller le sujet, hésite pas à prévenir en cas de problème.

Au passage, le bloc de badges n'est pas centré sur toutes les largeurs d'écrans. Pour centrer un bloc, le mieux c'est de lui donner une largeur en CSS + des marges latérales automatiques.

Exemple :

Code:: .example { width: 200px; margin: auto; }

Sam 14 Avr 2018 - 21:36

anonimazur

Age : 56Messages : 14

Sam 14 Avr 2018 - 21:36

Sujet très intéressant . Merci

Sam 23 Fév 2019 - 2:47

Onyx

Age : 30Messages : 3350

Sam 23 Fév 2019 - 2:47

N'ayant pas de nouvelles depuis plus de 6 mois, j'archive le sujet.

Contenu sponsorisé

(GinKitsune) Système de collection dans les profils

Ma demande

Schéma(s) et Eléments

Ressources

Autres précisions ?

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Tags
Recherche avancée