QEEL avec image réactive + modification template.

[» Golden Mind.]

Bonjour !

Comme vous le savez peut-être vu le nombre de questions que je pose ici ces derniers temps, je suis en train de construire mon forum.

Aujourd'hui, je voudrais personnaliser mon QEEL.
J'ai déjà l'image de base, la voici:

Spoiler:

Comme vous le voyez, le haut est prévu pour en faire une image réactive. Chaque icône (facebook, twitter, etc) enverra vers un lien externe au forum. Je pense qu'il faut faire ça en MAP, comme les pages d'accueil faites à partir d'images codées... seulement, je ne sais pas où placer ça dans mon panneau d'administration de façon à que ça coïncide avec le reste de mon QEEL.

Pour la suite, je pense qu'il vaut mieux que je vous fasse un schéma précis de ce que je cherche.

Le voici:

Spoiler:

Comment dois-je modifier mes templates ? comment dois-je m'y prendre pour obtenir ce résultat à partir de mon image de base? Quels codes css pour personnaliser la police des noms de mes groupes, etc .. etc..

J'aimerais apprendre à réaliser ce type de QEEL, pas à pas, avec l'aide et les connaissances d'un aidactif ou modéractif ou assistactif .. ou peut-être un membre hardi qui possède les réponses à mes questions...

Encore un grand merci à vous, forum de Forumactif

PS: je vous prie de m'excuser si mon sujet n'est pas bien placé, j'ai hésité entre ici et "problèmes avec template & css"

[Hell-eonore]

Bonjour,
je veux bien t'apprendre à faire ceci
Saches tout d'abord, que tu n'as besoin que ton template index_body pour réaliser ceci

Comme on ne peut pas utiliser une image en fond et en image réactive, la MAP, tu devra la réaliser avec une image cache, c'est-à-dire une image transparente qui fait la même taille que la zone de ton image où il y a les liens, donc la partie en haut, approximativement 930*192.

En dessous de ta map, tu pourra faire un tableau à 3 colonnes avec tes codes

Si ça te dit, je suis prête à tout t'expliquer
Cordialement.

[» Golden Mind.]

Bien sûr *-* Merciiiiiiiiiiii beaucoup !!
Par contre, je suis novice, donc merci de détailler et d'y aller étape par étape (a) je suis désolée lol .. mais je veux être capable de refaire cela pour mon prochain design

Mon template index_body est celui par défaut, je vous le donne directement quand même ici:

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 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}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></td>
   </tr>
   <tr>
      <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {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}<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 -->

[Hell-eonore]

Pas de problème D'abord, on va tout mettre en place avant de le remplacer dans le template, y'aura moins de problèmes.

Alors tout d'abord, il faut placer le fond. Comme votre QEEL sera par dessus, on va faire une balise div avec votre fond:

Code:

<div style="background-image: url('http://img11.hostingpics.net/pics/615546JGLqueel.png'); background-repeat: no-repeat; width:930px; height:800px;"> .......</div>

Donc là, on a indiqué l'adresse l'url de votre background, son hauteur, sa largeur et indiqué qu'il ne devait pas se répéter. C'est dans ces balises, à la place des pointillés que l'on va placer tout le contenu après

Est-ce que c'est clair pour l'instant ?

[» Golden Mind.]

D'accord, pour l'instant, ça va, je comprends

je mets tout sous word, au fur et à mesure

[Hell-eonore]

Parfait, alors ensuite, c'est la map qui vient puisque c'est la partie du haut,
On va utiliser cette image-ci, qui est une image transparente qui va venir recouvrir la zone cliquable. Donc en réalité, on cliquera sur cette image et pas sur le fond mais comme elle est transparente, ça ne se verra pas:

Code:

http://nsa27.casimages.com/img/2011/09/01/110901053034319603.png

Donc on va commencer la map:

Code:

<img usemap="NOM DE VOTRE MAP" src="http://nsa27.casimages.com/img/2011/09/01/110901053034319603.png" width="930" height="192" border="0">

<map name="NOM DE VOTRE MAP">......</map>

Donc, dans la première partie, on a définit la map, donc son nom, l'url de son image et ses dimensions.
Dans la deuxième partie, c'est là qu'on va pouvoir définir les zone cliquables
Attention, il faut que ce soit le même nom !

Sur quoi exactement voulez-vous que l'on clique ? Les logos des sites ?

[» Golden Mind.]

D'accord, à la place de NOM DE VOTRE MAP , je dois écrire quelque chose ou on peut laisser comme ça?

J'aimerais qu'on puisse cliquer sur le logo Facebook, le logo tumblr, le logo twitter , l'étiquette où il y a écrit "hitrecord" et le petit bouton avec écrit JGL dedans

[Hell-eonore]

Tu peux le laisser comme ça, c'est pas dérangeant

Ok, donc on va définir les zones cliquables donc 5 zones:

Code:

<area shape="rect" title="Facebook" coords="264,79,312,124" href="Lien de redirection">
<area shape="rect" title="Tumblr" coords="429,81,471, 120" href="Lien de redirection">
<area shape="rect" title="Twitter" coords="346,76,397,127" href="Lien de redirection">
<area shape="rect" title="Hitrecord" coords="593,39,709,111" href="Lien de redirection">
<area shape="rect" title="JGL" coords="645, 107, 725,181" href="Lien de redirection">

Donc, à l'aide d'un logiciel de graphisme, on va trouver les coordonnées des zones et les intégrer dans le code. Il faudra aussi ajouter le lien de redirection que vous voulez
Ce code ci-dessus, vous allez le placer à la place des pointillés, entre les balises <map name> et </map> !

[» Golden Mind.]

J'ai mis mes liens de redirection en même temps
c'est fait pour cette partie

[» Golden Mind.]

résolu via MP avec Hell-eonore merci ♥