apparence du QEEL

[djassem]

Rappel du premier message :

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.

[djassem]

Bonsoir,

a ca n'a rien change apart justement le scroll , a droite il y a toujours un rectangle d'un fond blanc et dessus les membres mais on ne les vois pas tous ! deux ou trois tellement que c'est petit


Merci d'avance .

[Lixyr]

Petit dans quel sens ? Vous parlez de la hauteur de la zone ?
Il faut changer le height.

Faites voir un lien vers ce que vous obtenez.

[djassem]

j'ai du mal a faire un screen , puisque le forum est bloque pour le moment !

comment faire ?

et bien en gros la il faudrait ddecaler les membres connectes un peu vers le haut puisque la taille est regle , et aussi separer les groupes (cote droit) vers le haut

[Lixyr]

Et bien débloque le forum au moins que je puisse voir ton QEEL, parce que sinon on ne va pas avancer. "débloquer vers la droite", je ne vois pas ce que ça veut dire.

Ca en est à où, ton template, maintenant ?

[djassem]

Bonjours, voici le forum :

http://www.almuhajirat.com/forum

vous allez surement comprendre lol ^^ .

[Lixyr]

Je peux avoir votre template actuel, parce que je n'ai pas ça chez moi ?

[djassem]

pas de probleme :

Spoiler:

[Lixyr]

Il faut faire attention, quand on met un contenant d'une certaine hauteur, que le contenu ne soit pas plus grand.

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

<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="350">

Vous aviez un td en trop d'ailleurs.

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="3" class="catHead"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="3" class="row1" align="center"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
</tr>
<tr>
<td class="row1" rowspan="6" align="center" valign="middle" width="75%"><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>

<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="135">
{L_CONNECTED_MEMBERS}
</table>
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</td>
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</td>
{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 -->

[djassem]

ah oui voila c'est beaucoup mieux comme ca , et donc la on peut ajouter le scrolling , pour voir le reste en bas

on pourrait faire ca ?

[Lixyr]

Oui, on peut. Il faut juste le remettre en modifiant le

<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="135">
{L_CONNECTED_MEMBERS}
</table>

par

<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="135">
{L_CONNECTED_MEMBERS}
</table>

[djassem]

Excellent ! le qeel commence a vivre lol !

Par-contre par rapport aux groupes , ou dois-je mettre ce code ?
et es-que je dois faire ca pour chaque groupe ? si oui , comment ? ^^
merciii...

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>

[Lixyr]

Il faut le mettre à la place de ça :

Code:

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

et oui, il faut le mettre pour chaque groupe.

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

pour chaque groupe, modifier comme ceci :
URL DU LIEN DU GROUPE => mettre le lien menant à la description ou au lien des statistiques du groupe correspondant
NOM DU GROUPE => mettez le nom de votre groupe.

Par exemple :

<span class="contour"><a href="https://forum.forumactif.com/g31959-aidactifs-aidactives">aidactif</a></span>
<span class="contour"><a href="https://forum.forumactif.com/g32067-adminactifs-adminactives">adminactif</a></span>

pour le contour, on attendra de voir quand vous aurez fini de mettre vos groupes, le cadre que vous voulez.

[djassem]

Donc voila j'ai pu mettre les groupes !

il faut maintenant ajouter les contours et la couleurs du texte (important) ^^

merci..

[Lixyr]

Alors, pour les couleurs :

Autour de NOM DU GROUPE, tu rajoutes un <font color="COULEUR">, comme ça :

Code:

<font color="COULEUR">NOM DU GROUPE</font>

ou bien

Code:

<font color="#CODE DE LA COULEUR">NOM DU GROUPE</font>

Pour le cadre,dans ton css, rajoutes ça :

Code:

.contour {border:1px solid blue;}

on peaufinera après, en fonction de ce que tu veux comme cadre exactement.

[djassem]

Salut,

j'ai donc pu ajouter les couleur , donc pour le carde comment faire ? je voudrais la même forme que sur l'image que je t'ai passe si possible



et je voudrais aussi les écarter un peu car ils sont trop cote a cote ^^' , merciii !

[Lixyr]

donc dans ton css, tu rajoutes :

Code:

-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;
padding:3px;
margin-left:2px;margin-right:2px

les border-radius font un arrondis de 8degrés. le -moz c'est pour être visible sur mozilla, et webkit, je ne sais plus mais il me semble que c'est pour safaris.

Les arrondis ne sont pas visibles sous explorer.

le padding, c'est la marge intérieure : entre le cadre et l'écriture
le margin, c'est la marge extérieure : entre les cadres.
left c'est à gauche et right, à droite.

Vous pouvez changer les valeurs jusqu'à ce que vous tombiez sur quelque chose qui vous plait.

[djassem]

ca ne fonctionne pas , ca me fait seulement un contour (rectangle)


CSS

Spoiler:

[Lixyr]

Il faut mettre le code entre les crochets, sinon c'est sûr que ça ne fonctionne pas. ^^

Code:

.contour {border:1px solid blue;
-moz-border-radius:40px;-webkit-border-radius:8px;border-radius:8px;
padding:3px;
margin-left:2px;margin-right:2px;}

[djassem]

argh il y a un petit souci : http://www.almuhajirat.com/forum

la forme arrondis ne prend pas totalement les textes (et les textes sont aussi gros :S )

lol preparer un qeel c'est complexe quand même , mais bon faut bien faire ca ^^

[Lixyr]

Oui, comme tous les forums personnalisés, ça prend du temps, et c'est bien pour ça que généralement, on est pas fière de voir quelqu'un venir et dire "bonjour, je veux le même QEEL que lui", quand nous on y a passé des jours, voire des semaines ou des mois. ^^

Vous pouvez modifier la taille des groupes en ajoutant

Code:

font-size:12px;

dans votre css, avant la balise de fermeture } de la classe contour.

[djassem]

yeah ! voila c'est beaucoup mieux , on ne pourrait pas augmenter la largeur du fond blanc ? car lon dirait que c'est serré ^^ ! thank you

il faudrait aussi mettre un fond si possible ^^

svp.

merci...

[Lixyr]

La largeur de quel fond blanc ?
Dans les cadres ou la cellule contenant tous les groupes ?

Pour le fond, vous voulez une image de fond ?

Code:

background-image:url(URL DE LIMAGE DE FOND);

ou une couleur de fond ?

Code:

background-color:#CODE DE LA COULEUR;

ou

Code:

background-color:COULEUR;

[djassem]

la cellule contenant les groupes ^^ lol c'est comment dire ... et bien tout petit lol ! faut un peu agrandir la largeur please !

donc je vais de suite essayer l'image en fond

ou dois-je mettre ceci :

Code:

background-image:url(URL DE LIMAGE DE FOND);

?

ah , esqu'on peut ajouter un fond pour les groupes ?

[Lixyr]

Ca se met dans le css, pour les groupes, avec le reste du code avant la balise de fermeture }

pour modifier la largeur dans la cellule, alors dans ce cas, remplacez le

padding:3px;

par :

Code:

padding-top:3px;padding-bottom:3px;padding-left:6px;padding-right:6px;

et modifiez les valeurs comme vous le voulez. Les explications sont les mêmes que précédemment.

[djassem]

voila c'est fait ! c'est classe lol ! enfin juste le problème de la cellule
les groupes sont parfait c'est juste le fond blanc (celulle) qui faudrait augmenter en largeur . je n'es pas reussi avec le padding :S

[Lixyr]

Ben il suffit de le mettre dans le css et de modifier les valeurs.

Code:

  .contour {border:1px solid blue;
    -moz-border-radius:40px;-webkit-border-radius:8px;border-radius:8px;
        padding-top:5px;padding-bottom:5px;padding-left:10px;padding-right:10px;
    margin-left:2px;margin-right:2px;}

*edit*

Quoi que j'ai un doute. Cette fois-ci vous ne parlez pas des cadres des groupes, mais de la cellule, en général, non ?

[djassem]

Oui voila c'est ce que j'ai fais mais enfait la on modifie les groupes , ce que je voudrais c'est le fond blanc derrière les groupes faudrait augmenter cette partie

mdr c'est vraiment complexe , excuse moi

[Lixyr]

Non, non. Ca va.

Donc là c'est dans le template :

dans la cellule contenant les groupes, rajoutez un

Code:

style="padding:5px;"

comme ceci :

<td style="padding:5px;" etc continuation du code>

[djassem]

excellent ! voila donc pour les groupes c'est ok ^_^

maintenant comment donner une forme pour tout le qeel comme sur le premier lien que je vous es passe ? et enfin lui donner un fond .

[Lixyr]

Ben après, il faut séparer les variables et les regrouper dans différentes cellules. Mais comme je vous l'ai déjà dit, je ne fais pas du "comme sur ce forum". C'est irrespectueux envers le travail du dit forum.

Pour mettre une image de fond dans le QEEL, il faut aller dans le template, et dans le tableau principale :

Code:

<table class="forumline" style="background-image:url(URL DE LIMAGE);" suite du codage>