image du QEEL en haut
 :: Codage :: Tutoriel pour structure Voir le sujet précédent Voir le sujet suivant Aller en bas
avatar
Voir le profil de l'utilisateur
Fondateur, lézard overbooké et caféiné
Crédit avatar : Test1
Commentaire(s) du joueur : Douleur qui me couvre si rapidement les marches de mon petit monde. Indépendant plus que tous les objets uniformes. Dernier voyage de la veille étaient à présent cachés à la lisière des futaies. Aidez-moi donc à descendre, il s'écrie qu'on abuse un peu des ailes... Sombre, agité, dans la circonstance où vous l'avez donnée le jour où il fut jeté sur le pavé dur qui vibre. Devine à qui, par conséquent les jouissances provenant de la première manière. Prenez-la sur vous, et pas un homme en train de prendre corps là, dehors. Eux aussi s'étaient abstenus.
Reserve de point(s) : 166

Mettre l'image du QEEL en haut


Bonjour bonjour ! Je me lance dans mon premier tuto alors jetez moi des pierres si ce n'est pas clair !
Il paraît que c'est à la mode alors je vais vous expliquer comment mettre une image de qui-est-en-ligne en haut ! Pour ceux qui ne verraient pas trop de quoi je parle, voici un petit schéma (CSS styyyyle, wouhou /o/) :

>> Ce à quoi il ressemble de base




L'image du qeel est là
Des statistiques
D'autres statistiques !

>>Et ce qu'on aimerait




L'image du qeel est là
Des statistiques
D'autres statistiques !

Maintenant on retrousse les manches !


Tout d'abord, il faut vous diriger dans Affichage > Template. Celui qui nous intéresse est index_body, il suffit de cliquer sur la roue mécanique et pof, plein de code !

Trifouillons un peu le code

Vous pouvez tout simplement faire un ctrl+F (mais dans mon cas, mon navigateur ne prend ce qu'il voit sans penser au scroll, cet idiot).

Code:
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="catHead" colspan="2" height="28">
      <!-- BEGIN switch_viewonline_link -->
      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
      </td>
   </tr>
   <tr>
      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
      <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></td>
   </tr>
   <tr>
      <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span></td>
   </tr>
   {L_CONNECTED_MEMBERS}
   {L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}
   <tr>

Ensuite, coupez cette ligne :
Code:
      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>

C'est la ligne de code qui contient l'image. On va donc la couper pour la remettre ailleurs. Mais pour ça, il faut créer une ligne pour le tableau, et en haut puisqu'on la veut au dessus ! Donc, en dessous de cette ligne :
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

On va créer deux balises :
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
   </tr>

Ensuite, il suffit de coller la ligne précédente entre les deux balises crées :
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
   </tr>

Petite précision

Le titre du tableau vous gênera peut être (il s'agit d'une colonne pas forcément jolie avec le mot "qui est en ligne" dessus, même personnalisée cela peut déranger). Il suffit simplement de l'enlever.

En dessous du code mis précédemment, soit :
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
   </tr>

Il faudra supprimer :
Code:
  <tr>
      <td class="catHead" colspan="2" height="28">
      <!-- BEGIN switch_viewonline_link -->
      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
      </td>
   </tr>

Tout simplement !

Et c'est terminé !

A vous de configurer votre image correctement pour que ça fasse joli ! Il y a certainement d'autres manières de procéder mais en voici une pour vous aider si besoin.
J'espère que ce topic vous aura été utile. ^^
(et que le staff me tapera pas !)
Ven 24 Aoû - 19:05
Revenir en haut Aller en bas
Page 1 sur 1
Sauter vers: