QEEL Vicsius

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu QEEL Vicsius

Message par Vicsius le Mer 29 Juin 2011 - 16:48

Demande de départ:

je voudrais changer le QEEL pour le faire à peu près comme sa:

Spoiler:

Il aurait une taille final de 800 x 500
le 1 correspond à une image de fond
le 2 Aux groupe de couleurs différente en lien cliquable
le 3 Au memmbres connecté aux cours des dernières 24h
le 4 au nombres de poste/nmb de membres
et en 5 les membre en ligne

Réponse de Macema:

veuillez repérer ceci dans votre template index_body cette fois ^^ (ne pas confondre)

Code:

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td 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 class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
      <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}

      {TOTAL_USERS}

      {NEWEST_USER}</span></td>
   </tr>
   <tr>
      <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}

      {RECORD_USERS}

      

      {LOGGED_IN_USER_LIST}</span></td>
   </tr>
   {L_CONNECTED_MEMBERS}
   {L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}
   <tr>
      <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
   </tr>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row1">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}

            <!-- 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 -->

remplacez le par :

Code:
<!-- BEGIN disable_viewonline -->
<center>
<table width="800" height="500" class="qeel" cellspacing="10" cellpadding="0">
   <tr>
      <td>
         <table width="100%">
            <tr>
               <td valign="top" class="zone1" width="30%">
                  <span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span>
               </td>
               <td width="5"> </td>
               <td valign="top" class="zone2" width="30%">
                  <table class="connect24" valign="top">{L_CONNECTED_MEMBERS}</table>
               </td>
               <td width="5"> </td>
               <td valign="top" class="zone3" width="30%">
                  <span class="gensmall">{TOTAL_POSTS}

                  {TOTAL_USERS}


                  {NEWEST_USER}


                  {RECORD_USERS}</span>


                  <!-- BEGIN switch_chatbox_activate -->
                  <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}

                  <!-- 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>
                  <!-- END switch_chatbox_activate -->
               </td>
            </tr>
         </table>
      </td>
   <tr>
      <td valign="top" class="zone4" width="29%">
         <center><div class="memconnect"><span class="gensmall">{TOTAL_USERS_ONLINE}

         

         {LOGGED_IN_USER_LIST}</span></div></center>
      </td>
   </tr>
</table>
</center>
<!-- END disable_viewonline -->

et dans votre css ajoutez :

Code:
.qeel {
background-image:url("http://www.monsite.com/images/fond.png");
background-repeat : no-repeat;
height : px;
width : px;
padding : 10px:
}

.zone1{
margin-left : 10px;
margin-right : 10px;
border : 1px solid #ff0000;
height : 375px;
}

.zone2{
margin-left : 10px;
margin-right : 10px;
border : 1px solid #ff0000;
height : 375px;
}
.connect24 .row1 {
background: none !important;
}

.zone3{
margin-left : 10px;
margin-right : 10px;
border : 1px solid #ff0000;
height : 375px;
}

.zone4{
margin-left : 10px;
margin-right : 10px;
height : 75px;
}

.memconnect{
border : 1px solid #ff0000;
width : 400px;
height : 75px;
}

Personnalisez le .qeel avec le lien de votre image , sa hauteur et sa largeur. enregistrez.

Tout les changements suivants devraient se faire par la css par la suite, sauf si vous voulez mettre les groupes différemment. Dîtes moi si tout cela va.

Puis ma réponse:

que se soit dans la zone une, deux ou 3 si je veux l'augmenter un seul modifie les 3 et si je descent en dessous des 375px et bien cela ne la réduit pas (comme pour la zone4 si je descent en dessous des 75px sa ne la réduit pas), je peux mettre dans les margins une valeur de 1000 si je veux sa ne change rien. Et je voulais savoir se que je devait ajouter si je voulais changer les texte des groupe (par exemple: Admin, Modo, Membre, ect..) par des image qui resterais cliquable ???


Dernière édition par Vicsius le Ven 1 Juil 2011 - 12:42, édité 1 fois

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL Vicsius

Message par SoraNoHime le Mer 29 Juin 2011 - 17:00

pour les groupes commençait par remplacer ceci :

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

par ce code que vous devrez dupliquer pour chacun de vos groupes :

Code:
<a href="lien du groupe"><img src="adresse de l'image du groupe" /></a><br/>

autant de groupes vous avez, autant de ce code il vous faudra faire en les mettant les uns en dessous des autres.

COmmencer déjà par modifier ceci, nous réglerons le problème des tailles ensuite, puisque vos images vont jouer dessus.

Cordialement.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL Vicsius

Message par Vicsius le Mer 29 Juin 2011 - 18:01

S'est parfait pour le code des images de groupe voici un screen de ce que sa me donne:


Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL Vicsius

Message par Vicsius le Mer 29 Juin 2011 - 19:28

Voilà j'ai trouvé 2/3 p'tit trucs à modifier dans le template index_body et mon CSS pour réussir à "mieux" aligné comme je le sentais je vous met en rouge se que j'ai modifié:

Template:

Spoiler:
<!-- BEGIN disable_viewonline -->
<center>
<table width="800" height="500" class="qeel" cellspacing="50" cellpadding="0">
<tr>
<td>
<table width="100%">
<tr>
<td valign="top" class="zone1" width="30%">
<a href="http://zombie-lane-leforum.frenchboard.com/g1-administrateurs"><img src="http://img194.imageshack.us/img194/3782/adminvqb.png" /></a><br/>
<a href="http://zombie-lane-leforum.frenchboard.com/g2-moderateurs"><img src="http://img706.imageshack.us/img706/5522/modom.png" /></a><br/>
<a href="http://zombie-lane-leforum.frenchboard.com/g4-membres"><img src="http://img62.imageshack.us/img62/5594/zombinard.png" /></a><br/>
<a href="http://zombie-lane-leforum.frenchboard.com/g3-yeti"><img src="http://img840.imageshack.us/img840/690/zombinarde.png" /></a><br/>
</td>
<td width="5"> </td>
<td valign="top" class="zone2" width="30%">
<table class="connect24" valign="top">{L_CONNECTED_MEMBERS}</table>
</td>
<td width="5"> </td>
<td valign="top" class="zone3" width="30%">
<span class="gensmall">{TOTAL_POSTS}

{TOTAL_USERS}


{NEWEST_USER}


{RECORD_USERS}</span>


<!-- BEGIN switch_chatbox_activate -->
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}

<!-- 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>
<!-- END switch_chatbox_activate -->
</td>
</tr>
</table>
</td>
<tr>
<td valign="top" class="zone4" width="30%">
<center><div class="memconnect"><span class="gensmall">{TOTAL_USERS_ONLINE}



{LOGGED_IN_USER_LIST}</span></div></center>
</td>
</tr>
</table>
</center>
<!-- END disable_viewonline -->

Et le CSS:

Spoiler:
/*Titre des catégories*/
.secondarytitle, .secondarytitle h2 {
background-color: transparent;}

.catfond {
background-image: url('http://img163.imageshack.us/img163/4112/catgoriek.png');
background-repeat: repeat-x;
background-position: center center;
margin: 20px !important;
margin-top: 50px !important;
margin-bottom: 150px !important;
height: 175px;
width: 800px;}

.qeel {
background-image:url("http://img861.imageshack.us/img861/6835/fondqeel.png");
background-repeat : no-repeat;
height : 500px;
width : 800px;
padding : 10px:
}

.zone1{
margin-left : 10px;
margin-right : 10px;
border : 1px solid #ff0000;
height : 275px;
}

.zone2{
margin-left : 10px;
margin-right : 10px;
border : 1px solid #ff0000;
height : 275px;
}
.connect24 .row1 {
background: none !important;
}

.zone3{
margin-left : 10px;
margin-right : 10px;
border : 1px solid #ff0000;
height : 275px;
}

.zone4{
margin-left : 10px;
margin-right : 10px;
height : 75px;
}

.memconnect{
border : 1px solid #ff0000;
width : 400px;
height : 75px;
}

Voici ce que sa me donne:

Spoiler:

Les changements que je n'es pas réussi sont:

-Mettre un espace entre les images pour plus d'aération et qu'elles soient plus décalées vers le bas
-Décaler vers le bas les 2 et 3è colonnes
-Centrer verticalement le colonne du bas (utilisateur en ligne)
-Ajouter un fond noir transparent à chaque colonne
-Mettre les bordure de chaque colonne un peu plus épaisse et de couleur noir.


Dernière édition par Vicsius le Ven 1 Juil 2011 - 12:16, édité 1 fois (Raison : Mise en citation au lieu de code)

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL Vicsius

Message par SoraNoHime le Mer 29 Juin 2011 - 20:43

Bonjour,

Je vous rappelle qu'il est autorisé un seul UP par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné.

Je vous invite à lire :

A bientôt sur ForumActif Smile

Penser à :editer: votre message à la place.

Par rapport à ce que vous m'aviez fourni comme schéma pourtant cela correspond. Merci de me préciser ce qe vous appeller décaler vers le bas les 2ème et 3ème colonnes. Parlez-vous du texte ? Merci aussi de me donner environ la hauteur que vous désirez pour ces cellules et la première, ainsi nous arriverons plus vite à ce que vous demandez.

Cordialement.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL Vicsius

Message par Vicsius le Mer 29 Juin 2011 - 20:53

Pour la hauteur de cellules c'est bon par-rapport à mon précédent poste, j'ai aussi trouvé comment mettre un fond noir transparent à chaque colonne et mettre les bordure de chaque colonne un peu plus épaisse et de couleur noir.

Là ce que j'aimerais c'est effectivement descendre le texte (et aussi les images de groupe plus espacé et descendu dans la cellule):

PS: Dsl pour le double post que j'avais fait, cela était surtout pour vous montrer que j'avais "réussi" des modif' pour vous faire un peu moins de travail je dirais pour rien, pas pour Upper le topique^^

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL Vicsius

Message par Lixyr le Jeu 30 Juin 2011 - 15:08

Bonjour.

Quand vous mettez vos balises de couleurs pour montrer les modifications, faites ceci sous citation, et non pas sous code, c'est mieux.

Vous avez modifié votre template ou votre css depuis les derniers que vous avez indiqués ?





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5646
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL Vicsius

Message par Vicsius le Jeu 30 Juin 2011 - 20:49

je viens de modifier la ligne body du CSS et j'ai modifier les lignes border et ajouter une ligne moz-border-radius et background-colors en rgba sur chaque zone du QEEL, le voici avec en couleurs mes dernières modif':

Spoiler:
body {
background-image: url('http://img199.imageshack.us/img199/7145/fondhi.png');
background-repeat: repeat-y;

background-position: center}

.lastpost {width: 150px; font-size: 12px;font-family: verdana; margin-bottom: 80px;}

/*Toute les bordures*/
.row3Right{border: none !important;}
.thHead{border: none !important;}
.thCornerL, .thCornerR, .thTop{border: none !important;}
.thLeft, .thRight{border-left: none !important;border-right: none !important;}
.catLeft, .catRight{border: none! important;}
.catHead{border: none !important;}
.catBottom{border: none !important;}



/*Titre des catégories*/
.secondarytitle, .secondarytitle h2 {
background-color: transparent;}

.catfond {
background-image: url('http://img163.imageshack.us/img163/4112/catgoriek.png');
background-repeat: no-repeat;
background-position: center right;
margin: 100px !important;
margin-top: 50px !important;
margin-bottom: 50px !important;
height: 175px;
width: 800px;}

.qeel {
background-image:url("http://img861.imageshack.us/img861/6835/fondqeel.png");
background-repeat : no-repeat;
height : 500px;
width : 800px;
padding : 10px:
}

.zone1{
margin-left : 10px;
margin-right : 10px;
border : 3px solid #000000;
-moz-border-radius: 14px;

height : 275px;
background-color: rgba(211, 211, 211, 0.6);
}

.zone2{
margin-left : 10px;
margin-right : 10px;
border : 3px solid #000000;
-moz-border-radius: 14px;

height : 275px;
background-color: rgba(211, 211, 211, 0.6);
}
.connect24 .row1 {
background: none !important;
}

.zone3{
margin-left : 10px;
margin-right : 10px;
border : 3px solid #000000;
-moz-border-radius: 14px;

height : 275px;
background-color: rgba(211, 211, 211, 0.6);
}
.zone4{
margin-left : 10px;
margin-right : 10px;
height : 75px;
}

.memconnect{
border : 3px solid #000000;
-moz-border-radius: 14px;

width : 400px;
height : 75px;
background-color: rgba(211, 211, 211, 0.6); }

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL Vicsius

Message par Lixyr le Jeu 30 Juin 2011 - 23:32

Merci beaucoup, je regarde ça demain.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5646
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL Vicsius

Message par Vicsius le Ven 1 Juil 2011 - 0:00

Je vous en remercie^^

J'ai trouvé comment modifier mon QEEL, il a maintenant la forme et position que je désirais

Merci de votre aide.

Vicsius
****

Masculin
Messages : 228
Inscrit(e) le : 24/04/2010

http://zombie-lane-leforum.frenchboard.com/forum
Vicsius a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum