AccueilFAQRechercherMembresGroupesS'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.


    QEEL «Untold» • Groupes en onglets et boites simples

    Partagez
    'Christa
    FémininAge : 31Messages : 107

    le Dim 15 Mar 2015 - 22:48

    Rappel du premier message :


    Structure de Qui Est En Ligne Nom de code : Untold



    Introduction


    Informations générales


    • Date de création : Mars 2015
    • Type de contenu : Structure de Qui Est En Ligne pour forum de ForumActif utilisant un thème en version phpbb2
    • Origine : Ce QEEL a été créé suite à une demande de Anarchy Rose.
    • Démonstration : Jetez un coup d'oeil à la page de démonstration !

    Vous devez répondre à ce message pour pouvoir voir les codes. Un remerciement est la moindre des choses Wink

    Spécifications


    • Affiche les statistiques du forum : nombre de messages, nombre de membres, dernier membre inscrit, membres connectés ;
    • Affiche le record du nombre d'utilisateurs en ligne ;
    • Affiche la liste des membres connectés au cours des 24/48/xx dernières heures ;
    • Possibilité de rajouter une image au dessus du QEEL (celle que vous uploadez dans votre panneau d'administration) à condition de modifier une ligne du CSS ;
    • Affiche trois groupes sous forme d'image et une description associée quand on survole leur image (ces images ne sont pas cliquables) ;
    • Quand aucun des trois groupes n'est survolé, un texte par défaut est affiché ;
    • Affiche quatre (ou plus) icones sous le QEEL, par exemple pour lister le staff du forum ;
    • Les anniversaires ne sont PAS inclus ;
    • Les statistiques de la chatbox ne sont PAS incluses ;
    • Ce code n'utilise aucun tableau, tous les éléments sont flottants. Il est par conséquent relativement adapté aux supports mobiles, pour peu que le reste de votre forum le soit.

    Règles d'utilisation


    Ce n'est pas parce que je propose mes codes en libre service que vous pouvez faire n'importe quoi avec ; n'oublions pas qu'ils restent le fruit de mon travail ! Merci donc de respecter les quelques règles qui suivent.

    • Vous pouvez éditer ce code à votre convenance ;
    • Vous ne pouvez pas redistribuer ce code sur un autre forum, quel qu'il soit, même si vous l'avez modifié ;
    • Vous devez impérativement laisser mes crédits, même après modification (vous pourrez évidemment ajouter "personnalisé par (pseudo)") ;
    • L'usage de ce code est autorisé pour un usage strictement personnel et non commercial ;
    • En aucun cas vous ne pouvez utiliser ce code sur un forum faisant la promotion du racisme, de la xénophobie, de l'homophobie, de la pédophilie, de la pornographie, du warez et de tout autre contenu de nature discriminatoire ou illégale. Cette interdiction s'applique également aux forums RPG dits "Hentai/Yaoi/Yuri" (RPG érotique) qui ne mettent pas en place les mesures minimales de protection contre les mineurs (contenu sensible caché aux visiteurs, avertissement clair et visible à l'inscription et sur l'accueil, et pas de personnages mineurs)
    • Merci d'ajouter un lien retour vers Never Utopia sur votre forum (dans une section crédits par exemple) si vous utilisez ce QEEL.


    Script JS à installer


    Allez dans votre panneau d'administration, onglet Modules puis dans Gestion des Codes Javascript. Assurez-vous que la gestion du javascript est activée, puis créez une nouvelle page javascript en y collant le code qui va suivre. Pensez aussi à cocher la case sur l'index.



    Édition du template index_body


    Rendez-vous dans votre panneau d'administration, onglet Affichage puis dans le menu Templates » Général et ouvrez le template index_body.

    Code du QEEL


    Cherchez les commentaires suivants :
    Code:
    <!-- BEGIN disable_viewonline -->
    Code:
    <!-- END disable_viewonline -->
    N'y touchez pas, mais supprimez tout ce qui se trouve entre les deux.

    Puis remplacez ce que vous avez supprimé par le code qui suit :


    La feuille de styles


    Rendez-vous dans votre panneau d'administration, onglet Affichage, puis dans le menu Images et couleurs » Couleurs et enfin cliquez sur l'onglet Feuille de styles CSS. Dans le champ de texte, à la suite du code CSS existant s'il y en a, collez le code qui suit.
    L'essentiel du code a été commenté pour vous aider à savoir quoi modifier, tant que vous avez quelques bases en CSS.


    Comment faire pour...

    Modifier la liste des groupes


    Pour modifier la liste des groupes, trouvez le bloc de code suivant :
    Vous voyez une série de trois liens contenant une image, ce sont les fameux groupes. Le code a été conçu pour seulement trois images de cette taille précise, mais si vous vous sentez capables de le faire vous pouvez rajouter d'autres liens de la même façon avant le </div> final. Il vous suffit de rajouter une ligne de ce genre :
    Vous devez remplacer le X de onglet_gr_X par le numéro de votre onglet (4, 5, 6, etc), URL_IMAGE_GROUPE par le lien de votre image et NOM DU GROUPE par le nom de votre groupe.

    Ces liens ne servent qu'à faire fonctionner le système d'onglets, vous ne pouvez pas faire un lien vers une page du forum (celle du groupe concerné par exemple). Pensez-y avant de faire des modifications inapropriées !

    Modifier les descriptions des groupes


    Pour éditer les descriptions des groupes ainsi que le texte "par défaut" qui apparait quand aucun groupe n'est survolé, c'est la section suivante du code. Chaque "bloc" de description se présente sous cette forme :
    Chaque onglet a un identifiant (attribut id) qui correspond à un des liens de la liste des groupes. Le premier, celui qui apparait par défaut, est identifié par onglet_defaut. Vous pouvez modifier leur contenu à votre guise. Si vous souhaitez rajouter d'autres groupes, vous n'avez qu'à reproduire le code en modifiant l'identifiant.


    Modifier le texte "24h" (pour remplacer par 48h ou autre)


    Cherchez la ligne suivante dans le code et changez "24 heures" par la durée de votre choix : Attention à ne pas changer le nom de la classe ! (Je préviens, on ne sait jamais XD).

    Modifier les images sous le QEEL


    Vous pouvez changer à votre guise les images qui apparaissent sous le QEEL, repérez simplement ce bloc de code : Chaque image est incluse dans un élément de liste (d'où les balises <li>...</li>), faites attention à ne pas les supprimer en modifiant votre code. Au final, quand vous souhaitez modifier ou rajouter une image/bouton, votre code doit ressembler à ceci :
    Code:
    <li> VOTRE CONTENU ICI </li>
    En principe, vous pouvez mettre du texte, des images, des liens, ce que vous voulez, mais idéalement mieux vaut que ces différents contenus soient de même dimensions !

    Afficher l'image du QEEL


    Par défaut, l'image du QEEL est cachée. Pour pouvoir l'afficher, il vous suffit simplement d'éditer cette partier du code de la feuille de styles CSS :
    Code:
    .lmqeel__img {
        display:none;
        text-align:center;
    }
    Supprimez simplement la ligne display:none; et enregistrez votre modification.

    Heartfilia
    FémininAge : 16Messages : 98

    le Mar 11 Aoû 2015 - 21:55

    Magnifique merci !



    YOU HELLA SAVED MY LIFE
    - chloe price
    Kelalin
    FémininAge : 24Messages : 1405

    le Mar 11 Aoû 2015 - 23:23

    Merci pour le partage. (ノ´ー`)ノ
    Ivelyne
    FémininAge : 24Messages : 44

    le Ven 30 Oct 2015 - 16:32

    C'est vraiment très beau !
    Odahviing
    FémininAge : 19Messages : 22

    le Jeu 18 Fév 2016 - 13:40

    Il est superbe, merci :aww:
    Hopefox
    FémininAge : 19Messages : 31

    le Mar 23 Fév 2016 - 18:40

    Merci Very Happy
    Neuux
    FémininAge : 19Messages : 32

    le Lun 7 Mar 2016 - 17:18

    Une page QEEL très intéressante je te remercie!
    Whit
    FémininAge : 19Messages : 144

    le Lun 7 Mar 2016 - 22:13

    Merci !
    Océ
    FémininAge : 42Messages : 223

    le Mar 8 Mar 2016 - 11:44

    Merci et Jolie



    Bonjours voici mes petit demande d'aide : L’annonce est ici
    Lust Caution
    FémininAge : 22Messages : 77

    le Mer 9 Mar 2016 - 15:51

    Omg ! Trop nice !!!!! Merci pour la magnifique partage :3
    Bunny Lune
    FémininAge : 27Messages : 134

    le Jeu 10 Mar 2016 - 12:41

    Merci pour le partage. Très joli QEEL
    Depp
    FémininAge : 25Messages : 297

    le Jeu 10 Mar 2016 - 21:31

    Merci beaucoup Very Happy



    Dacina moe
    FémininAge : 38Messages : 131

    le Mer 30 Mar 2016 - 16:50

    Jolie :)
    ass kicker
    FémininAge : 21Messages : 76

    le Mer 30 Mar 2016 - 19:46

    merci.



      see you again
      No matter where you are, whether you’re a quarter mile away, or half way around the world … you’ll always be with me. You’ll always be my brother.©endlesslove
    blomkvist
    FémininAge : 25Messages : 44

    le Ven 1 Avr 2016 - 19:25

    merci pour le partage.
    Simple mais SUPER efficace ! MERCI :pompom:



    ☆ once upon a dream ☆
    I know you, I walked with you once upon a dream. I know you, that look in your eyes is so familiar a gleam. And I know it's true that visions are seldom all they seem. But if I know you, I know what you'll do. You'll love me at once, the way you did once upon a dream. ~ byendlesslove.
    Kitket
    FémininAge : 33Messages : 82

    le Sam 16 Avr 2016 - 17:44

    MErci
    Pooni
    FémininAge : 18Messages : 39

    le Ven 22 Avr 2016 - 1:17

    Merci !
    anouk
    FémininAge : 25Messages : 17

    le Sam 23 Avr 2016 - 21:10

    J'adore ! *o*
    Tatia38
    FémininAge : 27Messages : 294

    le Mer 27 Avr 2016 - 22:43

    sublime code merci
    Belial M.
    MasculinAge : 16Messages : 8

    le Sam 30 Avr 2016 - 2:41

    Bravo !
    Hana Evali
    FémininAge : 26Messages : 153

    le Lun 16 Mai 2016 - 19:03

    merci !



    rosebleudu10
    FémininAge : 26Messages : 186

    le Jeu 19 Mai 2016 - 17:46

    merci
    Biditoche
    FémininAge : 23Messages : 28

    le Ven 20 Mai 2016 - 21:51

    Trop beau **
    Saphira
    FémininAge : 20Messages : 72

    le Lun 23 Mai 2016 - 22:53

    Merci :)
    Koalaz
    MasculinAge : 19Messages : 46

    le Sam 28 Mai 2016 - 10:44

    Merci du partage, il est très joli. c:
    alas
    FémininAge : 25Messages : 20

    le Sam 28 Mai 2016 - 19:12

    Merci !
    Contenu sponsorisé

    Aujourd'hui à 2:02


      La date/heure actuelle est Sam 10 Déc 2016 - 2:02