AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment :
Aliexpress : codes promo valables sur tout le site
Voir le deal

    Icone "En Ligne" dans la Liste des Membres

    Kiki85
    Kiki85
    MasculinAge : 29Messages : 398

    Dim 15 Nov 2015 - 16:57

    Hello N.U. !


    Après avoir discuter avec un membre phare de ce forum, on m'a conseillé de venir quémander un JS pour ma demande. J'ai codé ma liste des membres ici: http://onceuponadream.forumactif.org/memberlist  et j'aimerai pouvoir afficher l'icône "en ligne" (le même que celui qui apparaît sur les profils, dans un sujet), lorsqu'un membre est en ligne.

    J'ai essayé en intégrant la balise correspondantes, dans le Templates de la Liste des Membres, mais l'on m'a dit que cela ne fonctionnerait pas. Ma demande ne serait possible que par un Javascript.

    Ainsi, je voulais vous demander si quelqu'un serait apte et aurait le temps/l'envie de me coder cela ? Je ne m'y connais absolument pas en JS...


    MERCI d'avance à celui/ceux qui s'attarderont sur ma demande.  Very Happy


    Dernière édition par Kiki85 le Lun 16 Nov 2015 - 2:06, édité 1 fois
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 15 Nov 2015 - 18:02

    Hello ♥

    J'ai bien envie de prendre cette demande de LS ! :)

    Je ferai mon LS basé sur la liste des membres "non modifiées", mais pour tester, est ce que tu pourrais faire quelques petites modifications sur ton template ?

    On va faire une première modification ici :
    Code:
    <a class="memb" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>

    Pour rajouter une classe qui nous permettra de sélectionner l'élément :
    Code:
    <a class="memb js-member-link" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>

    Ensuite, dans la div qui entoure toute la zone d'un membre, on va encore une fois rajouter une classe :
    Code:
    <div class="forum">

    Et on met
    Code:
    <div class="forum js-member-block">

    Normalement ça ne devrait rien changer, ça sera juste utile ensuite :)

    Maintenant, on va aller rajouter un javacript (^-^)
    PA > Affichage > Modules > Gestion des codes JS
    Il est à activer sur toutes les pages, et on met dedans :


    Ensuite pour personnaliser, tout se fait avec du CSS et du HTML

    Par exemple, si j'ajoute dans mon CSS :
    Code:
    .is-online {
        box-shadow: 0 5px 8px -5px #24B1FF;
    }

    Ca me donnera une petite ombre en dessous des membres connectés → https://i.imgur.com/3GqoNBn.png

    ___

    Si je veux plutôt styliser un élément à l'intérieur, je peux faire ça par exemple :
    Code:
    .is-online .contmemb {
        background: #002A40;
        color: white;
    }

    Ca va me colorer .contemb pour les membres connectés → https://i.imgur.com/us1m5mA.png

    Le sélecteur signifie "Prend la classe contmemb qui se trouve dans l'élément avec la classe is-online"


    Dernière édition par Nihil Scar Winspeare le Lun 16 Nov 2015 - 9:27, édité 1 fois (Raison : Code js mis sous hide car les archives sont visibles aux invités)

    Kiki85
    Kiki85
    MasculinAge : 29Messages : 398

    Lun 16 Nov 2015 - 0:46

    Merci beaucoup de t'occuper de ma demande ! T'es géniale ! °Q°

    Alors j'ai suivit ton tuto. Pour ma part, ce serait plus l'apparition d'un petit gif. (celui-ci: http://www.wilsongbordercollies.com/images/glitter.gif ) que je voudrais mettre. J'ai donc ajouter ce code:

    Code:
    .is-online .contmemb {
        background-image: url(http://www.wilsongbordercollies.com/images/glitter.gif);
        background-repeat: no-repeat; }

    Ca fonctionne très bien, juste que mon p'tit gif s'affiche en haut à gauche de la div contmemb. J'aimerai qu'il se place en bas à droite (sur la même ligne que le MP). J'ai essayé des p'tits margin pour le déplacer comme je fais beaucoup (même si c'est sûrement risqué) sauf que ça ne bouge pas sa place ^^ Comment faire ? :)
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Lun 16 Nov 2015 - 0:59

    En CSS pour placer le fond, on peut utiliser background-position :)

    Par exemple :
    Code:
    background-position: bottom right;

    On peut aussi mettre des valeurs directement en pixel :
    Code:
    background-position: 120px 40px;

    En cherchant sur internet on peut trouver plein de manières différentes de l'utiliser, je te laisse jouer un peu avec :)

    J'espère que cela te convient (^-^)
    Je n'ai pas mis de crédit pour Never Utopia, car c'est toujours délicat pour les codes javascript comme ça (trouver où le mettre), mais pense à le rajouter quelque part. ♥

    Kiki85
    Kiki85
    MasculinAge : 29Messages : 398

    Lun 16 Nov 2015 - 2:06

    Merci beaucoup c'est parfait !
    Le crédit est en bas du forum :)

    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 20:43