*{ Holy Angel Boarding School
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.



 
AccueilDernières imagesRechercherS'enregistrerConnexion
Le Deal du moment : -55%
Coffret d’outils – STANLEY – ...
Voir le deal
21.99 €

*{ Holy Angel Boarding School :: Hors Jeu :: Autres.Partagez

QEEL personnalisé (2)

Admin
Admin« Je suis tout à la fois » -Fondateur-
Messages : 90
Date d'inscription : 01/12/2009
https://habs.forum-actif.net
MessageSujet: QEEL personnalisé (2) QEEL personnalisé (2) EmptyJeu 11 Aoû - 12:05
Je vais vous expliquer comment faire un QEEL sous cette forme:
Spoiler:

Contrairement aux idées recues, c'est super simple! Et il n'y a pas besoin d'être une bete de css et de code pour comprendre le tutoriel et l'installer.

PREMIERE ETAPE: le css.

Commencons par le css. Nous allons créer trois nouvelles class. Petite astuce pour vous y retrouver dans votre css, écrivez /* QEEL */ avant votre code, et /* FIN */ apres votre code, ca vous permettra de mieux savoir ce qui va avec quoi.

Première class à créer : Le tableau du QEEL.
Dans ce code, vous allez créer votre tableau. Cad le fond et le cadre. Vous pouvez mettre une image de fond, faire des bords arrondis, des pointillés ... il y a des milliers de variantes possibles ! /!\ Gardez bien le même noms des catégorie que je donne dans le css. Si vous les changez, le code ne marchera pas !

/!\ Les parenthèses sont à supprimer, c'est juste pour vous dire ce à quoi ca correspond !

Code:

.tableauqueel{
background-color : #COLOR ; (ici la couleur du fond)
border : solid Xpx #COLOR; (la couleur et taille de votre bord)
-moz-border-radius : Xpx Xpx Xpx Xpx} (Si vous voulez un arrondis)

Voilà, votre base du QEEL est fait. Maintenant, vous pouvez l'arranger comem vous voulez! Ajoutez des pointillés (dotted), mettre une image en fond (background-image : url('URL')) .. A votre guise, soyez originals !

Maintenant, nous allons créer deux autres class. Une pour la partie droite du forum, avec les stats, et une pour les groupes, à gauche. De nouveau, il suffit de coller la base que je vous donne dans votre css, et de le modeler à votre gout ! Rien de plus simple.

Code:
.partiedroite {
font-size : Xpx ; (Taille du texte)
border-left : Xpx dotted #COLOR ; (Séparation entre la partie droite et gauche, ici des pointillés)
padding-left : 10x } (Ne pas toucher)


.groupes{
background-color:#COLOR ;
border: 1px color #COLOR  ;
-moz-border-radius : Xpx Xpx Xpx Xpx;
height:40px; (ne pas toucher)
padding-right:12px; (ne pas toucher)
padding-left:14px; (ne pas toucher)
padding-bottom:3px; (ne pas toucher)
font-size:14px
;font-weight: bold; (bold=gras)
text-align:center;
font-color : #COLOR ;
text-decoration: none !important; (Pas de souligné sur les liens)
}

Modeler ca, comme vous voulez! N'oubliez pas de bien remplacer tous les "COLOR" et les "X" sinon le code ne marchera pas !

Si jamais : Dotted = Pointillé arrondis. // Dashed = Pointillé. // Solid = Trait continu // Double = Double trait continu // groove = Cadre qui ressort // ridge = comme groove, mais dans l'autre sens. // Inset = Bordure en 3D mais enfoncée // Outset = Inverse de Inset !

Si vous comprenez l'anglais, ca devrais aller tout seul ! x)

DEUXIEME ETAPE: les templates.

Pour accéder aux templates, il faut être fondateur du forum. Allez dans panneau d'administration > Affichage > Templates > Général > Index_body. Ouvrez le, et supprimez touuut! (n'ayez pas peur) et vous remplacez ce template par ceci :

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

            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a>

            <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="95%" 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 -->
<center>
<img src="IMAGE URL">
<div class="tableauqueel">
<table style="width: 100%; border-collapse:collapse;">
  <br><br><tr>
      <td width="50%"><center><span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="2"><b>NOM DU GROUPE</b></font></a></span>
<span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="2"><b>NOM DU GROUPE</b></font></a></span> <br><br>
<span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="2"><b>NOM DU GROUPE</b></font></a></span>
<span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="2"><b>NOM DU GROUPE</b></font></a></span><br><br>
<span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="2"><b>NOM DU GROUPE</b></font></a></span></center>
</td>
      <td width="50%"><div class="partiedroite"><br><ul><div class="gensmall">{TOTAL_POSTS}<br>{TOTAL_USERS}

{NEWEST_USER}<br>{TOTAL_USERS_ONLINE}</div><br>
</ul>
<br></div></td>
  </tr>
</table><br>
<span class="gensmall"><table width=70%">{L_CONNECTED_MEMBERS}
{LOGGED_IN_USER_LIST}<br></table></span></div></center>
<br>
<!-- 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}

Mais attention ! Pour modifier les noms de vos groupes (qui s'affichent actuellement NOM DE GROUPE dans votre QEEL) il faut les modifier dans le template. Pour le moment, enregistrez et publiez votre template pour être sur que tout va bien, allez voir sur votre forum, et vérifiez que vous avez la même chose que dans l'exemple. Ensuite, revenez à votre template. On va s'intéresser à cette partie du code.

Code:
<img src="IMAGE URL">
<div class="tableauqueel">
<table style="width: 100%; border-collapse:collapse;">
  <br><br><tr>
      <td width="50%"><center><span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="2"><b>NOM DU GROUPE</b></font></a></span>
<span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="2"><b>NOM DU GROUPE</b></font></a></span> <br><br>
<span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="2"><b>NOM DU GROUPE</b></font></a></span>
<span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="2"><b>NOM DU GROUPE</b></font></a></span><br><br>
<span class="groupes"> <a href="URL DU GROUPE"><font color=#COULEUR size="2"><b>NOM DU GROUPE</b></font></a></span></center>
</td>
      <td width="50%"><div class="partiedroite"><br><ul>{TOTAL_POSTS}<br>{TOTAL_USERS}

{NEWEST_USER}<br>{TOTAL_USERS_ONLINE}<br>
</ul>
<br></div></td>
  </tr>
</table>

Dans ce code, en première ligne, vous voyez URL DE VOTRE IMAGE. c'est l'url de l'image de votre QEEL qui s'affichera audessus de votre cadre (pas dedans) Ensuite vous avez le nom de la class que vous avez créé. Si vous voulez que votre image aille dans votre QEEL il suffit de déplacer la class au dessus de l'image. Ensuite vient les NOMS DE GROUPE, avec leur couleur et url. Vous devez tout modifier pour avoir ce que vous voulez. Voilààààààà!

Si vous avez des problemes, ou question, n'hésitez pas! J'espère que ce tuto (qui est mon premier) vous aura aidé!

QEEL personnalisé (2)

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» QEEL personnalisé
» Cadre personnalisé autour du profil

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
*{ Holy Angel Boarding School :: Hors Jeu :: Autres.-
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit