CSS pris en compte dans les champs de profil ?

[horusbk]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://themazerunner-forum.fr/

Description du problème

Bonjour,
J'ai récemment voulu ajouter des champ de profil pour que mes membres personnalises leur profil. Vous pouvez voir le sujet concerné ici. Par exemple, lors de la création d'une nouvelle liste ou d'un choix multiples, il faut donner un titre à ce champ mais également (si on le souhaite) une description.
Ma question est s'il est possible d'inclure du CSS dans cette description pour y insérer un lien.
Exemple :

Quels livres avez-vous lus ?
Pour en savoir plus sur les livres cliquez-ici

-Livre 1
-Livre 2
-Livre 3
-AUCUN ...

J'aimerais donc inclure un lien par le texte "cliquez-ici" pour qu'il ouvre une nouvelle fenêtre et renvoie sur une page de mon forum (aide, tuto ...).
Merci pour vos lumières et cordialement, 1baptiste

[Alzufen]

Bonsoir,

La description d'un champ ne s'affiche pas dans les profils si je ne m'abuse, donc que tu y entres un lien ou non, ça ne changera rien, de plus, je ne pense pas que le HTML passe dedans, et pas sûr pour le BBCode non plus.

L'une des possibilités serait de tricher pour rajouter un texte après cette question (en dessous, au dessus, à côté du label, à côté de la réponse peu importe) grâce au CSS avec Before/After ou au JS. Le soucis c'est qu'il te faudra distinguer ce label des autres, la solution la plus simple est de jouer sur la couleur de ce champ.

Je sais pas si je vais être clair mais :

- Lorsque tu crées un champ de profil, tu as le choix de sa couleur
- Ici, le but va être de choisir une couleur avec une trèèèèèèèèès légère nuance pour que ça ne se voit pas à l’œil mais que ça se voit dans le codage.
- Par exemple, essaye de poster un message avec pour couleur #000000, essaye à côté de poster un message avec pour couleur #000001, à l'écrit le code est différent mais à l’œil nu les deux semblent être du noir, car la nuance est pas assez grande pour qu'on fasse clairement la différence entre les deux.
- On va donc ici faire la même chose, puis récupérer cette information en CSS/JS pour y ajouter ce fameux texte qui nous intéresse. Je te recommande le JS plutôt que le CSS, car en CSS tu pourras ajouter l'url mais pas de "cliquez ici".

[horusbk]

Le petit détail que j'ai occulté, c'est que je ne sais pas coder ce genre de chose en JS !

[Alzufen]

Ca c'est un pas un soucis, je peux te le faire sans problème Si je te propose c'est justement parce que je me doutais bien que si tu en étais pas capable je le ferais ^^

Il me faudrait juste que tu fasses la petite nuance du code couleur et me fournisse le code couleur du (ou des) champ(s) à modifier, par contre il te faudra une couleur différente par champ, enfin une nuance différente.

[horusbk]

Champ à modifier : Métier
Couleur du champ : Noir (#000000)
Couleur de la nuance : Noir (#000001)

[Alzufen]

Dernière chose, tu voudrais que le texte soit ajouté où ?

[horusbk]

Soit :
-Juste à côté de la liste
OU
-Juste en dessous de la liste si la première option est impossible.

PS : C'est un champ qui est demandé lors de l'inscription (je sais pas si c'était utile de le préciser, mais comme ça c'est fait)

[Alzufen]

Du coup tu aimerais que ce soit juste affiché à l'inscription la "description" ou aussi dans le profil itout ?

[horusbk]

Seulement à l'inscription car les membres ne pourront plus le modifier ensuite.

Si j'ai bien compris les options du PA concernant les profils personnalisables, quand on clique sur "modification par un modérateur", le champ concerné :
-Peut-être entré par le membre lors de son inscription
-Pour être modifié par la suite, il doit demander à un modérateur
C'est cela ?

[Alzufen]

Oui c'est ça

Et du coup, ça va être bien plus simple, tu peux oublier ce que j'ai dis et remettre la couleur comme c'était, on va juste faire ça avec un peu de JS :

Tu vas juste ajouter le texte de description au champ du profil, par exemple :

"Pour voir le lien"

Et grâce au JS on va ajouter à la suite :

"Cliquez ici" avec un lien dessus.

Par contre, pour terminer le JS et qu'il marche sur ton forum j'aurais bien que tu retires la maintenance quelques secondes le temps d'aller voir ton formulaire d'inscription (après que tu es ajouté la description) stp ^^

[horusbk]

C'est fait j'ai désactivé le forum en construction et l'interdit d'inscription.

[Alzufen]

Donc, tu vas aller dans ton Panneau d'administration > Modules > (Tout en bas) Gestion des pages Javascript (Vérifie que oui est bien coché) > Ajouter une page > Mets le titre que tu veux > Sur toutes les pages (dans le doute) puis ajoute :

Code:

$(function(){
$('#profile_field_7_2 ~ span').append(' <a href="clique">cliquez ici</a>');
});

Il te suffira de remplacer "cliquez ici" par le texte que tu veux, et le "clique" par l'url désiré ^^

[horusbk]

Merci beaucoup ! Comme je n'ai pas encore créé la page, le lien renvoie sur rien. Mais il est bien présent. Toutefois, peux-t-il ouvrir un pop-up ou une nouvelle fenêtre au lieu de changer de page ?
Encore merci pour le code !
Petite question : Avez-vous la page HTML avec la vidéo lors de l'entrée sur mon forum à cette adresse : http://www.themazerunner-forum.fr ?

[Alzufen]

Oui c'est possible, pour le popup tu veux dire une petite fenêtre d'info qui s'ouvre lorsqu'on clique dessus ? Ou une vraie popup qui mène à la page ? Pour le deuxième cas il suffit d'ajouter "target="_blank"" à la balise "a" donc comme ça :

Code:

<a href="clique" target="_blank">cliquez ici</a>

Ca ouvrira obligatoirement le lien dans un autre onglet ^^

[horusbk]

En fait je voudrais une petite fenêtre qui s'ouvre quand on clique sur le lien avec les informations que je souhaite. Cela évitera de créer une nouvelle page pour expliquer les catégories de la liste.

[Alzufen]

Dans ce cas là, ça risque d'être un peu plus long à faire mais je veux bien te le faire quand même ^^

Il faudra juste que tu détails un peu plus, genre les dimensions de la fenêtre, où elle apparaît, comment, ce qu'il doit y avoir dedans, toussa quoi, histoire de savoir précisément quoi faire en te laissant quand même par la suite personnaliser

[horusbk]

@Alzufen : voici ma commande :

Pop-Up d'information sur les métiers du Bloc
Hauteur : 11 cm  /  416 px
Largeur : 16 cm  / 605 px
Police : Arial
Taille de la police : 10
Fond : blanc translucide (il faut que l'on voit ce qui est affiché derrière tout en gardant le texte lisible).
Autre : éléments en GRAS et SOULIGNE et CENTRE

Texte du Pop-Up :

Descriptif des métiers du Bloc

 
- Bâtisseur : Il construit de nouveaux lieux où il les agrandit.
- Briqueton : Il assiste les Bâtisseurs et répare les constructions.
- Cartographe : Il crée les plans du Labyrinthe en fonction des informations des Coureurs.
- Coffreur : En plus de maintenir l'ordre au Bloc, il est chargé de s'occuper des morts.
- Coureur : C'est l'élite du Bloc, il explore le Labyrinthe à la recherche d'une sortie.
- Cuistot : Il prépare les repas pour tous les autres Blocards.
- Medjack : Il soigne les blessés.
- Sarcleur : Il cultive la terre dans le jardin pour fournir des denrées aux Cuistots.
- Torcheur : Il accomplit toutes les tâches ménagères et veille à ce que le Bloc soit propre. 
- Trancheur : Il élève le bétail pour ensuite le tuer.


En espérant que toutes ces informations t'aideront pour la création du pop-up et je t'en remercie d'avance ! Cordialement, 1baptiste

[Alzufen]

Quelque chose comme ça ne te suffirait pas ? Ca apparaît quand on clique sur "cliquez ici", je peux faire une vraie bulle qui apparaît au dessus de tout mais ça risque d'être assez ch*ant à faire, déjà pour lire, et ensuite si tu modifies ce que tu demandes à l'inscription ^^

http://puu.sh/gjO9l/79ee0979f5.png

[horusbk]

Si tu veux je voudrais vraiment que ça ne surcharge pas la mise en page de l'inscription. Juste que ça apparaisse quand on clique dessus ou qu'on l'on survole puis que ça disparaisse quand la souris change de position ou quand l'on clique sur une petite croix pour fermer la fenêtre.

[Alzufen]

Si tu cliques ça apparais, si tu recliques ça disparaît, je peux te faire ça au survol aussi si tu préfères ^^

Sinon bah, il te faut juste ajouter ça sur toutes les pages dans tes codes javascript :

Code:

$(function(){
    $('#profile_field_7_1 ~ span').append(' <a style="cursor:pointer;" id="metier">cliquez ici</a>');
    $('#metier').toggle(function(){
        var metier = $('#profile_field_7_1').parent().parent();
        metier.append('<div class="descri_metier"><div style="text-align: center;"><b>Descriptif des métiers du Bloc</b></div><br /><br />-<b><u> Bâtisseur </u></b>: Il construit de nouveaux lieux où il les agrandit.<br />-<b><u> Briqueton </u></b>: Il assiste les Bâtisseurs et répare les constructions. <br />-<b><u> Cartographe </u></b>: Il crée les plans du Labyrinthe en fonction des informations des Coureurs.<br />-<b><u> Coffreur </u></b>: En plus de maintenir l\'ordre au Bloc, il est chargé de s\'occuper des morts.<br />-<b><u> Coureur </u></b>: C\'est l\'élite du Bloc, il explore le Labyrinthe à la recherche d\'une sortie.<br />-<b><u> Cuistot </u></b>: Il prépare les repas pour tous les autres Blocards.<br />-<b><u> Medjack </u></b>: Il soigne les blessés.<br />-<b><u> Sarcleur </u></b>: Il cultive la terre dans le jardin pour fournir des denrées aux Cuistots.<br />-<b><u> Torcheur </u></b>: Il accomplit toutes les tâches ménagères et veille à ce que le Bloc soit propre.  <br />-<b><u> Trancheur </u></b>: Il élève le bétail pour ensuite le tuer.<br /></div>');
    },function(){
        $('.descri_metier').remove();
    });
});

[horusbk]

Oui s'il te plait ! L'effet survol me convient à 100%. De plus, la fenêtre peut-elle avoir un cadre ?

[Alzufen]

J'ai oublié de te fournir le css qui va avec, pour le cadre suffira que tu ajoutes tout ce que tu veux dans le CSS, tu penses pouvoir faire ça ? ^^

Code:

.descri_metier{
max-height: 416px;
width: 430px;
font: 10px 'Arial';
cursor: default;
}

Et le nouveau script :

Code:

$(function(){
    $('#profile_field_7_1 ~ span').append(' <span id="metier"><a style="cursor:pointer;">survolez ici</a></span>');
    $('#metier').hover(function(){
        $(this).append('<div class="descri_metier"><div style="text-align: center;"><b>Descriptif des métiers du Bloc</b></div><br /><br />-<b><u> Bâtisseur </u></b>: Il construit de nouveaux lieux où il les agrandit.<br />-<b><u> Briqueton </u></b>: Il assiste les Bâtisseurs et répare les constructions. <br />-<b><u> Cartographe </u></b>: Il crée les plans du Labyrinthe en fonction des informations des Coureurs.<br />-<b><u> Coffreur </u></b>: En plus de maintenir l\'ordre au Bloc, il est chargé de s\'occuper des morts.<br />-<b><u> Coureur </u></b>: C\'est l\'élite du Bloc, il explore le Labyrinthe à la recherche d\'une sortie.<br />-<b><u> Cuistot </u></b>: Il prépare les repas pour tous les autres Blocards.<br />-<b><u> Medjack </u></b>: Il soigne les blessés.<br />-<b><u> Sarcleur </u></b>: Il cultive la terre dans le jardin pour fournir des denrées aux Cuistots.<br />-<b><u> Torcheur </u></b>: Il accomplit toutes les tâches ménagères et veille à ce que le Bloc soit propre.  <br />-<b><u> Trancheur </u></b>: Il élève le bétail pour ensuite le tuer.<br /></div>');
    },function(){
        $('.descri_metier').remove();
    });
});

[horusbk]

J'ai oublié de te fournir le css qui va avec, pour le cadre suffira que tu ajoutes tout ce que tu veux dans le CSS, tu penses pouvoir faire ça ? ^^

Code:

.descri_metier{
max-height: 416px;
width: 430px;
font: 10px 'Arial';
cursor: default;
}

Malheureusement non

EDIT : je fais un nouveau JS ?

[Alzufen]

Tu le voudrais de quelle couleur et épaisseur le cadre ?

Et pour le JS, tu remplaces l'ancien que je t'ai donné par celui-ci ^^

[horusbk]

Pour le cadre :
Couleur OR : #EFD807
Épaisseur : 0.75 pt

[Alzufen]

Dans ce cas, c'est pas plus compliqué que ça, tu remplaces l'autre CSS que je t'ai fourni par celui-ci :

Code:

.descri_metier{
max-height: 416px;
width: 430px;
font: 10px 'Arial';
cursor: default;
0.75pt solid #EFD807;
}

[horusbk]

Le lien "survolez ici" n'est pas affiché

[Alzufen]

Tu peux ouvrir les inscriptions que j'aille voir ça rapidement stp ? ^^

Et sinon, pour plus haut, j'avais oublié ta question, oui je vois la vidéo mais ce qui est énervant c'est qu'elle s'affiche à chaque fois qu'on va sur la page

[horusbk]

C'est activé et c'est le but de la vidéo (elle est configurée en tant que page d'accueil)

[Alzufen]

Ah oui, ma faute, une petite erreur idiote de ma part encore...

Dans le code JS il y a "$('#profile_field_7_1 ~ span')" sauf que chez toi c'est le champ "7_2" pas "7_1" comme chez moi (ca dépends de l'ordre de création du champ je pense), donc remplace le 1 par 2 et ça devrait être bon ^^

Je me doute bien que c'est le but, mais une fois que tu l'as vu une première fois, tu as juste envie de la passer après et donc qu'elle s'affiche à chaque fois c'est embêtant mais bon, on peut pas vraiment faire autrement XD