apparence du QEEL

[djassem]

Bonjour,

je voudrais changer l'apparence de mon qeel car je le trouve trop fade , je pense que je dois modifier certaines choses dans les templates , comme sur ce forum : http://www.labulleworld.com/forum


Merci.

[Lixyr]

Bonjour.

Oui, effectivement, il faut modifier quelques petites choses, par templates si vous êtes en phpbb2 ou phpbb, ou par css.

[djassem]

je suis en phpbb 2 ! comment faire ? je vous ecoute

[Lixyr]

Modifier le template ou le css, selon ce que vous voulez comme changement.

Si vous voulez que je vous aide, il serait mieux de me dire ce que vous voulez.
Si c'est uniquement obtenir un QEEL comme sur le forum que vous avez mis en lien, alors il y a beaucoup de sujets qui expliquent comment on faire, sur ce forum, rien qu'en tapant le mot "QEEL".

[djassem]

Bonjour,

et bien je voudrais quelque chose qui tape ! qu'es-que vous avez en réserve ^^ ?

si vous pouvez me donner des idees , ca serait sympa svp

merci

[Lixyr]

Des idées ? J'ai déjà eu du mal à me décider pour le mien, alors ... ^^"

Le mieux serait que vous sachiez, vous, ce que vous voulez pour votre forum, et que vous reveniez ici chercher des codes qui vous permettraient de faire ce que vous voulez, et au pire de demander à ce qu'on vous aide.

Mais dans un premier temps, il vaudrait mieux que vous, vous cherchiez et surtout trouviez ce que vous voulez
et dans un deuxième temps que vous tentiez par vous-même de faire ce que vous souhaitez.

[djassem]

lol ! pas de souci et bien je pense que je voudrais bien faire le même qeel sur le premier lien que je vous ai passe , il est pas mal je trouve , es-que c'est possible ? car moi et les templates = 2

Merci.

[Lixyr]

C'est possible, oui. Mais faire "le même", ça je sais faire, mais je ne le ferai pas par respect pour les codeurs du dit-forum. ^^

Un personnalisé dans le même style, je peux, oui.

Il me faudrait votre contenu du template index_body, ainsi que le css.

[djassem]

lol oui juste le "design" le reste je vais me débrouiller :

Index body :

Spoiler:

css:

Spoiler:

[Lixyr]

En disant "design", vous parlez bien de l'apparence en générale (tableau, justification du texte, positionnement du texte etc, voire même apparence des liens), pas du graphisme ; image etc.

[djassem]

Oui voila exactement , je m'occupe du graphisme

Merci d'avance

[Lixyr]

D'accord.

Comme ceci, ça vous va, comme départ ?

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN message_admin_titre -->
<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>
<!-- END message_admin_titre -->
<!-- BEGIN message_admin_txt -->
<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>
<!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<!-- BEGIN switch_fb_connect_no -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td class="row1" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>

<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END switch_fb_connect_no -->

<!-- BEGIN switch_fb_connect -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td valign="top" width="100%" class="row1" align="center">
<table width="100%">
<tr>
<td width="55%" valign="middle" align="right">
<table class="right">
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>

<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
<td width="10%" align="center" valign="middle">
<span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
</td>
<td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" perms="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" valign="top">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_delete_cookies -->
<br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
<!-- END switch_delete_cookies -->
</span>
</td>
<td width="50%" align="right">
<span class="gensmall">
<a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
<a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
<a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
<!-- BEGIN switch_on_index -->
<!-- BEGIN switch_delete_cookies -->
<br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
<!-- END switch_delete_cookies -->
<!-- END switch_on_index -->
</span>
</td>
</tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<!-- BEGIN switch_fb_connect_no -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td class="row1" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>

<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END switch_fb_connect_no -->

<!-- BEGIN switch_fb_connect -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td valign="top" width="100%" class="row1" align="center">
<table width="100%">
<tr>
<td width="55%" valign="middle">
<table class="right">
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>

<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
<td width="10%" align="center" valign="middle">
<span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
</td>
<td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" perms="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td colspan="2"  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 colspan="2" class="row1" align="center"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></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}" />
<span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span>
<span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span></td>
<td>
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</td>
</tr>
<!-- BEGIN switch_chatbox_activate -->
<tr>
<td class="row1">
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
</td>
</tr>
<!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
<tr>
<td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
<td><span class="gensmall">{L_NEW_POSTS}</span></td>
<td></td>
<td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
<td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
<td>  </td>
<td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
<td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
</tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
status: true,
cookie: true,
xfbml: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Les explications viendront après si jamais vous ne comprenez pas le code.

[djassem]

Si ce n'est qu'un début oui ca me plait lol

[Lixyr]

Oui ce n'est qu'un début. Une sorte de mise en page globale : le tableau.

Vous voulez quoi, maintenant ?

[djassem]

Donc :

a droite :
Membres connectés au cours des 48 dernières heures

et je voudrais que ceci :

Spoiler:

sois vers la droite , exactement comme le qeel du forum que je vous ai passe

ensuite je voudrais que les groupes vers le haut et sur un rectangle comme ici ;


SVP


lol MERCI ! je demande beaucoup , excusez moi .

[Lixyr]

J'ai déjà vu pire, ne vous inquiétez pas.

Alors tout ce que vous demandez ce passe dans cette partie-là du QEEL :

Code:

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td colspan="2"  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 colspan="2" class="row1" align="center"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></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}" />
<span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span>
<span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span></td>
<td>
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</td>
</tr>
<!-- BEGIN switch_chatbox_activate -->
<tr>
<td class="row1">
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
</td>
</tr>
<!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->

* pour mettre le texte à droite, faire comme ceci :

<td class="row1" rowspan="6" align="center" valign="middle" style="text-align:right;"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" />
<span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span>
<span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span></td>

(enlevez l'image du qeel, en rouge, si vous voulez)



* pour les groupes, il faut, à la place de ceci :

Code:

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

Mettre vos groupes manuellement, et à chacun imposer une classe qui caractérisera le cadre.

[djassem]

lol bon c'est deja un bon début hen ? mdr !

lMembres connectés au cours des 48 dernières heures prend pratiquement toute la place , que faire ? :S

il faudrait que ce soit plus grand en hauteur par rapport a la largeur . et faire en sorte que ce soit bien aligné

sinon pour les groupes je n'es pas compris :$

[Lixyr]

Pour les membres connectés au cours des 48 dernières heures, vous pouvez mettre un scrolling si ça prend trop de place en hauteur.


Pour le groupes, et bien il faut les mettre vous-même, de cette façon :

Code:

<span class="contour"><a href="URL DU LIEN DU GROUPE">NOM DU GROUPE</a></span>

et dans le css :

Code:

.contour {border:1px solid pink;
padding:2px;}

[djassem]

oui je pense qu'il est preferable de faire un 'scrolling" comment peut-on procéder ?

pour les groupes... ok je fais ca

[Lixyr]

Vous pouvez faire comme ça :

Code:


<table style="margin-left:auto;margin-right:auto;text-align:justify;"><tr><td height="30" style="vertical-align:top; text-align:left; display: block;overflow:hidden;overflow-x: hidden;overflow-y: auto;">
{L_CONNECTED_MEMBERS}</div>
</td></tr></table>

[djassem]

ah ! ok mais ou dois-je le mettre ?

[Lixyr]

Dans votre template, ici :

<td>
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</td>

vous mettez ça à la place de ce qui est en rouge.

[djassem]

ca ne fonctionne pas , ca me met un fond vert pour le cote des membres(48h)
mais pas de scrolling

[Lixyr]

Et comme ça ?

Code:


<td>

    <table style="margin-left:auto;margin-right:auto;text-align:justify;vertical-align:top; display: block;overflow:hidden;overflow-x: hidden;overflow-y: auto;" height="30">
    {L_CONNECTED_MEMBERS}</div>
  </table>
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</td>

[djassem]

ah oui la ca marche , par-contre justement le souci c'est que la longueur (de droite a gauche) il est trop grand ! et prend toute la place , je voudrais donc le rapt issir et l'agrandir un peu (de haut en bas)

je sais pas si c'est comprhensible

[Lixyr]

(par contre il faut enlever le </div> en trop dans mon code.)

et en faisant comme ça :

Code:

<td width="35%" height="250">

    <table style="margin-left:auto;margin-right:auto;text-align:justify;vertical-align:top; display: block;overflow:hidden;overflow-x: hidden;overflow-y: auto;" height="30">
    {L_CONNECTED_MEMBERS}
  </table>
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</td>

(modifiez les valeurs 35 et 250 jusqu'à ce que ça tombe comme vous le voulez.)

[djassem]

oui voila c'est encore mieux , mais c'est surtout le "scrolling" je le trouve aussi petit (lui en personne) on peut l'agrandir lui aussi ? même pour lire c'est difficile lol , (largeur)

[Lixyr]

Pour agrandir le scrolling, dans ce cas-là, je ne sais pas, il est dit qu'on ne peut modifier que la couleur d'une scroll, dans ce cas-là car elle est dépendante du navigateur que l'on utilise.

[djassem]

Ah vraiment dommage , et bien dans ce cas la on va enlever le scrolling .

comment fait-on ? S

[Lixyr]

Ben il faut la cacher, sinon. Comme ça :

<table style="margin-left:auto;margin-right:auto;text-align:justify;vertical-align:top; display: block;overflow:hidden;overflow-x: hidden;overflow-y: hidden;" height="30">