QEEL Personaliser

[b2uty]

Bonsoire, j'aimerais réussir à personaliser mon QEEL de cette façon :

Spoiler:

Vous pansez que c'est réalisable ? Si oui, quelqu'un pourait m'aider à le réalisé s'il vous plait ?
J'y connais rien en cadre et pour avoir se cadre arrondis je panse que c'est pas facile,mais je l'ai déja vu sur des forum.

[Lixyr]

C'est très simple d'avoir un cadre arrondis : un simple code css.

Tu as déjà ébauché quelque chose pour ton QEEL ?
Si oui, tu peux donner ton template index_body ?

[b2uty]

Pour le moment mon QEEL resemble a ça :

Spoiler:

index_body :

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 -->
    <IMG src="http://img844.imageshack.us/img844/3722/54012834.png"><A></A>
    <!-- BEGIN switch_user_login_form_header -->
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
    <tr>
    <td width="100%" valign="top" align="center" class="row1">
    <label><span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" size="10" name="username" /></label>
    <label><span class="genmed">{L_PASSWORD}:</span> <input class="post" type="password" size="10" name="password" /></label>
    {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />

    <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>

    </td>
    </tr>
    </table>
    </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 -->

    <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_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>

    <!-- BEGIN switch_on_index -->
    <!-- BEGIN switch_delete_cookies -->


    <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">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
    <tr>
    <td width="100%" valign="top" align="center" class="row1">
    <span class="genmed">{L_USERNAME}:</span>
    <input class="post" type="text" size="10" name="username"/>
    <span class="genmed">{L_PASSWORD}:</span>
    <input class="post" type="password" size="10" name="password"/>
    {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />

    <span class="gensmall">{L_AUTO_LOGIN}</span>
    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
    </td>
    </tr>
    </table>
    </form>
    <!-- END switch_user_login_form_footer -->

    <!-- BEGIN disable_viewonline -->
 

  <table cellspacing="0" cellpadding="0" width="800px" border="0" class="statistiques"> <tr><td>

 <div width="750px" style="padding-left:10px;">
    <span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=1"><font color=#349400 size="2"><b>Leader of B2uties</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg">
    <span class="groupes"><a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=2"><font color=#006A7D size="2"><b>Minaah Star</b></font></a> </span> <img src="http://i31.tinypic.com/mugck1.jpg">
    <span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=5"><font color=#F56767 size="2"><b> Rock Thighs</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg"><span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=3"><font color=#594AE0 size="2"><b> Maknae of substitution</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg">
    <p></p>
    <span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=6"><font color=#8CC4F2 size="2"><b> Joker</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg">
    <span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=7"><font color=#D1AD86 size="2"><b>Rancho</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg">
    <span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=4"><font color=#C255AC size="2"><b> Sexy Abs</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg">
    <span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=8"><font color=#A5A52F size="2"><b>Prince Arabe</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg">
    <span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=9"><font color="#AD005C" size="2"><b> Team cubeast</b></font></a> </span>
    </div>

</td></tr>
<tr><td>

    <div class="last24h">
    <span class="gensmall"><font size=1> {TOTAL_USERS}. <br>
    {NEWEST_USER}. <br>
    {TOTAL_POSTS}<br>
    </font><br>
    <span class="gensmall">{TOTAL_USERS_ONLINE} <br>
    {LOGGED_IN_USER_LIST} </span>
    <br>
    <table width="90%" align="center" style="text-align: justify" class="fa">
    <tr><td>{L_WHOSBIRTHDAY_TODAY}<br>
    {RECORD_USERS}</td></tr></table>
    <table>{L_CONNECTED_MEMBERS}</table></div>

</td></tr>
<tr><td>

    <TABLE class=ipbtable cellSpacing=1><TBODY>
    <TR><TD class=row1 width="10XP"><IMG border=0 alt=calendar src="http://img339.imageshack.us/img339/2972/calendariconcopie.png"></TD>
    <TD class=row2><FONT size=1 face=Arial> [★]
    </FONT></TD></TR></TBODY></TABLE>

</td></tr></table>

    <!-- END disable_viewonline -->

</td></tr></table>

    {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}.

Je sais pas vraimant faire les cadres >.<

[Lixyr]

^^ Pour faire un cadre arrondis, tu utilises ce code-ci :

dans ton template :

Code:

<td class="arrondis"> ton contenu </td>

ou bien

Code:

<div class="arrondis"> ton contenu </div>

et dans ton css, tu mets ceci :

.arrondis {-moz-border-radius: 8px;
border-radius:8px;
-webkit-border-radius:8px;}

Les valeurs indiquent l'angle de l'arrondis. Plus la valeur est élevée et plus l'arrondis est marqué.

Code:


.arrondis {-moz-border-radius: 8px;
border-radius:8px;
-webkit-border-radius:8px;}

la classe qui permet de lier ta div ou ta cellule avec le code est arrondis.

[b2uty]

Le premiér code ma tout bien placé mais il a pas de cadre :

Spoiler:

le 2ieme code lui na pas fonctionner,rien na changer

[Lixyr]

Tu l'as placé comment ce code ? Donne-moi la partie modifiée, que je vois pourquoi.

[b2uty]

Partie modifiée :

Code:

<td class="arrondis"> 

    <div class="last24h">
    <span class="gensmall"><font size=1> {TOTAL_USERS}. <br>
    {NEWEST_USER}. <br>
    {TOTAL_POSTS}<br>
    </font><br>
    <span class="gensmall">{TOTAL_USERS_ONLINE} <br>
    {LOGGED_IN_USER_LIST} </span>
    <br>
    <table width="90%" align="center" style="text-align: justify" class="fa">
    <tr><td>{L_WHOSBIRTHDAY_TODAY}<br>
    {RECORD_USERS}</td></tr></table>
    <table>{L_CONNECTED_MEMBERS}</table></div>

</td></tr>
<tr><td></td>

[Lixyr]

Forcément si j'oublie un bout ...

.arrondis {
border: 1px solid black;
-moz-border-radius: 8px;
border-radius:8px;
-webkit-border-radius:8px;}

Tu changes les valeurs

• 1

épaisseur du cadre - prend des valeurs rondes infinies ...

• solid

apparence du cadre - peut prendre les valeurs dashed, dotted, double, solid, etc
(certains ne marchent qu'avec une épaisseur de 2 ou 3 minimum)

• black

couleur du cadre -

Tu changes ça comme ça te convient.

Code:

.arrondis {
border: 1px solid black;
-moz-border-radius: 8px;
border-radius:8px;
-webkit-border-radius:8px;}

[b2uty]

ça veux toujours pas T.T

Spoiler:

[Lixyr]

Ow bizarre, donne ton code pour voir ? avec le petit bout de css.

[b2uty]

Index_body :

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 -->
    <IMG src="http://img844.imageshack.us/img844/3722/54012834.png"><A></A>
    <!-- BEGIN switch_user_login_form_header -->
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
    <tr>
    <td width="100%" valign="top" align="center" class="row1">
    <label><span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" size="10" name="username" /></label>
    <label><span class="genmed">{L_PASSWORD}:</span> <input class="post" type="password" size="10" name="password" /></label>
    {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />

    <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>

    </td>
    </tr>
    </table>
    </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 -->

    <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_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>

    <!-- BEGIN switch_on_index -->
    <!-- BEGIN switch_delete_cookies -->


    <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">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
    <tr>
    <td width="100%" valign="top" align="center" class="row1">
    <span class="genmed">{L_USERNAME}:</span>
    <input class="post" type="text" size="10" name="username"/>
    <span class="genmed">{L_PASSWORD}:</span>
    <input class="post" type="password" size="10" name="password"/>
    {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />

    <span class="gensmall">{L_AUTO_LOGIN}</span>
    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
    </td>
    </tr>
    </table>
    </form>
    <!-- END switch_user_login_form_footer -->

    <!-- BEGIN disable_viewonline -->
 

  <table cellspacing="0" cellpadding="0" width="800px" border="0" class="statistiques"> <tr><td>

 <div width="750px" style="padding-left:10px;">
    <span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=1"><font color=#349400 size="2"><b>Leader of B2uties</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg">
    <span class="groupes"><a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=2"><font color=#006A7D size="2"><b>Minaah Star</b></font></a> </span> <img src="http://i31.tinypic.com/mugck1.jpg">
    <span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=5"><font color=#F56767 size="2"><b> Rock Thighs</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg"><span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=3"><font color=#594AE0 size="2"><b> Maknae of substitution</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg">
    <p></p>
    <span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=6"><font color=#8CC4F2 size="2"><b> Joker</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg">
    <span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=7"><font color=#D1AD86 size="2"><b>Rancho</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg">
    <span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=4"><font color=#C255AC size="2"><b> Sexy Abs</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg">
    <span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=8"><font color=#A5A52F size="2"><b>Prince Arabe</b></font></a></span> <img src="http://i31.tinypic.com/mugck1.jpg">
    <span class="groupes"> <a href="http://cubeast-fr.forumactif.com/groupcp.forum?g=9"><font color="#AD005C" size="2"><b> Team cubeast</b></font></a> </span>
    </div>

</td></tr>
<tr><td>
<td class="arrondis"> 

    <div class="last24h">
    <span class="gensmall"><font size=1> {TOTAL_USERS}. <br>
    {NEWEST_USER}. <br>
    {TOTAL_POSTS}<br>
    </font><br>
    <span class="gensmall">{TOTAL_USERS_ONLINE} <br>
    {LOGGED_IN_USER_LIST} </span>
    <br>
    <table width="90%" align="center" style="text-align: justify" class="fa">
    <tr><td>{L_WHOSBIRTHDAY_TODAY}<br>
    {RECORD_USERS}</td></tr></table>
    <table>{L_CONNECTED_MEMBERS}</table></div>

</td></tr>
<tr><td></td>



    <!-- END disable_viewonline -->

</td></tr></table>

    {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}.

CSS :

Code:

.arrondis {
border: 10px solid black;
-moz-border-radius: 8px;
border-radius:8px;
-webkit-border-radius:8px;}.

[Lixyr]

Hey oui forcément, je sais d'où vient le problème !

Internet Explorer ne génère pas les arrondis. Si tu veux les voir tu dois passer par Firefox, ou Chrome etc. Mais IE7 n'affiche pas les arrondis.

[b2uty]

Ah daccord, ce n'est pas grave alors. L image du fond je lui ferais un cadre arondis à la place du cadre .

Je met se sujet résolu.
Merci beaucoup pour ton aide. ^^

[Lixyr]

Oui, c'est une bonne idée.

Je t'en prie. Si tu as besoin n'hésite pas à redemander quelque chose. ^^