Problème affichage js-useravatar
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Problème affichage js-useravatar
Détails techniques
Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 02/07/16
Lien du forum : (lien masqué, vous devez poster pour le voir)
Description du problème
Bonjour ! ça va ?Alors j'ai un petit problème concernant le script (Je crois que c'est un script. Je suis nul en javascript...) js-useravatar. Avec la capture d'écran que j'ai fournis, on peut voir que le cercle est vide où il devrait y avoir l'avatar du membre. C'est la première fois que j'essaie d'utiliser ce code et je ne comprend pas pourquoi cela ne fonctionne pas...
Voici à quoi ressemble mon template concernant l'avatar
- Code:
<!-- BEGIN switch_user_logged_in -->
<div class="js-useravatar"></div>
<!-- END switch_user_logged_in -->
...voici mon CSS
- Code:
/* rond avec l.avatar */
.js-useravatar {
width: 50px;
height: 50px;
position: fixed;
border-radius: 50%;
top: 7px;
left: 135px;
z-index: 999;
border: 2px solid #25262b;
box-shadow: 0 0 5px black;
overflow: hidden;
}
... Et finalement voici mon javascript
- Code:
/* On attend le chargement */
$(function(){
/* on récupère les endroits où on doit ajouter l'avatar */
var $loadAvatar = $('.js-useravatar');
/* s'il y a des endroits où on doit ajouter l'avatar */
if ($loadAvatar.length > 0) {
/* on remplace le contenu de .js-avatar en mettant l'avatar */
$loadAvatar.html(_userdata.avatar);
}
});
Merci beaucoup d'avance à qui pourra m'aider !
Le forum forum est mon forum de test
Dernière édition par Lilynufare le Dim 3 Juil 2016 - 8:39, édité 1 fois
Lilynufare- ****
- Messages : 242
Inscrit(e) le : 22/08/2012
Re: Problème affichage js-useravatar
Salut Lilynufare,
supprimes le script que tu mentionnes .
remplaces cette partie:
Par:
Penses a enregistrer les modifications en cliquant respectivement sur et
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Supprimes ceci:
Ajoutes ceci:
Et voilà .
a++
supprimes le script que tu mentionnes .
remplaces cette partie:
- Code:
<!-- BEGIN switch_user_logged_in -->
<div class="js-useravatar"></div>
<!-- END switch_user_logged_in -->
Par:
- Code:
<!-- BEGIN switch_user_logged_in -->
<script type="text/javascript">
$(function(){
$.each(_userdata, function(key, value){
$(".js-" + key).html(value);
})});
</script>
<div class="js-avatar"></div>
<!-- END switch_user_logged_in -->
Penses a enregistrer les modifications en cliquant respectivement sur et
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Supprimes ceci:
- Code:
/* rond avec l.avatar */
.js-useravatar {
width: 50px;
height: 50px;
position: fixed;
border-radius: 50%;
top: 7px;
left: 135px;
z-index: 999;
border: 2px solid #25262b;
box-shadow: 0 0 5px black;
overflow: hidden;
}
Ajoutes ceci:
- Code:
/* rond avec l.avatar */
.js-avatar {
width: 50px;
height: 50px;
position: fixed;
border-radius: 50%;
top: 7px;
left: 135px;
z-index: 999;
border: 2px solid #25262b;
box-shadow: 0 0 5px black;
overflow: hidden;
}
.js-avatar img
{
width: 48px;
height: 48px;
border-radius: 50%;
}
Et voilà .
a++
Invité- Invité
Re: Problème affichage js-useravatar
Oh mais c'est un miracle ! Ça fonctionne ! Merci beaucoup !
J'ai une autre petite question... Nos avatars sont 200*320 et non 100*100. Est-ce qu'il y a quand même une façon que je puisse les recadrer à 100*100 pour faire le rond mais sans que ça stretch nos avatars ?
Merci d'avance!
J'ai une autre petite question... Nos avatars sont 200*320 et non 100*100. Est-ce qu'il y a quand même une façon que je puisse les recadrer à 100*100 pour faire le rond mais sans que ça stretch nos avatars ?
Merci d'avance!
Lilynufare- ****
- Messages : 242
Inscrit(e) le : 22/08/2012
Re: Problème affichage js-useravatar
Re,
tu as définie une largeur et une hauteur sur le bloc contenant les avatars ici:
Il faut donc mettre une dimension inférieure aux avatars afin que ces derniers
soient positionnés correctement....
Ensuite pour éviter toutes déformations, il faudrait peut-être modifier cette partie comme ceci:
a++
tu as définie une largeur et une hauteur sur le bloc contenant les avatars ici:
- Code:
.js-avatar {
width: 50px;
height: 50px;
Il faut donc mettre une dimension inférieure aux avatars afin que ces derniers
soient positionnés correctement....
Ensuite pour éviter toutes déformations, il faudrait peut-être modifier cette partie comme ceci:
- Code:
.js-avatar img
{
max-width: 48px;
max-height: 48px;
border-radius: 50%;
}
a++
Invité- Invité
Re: Problème affichage js-useravatar
Ça n'a pas vraiment aidé le problème...
mais en fait, j'ai décidé une différente approche en faisant un ovale avec un cadre plutôt qu'un cercle donc la hauteur et la largeur fonctionne.
Merci quand même !
Merci beaucoup pour avoir répondu à ma question principale ♥
mais en fait, j'ai décidé une différente approche en faisant un ovale avec un cadre plutôt qu'un cercle donc la hauteur et la largeur fonctionne.
Merci quand même !
Merci beaucoup pour avoir répondu à ma question principale ♥
Lilynufare- ****
- Messages : 242
Inscrit(e) le : 22/08/2012
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum