Monsieur le QEEL :)

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Monsieur le QEEL :)

Message par Lili20 Mar 16 Juin 2015 - 12:32

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : depuis aujourd'hui, cela m'embête XD
Lien du forum : http://harasdelaprairie.forumactif.org/

Description du problème

Bonjour Very Happy

J'ai récemment (ce matin pour être plus précise xD) pris la décision de changer mon qeel, qui commence à faire vieux, et fait un peu tâche dans le nouveau style que je veux apporter à mon forum Smile

J'ai donc lu, lu et relu des sujets, et j'en ai tiré une conclusion:
- faire une image soi-même du QEEL que l'on voudrait avoir

-une fois cette image faite, l'intégrer dans le template index_body, et adapter le code.

Alors, j'ai fait mon image:
Spoiler:

Mais maintenant, j'ai un gros problème pour le code, j'ai cherché longtemps mais je m'embrouille, et n'arrive pas à faire grand chose x)

Quelqu'un peut-il m'aider?
Merci d'avance! :3
Lili'


Dernière édition par Lili20 le Sam 20 Juin 2015 - 10:52, édité 1 fois
Lili20

Lili20
*

Féminin
Messages : 48
Inscrit(e) le : 22/08/2014

http://thesixthsense.forumactif.org/
Lili20 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Monsieur le QEEL :)

Message par MlleAlys Mar 16 Juin 2015 - 22:33

Bonjour,
Il y a plusieurs façons possibles de le faire, l'une d'elle est de mettre l'image dans un bloc de fond dont on fixe les dimensions, puis d'aller placer des blocs contenant le texte (des balises div) au dessus de ceux dessinés grâce à une position absolue par rapport au bloc contenant le fond. On distribue ensuite les variables du qeel dans les blocs voulus ^^

Ici l'image fait 850*271px, on va donc fixer les dimensions du bloc principal comme celles-ci. On met l'image en fond, et on ajoute position:relative; au bloc principal pour pouvoir ensuite fixer les blocs à l'intérieur en position absolue par rapport au bloc principal :
http://jsfiddle.net/66djergx/1/
(le code html est à gauche, le code css en haut à droite, le résultat en bas à droite ^^)

Puis on crée 3 blocs, auxquels j'attribue ici la class qeel-bloc. Les trois blocs sont positionnés en position:absolute; Je leur mets une bordure rouge pour pouvoir les situer le temps de construire le qeel, je mets une marge intérieure (padding) de 5px pour ne pas que le texte colle aux bords, et enfin la propriété overflow:auto; permet de faire en sorte que si le texte dépasse des dimensions qu'on va donner aux blocs, une barre de défilement apparait. ^^
http://jsfiddle.net/66djergx/2/

A cause de la position absolue, tous les blocs sont superposés en haut à gauche du bloc #qeel. On va leur donner leurs position et dimensions à chacun grâce aux propriétés css top, left, width et height. Comme ça va être différent pour chaque bloc, je mets ces dimensions directement dans la balise du bloc concerné, ce qui donne :
http://jsfiddle.net/66djergx/
Attention, la largeur totale du bloc, c'est width PLUS padding, et pareil pour la hauteur ^^ :
Monsieur le QEEL :) Bcru

Pour les variables à mettre ensuite dans les blocs, vous pouvez vous aider du template par défaut, et du tutoriel suivant :
Tuto Modifier le qui est en ligne par template


Dernière édition par MlleAlys le Jeu 18 Juin 2015 - 20:05, édité 2 fois
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Monsieur le QEEL :)

Message par Lili20 Jeu 18 Juin 2015 - 17:14

Merci beaucoup, je vais essayer cela! Very Happy

Lili20

Lili20
*

Féminin
Messages : 48
Inscrit(e) le : 22/08/2014

http://thesixthsense.forumactif.org/
Lili20 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Monsieur le QEEL :)

Message par Lili20 Jeu 18 Juin 2015 - 19:02

Alors, ça marche super bien merci, mais je me suis perdue en chemin pour ce qui est de compléter les variables à mettre dans les blocs :/

Je n'arrive pas à comprendre clairement quelle partie du template je dois mettre à la place de "contenu bloc 24h" et les deux autres contenus xD
Et aussi du coup l'ancien qeel reste en dessous de celui-ci, comment dois-je faire pour le retirer une fois que mes variables seront en place?

Merci d'avance, et merci infiniment pour l'aide que tu m'as apportée jusqu'à présent qui est claire, super bien faite et a du te prendre beaucoup de temps O.O, ça m'a énormément aidé je n'aurais jamais réussi à arriver jusqu'à ce point sans ton aide *-*

Bonne soirée,
Lili
Lili20

Lili20
*

Féminin
Messages : 48
Inscrit(e) le : 22/08/2014

http://thesixthsense.forumactif.org/
Lili20 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Monsieur le QEEL :)

Message par MlleAlys Sam 20 Juin 2015 - 0:29

Dans le template index_body, le qeel se trouve entres la ligne
<!-- BEGIN disable_viewonline -->
et
<!-- END disable_viewonline -->

Ces deux lignes correspondent à une variable de type boucle, comme les autres lignes du même genre : Ce qui est entre ces deux lignes est afficher lorsque l'option du panneau est activée.
Votre nouveau qeel devra donc au final remplacer ce qu'il y a entre ces deux lignes.

De même, à l'intérieur du qeel, il y a d'autres boucles :
Code:
      <!-- BEGIN switch_viewonline_link -->
      AFFICHAGE DU TITRE QUAND LE LIEN VERS LES STATISTIQUES EST ACTIVE
      <!-- END switch_viewonline_link -->
Code:
      <!-- BEGIN switch_viewonline_nolink -->
      AFFICHAGE DU TITRE QUAND LE LIEN EST DESACTIVE
      <!-- END switch_viewonline_nolink -->
Code:
   <!-- BEGIN switch_chatbox_activate -->
   AFFICHAGE DE LA PARTIE CONCERNANT LA CB SI CELLE-CI EST ACTIVE
   <!-- END switch_chatbox_activate -->

Si vous souhaitez garder le contrôle de ces options, il vous faudra donc garder ces boucles dans votre qeel ^^

L'autre type de variables dans les templates sont du genre {VARIABLE}. Ces variables sont remplacées à l'affichage de la page par leur information correspondante.
On peut identifier à quoi elles correspondent en les entourant d'un texte par exemple et en regardant ce qui apparait entre le texte ensuite à l'affichage.
Par exemple, dans le template il y a ce passage :
Code:
<span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span>

Si je veux savoir à quoi correspond la variable {TOTAL_USERS}, je l'entoure par exemple ainsi :
Code:
<span class="gensmall">{TOTAL_POSTS}<br />
      $$${TOTAL_USERS}@@@<br />
      {NEWEST_USER}</span>

J'enregistre le template, je le publie, et voilà ce qui apparait sur mon forum :

Monsieur le QEEL :) Nbk6

La variable {TOTAL_USERS} a donc été remplacée à l'affichage par la phrase "Nous avons 2 membres enregistrés".
Il vous faut donc copier/coller la variable {TOTAL_USERS} dans le bloc où vous souhaitez voir s'afficher cette phrase ^^

Le tutoriel vous indique ainsi à quoi correspondent les différentes variables du qeel.

Les variables auxquelles il faut faire un peu plus attention : {L_CONNECTED_MEMBERS} , {L_WHOSBIRTHDAY_TODAY} et {L_WHOSBIRTHDAY_WEEK} .
Ces variables ne sont pas simplement du texte, mais des lignes de tableau ou des demi-lignes de tableau(cf le tutoriel apprendre à faire un tableau en html, c'est pour éviter qu'il y ait une ligne vide dans le qeel s'il n'y a rien à afficher, il n'y a alors juste pas de ligne du tout ^^)...
Et des lignes de tableau doivent se trouver dans un tableau, or votre nouveau qeel n'est pas un tableau !
En le mettant dans un bloc, il faut donc les mettre entre balises table quand même, ce qui donne comme indiqué dans le tutoriel :
Code:
<table>{L_CONNECTED_MEMBERS}</table>
Code:
<table>{L_WHOSBIRTHDAY_TODAY}</span></td></tr></table>
Code:
<table><tr><td><span>{L_WHOSBIRTHDAY_WEEK}</table>

Bref,
il faut ainsi continuer à prendre les différentes variables du qeel de départ, voir à quoi elles correspondent, et les mettre dans le bloc où vous les souhaitez de votre nouveau qeel ^^


Dernière édition par MlleAlys le Ven 26 Juin 2015 - 13:51, édité 1 fois
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Monsieur le QEEL :)

Message par Lili20 Sam 20 Juin 2015 - 10:52

Oh merci beaucoup!! Je pense que je vais y arriver merci infiniment *0*

Maintenant je vous laisse tranquille xD
Bon week-end et merci encore! Smile
Lili20

Lili20
*

Féminin
Messages : 48
Inscrit(e) le : 22/08/2014

http://thesixthsense.forumactif.org/
Lili20 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum