AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


4 résultats trouvés pour auteur_Taktiik

Taktiik

Intégrer sa Chatbox où on veut comme on veut - Mar 27 Nov 2012 - 12:01


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Intégrer sa chatbox Dernière mise à jour : 29 Avril 2013
Aperçu
Préparation
Détails


Aucun aperçu


Onglet "Chatbox" de la Page accueil
Afin d'avoir un affichage optimisé et exactement sur l'exemple précédent, voici les réglages à faire dans votre Panneau d'administration.

X Modules>Chatbox>Configuration>Activer la Chatbox : Oui

Ceci fait, vous pouvez maintenant poursuivre et débuter l'astuce. Pour toutes questions, n'hésitez pas à m'envoyer un email : taktiik69@gmail.com si j'oublie de répondre, et j'insiste à nouveau :

Sparrow Style a dit : Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.


Niveau : Facile
Fait : 27/11/2012
Type : Astuce


V
oici une astuce dans laquelle je vous apprend à intégrer votre chatbox à votre Page Accueil, mais par la même occasion, n'importe où ! Bien entendu, la seule chose que je vous demande, c'est de mettre un crédit qui redirige ici, vers Never Utopia, en guise de remerciement.

Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


Partie HTML


Code:
<iframe src="/chatbox/index.forum" style="width: 750px; height: 320px;" frameborder="0"></iframe>


Vous pouvez alors ajuster les dimensions de la chatbox en modifiant les valeurs de largeur "width" et de hauteur "height". L'url ne change en aucun cas car elle affichera la chatbox du forum par défaut (c'est à dire celui sur lequel l'iframe a été apposé) Wink


Voila ! Very Happy
J'espère que cette astuce vous aidera à embellir votre forum =)
Si vous avez des questions, n'hésitez pas à les poster Wink
Cordialement~~
Taktiik.

Taktiik

Navigation Latérale - Ven 23 Nov 2012 - 22:26

Note : Apparemment, il y aurait des bugs, ne pas utiliser pour le moment.



Barre Latérale de Menu : V 1.5 Dernière mise à jour : 06 Avril 2013
Aperçu
Préparation
Détails


W W W

Afin d'avoir un affichage optimisé et exactement comme sur l'exemple précédent, voici les réglages à faire dans votre Panneau d'administration :

? Général> Configuration :
• Largeur du forum (nombre ou %) : 700

? Affichage> En-tête & Navigation :
• Afficher seulement des images dans la barre des liens : Non
• Forcer la barre de navigation à rester sur une ligne : Oui

Ceci fait, vous pouvez maintenant poursuivre et débuter l'astuce. Pour toutes questions, n'hésitez pas à me MP ou m'envoyer un email : taktiik69@gmail.com, si j'oublie de répondre, et j'insiste à nouveau :

Sparrow Style a dit : Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.


Niveau : Facile
Fait : 23/11/2012
Type : Astuce


V
oici une astuce dans laquelle je vous donne un menu latéral de navigation rapide.
Je l'ai adapté grâce à Ce tutoriel pour que l'interaction des membres soit effective. Bien entendu, la seule chose que je vous demande, c'est de mettre un crédit qui redirige ici, vers Never Utopia, en guise de remerciement.
L'esthétique est basique et vous laisse libre choix pour la modifier Wink

Navigation





Menu avec possibilité de Ouvrir/Fermer


Partie Template

Vous devez donc remplacer votre template Overall_Header par celui-ci :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         pm.focus();
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
  
   <div id="menu">
          <div>
              <a class="bouton" href="#">Fermer le menu</a><br />
          </div>
          
          <center><strong>Les News</strong></center>
   <marquee behavior="scroll" align="center" direction="up" height="80" scrollamount="1" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'>
          <span style="display: block; text-align: justify; color: #ffffff; font-size: 11px;">
            <strong>~ xx/xx/xxxx :</strong> Blablabla<br />
          </span>
   </marquee>
          
          <center><strong>Liens rapides</strong></center>
          <center><em>Principaux</em></center>
          <a href="/index.htm">Accueil</a><br />
          <a href="/search">Recherche</a><br />
          <a href="/memberlist">Membres</a><br />
          <a href="/groups">Groupes</a><br />
          <a href="/profile?mode=editprofile">Profil</a><br />
      <!-- BEGIN switch_user_logged_in -->
   <a href="/privmsg?folder=inbox" id="mp" alt="Messages Privés">Messages Privés</a><br />
   <a href="/login?logout" alt="connexion">Déconnexion</a>
      <!-- END switch_user_logged_in -->
          
      <!-- BEGIN switch_user_logged_out -->
   <a href="/login" alt="Connexion">Connexion</a><br />
   <a href="/register" alt="S'inscrire">Nous rejoindre</a>
      <!-- END switch_user_logged_out -->
          <br /><br />
        
          <center><em>Commandes</em></center>
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a>
            <br /><br />
            <br /><br />
            
            <center><a href="#top"><img src="http://www.pixyup.com/uploads/290148104efbb8ca57b2d.png" /></a>
              <a href="#bottom"><img src="http://www.pixyup.com/uploads/290148244efbb8d8e7c64.png" /></a></center>
          <a class="bouton2" href="#menu">Ouvrir le menu</a>
   </div>

<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
  
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->
N'oubliez pas de remplacer les liens dans le code signalez par :" adresse de votre forum" Winkà partir de la l.218
Publiez votre template et dirigez-vous vers votre Feuille de style CSS =)!


Partie CSS

Maintenant, Ajoutez ce CSS au votre :

Code:
 #menu /*Menu latéral*/
{
  position: fixed;
  top: 0;
  left: 0;
  margin-left: -160px;
  background-color: #272727;
  border-right: 1px #ccc solid;
  font-family: Arial, serif;
  width: 150px;
  height:100%;
  padding: 10px;
  opacity : 0.8;
  -khtml-opacity:0.8;
  -moz-opacity:0.8;
  -ms-filter: "alpha(opacity=80)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  filter : alpha(opacity=80);
  transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -htm-transition: all 1s;
  -webkit-transition: all 1s;
}

.bouton /*Bouton "Fermer le menu"*/
{
  display: block;
  text-align: center;
  background-color: #5d5d5d;
  border: 1px #ccc solid;
  color: #ffffff!important;
  font-weight: bold;
  text-shadow: none!important;
  margin: auto;
  margin-top: 20px;
  padding: 3px;
  border-radius: 30px;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -htm-border-radius: 30px;
  -webkit-border-radius: 30px;
}

.bouton2 /*Bouton "Ouvrir le menu"*/
{
  display: block;
  position: fixed;
  top: 0;
  left: 20px;
  text-align: center;
  background-color: #5d5d5d;
  border: 1px #ccc solid;
  border-top: 0px;
  color: #ffffff!important;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
  text-shadow: none!important;
  border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  -o-border-radius: 0 0 10px 10px;
  -htm-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
}

 #menu:target /*Ne pas modifier*/
{
  margin-left: 0;
  transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -htm-transition: all 1s;
  -webkit-transition: all 1s;
}

 #menu a /*Liens du menu*/
{
  z-index: 1;
  text-transform: uppercase;
  font-size: 12px;
  text-shadow: 1px 1px 0 #000;
  color: #5e5e5e;
}
Partie JS

Créez une nouvelle page JS effective sur "Toutes les pages" et mettez-y :
Code:
jQuery().ready(function(){
        var newmp = $("#i_icon_mini_new_message");
        if(!newmp.length) return;
        $("#mp").attr('style','color: darkred; font-weight: bold;');
});





Menu qui reste toujours ouvert


Partie Template

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         pm.focus();
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
  
   <div id="menu">
          <center><strong>Les News</strong></center>
   <marquee behavior="scroll" align="center" direction="up" height="80" scrollamount="1" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'>
          <span style="display: block; text-align: justify; color: #ffffff; font-size: 11px;">
            <strong>~ xx/xx/xxxx :</strong> Blablabla<br />
          </span>
   </marquee>
          
          <center><strong>Liens rapides</strong></center>
          <center><em>Principaux</em></center>
          <a href="/index.htm">Accueil</a><br />
          <a href="/search">Recherche</a><br />
          <a href="/memberlist">Membres</a><br />
          <a href="/groups">Groupes</a><br />
          <a href="/profile?mode=editprofile">Profil</a><br />
      <!-- BEGIN switch_user_logged_in -->
   <a href="/privmsg?folder=inbox" id="mp" alt="Messages Privés">Messages Privés</a><br />
   <a href="/login?logout" alt="connexion">Déconnexion</a>
      <!-- END switch_user_logged_in -->
          
      <!-- BEGIN switch_user_logged_out -->
   <a href="/login" alt="Connexion">Connexion</a><br />
   <a href="/register" alt="S'inscrire">Nous rejoindre</a>
      <!-- END switch_user_logged_out -->
          <br /><br />
        
          <center><em>Commandes</em></center>
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a>
            <br /><br />
            <br /><br />
            
            <center><a href="#top"><img src="http://www.pixyup.com/uploads/290148104efbb8ca57b2d.png" /></a>
              <a href="#bottom"><img src="http://www.pixyup.com/uploads/290148244efbb8d8e7c64.png" /></a></center>
   </div>

<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
  
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->
Partie CSS

Code:
#menu /*Menu latéral*/
{
  position: fixed;
  top: 0;
  left: 0;
  background-color: #272727;
  border-right: 1px #ccc solid;
  font-family: Arial, serif;
  width: 150px;
  height:100%;
  padding: 10px;
  opacity : 0.8;
  -khtml-opacity:0.8;
  -moz-opacity:0.8;
  -ms-filter: "alpha(opacity=80)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  filter : alpha(opacity=80);
}

 #menu a /*Liens du menu*/
{
  z-index: 1;
  text-transform: uppercase;
  font-size: 12px;
  text-shadow: 1px 1px 0 #000;
  color: #5e5e5e;
}
Partie JS

Créez une nouvelle page JS effective sur "Toutes les pages" et mettez-y :
Code:
jQuery().ready(function(){
        var newmp = $("#i_icon_mini_new_message");
        if(!newmp.length) return;
        $("#mp").attr('style','color: darkred; font-weight: bold;');
});



Navigation




Voila ! Very Happy
J'espère que cette astuce vous aidera à embellir votre forum =)
Si vous avez des questions, n'hésitez pas à les poster Wink
Cordialement~~
Taktiik.

M.A.J :Astuce simplifié grâce à Alec Kuro. Merci à lui !

Taktiik

Comprendre son QEEL et le personnaliser - Ven 16 Mar 2012 - 19:25



Comprendre son QEEL et le personnaliser Dernière mise à jour : 24 Novembre 2012
Aperçu
Préparation
Détails


W W W
Il n'y a pas de préparations particulière à part avoir les yeux grands ouverts et le cerveau prêt à réfléchir Wink !

Vous pouvez maintenant poursuivre et débuter le tutoriel. Pour toutes questions, n'hésitez pas à m'envoyer un email : taktiik69@gmail.com si j'oublie de répondre, et j'insiste à nouveau :

Sparrow Style a dit : Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.


Niveau : Facile
Fait : 16/03/2012
Type : Tutoriel


J
e vous propose de connaître comme votre poche votre QEEL, ou Qui Est En Ligne. Bien entendu, la seule chose que je vous demande, c'est de mettre un crédit qui redirige ici, vers Never Utopia, en guise de remerciement.

Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


Navigation




Partie Compréhension

Ce qu'il faut savoir de votre Qui est en ligne, c'est qu'il est configuré de telle manière que chaque variables (cf: Les Variables FA) renvoient à une phrase bien définie et qui contient la statistique que vous demandez.
Ce qui signifie, bien évidemment, que vous pouvez les modifier, et c'est ce qu'on va faire dans la dernière partie de ce tutoriel.
Tout d'abord, nous allons apprendre à reconnaître chaque élément et chaque variable que nous offre le fammeux QEEL [Qui Est En Ligne]

Allez dans votre Panneau D'administrateur> Affichage (onglet)> Général> Index_body.
Un long code s'affiche devant vos petits yeux qui n'ont demandés qu'une seule chose, votre qeel ...
Pas de panique, je peux d'ors et déjà vous dire que nous nous occuperons de cette partie :

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


En effet, c'est entre  BEGIN disable_viewonline et END disable_viewonline que votre Qui est en ligne se situe.
Ainsi, nous voilà débarassé de déjà les 3/4 du code et nous pouvons mieux nous concentrer.
Le code commence par un tableau table munit d'une class forumline et de certains attributs :


width="100%" : Le tableau prendra la totalité de la page, ou de l'endroit où il est positionné.
border="0" : Le tableau n'aura aucune bordure, valeur à mettre de préférence.
cellspacing="1" : Equivaut au "margin" en css. Il indique que les celulles et lignes du tableau auront 1px d'espace entre-elles
cellpadding="0" : Equivaut au "padding" en css. Il indique que les celulles et lignes du tableau auront 0px de marge intérieur.


Ensuite, on va accélerer un peu, on repère les lignes, tr, et les colonnes, td.
On peut donc remarque  5lignes et  2colonnes.
Maintenant qu'on connait la structure de base de notre QEEL, on va aller piocher chaque élément dedans afin de savoir quelle est sa fonction.
C'est partit \0/ !

Première ligne :
Code:
<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>

{L_WHO_IS_ONLINE} : Affiche le titre "Qui est en ligne".
Ceci vous redirigera vers la geolocalisation de vos membres mais aussi vous indiquera leur position sur le forum.
switch_viewonline_link & switch_viewonline_nolink vous laisse le choix si vous désirez afficher, ou non, cette géolocalisation, c'est pourquoi il est préférable de ne pas y toucher Wink


Deuxième ligne :
Code:

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

src="{L_ONLINE_IMG}" : Affichera l'image que vous avez mis dans "Qui est en ligne" dans Gestion des images sur votre PA.
{TOTAL_POSTS} : Affichera la phrase "Nos membres ont posté un total de X messages".
{TOTAL_USERS} : Nous avons X membre enregistré".
{NEWEST_USER} : L'utilisateur enregistré le plus récent est XXX".


Troisième ligne :
Code:

 <tr>
 <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
 {RECORD_USERS}<br />
 <br />
 {LOGGED_IN_USER_LIST}</span></td>
 </tr>

{TOTAL_USERS_ONLINE} : Affichera la phrase "Il y a en tout X utilisateurs en ligne :: X Enregistré, X Invisible et X Invités ".
{RECORD_USERS} : Affichera la phrase "Le record du nombre d'utilisateurs en ligne est de X le XXX XX XXX XXXX - XX:XX".
{LOGGED_IN_USER_LIST} : Affichera la phrase "Utilisateurs enregistrés  : XXX, XXX, XXX".


Quatrième ligne :
Code:

 <tr>
 <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
 </tr>

{LEGEND} : Affichera le mot "Légende :".
{GROUP_LEGEND} : Affichera "[ XXX ] - [ XXX ]".


Cinquième ligne :
Code:

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

{TOTAL_CHATTERS_ONLINE} : Affichera la phrase "Il y a actuellement X utilisateur(s) sur la ChatBox :".
{CHATTERS_LIST} : Affichera "XXX, XXX, XXX".
switch_chatbox_popup affichera un lien vous redirigeant vers votre Chatbox en vous connectant.


Voilà, on a terminé.
Ouuuh, il reste trois trucs que t'as pas explique !
Ouch, oui x_o

Les Spéciaux
Code:

 {L_CONNECTED_MEMBERS}
 {L_WHOSBIRTHDAY_TODAY}
 {L_WHOSBIRTHDAY_WEEK}

{L_CONNECTED_MEMBERS} : Affichera la phrase "Membres connectés au cours des 24 dernières heures : XXX, XXX, XXX".
{L_WHOSBIRTHDAY_TODAY} : Affichera "Aucun membre ne fête son anniversaire aujourd'hui".
{L_WHOSBIRTHDAY_WEEK} : Affichera "Aucun membre ne fête son anniversaire dans les 7 prochains jours".

Alors, pourquoi les spéciaux ?
Et bien tout simplement parce que si vous voulez les introduire dans un qeel personnalisé, vous devrez les mettre d'une manière bien spéciale.
Ces trois là créées une ligne rien qu'à eux et donc, pas besoin d'en créer une manuellement Wink

On passe à la pratique maintenant !
Maintenant que vous connaissez votre Qui Est En Ligne par coeur, nous allons le modifier pour le rendre plus personnalisé.

Partie HTML&CSS


A partir d'ici, ce n'est plus un tutoriel, mais une astuce.
Tout sera expliqué en dessous sur sa structure et dans le CSS via des commentaires.

Code:

<!-- BEGIN disable_viewonline -->
<div class="qeel">
  <div style="height: 40px"></div>
<table align="center" width="75%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <td valign="top" width="50%" align="left">
                  <h1 style="text-align: center">Statistiques</h1>
 <span class="gensmall">
 {TOTAL_POSTS}<br />
 {TOTAL_USERS}<br />
 {NEWEST_USER}</span>
 </td>
 
 <td valign="top" width="50%" align="left">
                  <h1 style="text-align: center">Actuellement</h1>
 <span class="gensmall">{TOTAL_USERS_ONLINE}<br />
 {RECORD_USERS}<br />
 <br />
 {LOGGED_IN_USER_LIST}</span>
 </td>
 </tr>
 <tr>
 <td valign="top" align="center" colspan="2">
 <table><tr><td>
 {L_CONNECTED_MEMBERS}
 {L_WHOSBIRTHDAY_TODAY}
 {L_WHOSBIRTHDAY_WEEK}
 </td></tr></table>
 </td>
 </tr>
 <tr>
 <td valign="top" colspan="2"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
 </tr>
 <!-- BEGIN switch_chatbox_activate -->
 <tr>
 <td valign="top" align="center" colspan="2">
 <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>
</div>
<!-- END disable_viewonline -->


Alors alors, voici le code HTML que vous pouvez déjà prendre si vous ne désirez pas modifier les phrases de votre QEEL.
Cette fois, c'est rapide et simple :
Il est composé de 4 lignes et 2 colonnes.
J'ai volontairement retiré le titre puisqu'il n'avait plus aucune utilité dans mon cas.
Vous pouvez toujours le rajouter en l'introduisant dans votre code.
Vous allez constater que pour les "spéciaux" je les ai introduis à l'aide d'un tableau.
Effectivement, c'est la meilleure méthode que j'ai pu trouver pour ne pas qu'ils sortent de la div Et c'est jusqu'ici la plus efficace que j'ai pu trouver.

Maintenant le CSS :
Code:

.qeel
{
  background-image: url('http://img19.imageshack.us/img19/3712/sanstitre1cbf.png');
width: 800px;
height: 238px;
  margin: auto;
}


Aussi petit xD ?
Oui oui, on a besoin, dans mon cas, que d'une seule balise CSS : qeel.
Elle a une fond : background-image, une largeur : width, une hauteur : height, et une centrage automatique grace au margin: auto;

Ce sera tout pour ce qui est de la personnalisation esthétique de votre QEEL.
Pour ceux voulant modifier les phrases de leur QEEL, plus besoin de sautiller sur votre chaise, c'est votre partie toute entière :3

Partie Script


Et bien voilà, nous y voilà à la dernière partie du tutoriel !
Je ferais rapide de manière à ne pas vous user trop de temps, même si j'ai du le faire auparavant, mais c'était obligatoire =3
Voici donc un bout de code en rapport avec le qeel de base :
Code:

 <tr>
 <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
 {RECORD_USERS}<br />
 <br />
 {LOGGED_IN_USER_LIST}</span></td>
 </tr>


On modifie par :
Code:

 <tr>
 <td class="row1">
 <span class="gensmall" id="totalonline">{TOTAL_USERS_ONLINE}</span><br />
Utilisateurs enregistrés : Taktiik
 <script type="text/javascript">
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Il y a en tout /,"Nous avons");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateur en ligne ::/,"personne navigant sur le forum dont");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateurs en ligne ::/,"personnes navigant sur le forum dont");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistré/,"Habitué");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistrés/,"Habitués");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisible/,"Caché");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisibles/,"Cachés");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invité/,"Timide");
 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invités/,"Timides");
 </script>
 <span class="gensmall" id="recorduser">{RECORD_USERS}</span><br /><br />
 <script type="text/javascript">
 document.getElementById('recorduser').innerHTML=document.getElementById('recorduser').innerHTML.replace(/- /,"à");
 document.getElementById('recorduser').innerHTML=document.getElementById('recorduser').innerHTML.replace(/d'utilisateur /,"de membre");
 document.getElementById('recorduser').innerHTML=document.getElementById('recorduser').innerHTML.replace(/d'utilisateurs /,"de membres");
 </script>
 <span class="gensmall" id="loggedusers">{LOGGED_IN_USER_LIST}</span>
 <script type="text/javascript">
 document.getElementById('loggedusers').innerHTML=document.getElementById('loggedusers').innerHTML.replace(/Utilisateurs enregistrés /,"Membres Connectés");
 </script>
 </td>
 </tr>


Voilà, on a modifié une partie spéciale du QEEL parce que les phrases basiques étaient trop ... basiques x)
Maintenant, je vous explique comment ça fonctionne et vous pourrez le faire presque partout !
C'est d'ailleurs grâce à ce "script" que j'ai pu poster le tutoriel des sous-forums en retour à la ligne automatique Wink

Donc on entoure notre variable d'un span avec un id.
Cet id sera unique puisqu'il sera reprit dans le script !
Ensuite, on balance le script et on lui indique de récupérer l'id de la balise. Ensuite, on lui dit que ce qui est dans cette balise, on va le remplacer.
Code:

 document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace

Vient ensuite une parenthèse avec comme valeur celle de départ puis séparé d'une slash et d'une virgule et entouré de guillemets, ce par quoi vous voulez le remplacé.
Il ne faut pas oublier de mettre des "s" au cas où vous auriez plusieurs personnes de connectés par exemple =)
Vous répérez la manipulation pour tous les éléments du QEEL et vous l'avez entièrement personnalisé !


Félicitations,
Vous êtes arrivé à la fin de ce tutoriel et il faut avouer que vous en avez appris des choses.
Mais c'est quelque chose de bien, en effet, le QEEL est une des partie essentielle de votre forum et parfois trop négligée dans les forums =/
Grâce à ce tutoriel, j'ai l'espoir qu'il ne le sera plus et que vous le bichonnerez comme il faut :3

Merci à Michiyo pour l'idée du tutoriel
Si vous avez des questions, n'hésitez pas à les poster Wink
Cordialement~~
Taktiik.

Taktiik

Bloc flottant ouvrant "au survol" (CSS) - Dim 20 Nov 2011 - 2:37



Un Déroulant Fluide Dernière mise à jour : 29 Avril 2013
Aperçu
Préparation
Détails

W W W
Il n'y a pas de préparations particulière à part avoir les yeux grands ouverts et le cerveau prêt à réfléchir Wink !

Vous pouvez maintenant poursuivre et débuter le tutoriel. Pour toutes questions, n'hésitez pas à m'envoyer un email : taktiik69@gmail.com si j'oublie de répondre, et j'insiste à nouveau :

Sparrow Style a dit : Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.


Niveau : Facile
Fait : 20/11/2011
Type : Tutoriel


Voici une astuce simple et pourtant qui peut changer la donne dans l'esthétique de votre forum. Ces déroulants fluides vont vous permettre de cacher des liens en trop ou des informations secondaires ! Nous aborderons, car il est nécessaire, les transitions CSS3 dans ce petit tutoriel.

Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


Navigation



Partie HTML

Tout d'abord, pour pouvoir créer cette boite déroulante, nous allons devoir l'introduire à l'aide de balises. Et pas n'importe laquelle, nous allons donc utiliser une div pour faire cela.
/!\ Attention, ceci peut aussi se faire sur un Tableau ou d'autres élémentsde type "Block" /!\

On va lui affiler une class qui sera reliée au CSS et que l'on pourra modifier. Appellons cette classe :"Deroulant" !

Si vous avez bien suivis, on a ceci :
Code:
<div class="Deroulant"></div>


En ajoutant du contenu, on peut arriver à :
Code:
<div class="Deroulant"><h3>Titre de la boite</h3>
Le titre va nous permettre de passer la souris pour affichaer ce que l'on veut cacher<br />
Car nous ... On est des cachotiers °°</div>


Pour ce qui est du HTML, on a terminé. La partie du CSS est cependant un peu plus consistante.


Déroulant Horizontal

Rien de bien difficile en soit !
Tout d'abord, on va créer notre class dans le CSS, et tout de suite, on va lui affiler une largeur avec width. Pourquoi?
Car lorsque vous passerez votre souris dans cette zone, la boite dévoilera son contenu.

Prenons donc une largeur de 30px :
Code:
.Deroulant
{
  width: 30px;
}


Pourtant, la boite a quand même besoin d'une hauteur pour exister. Ainsi, on va lui donner une hauteur :
Code:
.Deroulant
{
  width: 30px;
  height: 150px;
}


Maintenant, vous pouvez lui ajouter tout le style que vous voulez, pour ma part, je lui ajoute une couleur de fond (background-color), une bordure (border), un alignement du texte au centre, une barre de défilemnet cachée (overflow: hidden) et des arrondis (border-radius) :
Code:
.Deroulant
{
  overflow: hidden; /* Cache la barre de défilement, pour l'afficher, mettre en valeur : auto */
  background-color: #dfdfdf; /* Fond Grisé */
  border: 2px solid #cccccc; /* Bordure grisée de 2px sur chaque cotés */
  width: 30px;
  height: 150px;
  text-align: center; /* Alignement du texte au centre */
  border-radius: 10px; /*Arrondi les coins*/
}



Maintenant, comme l'on veut que le contenu s'affiche au passage de la souris on va créer une seconde balise pour .Deroulant qui aura le suffixe :hover
Hover ? Ca veut dire planer, voltiger, survoler. Simple à retenir non ^^ ?
/!\ Attention, les valeurs que vous avez déjà mises dans .Deroulant sont automatiquement données au suffixe :hover, vous n'êtes donc pas obligés de les mettre dans .deroulant:hover /!\



Donnons alors à .Deroulant:hover une largeur de 300px :
Code:
.Deroulant:hover
{
  width: 300px;
}


On va ajouter une propriété de CSS3 qui va venir appliquer un effet de transition et créer cette sensation de déroulement fluide !
/!\ Attention, si vous mettez ces propriétés dans .Deroulant, vous devez les mettre dans .Deroulant:hover pour que le déroulement soit fluide au moment du passage et au moment où la souris est retiée ! Voilà une exception /!\

Code:
.Deroulant
{
  overflow: hidden; /* Cache la barre de défilement, pour l'afficher, mettre en valeur : auto */
  background-color: #dfdfdf; /* Fond Grisé */
  border: 2px solid #cccccc; /* Bordure grisée de 2px sur chaque cotés */
  width: 30px;
  height: 150px;
  text-align: center; /* Alignement du texte au centre */
  border-radius: 10px; /*Arrondi les coins*/
  -webkit-transition: 1s all; /* Transition et ses compatibilités */
  transition: 1s all;
}


Validez le CSS et allez admirer le résultat o/ !


Bon maintenant, si vous voulez faire comme sur l'exemple, vous pouvez placer la boite n'importe où sur votre écran. Ainsi, donnez une position fixée à votre boite (position: fixed;) et donnez lui son décalement par rapport au haut de l'écran et la gauche.
Code:
.Deroulant
{
  position: fixed;
  top: 150px;
  left: 0px;
  overflow: hidden; /* Cache la barre de défilement, pour l'afficher, mettre en valeur : auto */
  background-color: #dfdfdf; /* Fond Grisé */
  border: 2px solid #cccccc; /* Bordure grisée de 2px sur chaque cotés */
  width: 30px;
  height: 150px;
  text-align: center; /* Alignement du texte au centre */
  border-radius: 10px; /*Arrondi les coins*/
  -webkit-transition: 1s all; /* Transition et ses compatibilités */
  transition: 1s all;
}



Déroulant Vertical

Tout d'abord, on va créer notre class dans le CSS, et tout de suite, on va lui affiler une hauteur avec height. Pourquoi?
Car lorsque vous passerez votre souris dans cette zone, la boite dévoilera son contenu.

Prenons donc une largeur de 30px :
Code:
.Deroulant
{
  height: 30px;
}


Pourtant, la boite a quand même besoin d'une hauteur pour exister. Ainsi, on va lui donner une hauteur :
Code:
.Deroulant
{
  height: 30px;
  width: 150px;
}


Maintenant, vous pouvez lui ajouter tout le style que vous voulez, pour ma part, je lui ajoute une couleur de fond (background-color), une bordure (border), un alignement du texte au centre, une barre de défilemnet cachée (overflow: hidden) et des arrondis (border-radius) :
Code:
.Deroulant
{
  overflow: hidden; /* Cache la barre de défilement, pour l'afficher, mettre en valeur : auto */
  background-color: #dfdfdf; /* Fond Grisé */
  border: 2px solid #cccccc; /* Bordure grisée de 2px sur chaque cotés */
  height: 30px;
  width: 150px;
  text-align: center; /* Alignement du texte au centre */
  border-radius: 10px; /*Arrondi les coins*/
}


Maintenant, comme l'on veut que le contenu s'affiche au passage de la souris on va créer une seconde balise pour .Deroulant qui aura le suffixe :hover
Hover ? Ca veut dire planer, voltiger, survoler. Simple à retenir non ^^ ?
/!\ Attention, les valeurs que vous avez déjà mises dans .Deroulant sont automatiquement données au suffixe :hover, vous n'êtes donc pas obligés de les mettre dans .deroulant:hover /!\


Donnons alors à .Deroulant:hover une hauteur de 300px :
Code:
.Deroulant:hover
{
  height: 150px;
}


On va ajouter une propriété de CSS3 qui va venir appliquer un effet de transition et créer cette sensation de déroulement fluide !
/!\ Attention, si vous mettez ces propriétés dans .Deroulant, vous devez les mettre dans .Deroulant:hover pour que le déroulement soit fluide au moment du passage et au moment où la souris est retiée ! Voilà une exception /!\

Code:
.Deroulant
{
  overflow: hidden; /* Cache la barre de défilement, pour l'afficher, mettre en valeur : auto */
  background-color: #dfdfdf; /* Fond Grisé */
  border: 2px solid #cccccc; /* Bordure grisée de 2px sur chaque cotés */
  height: 30px;
  width: 150px;
  text-align: center; /* Alignement du texte au centre */
  border-radius: 10px; /*Arrondi les coins*/
  -webkit-transition: 1s all; /* Transition et ses compatibilités */
  transition: 1s all;


Validez le CSS et allez admirer le résultat o/ !


Bon maintenant, si vous voulez faire comme sur l'exemple, vous pouvez placer la boite n'importe où sur votre écran. Ainsi, donnez une position fixée à votre boite (position: fixed;) et donnez lui son décalement par rapport au haut de l'écran et la gauche.
Code:
.Deroulant
{
  position: fixed;
  top: 0px;
  left: 500px;
  overflow: hidden; /* Cache la barre de défilement, pour l'afficher, mettre en valeur : auto */
  background-color: #dfdfdf; /* Fond Grisé */
  border: 2px solid #cccccc; /* Bordure grisée de 2px sur chaque cotés */
  height: 30px;
  width: 150px;
  text-align: center; /* Alignement du texte au centre */
  border-radius: 10px; /*Arrondi les coins*/
  -webkit-transition: 1s all; /*Transition et ses comptabilités*/
  transition: 1s all;


Navigation



Voila ! Very Happy
J'espère que ce tutoriel vous aidera à comprendre comment l'on peut confectionner un petit déroulant.
N'hésitez pas à me contacter pour de l'aide,
Taktiik.


Revenir en haut

La date/heure actuelle est Jeu 28 Mar 2024 - 15:28