Qui est en ligne personnalisé ??

[jeanluc1974]

Bonjour à tous,

J'aimerais personnaliser le "qui est ligne ?" de mon forum, pour qu'il soit assorti avec le reste du forum, donc j'aimerais ceci :



J'ai cherché dans tous les topics, j'ai trouvé des infos mais j'ai besoin de cours particuliers

Je suis le fondateur du forum et en phpbb2, j'ai une feuille CSS et en modification du template j'ai "viewtopic_body".

Par contre mon image de doit pas correspondre à la taille idéale mais ça c'est un détail...

Merci à ceux qui voudront me filer un coup de main

[SoraNoHime]

Bonjour

pouvez-vous me fournir votre image, sans les inscription de base et avec les bonnes dimensions ?

Cordialement.

[jeanluc1974]

Ok je vous prépare ça, merci.

[jeanluc1974]

Voilà, merci pour votre aide

[SoraNoHime]

Savez-vous faire un tableau pour commencez ?

[jeanluc1974]

Oui pas de soucis

[SoraNoHime]

En fait pour changez votre qeel ce n'est pas bien compliqué, il suffit de faire un tableau où nous remettrons ensuite les balises pour que les phrases apparaissent au bon endroit.

Commencez par faire votre tableau, donnez lui la largeur de votre image et ajoutez lui une class qui permettra de faire apparaitre l'image.

Une fois cela fait, il suffira de remettre ces balises:

dans qui est en ligne :

Code:

<span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span>

dans en ligne :

Code:

<span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {LOGGED_IN_USER_LIST</span>

dans groupes :

Code:

<span class="gensmall">{GROUP_LEGEND}</span>

dans historiques des visiteurs :

Code:

<table class="trans">{L_CONNECTED_MEMBERS}</table>

dans anniversaires :

Code:

<table class="trans">{L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}</table>

Ensuite, il suffira de régler les tailles de tous et d'adapter la css.

Commencez par faire votre tableau et installer les balises comme je vous l'ai indiqué à la place de ce qui est entre

Code:

<!-- BEGIN disable_viewonline -->

et

Code:

<!-- END disable_viewonline -->

Ensuite nous verrons ensemble comment régler le tout.

[jeanluc1974]

OK merci beaucoup

[SoraNoHime]

Pour la suite, n'oubliez pas de me fournir le code que vous aurez fait. ^^

[jeanluc1974]

Bon voilà j'ai essayé dans mon forum test pour ne pas affoler les membres mais j'ai du faire une bêtise rien ne vas comme je veux

http://testoss.forumgratuit.org/

Code:

<table
 style="background-image: url(http://nsa22.casimages.com/img/2011/10/11/111011014424769045.png); background-repeat: no-repeat; background-position: center; width: 1000px; text-align: left; margin-left: auto; margin-right: auto;"
 >="" border="0" cellpadding="2" cellspacing="0">
  <tbody>
    <tr>
      <td colspan="3" rowspan="1"
 style="text-align: center; height: 100px;"><br>
      <br>
      <span class="gensmall">{TOTAL_POSTS}<br>
{TOTAL_USERS}<br>
{NEWEST_USER}</span></td>
    </tr>
    <tr>
      <td style="height: 20px;"></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td
 style="height: 230px; text-align: center; vertical-align: top;">
      <span class="gensmall"><br>
      <br>
{TOTAL_USERS_ONLINE}<br>
{LOGGED_IN_USER_LIST}</span></td>
      <td style="width: 300px;"></td>
      <td
 style="width: 340px; text-align: center; vertical-align: top;"><span
 class="gensmall"><br>
      <br>
{GROUP_LEGEND}</span></td>
    </tr>
    <tr>
      <td colspan="3" rowspan="1"
 style="text-align: center; vertical-align: top; height: 100px;"><br>
      <br>
      <div style="text-align: center;">{L_CONNECTED_MEMBERS}
      </div>
      <table
 style="text-align: left; margin-left: auto; margin-right: auto;"
 class="trans">
      </table>
      </td>
    </tr>
    <tr>
      <td colspan="3" rowspan="1"
 style="height: 100px;">
      <div style="text-align: center;"> </div>
      <table
 style="text-align: left; margin-left: auto; margin-right: auto;"
 class="trans">
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
      </table>


[SoraNoHime]

changez déjà : style="background-image: url(https://nsa22.casimages.com/img/2011/10/11/111011014424769045.png); background-repeat: no-repeat; background-position: center; width: 1000px; text-align: left; margin-left: auto; margin-right: auto;"

par class="qeelfond"

et dans la css mettez

.qeelfont {
background-image: url(https://nsa22.casimages.com/img/2011/10/11/111011014424769045.png);
background-repeat: no-repeat;
background-position: top center;
width: 1000px;
height : hauteur de l'imagepx
}

ensuite il y a quelques erreurs sur le tableau :

Code:

    <table class="qeelfond" width="1000" border="0" cellpadding="2" cellspacing="0">
          <tbody>
            <tr>
              <td colspan="3" rowspan="1"
        style="text-align: center; height: 100px;"><br>
              <br>
              <span class="gensmall">{TOTAL_POSTS}<br>
        {TOTAL_USERS}<br>
        {NEWEST_USER}</span></td>
            </tr>
            <tr>
              <td style="height: 230px; text-align: center; vertical-align: top;">
              <span class="gensmall"><br>
              <br>
        {TOTAL_USERS_ONLINE}<br>
        {LOGGED_IN_USER_LIST}</span></td>
              <td style="width: 300px;"></td>
              <td style="width: 340px; text-align: center; vertical-align: top;"><span class="gensmall"><br>
              <br>
        {GROUP_LEGEND}</span></td>
            </tr>
            <tr>
              <td colspan="3" rowspan="1" style="text-align: center; vertical-align: top; height: 100px;">
              <table class="trans">{L_CONNECTED_MEMBERS}</table>
            </td>
            </tr>
            <tr>
              <td colspan="3" rowspan="1" style="height: 100px;">
          <table class="trans">
        {L_WHOSBIRTHDAY_TODAY}
        {L_WHOSBIRTHDAY_WEEK}
              </table>
</td></tr></table>

N'essayez pas pour le moment d'aligner aux cases de votre image, essayez simplement d'en voir la structure, ordre des balises, passage de ligne. ^^ nous le ferons ensuite par la css. Confirmez moi si cela va mieux déjà.

[jeanluc1974]

Oui merci c'est déjà mieux

[SoraNoHime]

Donc maintenant, il va falloir régler les positions tous avec des div et des class.

en fait pour chaque groupe que je vous ai fourni, mettez autour :

Code:

<div class=nom de votre choix, un pour chaque groupe>

et

Code:

</div>

une fois cela fait, dans votre css, vous allez réglé le tout grace à des padding et des margin

exemple : <div class="stat"> <span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span></div>

dans la css

Code:

.stat {
margin-left : 20px;
margin-right : 20px;
margin-bottom : 20px;
border : 1px solid #ff0000;
}

comme vous etes sur transparent, je vous ai ajouté un tour pour que vous voyez le changement, enlevez
border : 1px solid #ff0000; pour le supprimez ensuite.

Je vous laisse régler, n'hésitez pas à m'appeller à l'aide au cas où

[jeanluc1974]

Ok super je fais celà ce soir

[jeanluc1974]

Ok je viens d'essayer, j'arrive pas à les faires descendre et je ne vois pas les derniers membres connectés.

Merci.

[SoraNoHime]

Pensez à éditer votre précédent message plutot que double poster

Donnez moi votre code actuel, je vais voir avec.

Cordialement.

[jeanluc1974]

Ok pas de soucis

Code:

<table class="qeelfond" width="1000" border="0" cellpadding="2" cellspacing="0">
          <tbody>
            <tr>
              <td colspan="3" rowspan="1"
        style="text-align: center; height: 100px;"><br>
              <br>
              <div class="stats"><span class="gensmall">{TOTAL_POSTS}<br>
        {TOTAL_USERS}<br>
        {NEWEST_USER}</span></td></div>
            </tr>
            <tr>
              <td style="height: 230px; text-align: center; vertical-align: top;">
              <div class="online"><span class="gensmall"><br>
              <br>
        {TOTAL_USERS_ONLINE}<br>
        {LOGGED_IN_USER_LIST}</span></td></div>
              <td style="width: 300px;"></td>
              <td style="width: 340px; text-align: center; vertical-align: top;"><div class="groupes"><span class="gensmall"><br>
              <br>
        {GROUP_LEGEND}</span></td></div>
            </tr>
            <tr>
              <td colspan="3" rowspan="1" style="text-align: center; vertical-align: top; height: 100px;">
              <div class="histo"><table class="trans">{L_CONNECTED_MEMBERS}</table></div>
            </td>
            </tr>
            <tr>
              <td colspan="3" rowspan="1" style="height: 100px;">
          <div class="hb"><table class="trans">
        {L_WHOSBIRTHDAY_TODAY}
        {L_WHOSBIRTHDAY_WEEK}
              </table></div>
</td></tr></table>


Et le CSS

Code:

.stats {
margin-left : 20px;
margin-right : 20px;
margin-bottom : 0px;
border : 1px solid #ff0000;
}

.online {
margin-left : 20px;
margin-right : 20px;
margin-bottom : 50px;
border : 1px solid #ff0000;
}

.groupes {
margin-left : -20px;
margin-right : 20px;
margin-bottom : 50px;
border : 1px solid #ff0000;
}

.histo {
margin-left : 20px;
margin-right : 20px;
margin-bottom : 0px;
border : 1px solid #ff0000;
}

.hb {
margin-left : 20px;
margin-right : 20px;
margin-bottom : 55px;
border : 1px solid #ff0000;
}

[SoraNoHime]

En fait, vous avez quelques petits réglages mal qualibrés, maais sinon vous vous en êtes bien sorti.

Code:

.qeelfond {
background-image: url("http://nsa22.casimages.com/img/2011/10/11/111011014424769045.png");
background-repeat: no-repeat;
background-position: top center;
width: 1030px;
height : 567px
}

        .stats {
        margin-left : 20px;
        margin-right : 20px;
        margin-bottom : 20px;
margin-top : 15px;
        }
       
        .online {
padding : 5px;
margin-top : 20px;
        margin-left : 20px;
        margin-right : 20px;
        margin-bottom : 30px;
height : 200px;
overflow : auto;
        }
       
        .groupes {
padding : 5px;
margin-top : 20px;
        margin-left : -20px;
        margin-right : 20px;
        margin-bottom : 30px;
height : 200px;
overflow : auto;
        }
       
        .histo {
padding : 5px;
overflow : auto;
height : 45px;
        margin-left : 20px;
        margin-right : 20px;
        margin-bottom : 0px;
        }
       
        .hb {
height : 45px;
padding : 5px;
overflow : auto;
        margin-left : 20px;
        margin-right : 20px;
        margin-bottom : 55px;
        }

.trans .row1 {
background-color : transparent;
}


voici votre css complète, y'a-t-il encore des changements à effectuer ?

[jeanluc1974]

Merci c'est sympa de votre part

C'est super, et j'aimerais savoir s'il est possible de mettre les groupes à la ligne au lieu qu'ils soient à la suite.

Pareil j'aimerais centrer l'historique et les anniversaires.

Merci de votre aide.

[SoraNoHime]

Pour mettre les groupes à la ligne, il vous faut les remplacer à la main :

un groupe =

<a href="lien du groupe"><font color="couleur du groupe"><b>NOM DU GROUPE</b></font></a><br/>

pour centrer l'historique et les anniv :

.trans .row1 {
background-color : transparent;
text-align : center;
}

rajoutez a partie en rouge

[jeanluc1974]

Super merci ça marche y a que pour l'historique et les anniversaire que ça marche pas mais pas grave ça ma va très bien comme ça

En tout cas je vous remercie énormément pour votre aide qui fut très précieuse.

Bravo

[SoraNoHime]

Je vous en prie bonne soirée.

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif