QEEL avec image réactive + modification template.

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

Résolu QEEL avec image réactive + modification template.

Message par » Golden Mind. le Jeu 1 Sep 2011 - 15:22

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. Very Happy

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 Very Happy .. ou peut-être un membre hardi qui possède les réponses à mes questions... Very Happy

Encore un grand merci à vous, forum de Forumactif Very Happy

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" Wink


Dernière édition par » Golden Mind. le Ven 2 Sep 2011 - 13:40, édité 4 fois

» Golden Mind.
**

Féminin
Messages : 98
Inscrit(e) le : 08/06/2011

http://trappedintime.forumactif.com
» Golden Mind. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL avec image réactive + modification template.

Message par Hell-eonore le Jeu 1 Sep 2011 - 16:59

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

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 Smile

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

Hell-eonore
****

Féminin
Messages : 217
Inscrit(e) le : 11/07/2010

Hell-eonore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL avec image réactive + modification template.

Message par » Golden Mind. le Jeu 1 Sep 2011 - 17:08

Bien sûr *-* Merciiiiiiiiiiii beaucoup !! Smile
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 Very Happy

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

» Golden Mind.
**

Féminin
Messages : 98
Inscrit(e) le : 08/06/2011

http://trappedintime.forumactif.com
» Golden Mind. a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: QEEL avec image réactive + modification template.

Message par Hell-eonore le Jeu 1 Sep 2011 - 17:21

Pas de problème Wink 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 Smile

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

Hell-eonore
****

Féminin
Messages : 217
Inscrit(e) le : 11/07/2010

Hell-eonore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL avec image réactive + modification template.

Message par » Golden Mind. le Jeu 1 Sep 2011 - 17:23

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

je mets tout sous word, au fur et à mesure Wink

» Golden Mind.
**

Féminin
Messages : 98
Inscrit(e) le : 08/06/2011

http://trappedintime.forumactif.com
» Golden Mind. a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: QEEL avec image réactive + modification template.

Message par Hell-eonore le Jeu 1 Sep 2011 - 17:29

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 Smile
Attention, il faut que ce soit le même nom !

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

Hell-eonore
****

Féminin
Messages : 217
Inscrit(e) le : 11/07/2010

Hell-eonore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL avec image réactive + modification template.

Message par » Golden Mind. le Jeu 1 Sep 2011 - 17:33

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 Smile

» Golden Mind.
**

Féminin
Messages : 98
Inscrit(e) le : 08/06/2011

http://trappedintime.forumactif.com
» Golden Mind. a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: QEEL avec image réactive + modification template.

Message par Hell-eonore le Ven 2 Sep 2011 - 9:54

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

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 Smile
Ce code ci-dessus, vous allez le placer à la place des pointillés, entre les balises <map name> et </map> !


Hell-eonore
****

Féminin
Messages : 217
Inscrit(e) le : 11/07/2010

Hell-eonore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL avec image réactive + modification template.

Message par » Golden Mind. le Ven 2 Sep 2011 - 11:52

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


» Golden Mind.
**

Féminin
Messages : 98
Inscrit(e) le : 08/06/2011

http://trappedintime.forumactif.com
» Golden Mind. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: QEEL avec image réactive + modification template.

Message par » Golden Mind. le Ven 2 Sep 2011 - 13:39

résolu via MP avec Hell-eonore Wink merci ♥

» Golden Mind.
**

Féminin
Messages : 98
Inscrit(e) le : 08/06/2011

http://trappedintime.forumactif.com
» Golden Mind. 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