AccueilFAQRechercherMembresGroupesS'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.


17 résultats trouvés pour auteur_Okhmhaka

Widgets dans un volet latéral ouvrant "onclick" (CSS avec target) - Mer 1 Oct 2014 - 14:24


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


Widgets FA dans un volet coulissant



Présentation



Les Widgets sont des éléments pratiques pour mettre à disposition des informations aux membres directement sur la page d'accueil, malheureusement ils sont aussi assez encombrants et possèdent un inconvénient majeur : ils réduisent la largeur du contenu du forum, qui est tout de même plus important qu'eux en terme d'intérêt.
Du coup, ce LS va vous permettre d'afficher les Widgets de votre forum FA dans un onglet à ouvrir, à gauche du forum. Vous verrez en fin de LS comment le modifier pour afficher les Widgets à droite.

Exemple en images :




L'installation de ce code nécessite l'accès et la modification des Templates, et donc l'utilisation du compte fondateur.
Ce LS est prévu pour la version phpBB2.


Afficher les Widgets



Il faut bien sûr commencer par aller activer les Widgets. Pour cela allez dans l'onglet "Modules" de votre Panneau d'administration. Dans la première partie de liens de la colonne de gauche, dans "Portail & Widgets", cliquez sur "Gestion des Widgets du forum".
Pour "Afficher les widgets du forum" mettez bien sûr "oui".
Le LS utilise les widgets de gauche, dans un premier temps, donc mettez 200 dans la largeur du widget gauche et laissez 0 dans celui de droite.
Enregistrez.
Sur la même page pensez ensuite à personnaliser les widgets que vous souhaitez voir apparaitre. Vous avez tout les widgets FA en bas, il suffit de cliquer sur l'un, maintenir le clic et le faire glisser dans la colonne de gauche sur le schéma au-dessus. Pensez bien à enregistrer à chaque fois !

Vous pouvez modifier certains widgets indépendamment en cliquant sur Tag auteur_okhmhaka sur Never Utopia - graphisme, codage et game design Editer, ce n'est pas possible pour tous cependant. Vous pouvez par contre modifier les permissions, c'est à dire le statut permettant de voir le widget (invité, membre, modérateur, etc...).
Vous avez également la possibilité de créer vos widgets personnalisés !



Modification du template



Afin de pouvoir inclure proprement le bouton d'ouverture et de fermeture du widget nous allons devoir modifier le template "haut de page", ou "overall_header" de son autre nom.
Voici tout d'abord tout le template, pour ceux qui ne l'auraient pas modifié et souhaiteraient juste un copier/coller :

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');
         if(pm != null) { 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}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {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>
<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://illiweb.com/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}
 
  <div id="open">

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

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </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 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 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 class="button_widgets">
                                                                            <a href="#open" class="open"></a>
                                                                            <a href="#close" class="close"></a>
                                                                            </div>
                              <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>
</div>
</body>
</html>
<!-- END html_validation -->


Pour ceux qui ont déjà modifié le template pour autre chose, vous devez simplement réaliser les modifications que je vais vous donner ci-dessous. Cela vous permettra de ne pas perdre vos précédentes modif'.
Au passage, je signale que je donne le numéro des lignes selon le template de base, si vous l'avez déjà modifié ces numéros risquent d'avoir changé.


Ligne 249, juste après ce code :
Code:
<a name="top"></a>
   {JAVASCRIPT}

Ajoutez celui-ci :
Code:
<div id="open">


Ligne 345, juste avant la fermeture du body, donc juste avant ceci :
Code:
</body>
</html>
<!-- END html_validation -->

Ajoutez ça :
Code:
</div>


Pour finir, ligne 325, repérez ce code-là (qui est le code d'affichage des Widgets) :
Code:
<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>

Et ajoutez juste avant lui ce code :
Code:
<div class="button_widgets">
 <a href="#open" class="open"></a>
 <a href="#close" class="close"></a>
 </div>


N'oubliez pas de valider votre template.


Le CSS



Code:
/* WIDGETS */

#left /* changer par right pour le widget de droite */
{
  position: fixed;
  top: 0;
  left: 0; /* changer par right pour le widget de droite */
  width: 235px !important;
  height: 100%;
  overflow: auto;
  border-right: 20px solid #ae3e2c; /* changer la couleur bordure - changer par border-left pour le widget de droite */
  margin-left: -235px; /* changer par margin-right pour le widget de droite */
  -webkit-transition: 1s;
  transition: 1s;
}
.button_widgets
{
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 0; /* changer par right pour le widget de droite */
  margin-top: -30px;
  margin-left: 0px; /* changer par margin-right pour le widget de droite */
  width: 60px;
  height: 150px;
  background: white; /* mettre ici image du bouton - taille ci-dessus 60par150 */
  -webkit-transition: 1s;
  transition: 1s;
}
.button_widgets a
{
  display: block;
  width: 100%;
  height: 100%;
}
.button_widgets .close
{
  display: none;
/* si vous voulez une autre image pour le close la mettre ici en background - meme taille que image de fond bouton */
}
#open:target #left /* changer par juste left par right pour le widget de droite */
{
  margin-left: 0px; /* changer par margin-right pour le widget de droite */
  -webkit-transition: 1s;
  transition: 1s;
}
#open:target .button_widgets
{
  margin-left: 235px; /* changer par margin-right pour le widget de droite */
  -webkit-transition: 1s;
  transition: 1s;
}
#open:target .close
{
  display: block;
}
#open:target .open
{
  display: none;
}



Modifications



Image bouton - vous devez mettre une image de 60*150px pour votre bouton. Cette image est la même pour ouvrir et fermer, mais si vous souhaitez une image différente pour fermer vous devrez mettre une image en fond dans le bloc ".button_widgets .close", qui soit de la même taille que votre image onglet. Attention car l'image sera par dessus l'autre, donc si elle a de la transparence on risque de voir celle de base.
Si vous voulez du coup un bouton différent pour les deux avec transparence, le plus simple est d'enlever le fond de ".button_widgets" et mettre vos deux images en fond dans : ".button_widgets .open" (que vous devrez ajouter), et ".button_widgets .close", pour respectivement le bouton ouvrir et fermer.

Widgets à droite - si vous souhaitez utiliser ce système pour des widgets à droite, il vous faut tout d'abord activer vos widgets, bien placer vos éléments voulus dans la colonne de droite et indiquer 200px en largeur pour la colonne de droite et 0px pour celle de gauche. Puis, toutes les annotations CSS vont vous aider à modifier le code pour remplacer les "left" par "right" là où il faut, y compris pour les marges.

Widgets gauche ET droite - pour utiliser les deux côtés d'onglets, vous devez donc tout d'abord les activer tout les deux. Puis, là où vous avez mis une ouverture de bloc div id="open" ous devrez ajouter une seconde fois ce code en renommant le bloc, avec "open2" par exemple. Pensez également à mettre une seconde fois la fermeture du bloc en bas, là où vous avez ajouté "/div", il faut qu'il y soit deux fois.
Vous devez également mettre deux fois le code des boutons dans le template (le dernier donné), en changeant les noms là-aussi.
Il vous faut ensuite mettre le CSS de l'onglet gauche, puis une seconde fois ce CSS avec les modifications expliquées pour l'onglet droit.
Attention : dans le CSS de l'onglet droit pensez bien à remplacer le #open:target par un open2, de la même façon, si vous voulez des images de bouton différentes vous devrez les mettre en fond dans les blocs respectifs.


Si vous utilisez ce LS, modifié ou non, merci de mettre un Crédit à Never-Utopia en guise de remerciement Wink

Défilement, rotation continue, balancier...[CSS3 animations complexes] - Lun 2 Déc 2013 - 14:54



Défilement - Rotation continue - Balancier ...
Les Animations complexes [CSS3]


Édit Responsable : Ce tutoriel utilise des animations. Si vous ne connaissez pas le fonctionnement, je vous suggère de lire ce tutoriel afin de comprendre les bases.


Dans ce tutoriel je souhaite aborder les animations "complexes", même si ce terme n'est peut-être pas le bon, disons plutôt l'élaboration d'animations, en CSS3. Qu'est-ce que ça donne concrètement ? Eh bien le parfait exemple est le site web de Never-Utopia :
- la lanterne qui se balance
- les nuages qui défilent
- les bulles qui remontent
- les rouages qui tournent
- les lueurs qui semblent réelles
etc.

C'est quelque chose qui semble complexe au premier abord mais qui ne l'est pas tant que ça, et surtout qui permet énormément de possibilités une fois qu'on a compris le principe ! Il y aurait énormément d'animations différentes à voir et à faire, mais dans ce premier tutoriel (j'en ferais peut-être d'autres ensuite sur ce type d'animation) je vais présenter trois animations différentes :
- un défilement (avec des nuages)
- une rotation (avec un soleil)
- un balancier (avec une sorte de cadre au bout d'une chaine)

Forum test

Vous avez donc ces éléments en haut de page. N'ayant pas mon logiciel de graphisme sous la main à ce moment là, j'ai simplement utilisé des images ou icônes trouvées sur internet.
Ce tutoriel a donc pour but de vous apprendre à placer et animer les trois objets cités plus haut. Libre à vous par la suite de les remplacer par ce que vous voulez !

I/ LE NUAGE

Attention : pour que le code fonctionne et notamment l'animation, vous devez cocher "non" à "Optimiser votre css", paramètre qui se trouve en dessous de votre cadre de saisie de la feuille CSS de votre forum.


Commençons par le nuage qui défile. Pour cela, vous avez besoin de l'image d'un nuage en transparence, ce qui est moins difficile à trouver qu'on pourrait croire. Tapez par exemple les mots "nuage png" sur google... L'autre solution pour avoir le nuage que le voulez est de le faire vous-même sur votre logiciel en utilisant des brushes.
Une fois que vous avez votre image, il va falloir la placer dans le haut de page.

1) le HTML

Allez dans le template "Haut de page" (ou "overall_header") que vous trouverez dans "Affichage" > "Templates" > "Général" > "Haut de page".
Placez vous après ce code :

Code:
<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://illiweb.com/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 -->

(lignes 201 à 213 dans le Template original)

Et intégrez donc ceci juste à la suite (donc ligne 214) :

Code:
<div id="nuage_bloc"><div id="nuage"><img src="http://img15.hostingpics.net/pics/562528nuage.png" /></div></div>

Il s'agit donc simplement d'un premier bloc de contenu, contenant un autre bloc qui lui contient l'image.
N'oubliez pas de valider votre template !

2) le CSS

Si vous avez validé et que vous êtes allés voir le résultat vous avez pu constater que le nuage est fixe, en haut de forum, et qu'il décale tout vers le bas. Normal, il prend une place, les autres éléments se positionnent en fonction de lui aussi.
Pour éviter cela nous allons le mettre en "absolute", afin qu'il soit par dessus les éléments qui le suivent. Commencez donc par mettre ceci dans votre CSS :

Code:
#nuage_bloc
{
  position: absolute;
  top: 0;
  left: 0;
  widht: 100%;
  overflow: hidden;
  margin-top: -100px;
}

Nous avons donc ici placé notre nuage en absolute, il couvre alors les autres éléments. Le top "0" et left "0" sont pour caler le bloc à l'angle de la page entière, et être sûr qu'il ne soit décalé par rien d'autre. C'est important car nous allons ensuite le décaler hors de la page, il faut donc être sûr de sa position de départ.
Le "width: 100%" indique que le bloc fera toute la largeur de page et le overflow "hidden" permet de masquer tout ce qui sortira du bloc et éviter l'apparition d'un scroll.
Quant au "margin-top" il est ici totalement facultatif, c'est simplement pour vous montrer que vous pouvez monter ou descendre votre nuage, de sorte qu'il passe, par exemple, en bas de la bannière. C'est à vous d'adapter cette marge, voire de la retirer.

Il faut maintenant faire bouger notre nuage, et pour cela nous allons utiliser un "keyframes". En gros il s'agit de décrire l'animation voulue, par étape, en ajoutant autant d'étape que désiré. Un keyframes d'animation se présente sous la forme suivante :

Code:
@keyframes nom_de_l_animation
{
0% {propriétés...}
100% {propriétés...}
}

Vous avez donc le @keyframes qui ne change pas, puis un espace et le nom de l'animation que vous allez faire, dans mon cas je le nommerais "nuage". Ce nom importe peu, essayez juste de faire simple, sans caractère spéciaux évidemment.
A l'intérieur des accolades se trouvent les étapes de l'animation. 0% c'est le stade de départ, 100% le stade d'arrivée. Il y a donc d'autres accolades ouvertes après le 0% afin que vous puissiez dire "au départ le style du bloc c'est ..." et d'autres accolades à 100% pour que vous puissiez donner les propriétés du bloc à l'arrivée.
A ce stade, peu importe que l'animation soit en boucle ou pas, vous devez donner en fait juste une boucle d'animation.
Il est possible d'ajouter d'autres étapes ! On verra ça pour le balancier du tableau donc pour le moment on se contentera du début + fin.

Voilà ce que donne notre "keyframes" :

Code:
@keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}

Pourquoi ? Alors nous avons placé notre bloc tout à l'heure en disant qu'il était collé au bord et qu'il avait la largeur de toute la page. L'étape 0% (du début donc) sera de décaler totalement ce bloc vers la gauche pour qu'il soit hors de la page. Il faut donc le décaler de sa largeur, donc 100%. L'avantage du pourcentage ici c'est que peu importe la largeur de l'écran, le bloc sortira forcément de la page puisque 100% = la largeur de page, peu importe la résolution.
L'étape du 100% sera de faire sortir le bloc à nouveau, mais cette fois totalement à droite de la page, pour qu'il soit entièrement dehors. On passe donc d'une marge gauche totale (-100%) à une marge droite totale (100%). L'animation amènera donc l'objet à faire ce trajet.

La compatibilité avec un maximum de navigateur étant importante, il faut développer un peu notre code avec les éléments que comprennent les autres navigateurs. Au final, notre keyframes donne ceci :
Code:
@keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}
@-o-keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}
@-moz-keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}
@-webkit-keyframes nuage
{
0% {margin-left: -100%;}
100% {margin-left: 100%;}
}

(Le premier est le code de base, classique. Le second rend compatible pour Opera, le second pour Firefox et le troisième pour Safari.

On pourrait penser que c'est suffisant, mais en réalité le keyframes n'anime pas votre élément ! Il décrit simplement l'animation que vous voulez, mais il faut appliquer cette animation de la façon que vous connaissez déjà plus ou moins, ce sera simplement pas une "transition" mais bien une "animation".
Voici ce que vous devez ajouter :

Code:
#nuage
{
  animation: nuage 20s linear infinite;
  -o-animation: nuage 20s linear infinite;
  -webkit-animation: nuage 20s linear infinite;
  -moz-animation: nuage 20s linear infinite;
}

J'ai donc mon bloc "nuage" (le bloc contenant l'image) et ma ligne d'animation ainsi que les lignes permettant aux maximum de navigateur de comprendre la consigne. J'ai condensé les informations, mais nous avons, dans l'ordre :
animation : le nom de l'animation - le temps total d'une boucle de l'animation - la vitesse d'animation - le nombre de fois que l'animation se répète.
Nous avons donc ici : l'animation nommée "nuage" donc chaque boucle (donc un aller de 0% à 100%) durera 20s, la vitesse sera linéaire (même vitesse sans ralentissement ou accélération) et l'animation se répètera indéfiniment.

Validez et regardez... Votre nuage bouge ! Il défile de gauche à droite sans rupture puisqu'il va d'un côté à l'autre de la page en sortant entièrement de celle-ci.

PS : on pourrait ajouter comme élément un "délai", c'est à dire imposer qu'entre deux boucles l'animation s'arrête durant un temps défini. On obtiendrait alors un nuage qui passe, puis une fois sorti de la page il attendrait X secondes avant de réapparaitre de la gauche.

Si vous souhaitez que vos nuages ne défilent QUE dans un bloc défini et non sur toute la largeur de page, il vous faut placer votre bloc à l'endroit voulu et lui donner une taille inférieure, en pixel généralement, de votre bloc. Ensuite le chiffre du décalage sera forcément égal à la largeur de ce bloc.

Voilà donc pour notre nuage, vous pouvez très bien faire défiler ainsi plusieurs images de nuage à des vitesses différentes pour plus de réalisme, mais souvenez-vous que ça alourdi la page x).
Au passage une précision : si votre bloc passe par dessus la bannière vous ne pourrez plus accéder au clic de celle-ci. La solution est alors de rendre le nuage cliquable, ou mieux de faire un lien global cliquable qui couvre tout votre bloc nuage, comme ceci (dans le HTML) :

Code:
<div id="nuage_bloc"><a href="/forum.htm" style="display: block; position: absolute; width: 100%; height: 100%;"></a><div id="nuage"><img src="http://img15.hostingpics.net/pics/562528nuage.png" /></div></div>

Libre à vous ensuite de personnaliser cela comme vous le voulez, vous pouvez baisser la vitesse de défilement en augmentant le temps que met l'animation à réaliser une boucle par exemple.


I/ LE SOLEIL

Le nuage c'est bien, mais avec du soleil c'est mieux *o* nous allons donc l'ajouter, et pour que tout reste animé nous le ferons tourner continuellement x)

1) HTML

Comme pour le nuage nous allons commencer par placer notre image du soleil (icône météo trouvée sur google...) dans le template haut de page. Le chemin reste identique ("Affichage" > "Template" > "Haut de page"). Placez le code suivant au même endroit que le nuage (avant ou après, c'est à votre choix, vous pourrez toujours les inverser après coup de toute façon), c'est à dire vers la ligne 214 du template de base.

Code:
<div id="soleil_bloc"><div id="soleil"><img src="http://img15.hostingpics.net/pics/344028soleil.png" /></div></div>

Validez et n'oubliez pas d'enregistrer votre template !

2) Le CSS

Allons ensuite positionner et animer notre soleil. Pour cela, ouvrez la feuille CSS. La première étape, comme précédemment, sera de placer notre bloc.

Code:
#soleil_bloc
{
  position: absolute;
  top: 0;
  right: 0;
  widht: 256px;
  height: 256px;
  overflow: hidden;
}

Comme vous pouvez le voir il y a des similitudes avec le précédent placement. Le principe reste le même, mais puisque j'ai décidé de placer mon soleil à droite, je vais le caler d'abord totalement dans le coin droit. Je n'ai pas ajouté d'autres marges mais vous pouvez le décaler encore plus vers le haut et la droite de sorte qu'on ne voit qu'une partie du soleil et que le reste soit hors page. Rien n'affectera l'animation.

Ajoutons ensuite nos keyframes, sous la même forme que tout à l'heure c'est à dire :

Code:
@keyframes soleil
{
0% {propriétés...}
100% {propriétés...}
}
@-o-keyframes soleil
{
0% {propriétés...}
100% {propriétés...}
}
@-moz-keyframes soleil
{
0% {propriétés...}
100% {propriétés...}
}
@-webkit-keyframes soleil
{
0% {propriétés...}
100% {propriétés...}
}

Je rappelle donc que le nom "soleil" est le nom de l'animation. Les différentes keyframes sont là pour qu'un maximum de navigateurs comprennent notre consigne d'animation.
Voici l'animation que j'utilise, normalement vous la connaissez ou vous l'avez déjà rencontrée quelque part... :

Code:
@keyframes soleil
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-o-keyframes soleil
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-moz-keyframes soleil
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-webkit-keyframes soleil
{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}

Dans notre première étape, le positionnement de l'objet est à 0 degré, il est "droit". Dans la position finale, l'objet est à 360°, il est droit aussi. En fait il est placé exactement pareil à la première et à la dernière étape, c'est le fait de réaliser une transition entre ces deux états qui va donner l'animation.

Astuce : si vous souhaitez faire tourner votre objet dans le sens inverse, mettez simplement un "-" devant le "360deg" !

De la même façon que précédemment, l'animation est définie, mais elle n'est pas encore appliquée à notre élément. Nous allons donc l'ajouter :

Code:
#soleil
{
  animation: soleil 6s linear infinite;
  -o-animation: soleil 6s linear infinite;
  -webkit-animation: soleil 6s linear infinite;
  -moz-animation: soleil 6s linear infinite;
}

J'ai donc mentionné que c'était bien l'animation "soleil" qui devait s'appliquer, qu'elle durait 6 secondes, qu'elle doit se dérouler à une vitesse constante et infiniment.
Si j'avais mis "nuage" en nom d'animation nous aurions eut un soleil défilant (bien que l'animation n'aurait pas été bonne puisque le placement de l'élément est différent du nuage).

Vous pouvez ici aussi ralentir la vitesse de rotation en augmentant le temps mis pour faire un tour (ici 6 secondes).


I/ LE TABLEAU

Passons à l'animation du balancier pour notre tableau au bout de sa chaîne. Le tableau est vide dans mon exemple car j'ai juste pris le render que j'ai trouvé, mais il faut bien sûr imaginer qu'il contienne une image, ou bien que ce soit une lanterne ou tout autre objet susceptible de se balancer x)

1) HTML

On démarre de la même façon en intégrant notre image dans le template "overall_header" (Haut de page), même endroit que les autres donc aux alentours de la ligne 214.

Code:
<div id="tableau_bloc"><div id="tableau"><img src="http://img15.hostingpics.net/pics/956096tableau.png" height="400" /></div></div>

Remarque : j'ai réduis directement dans ce code la taille de l'image du tableau qui était à l'origine beaucoup plus grande. J'ai ici bloqué la hauteur à 400px donc le reste c'est adapté en se redimensionnant à l'échelle.

2) Le CSS

Positionnons notre image, j'ai choisi de la mettre à gauche, mais libre à vous de la mettre ailleurs... Le tout est que puisque notre image se balance c'est qu'elle est accrochée à quelque chose, donc il est préférable que l'image donne l'impression d'être accrochée au bord de page, sauf si bien sûr vous l'intégrez dans une image (fond de PA ou autre) et que vous la calez sur un plafond, une poutre ou que sais-je).

Code:
#tableau_bloc
{
  position: absolute;
  width: 300px;
  top: 0;
  left: 0;
  overflow: hidden;
}

Voilà pour le positionnement, passons à l'animation. Celle-ci sera un peu plus complexe que les précédentes puisque nous allons avoir trois étapes. En effet, notre objet doit effectuer un mouvement de balancier de la gauche vers la droite, mais il doit ensuite revenir par le chemin inverse. Si vous ne mettez que deux étapes vous aurez votre objet qui fera : gauche > droite puis qui disparaitra, re-apparaitra sur la gauche pour refaire le balancier dans le même sens.

Nous allons donc avoir ceci :

Code:
@keyframes tableau
{
0% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
100% {transform: rotate(-10deg);}
}
@-o-keyframes tableau
{
0% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
100% {transform: rotate(-10deg);}
}
@-moz-keyframes tableau
{
0% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
100% {transform: rotate(-10deg);}
}
@-webkit-keyframes tableau
{
0% {transform: rotate(-10deg);}
50% {transform: rotate(10deg);}
100% {transform: rotate(-10deg);}
}

Notre objet va donc de -10 degré vers 10 degré, puis une fois à 10 degré retourne à -10 degré. Avec ces étapes nous avons notre boucle complète.
Reste à appliquer l'animation sur l'objet, et là il faut bien imaginer le problème que l'on va rencontrer... Si vous essayez de faire une application comme pour les autres animations, donc comme ceci :

Code:
#tableau
{
  animation: tableau 3s linear infinite;
  -o-animation: tableau 3s linear infinite;
  -webkit-animation: tableau 3s linear infinite;
  -moz-animation: tableau 3s linear infinite;
}

Vous allez bien avoir votre rotation, mais la rotation se fait autour du centre de l'image ! Comme pour le soleil qui tourne en ayant pour point d'ancrage son centre... En effet, les rotations, par défaut, se font en ayant pour point d'ancrage le milieu de l'image. C'est un problème, car nous, nous voulons que ce point soit le haut de la chaine, donc le milieu oui mais le milieu du HAUT de l'image... Heureusement, il est possible de changer cela x) (sinon je ne serais pas arrivé à mon résultat sur l'exemple). Vous devrez donc ajouter une origine à la transformation, comme ceci :

Code:
#tableau
{
  animation: tableau 3s linear infinite;
  -o-animation: tableau 3s linear infinite;
  -webkit-animation: tableau 3s linear infinite;
  -moz-animation: tableau 3s linear infinite;
  transform-origin: 50% 0;
}

Le premier nombre (50%) est la distance vers la droite horizontalement, et le "0" représente la distance du haut de l'image verticalement. Nous sommes donc bien à la moitié de l'image mais totalement en haut de celle-ci.

Bien ! Nous avons donc notre animation de balancier... Cependant, si vous comparez votre animation actuelle et la mienne il y a une différence : dans votre cas l'animation a une vitesse constante ce qui fait qu'arrivé aux extrêmes (totalement à droite ou totalement à gauche) on dirait que votre objet heurte un mur car il repart très sèchement de l'autre côté... Ce n'est pas naturel, pas réaliste, car un balancier ralenti à chaque fois qu'il remonte un peu, jusqu'à s'arrêter un millième de seconde puis repartir dans l'autre sens.
Pour changer cela afin que notre animation soit plus réaliste, il va falloir changer la constance de la vitesse, donc notre "linear" ne convient pas ! La courbe de vitesse de notre objet doit faire "lent-rapide-lent", et ceci s'appelle "ease-in-out".
Voici donc le bon code css pour appliquer notre animation :

Code:
#tableau
{
  animation: tableau 3s ease-in-out infinite;
  -o-animation: tableau 3s ease-in-out infinite;
  -webkit-animation: tableau 3s ease-in-out infinite;
  -moz-animation: tableau 3s ease-in-out infinite;
  transform-origin: 50% 0;
}

Regardez le résultat, vous verrez que c'est nettement mieux ^^


Voilà, ce tutoriel est terminé, il vous présente trois animations différentes que vous pouvez ensuite vous amuser à personnaliser comme bon vous semble !
Je ferais cependant une étape de cursus sur les animations afin que tout expliquer en détail, j'ai pensé qu'en premier lieu une application directe, même si vous ne possédez pas tout les éléments, était plus ludique qu'un bourrage de crâne sur une dizaine de termes et de propriétés.

Si vous utilisez ce tutoriel merci de mettre un crédit à Never-Utopia, en remerciement Wink

Enjoy x)

Mettre la navigation en colonne (verticalement), positionnement libre - Ven 29 Nov 2013 - 17:39



Navigation en colonne - positionnement libre


Bien que principalement pour PhpBB2, cette astuce est facilement adaptable pour toutes les versions de forumactif.

Dans cette astuce l'objectif est de changer l'affichage de la navigation pour qu'elle ne soit plus en ligne mais en colonne, les liens affichés les uns en dessous des autres. La navigation restera cependant celle d'origine et ses liens pourront être modifiés via le panneau d’administration (ajout du calendrier, du portail, etc...). De même, les connectés auront les liens de profil et messagerie que les invités n'auront pas. Bref, vous l'avez compris, la barre barre restera identique dans son contenu que la navigation classique mais son positionnement change, les liens seront les uns en dessous des autres et le bloc qui les contiendra pourra être placé où vous le souhaitez (par défaut dans le code il sera collé au bord gauche de la page.

Exemple de résultat (le lien "membre" étant survolé) :

Tag auteur_okhmhaka sur Never Utopia - graphisme, codage et game design 318675prov

1/ Modification du template

Tout d'abord il nous faut trouver le code affichant la navigation. Allez pour cela dans votre template "Haut de page" (dans "Affichage" > "Templates" > "Général") autrement nommé "overall_header". Notre bout de code se trouve de la ligne 265 à 269.

Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
</table>
De ce code, nous n'allons conserver que la variable affichant seulement la navigation :

Code:
{GENERATED_NAV_BAR}
Et donc remplacer tout le code plus haut (des lignes 265 à 269) par celui-ci :

Code:
<div id="navigation">
    <div id="navig">{GENERATED_NAV_BAR}</div>
  </div>
N'oubliez pas d'enregistrer puis de valider votre template.

Allez également changer l'affichage de votre navigation, si besoin. Assurez-vous que vous avez coché "non" dans "Affichage" > "En-tête et navigation" > "Afficher seulement des images dans la barre de liens".  


2/ Le CSS

Tout d'abord il faut savoir que l'affichage par défaut de chaque lien de navigation sont "inline" (en ligne), nous allons donc les changer en "block" (bloc).

Code:
#navig a
{
  display: block;
}
Rien que ce code permet de mettre votre navigation en colonne, mais cela décale alors tout vers le bas puisqu'elle prend désormais de la place en hauteur et non en largeur.
Pour corriger cela nous allons mettre le bloc "navigation" en absolute et délimiter sa taille.
Pour le reste, il suffira de mettre les couleurs, bordures et effets que vous souhaitez sur votre bloc. Voici le CSS expliqué :

Code:
/* NAVIGATION */

#navigation /* configure le bloc qui contient tout les liens */
{
  position: absolute; /* permet de mettre la navigation par dessus le reste sans decalage */
  top: 0; /* colle le bloc en haut de la page */
  left: 0; /* colle le bloc a gauche de la page */
  margin-top: 100px; /* marge haute */
  border: 3px solid #44a5ff; /* bordure */
}
#navig a /* personnalise les liens */
{
  display: block; /* met les liens en colonne */
  margin-bottom: -20px; /* enleve l'espacement par defaut des liens entre eux */
  background: #ffffff; /* couleur de fond des liens */
  border-bottom: 1px solid #e6e6e6; /* bordure basse des liens */
  padding: 3px 10px; /* marge interieure des liens */
  text-align: center; /* alignement du texte */
  text-transform: uppercase; /* met le texte en majuscule */
  transition: 1s; /* realise une transition lente avec l effet au survol */
  -moz-transition: 1s;
  -htm-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
}
#navig a:hover /* personnalise les liens au survol */
{
  background: #212121; /* couleur de fond du lien */
  color: #ffffff; /* couleur du texte lien */
  transition: 1s; /* permet la transition lente */
  -moz-transition: 1s;
  -htm-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
}
#navig img
{
  display: none; /* permet d enlever l espace vide de l image contenue par defaut dans le lien */
}
Quelques remarques et explications sur l'apparence de vos liens :
la marge : par défaut les liens de navigation sont très espacés. Pour combler cela j'ai ajouté une marge basse négative (margin-bottom) à mes liens (navig a). On aurait pu faire la même chose avec une marge haute négative mais cela faussait alors ma marge haute sur le bloc, je préférais mettre le margin-bottom, c'est plus logique à mon sens et posera moins de problème.
l'image : une image vide se trouve dans les liens, par défaut, c'est l'image de l’icône que vous pouvez ajouter aux liens lorsqu'ils sont affichés en "texte". Ce bloc vide possède des dimensions, il est petit, certes, mais vous gênera lors de votre personnalisation. C'est pour enlever totalement l'affichage de ce bloc que j'ai noté un "display: none" dans l'image des liens de navigation.


3/ Personnaliser

Positionner le bloc où vous le souhaitez - Pour cela vous aurez deux solutions, selon l'endroit où vous voulez placer votre bloc. Si votre bloc doit se placer par rapport au coin ou au bord de la page, vous pourrez simplement faire varier les "margin" (margin-top, margin-left) afin de le décaler plus ou moins du haut de page et du bord gauche. Si au contraire vous voulez mettre ce bloc par rapport à une bannière (si vous avez prévu dans votre bannière un cadre qui doit contenir la navigation), vous devrez commencer ABSOLUMENT par mettre le positionnement suivant :

Code:
#navigation
{
top: 0;
left: 50%;
}
Ce n'est que par rapport à cette position de référence que vous pourrez ensuite ajouter un margin-top ou un margin-left, quitte à mettre un margin-left négatif pour le ramener vers la gauche.
Je ne détaille pas le pourquoi du comment de cette méthode, si vous voulez la comprendre je vous encourage à consulter Le Cursus codage - Partie 4, TP1 (créer une page d'accueil HTML pour un forum) où je l'explique plus précisément.

Mettre des images à la place des liens textes - Même si je vous ai fait afficher uniquement les liens en début de tutoriel, vous pouvez parfaitement mettre des images à la place. Pour cela n'oubliez pas de changer l'affichage dans le panneau (Affichage > En-tête et navigation > Afficher seulement des images... > Oui). Tenez compte de la taille voulue dans la réalisation de vos images ! Prenez en considération que les images seront les unes sur les autres, et il est préférable qu'elles fassent toutes la même largeur.

Diminuer l'opacité - Si votre navigation est placé par rapport au bord de page comme dans mon premier exemple, il est possible que pour les résolutions basses elle soit par dessus la bannière... Il peut donc être judicieux, selon votre positionnement, d'afficher ce bloc de navigation en opacité réduite, et faire en sorte qu'il apparaisse en opacité totale au survol de la souris.
Pour cela, utilisez le code d'opacité suivant (à ajouter dans le début du css, pour "navigation") :

Code:
#navigation
{
opacity: 0.5;
-moz-opacity: 0.5;
-khtm-opacity: 0.5;
filter: alpha(opacity=50);
}
#navigation:hover
{
opacity: 1;
-moz-opacity: 1;
-khtm-opacity: 1;
filter: alpha(opacity=100);
}
Fixer la navigation ? - Fixer la navigation signifierait que le bloc ne bougera pas lorsque l'utilisateur scrollera la page. Il faut tenir compte de cela et bien visualiser que le bloc cachera tout ce qui passera en dessous de lui, c'est pourquoi je vous conseille de ne pas fixer le bloc et de le laisser en positionnement "absolute".

Combiner deux tutoriels ? - Avec le tutoriel que vous venez de consulter vous pouvez combiner "Bloc de navigation" (haut, bas et ancres) pour placer votre bloc de navigation DANS l'onglet et ainsi faire en sorte que cette navigation soit la vraie navigation de votre forum, et non des sortes de "liens utiles". Si vous faites cela, le positionnement "absolute" du bloc "navigation" n'est pas nécessaire.

Changer la couleur de sélection (surlignement d'un texte) - Lun 1 Avr 2013 - 17:41


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


Lorsque vous êtes sur une page internet et que vous surlignez un texte, un fond de couleur par défaut apparait et ça fait très Pokémon dit comme ça, mais bref. Par exemple, sur une page classique, si je surligne avec ma souris une partie de texte, il s'affiche comme ceci :

Tag auteur_okhmhaka sur Never Utopia - graphisme, codage et game design JgDgEmQ

Mais la couleur de fond et le changement de couleur de police peuvent être modifiés. Par exemple, sur N-U actuellement avec un thème très bleu, si vous surlignez un texte vous devez avoir un fond bleu et le texte presque blanc, comme ceci :

Tag auteur_okhmhaka sur Never Utopia - graphisme, codage et game design WzXKnUK

Pour faire cela, il vous suffit de mettre dans votre css le code suivant :

Code:
::selection
{
  background: #ffffff none repeat scroll 0 0;
  color: #000000;
  text-shadow: none;
}
::-moz-selection
{
  background: #ffffff none repeat scroll 0 0;
  color: #000000;
  text-shadow: none;
}


Dans le code la couleur de fond est le blanc (#ffffff) et la couleur de texte le noir (#000000), vous pouvez ainsi harmoniser le surlignement à votre couleur dominante de page.
Ce code ne fonctionne peut-être pas avec certains navigateurs, notamment leur version plus ancienne.

Dans le code présent j'ai précisé un "text-shadow: none" ce qui signifie que les ombres de texte, s'il y'en a, seront enlevées. En effet, ces ombres rendent souvent le surlignement illisible.

QEEL onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Sam 24 Nov 2012 - 18:03



Bonjour, bonsoir,

Dans l'idée de la PA équivalente, voici le même principe de focus appliqué à un QEEL, lui aussi déjà rempli, vous n'avez plus qu'à installer et personnaliser son apparence, et en particulier les images qui l'encadrent.
Un petit aperçu tout d'abord :

Lien Forum Test

Il s'agit du premier QEEL du forum, au fond marron et avec la femme manga allongée au dessus.

Information importante : j'ai voulu ici utiliser le "focus" en alternative au "target" pour créer un effet au clic, et non au survol. Que ça vous parle ou non peu importe, sachez juste qu'il y a un "défaut" avec l'utilisation du focus, c'est que lorsqu'on clique aille ça l'enlève. Du coup, lorsque vous êtes sur le contenu de l'un des onglets et que vous cliquez sur la page, que ce soit à l'intérieur ou à l'extérieur, vous revenez sur le contenu par défaut. Je vous rassure cependant si vous comptez mettre des liens dans vos contenus, même si le fait de cliquer ramène au contenu par défaut le lien fonctionnera quand même.
Sachez le cependant avant de l'utiliser.


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


Installation HTML

Ouvrez le template "Page d'accueil", également nommé "index_body".
Repérez le bloc contenu entre les lignes 175 et 223 : il est délimité par les marqueurs suivants :

Code:
<!-- BEGIN disable_viewonline -->
<!-- END disable_viewonline -->


Ils indiquent le début et la fin de l'ensemble du "Qui est en ligne". C'est tout ce qui se trouve entre ces deux marqueurs que nous allons remplacer par cela :

Code:
<div id="qeel_bloc">
 
<div id="qeel_head"></div>
<div id="qeel_body">

<div id="qeel">
  <div class="qeel_onglet1" tabindex="0">Derniers connectés
    <div class="qeel_contenu1"><div class="qeel_contenu"><table>{L_CONNECTED_MEMBERS}</table></div></div>
  </div>
  <div class="qeel_onglet2" tabindex="0">Anniversaires
    <div class="qeel_contenu2"><div class="qeel_contenu"><table>{L_WHOSBIRTHDAY_TODAY}
      {L_WHOSBIRTHDAY_WEEK}</table></div></div>
  </div>
  <div class="qeel_onglet3" tabindex="0">Groupes
    <div class="qeel_contenu3"><div class="qeel_contenu">{GROUP_LEGEND}</div></div>
  </div>
  <div class="qeel_contenu4"><div class="qeel_contenu">{TOTAL_POSTS} ▬ {TOTAL_USERS} ▬ {NEWEST_USER}<br />
    {RECORD_USERS}<br /><br />
    {TOTAL_USERS_ONLINE}<br />{LOGGED_IN_USER_LIST}</div></div>
  </div></div>

<div id="qeel_foot"></div>
 
  </div>



Installation CSS

Pour la mettre en forme, allez dans votre feuille CSS pour y mettre le css ci-dessous :

Code:
/* QEEL ONGLETS LATERAUX ONCLIC FOCUS */

#qeel_bloc
{
  height: 400px;
}
#qeel_head
{
  width: 980px;
  margin: auto;
  height: 151px;
  background: url(#);
}
#qeel_body
{
  width: 980px;
  height: 150px;
  margin: auto;
  background: url(#) repeat-y;
}
#qeel_foot
{
  width: 980px;
  margin: auto;
  height: 118px;
  background: url(#);
}
#qeel
{
  padding-top: 20px;
  padding-bottom: 20px;
}
.qeel_onglet1
{
  width: 150px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  margin-bottom: 10px;
  background: #d39b69;
  border: 1px solid #cf6f1d;
  box-shadow: 0px 0px 4px #493b32;
  -moz-box-shadow: 0px 0px 4px #493b32;
  -o-box-shadow: 0px 0px 4px #493b32;
  -htm-box-shadow: 0px 0px 4px #493b32;
  -webkit-box-shadow: 0px 0px 4px #493b32;
  font-weight: bold;
  color: #473d36;
  text-shadow: 1px 1px 0px #f0b27e;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet2
{
  width: 150px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  margin-bottom: 10px;
  background: #f1f0eb;
  border: 1px solid #d0d0cc;
  box-shadow: 0px 0px 4px #605750;
  -moz-box-shadow: 0px 0px 4px #605750;
  -o-box-shadow: 0px 0px 4px #605750;
  -htm-box-shadow: 0px 0px 4px #605750;
  -webkit-box-shadow: 0px 0px 4px #605750;
  font-weight: bold;
  color: #ba7b42;
  text-shadow: 1px 1px 0px #d4d3cf;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet3
{
  width: 150px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  background: #625c51;
  border: 1px solid #423328;
  box-shadow: 0px 0px 4px #3a372d;
  -moz-box-shadow: 0px 0px 4px #3a372d;
  -o-box-shadow: 0px 0px 4px #3a372d;
  -htm-box-shadow: 0px 0px 4px #3a372d;
  -webkit-box-shadow: 0px 0px 4px #3a372d;
  font-weight: bold;
  color: #d1d1cc;
  text-shadow: 1px 1px 0px #736f68;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet1:hover, .qeel_onglet2:hover, .qeel_onglet3:hover
{
  margin-left: 20px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_contenu1
{
  position: absolute;
  z-index: 1;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -40px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.qeel_contenu2
{
  position: absolute;
  z-index: 2;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -80px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.qeel_contenu3
{
  position: absolute;
  z-index: 3;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -120px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.qeel_contenu4
{
  position: absolute;
  z-index: 4;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 204px;
  margin-top: -129px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
}
.qeel_contenu
{
  padding: 4px;
  color: #74685d;
  font-size: 11px;
  text-shadow: 1px 1px 0px #f7f6f0;
  text-align: justify;
  font-weight: normal;
}
.qeel_onglet1:hover .qeel_contenu1, .qeel_onglet2:hover .qeel_contenu2, .qeel_onglet3:hover .qeel_contenu3
{
  margin-left: 180px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet1:focus .qeel_contenu1, .qeel_onglet2:focus .qeel_contenu2, .qeel_onglet3:focus .qeel_contenu3
{
  z-index: 10;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
}



Personnalisation

Pensez surtout à changer les images d'en-tête, de corps et de pieds du QEEL ! Celles-ci étaient pour le commande d'un forum, donc je les ai retirées du css afin que vous puissiez mettre les votre. Mettez l'adresse de vos images à la place des # présents dans le css, entre parenthèses.
- #qeel_head = image d'en-tête
- #qeel_body = image de corps qui se répète
- #qeel_foot = image de pieds
Attention aux tailles ! Vous pouvez voir que les blocs possèdent une largeur et pour certains une hauteur. N'oubliez pas de les modifier si votre image ne possède pas cette taille. La hauteur et la largeur des blocs doivent correspondre aux images.
Si vous ne voulez pas vous embêter avec trois images pour faire votre bloc, enlevez les blocs #qeel_head et #qeel_foot pour ne garder que le corps (#qeel_body) et mettez-lui une couleur de fond, bordures, ombres etc...
Pour le reste, il s'agit essentiellement de couleur, y compris pour les petits onglets.

En cas d'utilisation de ces codes merci de mettre un crédit à Never-Utopia sur votre forum, même si vous personnalisez le code, la base a été écrite ici. Un petit crédit, ce n'est pas grand chose, et nous ne demandons que ça pour le partage de notre petit savoir x)


S'il y a des problèmes, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Okhmhaka

Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Sam 24 Nov 2012 - 0:19


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


Hello x)

A la demande de Michiyo et comme promis je poste le tutoriel permettant de réaliser un onglet dans le même type que celui-ci (le truc en jaune à gauche qui s'ouvre en hover ^^) mais qui s'ouvre au clic et non au survol. De plus, histoire de faire les choses entièrement, j'ai fait en sorte que le bouton "ouvrir" se change en "fermer" une fois ouvert ! (tant qu'à faire hein...)

Voici donc l'aperçu :

Tag auteur_okhmhaka sur Never Utopia - graphisme, codage et game design JIoAHnh
Tag auteur_okhmhaka sur Never Utopia - graphisme, codage et game design DGzyuYo

Vous avez donc là un espace que vous pourrez agrandir au besoin pour y mettre ce que vous souhaitez : top site, liens, news... à la limite et avec la bonne taille vous pouvez même y glisser votre CB ! x)



Installation HTML

Pour commencer, aller dans vos templates (Affichage), et ouvrez celui nommé "overall_header" (ou "haut de page").

Repérez ce code (ligne 201) :

Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Et ajoutez juste après lui le code de votre petite boite à onglet :

Code:
<div id="target_onglet"><div id="target_onglet2">
      <div id="onglet_clic">
      <span class="onglet_clic_navigation">
        <a href="#target_onglet" class="onglet_ouvrir"><img src="http://img15.hostingpics.net/pics/411044ongletouvrir.png" alt="lien" /></a>
        <a href="#target_onglet2" class="onglet_fermer"><img src="http://img15.hostingpics.net/pics/242659ongletfermer.png" alt="lien" /></a>
      </span>
      <div id="onglet_clic_contenu">
        <div id="onglet_contenu">
        Contenu de votre onglet.
        </div>
        </div>
    </div>
      </div></div>


N'oubliez pas d'enregistrer puis de valider votre template modifié !


Installation CSS

Allez ensuite dans votre feuille CSS pour y mettre le morceau de code css suivant, à ajouter au reste de votre css si vous en avez déjà :

Code:
/* ONGLET DEVOILE EN CLIC */

#target_onglet, #target_onglet2
{
  position: fixed;
}
#onglet_clic
{
  position: fixed;
  z-index: 999;
  width: 342px;
  height: 200px;
  margin-left: -310px;
  margin-top: 100px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
#onglet_contenu
{
  width: 290px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 190px;
  color: #1e466c;
  font-size: 11px;
}
.onglet_clic_navigation
{
  display: block;
  float: right;
  width: 40px;
  height: 120px;
  overflow: hidden;
  background: url(http://img15.hostingpics.net/pics/974397ongletouvrir.png);
  margin-top: 40px;
}
.onglet_ouvrir
{
  position: absolute;
  z-index: 3;
}
.onglet_fermer
{
  position: absolute;
  z-index: 2;
}
#onglet_clic_contenu
{
  width: 300px;
  height: 200px;
  overflow: hidden;
  background: #72a3cc;
  border: 1px solid #2f6ea5;
}
#target_onglet:target #onglet_clic
{
  margin-left: -10px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
#target_onglet:target .onglet_ouvrir
{
  z-index: 1;
}
#target_onglet2:target #onglet_clic
{
  margin-left: -310px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}


Votre boite est prête ! Voyons quelques points de personnalisation...


Personnalisation

1) Les tailles :
Si vous souhaitez modifier la taille de votre bloc vous devez modifier plusieurs mesure :
- la taille totale de la boite comprenant le contenu + le bouton (#onglet_clic)
- la taille de votre contenu lui-même (#onglet_contenu)
- l'importance de la marge négative qui fait disparaitre le bloc de la page lorsqu'il est fermé (#onglet_clic - margin-left: -310px;)

2) Les boutons ouvrir/fermer :
Ces boutons sont simplement des images, comme vous le verrez dans le html. Il suffit donc de faire vos propres boutons et de mettre leur adresse à la place des boutons actuels. Il est important que les deux fassent la même taille, mais ils ne se superposent pas donc vous pouvez jouer tant que vous voulez sur la transparence, y compris écrire juste le texte.
Si jamais vous souhaitez changer la taille des boutons, pas de souci (du moment que les deux ont la même) mais il faudra alors changer :
- le bloc comportant le bouton (.onglet_clic_navigation)
- adapter la largeur totale du bloc de la boite (#onglet_clic) car elle est égale à la largeur de votre contenu + la largeur de l'onglet (+ quelques pixels de réajustement)
- ...et si vous changez la largeur totale il faudra forcément changer le margin négatif qui rabat l'ensemble Wink

Pour le reste, il s'agit juste de changement basique des couleurs de fond, de texte, de bordures... Vous pouvez aussi mettre une image de fond à la place de la couleur bleu du bloc du contenu.

Voilà ! J'espère que ça vous sera utile, c'est une alternative à celui qui se déplie en hover, et même si l'écriture du css est un peu complexe au départ (pour moi pas pour vous XD) c'est un fonctionnement simple et sans javascript.

En cas d'utilisation de ces codes merci de mettre un crédit à Never-Utopia sur votre forum, même si vous personnalisez le code il n'en est pas moins conçu par quelqu'un d'autre, en l'occurrence moi puisque je l'ai rédigé en partant d'une feuille blanche, donc il est normal de ne pas simplement se l'approprier sans autre forme de respect. Un petit crédit, ce n'est pas grand chose, et nous ne demandons que ça x)

Bloc de navigation rapide (haut, bas et ancres) - Lun 25 Juin 2012 - 17:08



Navigation flottante

Ancres & Liens


Bonjour !

Voici un tutoriel sur les bloc de navigation comme vous trouvez parfois sur la droite ou la gauche des forum en "flottement", permettant d'aller en haut de page, bas de page, mais aussi à divers endroits du forum.
Tout d'abord, si vous recherchez simplement un tutoriel pour le "haut" et "bas", je vous oriente vers celui-ci qui vous suffira amplement.


Celui que je vous propose abouti à un résultat que vous pourrez voir sur ce forum test : il s'agit du bloc jaune à gauche, survolé il s'ouvre et vous propose 4 types de liens que je vais détailler dans le tutoriel.

- les ancres de base (haut et bas)
- les liens normaux (liens que vous voulez mettre à disposition, il peut s'agir du règlement, du contexte, etc...)
- les ancres crées (points de repères crées sur le forum)
- les ancres crées avec changement de page au besoin (c'est un lien + ancre qui fera que même dans une page au fin fond du forum, le lien vous amènera vers la catégorie choisie)

En cas d'utilisation de ce tutoriel, merci de mettre sur votre forum un CREDIT pour Never-Utopia. Ce geste de remerciement simple nous permet de "vivre" et de pouvoir vous apporter toujours plus d'aide ! Merci d'avance !



I/ Création du bloc : template + css

▬ Tout d'abord allons ajouter notre bloc dans le template overall_header. Repérez cette ligne de code, ligne 195 environ (et si vous n'êtes pas sur phpBB2, repérez simplement la balise body, même si elle ne ressemble pas à cela) :

Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


En dessous, ajoutez votre code du bloc navigation :
Code:
    <div id="fast_links">
   
    <div id="fast_links_contenu">
      <a href="#top" class="fast_link">Haut</a>
      <a href="#" class="fast_link">Lien 1</a>
      <a href="#" class="fast_link">Lien 2</a>
      <a href="#ancre1" class="fast_link">Ancre simple</a>
      <a href="http://jesuisunelegende.forumactif.com/#ancre2" class="fast_link">Ancre avec changement de page</a>
      <a href="#bottom" class="fast_link">Bas</a>
      </div>
   
  </div>


=> mon contenu est un exemple des différents liens possibles, à vous de voir lesquels vous gardez ensuite.

Information : si votre forum comporte déjà des changements sur ce template, notamment une navigation en haut de page, placez ce bloc avant ou après la navigation mais les distances du css seront peut-être à adapter (notamment celle du "margin-top" ou "marge haute").


N'oubliez pas de valider votre modification.

▬ Allez ensuite dans votre feuille css et affichez le css suivant :

Code:
/* FAST LINKS */

#fast_links
{
  position: fixed;
  z-index: 999;
  width: 300px;
  height: 200px;
  margin-top: -200px;
  margin-left: -250px;
  background: url(http://img11.hostingpics.net/pics/672640fondnavig.png) center center no-repeat;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
#fast_links:hover
{
  margin-left: -10px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
#fast_links_contenu
{
  margin-top: 25px;
  margin-left: 25px;
}
.fast_link
{
  display: block;
  width: 200px;
  padding: 4px;
  background-color: #ebe4d0;
  font-weight: bold;
  border-left: 2px solid #a1883a;
  border-right: 2px solid #a1883a;
  text-align: center;
  font-size: 12px;
  text-shadow: 1px 1px 0px #ffffff;
}
.fast_link:hover
{
  background-color: #f8f6f0;
  border-left: 2px solid #f5d553;
  border-right: 2px solid #f5d553;
}


Informations : merci de changer l'image de fond, celle-ci étant utilisée sur un forum. Réalisez une image de même taille avec une illustration sur la droite pour faire l'onglet d'ouverture.


Validez votre css, adaptez au besoin les tailles/placement du bloc, ainsi que la mise en forme des liens normaux et survolés à votre goût.


II/ Les Ancres de base et liens simples

Il y a deux types de lien que vous pouvez mettre très facilement :

▬ les ancres de base qui ont pour adresse "#top" et "#bottom" mèneront en haut et en bas de votre forum. Elles sont déjà placées sur le template donc pas besoin de la toucher si vous les voulez. Vous pouvez les remplacer par des flèches si vous le souhaitez.

▬ les liens simples : c'est tout simplement les liens vers votre règlement, les présentations des membres, ou tout topic important de votre forum.

Conseil : changer ces liens signifie être sur le compte fondateur et aller dans le template, ce qui est donc fatalement plus compliqué de l'aller juste dans la PA. Du coup, il n'est pas réellement conseillé de mettre des liens que vous savez devoir changer à court terme, comme des concours, ou des événements ponctuels. Il est préférable d'afficher des liens génériques qui n'auront pas à être modifiés trop souvent. Après, c'est à votre choix x)


Ces deux types de liens sont très simples à mettre et ne demandent pas d'autres modification, je vous laisse donc les ajouter tranquillement. Pour cela bien sûr il faut retourner éditer le template overall_header en modifiant/ajoutant vos liens.


III/ Les Ancres crées

Bon, stop, un petit point de codage avant tout, pour les curieux ou simplement ceux qui ne veulent pas copier bêtement du code :
Qu'est-ce qu'une ancre ? C'est un point que l'un crée sur une page, sous forme d'un lien qui n'en est pas vraiment un (le texte ne peut mener à rien) et qui par la suite va nous permettre de créer un autre lien qui nous mènera vers ce point. C'est pas clair ? En gros si sur une même page vous avez un pavé de dix paragraphe, vous pouvez mettre une ancre à chaque titre de paragraphe, puis créer une navigation en haut de page dans laquelle chaque lien mènera à l'un des titres de paragraphe. Concrètement, on ne change pas de page, il s'agit d'un lien menant vers un élément de la page.


Vous l'aurez compris, il ne suffit pas de mettre un lien, il faut d'abord créer l'ancre elle-même. Pour cela, vous allez devoir vous rendre dans vos titres de catégorie. Pour plus de simplicité, on mettra les ancres sur les titres de catégorie car elles ne modifient pas ce titre, ça ne gêne rien.
▬ Allez donc dans votre titre de catégorie (celui que vous voulez placer en ancre), et affichez-le comme ceci :

Code:
<a name="ancre1">Votre 1ère catégorie</a>


"Votre 1ière catégorie" = le titre normal de votre catégorie.

Une fois fait, allez dans votre template overall_header et placez votre ancre en guise de lien comme ceci :

Code:
<a href="#ancre1" class="fast_link">Ancre simple</a>


Ce code est déjà présent puisque c'est mon exemple, mais veillez à ce que votre nom d'ancre soit le même ! Ici pour moi "ancre1" doit se retrouver aux deux endroits : dans le titre de catégorie ET dans le lien de la navigation.

Testez : le fait de cliquer sur ce lien dans la navigation amène à la catégorie voulue.


IV/ Les Ancres crées avec changement de page

Vous constaterez que ces ancres là ne fonctionnent que si vous êtes sur la page d'accueil, sans quoi ça vous ramène en haut du premier message par exemple, mais c'est tout. Si vous voulez que même ailleurs sur le forum ce lien vous ramène à la première page en vous centrant sur la catégorie choisie, il faut procéder autrement :
▬ le début reste le même, l'ancre a été placée, elle ne change pas.
▬ le lien à mettre dans la navigation doit comporter la page d'accueil de votre forum + l'ancre, comme ceci :

Code:
<a href="http://jesuisunelegende.forumactif.com/#ancre2" class="fast_link">Ancre avec changement de page</a>


Là aussi le code était déjà présent dans mon exemple. Vous pourrez essayer d'aller à l'intérieur du forum, au milieu d'un sujet et cliquer sur ce lien de la navigation rapide, il vous remettra sur la première page du forum sur la catégorie choisie.

D'autres ancres ? Plein d'ancres ?? Yep ! Vous pouvez en faire autant que voulu, sur toutes vos catégories, le tout est que chaque duo "ancre"/"lien d'ancre" aient le même nom ! Dans mon cas "ancre1, ancre2, etc... J'ai fait simple x), mais ça peut être vos noms de catégorie ou autre chose.
Il est cependant VITAL que ce nom ne comporte ni espace ni caractère spéciaux !



En cas d'utilisation de ce tutoriel, merci de mettre sur votre forum un CREDIT pour Never-Utopia. Ce geste de remerciement simple nous permet de "vivre" et de pouvoir vous apporter toujours plus d'aide ! Merci d'avance !


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Okhmhaka

Zen Rice - Mer 13 Juin 2012 - 16:28





"Prénom"
&
"Prénom"

© Never-Utopia


Code:
<table style=" width: 400px; margin: auto;"><tr><td><span style="display: block; width: 100px; height: 100px; background: url(http://49.img.v4.skyrock.net/49e/liseuse-en-book/pics/photo_58522173_avatar_31.jpg) center center; border: 5px solid #2d452e; -moz-border-radius-topleft: 100px; -moz-border-radius-bottomright: 100px; margin: 5px;"></span></td>
<td><span style="display: block; width: 200px; font-family: trebuchet; font-weight: bold; font-size: 26px; line-height: 14px; color: #6c976e; text-shadow: 1px 1px 0px #2d452e; text-align: center; letter-spacing: 2px; border-bottom: 6px dotted #6c976e; padding-bottom: 40px;">"Prénom"
&
"Prénom"</span></td>
<td><span style="display: block; width: 100px; height: 100px; background: url(http://h2.mabellephoto.com/time-is-runnig-out-scenes-de-vie-8d6041C100.jpg) center center; border: 5px solid #2d452e; -moz-border-radius-topright: 100px; -moz-border-radius-bottomleft: 100px; margin: 5px;"></span></td></tr></table>
<a style="display: block; text-align: center; color: #5c8d5b; font-size: 10px; font-family: arial narrow; letter-spacing: 2px; margin-top: -30px; border: none;" href="http://www.never-utopia.com">© Never-Utopia</a>

Okhmhaka

Ocean - Mer 13 Juin 2012 - 16:27



"Titre du topic"






&

© Never-Utopia

Code:
<span style="display: block; border-bottom: 10px solid #2e4c6a; width: 100%; height: 20px; font-family: arial black; font-size: 20px; letter-spacing: 2px; text-align: center; color: #91b3d5; text-shadow: 2px 2px 0px #2e4c6a;">"Titre du topic"</span>
<span style="display: block; border-bottom: 6px solid #2e4c6a; width: 100%; height: 2px; margin-top: -15px;"></span>
<span style="display: block; border-bottom: 3px solid #2e4c6a; width: 100%; height: 2px; margin-top: -15px;"></span>
<span style="display: block; border-bottom: 1px solid #2e4c6a; width: 100%; height: 2px; margin-top: -15px;"></span>
<table style="width: 300px; margin-left: auto; margin-right: auto; margin-top: -70px;"><tr><td><span style="display: block; width: 100px; height: 100px; border: 1px solid #91b3d5; background: url(http://49.img.v4.skyrock.net/49e/liseuse-en-book/pics/photo_58522173_avatar_31.jpg) center center;"></span></td>
<td><span style="dislay: block; text-align: center; font-size: 46px; font-family: arial black; color: #91b3d5;">&</span></td>
<td><span style="display: block; width: 100px; height: 100px; border: 1px solid #91b3d5; background: url(http://32.mgl.skyrock.net/blog/vig/time-t0-live.68288732.2738672534.1.jpg) center center;"></span></td>
</tr></table>
<a style="display: block; text-align: center; color: #35436b; font-size: 10px; font-family: arial narrow; letter-spacing: 2px; margin-top: -20px; border: none;" href="http://www.never-utopia.com">© Never-Utopia</a>

Okhmhaka

Dual curve - Mer 13 Juin 2012 - 16:13






Prénom & Prénom
© Never-Utopia

Code:
<span style="display: block; width: 100%; border-bottom: 4px dotted #b69276; margin-top: 100px; margin-bottom: -100px;"></span>
<table style="width: 200px; margin: auto;"><tr><td><span style="display: block; width: 100px; height: 100px; background: url(http://49.img.v4.skyrock.net/49e/liseuse-en-book/pics/photo_58522173_avatar_31.jpg) center center; border: 5px solid #712a2a; -moz-border-radius: 100px; border-radius: 100px; -o-border-radius: 100px; -htm-border-radius: 100px; -webkit-border-radius: 100px; margin: 10px;"></span></td>
<td><span style="display: block; width: 100px; height: 100px; background: url(http://h2.mabellephoto.com/time-is-runnig-out-scenes-de-vie-8d6041C100.jpg) center center; border: 5px solid #712a2a; -moz-border-radius: 100px; border-radius: 100px; -o-border-radius: 100px; -htm-border-radius: 100px; -webkit-border-radius: 100px; margin: 10px;"></span></td></tr></table>
<span style="display: block; width: 400px; text-align: center; margin-left: auto; margin-right: auto; margin-top: -45px; font-size: 22px; font-weight: bold; letter-spacing: 4px; font-family: georgia; color: #ffffff; text-shadow: 0px 0px 5px #532f12;">Prénom & Prénom</span>
<a style="display: block; text-align: center; color: #746152; font-size: 10px; font-family: arial narrow; letter-spacing: 2px; margin-top: -10px; border: none;" href="http://www.never-utopia.com">© Never-Utopia</a>

Barre de navigation en haut du forum (fixe ou non) - Lun 20 Fév 2012 - 12:34



Bonjour, bonsoir

Aperçu de la barre : lien forum test


Pour réaliser une barre de navigation collé à votre haut de page et qui reste en place même en scrollant l'écran, voici comment vous devez procéder :

1) Allez dans les templates (je rappelle qu'elles ne sont disponibles que dans les versions phpbb2 et punbb, et seulement par le compte fondateur du forum concerné), dans "Général" > "Haut de page" (ou "overall_header").

Vous devez modifier deux choses : la première consiste à enlever la barre de navigation du forum, il faut donc enlever ce morceau de code :

Code:
            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>


La seconde consiste à mettre ce code là où on veut que soit notre barre, à savoir tout en haut de la page, pour cela je l'ajoute juste après la balise "body" du template donc après ceci :


Code:
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


J'ajoute ma barre :

Code:
<div id="navigation"><div id="navig">{GENERATED_NAV_BAR}</div></div>



Pour les flemmards, voici le code entier de la template modifié :

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']);

    (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>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   
 
 
  <div id="navigation"><div id="navig">{GENERATED_NAV_BAR}</div></div>
 
 
 
 
 
 
  <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/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 -->


Si vous validez et regardez le résultat, vous verrez que la barre est bien en haut, mais qu'elle est alignée à gauche, sans fond, et pas fixe. C'est toute cette mise en forme que nous allons mettre dans la prochaine étape.


2) Ouvrez votre feuille CSS (Affichage > Couleurs > CSS) et personnalisez à volonté votre barre. Pour la centrer, mettez dans votre css ceci :

Code:
#navig
{
  width: 950px;
  margin: auto;
  text-align: center;
}


Explications :
▬ le width c'est la largeur, vous devez imposer une largeur pour pouvoir faire un "centrage" automatique sur la page
▬ le margin: auto c'est le centrage automatique de votre bloc par rapport à la page.
▬ le text-align: center sert à centrer le texte, sans cela le bloc est centré mais le texte reste aligné à gauche par défaut. Si vous voulez que votre navig' soit à droite, mettez "right" à la place.


Si vous voulez que la barre de navigation ne soit pas fixée directement au haut de la page, passez à l'étape 3 et ne mettez pas de "position: fixed;".

Pour fixer notre barre, nous allons simplement ajouter une ligne de code :

Code:
#navigation
{
  position: fixed;
z-index: 999;
}


Pourquoi le "z-index: 999" ? Cela indique que l'élément doit passer par dessus tout le reste niveau positionnement. Ainsi, en scrollant vous n'aurez jamais aucune image ou aucun bloc qui cache la navigation.

Attention, comme vous pouvez le remarquer je n'ai pas agis sur le même "bloc". Le bloc "navigation" englobe tout, et le bloc "navig" ne concerne que l'intérieur (liens). Pourquoi m'embêter à cela ? Et bien pour réaliser la troisième et dernière étape.


3) Pour faire en sorte que la barre prenne toute la largeur et puisse avoir les couleurs que vous voulez, vous allez devoir mettre en forme le bloc "navigation".


Code:
#navigation
{
  position: fixed;
  z-index: 999;
  width: 100%;
  background-color: #cecece;
  border-bottom: 2px solid #828282;
  margin-top: -10px;
  margin-left: -10px;
  padding: 5px;
}


Donc les premières lignes vous connaissez, elles ont été expliquées plus haut.
▬ le width: 100% permet d'avoir la largeur de la page.
▬ le background donne une couleur de fond, le border-bottom une bordure basse.
▬ les margin recalent la barre (car il y a des espaces, souvent dus aux codes FA de base)
▬ le padding met une marge intérieure.

Les codes sont à adapter selon vos envies et vos besoin. Les liens sont bien sûr personnalisables à souhaits, pour cela ajouter dans votre css :

Code:
#navig a
{

}


Et à l'intérieur les propriétés CSS que vous voulez pour vos liens.


N'oubliez pas un petit crédit à Never-Utopia, merci d'avance.

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Okhmhaka

[phpBB2] Supprimer toutes les vilaines bordures de titre - Lun 26 Juil 2010 - 11:06


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


On se demande toujours à quoi elles servent, car avec nos personnalisations ces bordures nous empoisonnent la vie sans rien apporter... Alors certes, on pourrait tout simplement en changer la couleur, mettre des bordures en pointillées... mais pour le coup je vous laisserai faire du zèle tout seul en bidouillant les codes Razz

Voici donc dans un premier temps le code complet (me semble-t-il) permettant d'enlever toutes les bordures des barres de titres (qu'elles soient en bas, en haut, ou sur les côtés), y compris dans le portail ou les pages FAQ ou Membres.

Code:
.catHead, .catBottom, .catLeft, .catRight, .thLeft, .thRight,
.thSides, .thCornerL, .thCornerR, .thTop, .thHead, .row3Right
{
border: none !important;
}

Rollover sur la navigation [simple - toute version de forum] - Jeu 22 Juil 2010 - 18:15



Salut à tous !

Voici une méthode déjà connue mais bien pratique pour afficher une barre de navigation en rollover (avec image changeant au survol de la souris donc) très simplement, sans toucher aux templates, juste en modifiant le CSS de votre forum.
Cette astuce a le gros avantage de fonctionner sur toutes les versions de forum (du moins celles sorties pour le moment^^), ainsi que de pouvoir d'appliquer aux boutons de base et donc d'avoir le changement d'image pour les nouveaux MP par exemple^^

Principe :
Nous allons mettre les images directement via le css et afficher une image différente pour le lien "neutre" et le lien survolé.

• Commencez par enlever toutes les images de votre barre de navigation et allez dans :
Affichage > Page d'accueil > En-tête & navigation
Et sélectionnez "oui" dans "Afficher seulement des images dans la barre de navigation".

• Allez ensuite dans votre feuille CSS de forum (je rappelle qu'elle se situe dans "Affichage" > "Couleur" Onglet "Feuille CSS"). Je vous donne l'exemple pour le bouton "Accueil" (l'index, selon vos appellations) :

Code:
#i_icon_mini_index
{
background-image: url(adresse de l'image);
width: 80px;
height: 30px;
}
#i_icon_mini_index:hover
{
background-image: url(adresse de l'image);
}


Je vous explique ce que signifie ce code :
- l'information avec # c'est le nom du bouton accueil, pour résumer, les informations entre {} sont donc interprétées comme s'appliquant forcément à ce bouton là et pas un autre.
- le "background-image" c'est simplement l'image de fond du lien (rassurez-vous, le lien sera toujours là^^). Il vous faudra donc héberger l'image voulue et mettre l'adresse entre les parenthèses.
- width : c'est la largeur de l'emplacement de l'image, autrement dit celle de l'image elle-même.
- height : c'est la hauteur de l'image.
- la seconde partie avec le nom de la zone # suivie de "hover" désigne la même zone une fois survolée, il vous faut donc mettre dans "background-image" l'adresse de l'image devant apparaitre lorsque l'on passe sur le lien avec la souris.
Remarque : il n'est pas nécessaire de remettre la taille pour le "hover".

• Normalement, vous devez avoir votre bouton "Accueil" placé. Il s'agit maintenant de faire la même chose avec tout les autres ! Je vous donne simplement le nom de la "division" (zone de chaque bouton), à vous de refaire pareil que précédemment avec les images correspondantes.

Code:
Accueil : #i_icon_mini_index / #i_icon_mini_index:hover
Portail : #i_icon_mini_portal / #i_icon_mini_portal:hover
Galerie : #i_icon_mini_gallery / #i_icon_mini_gallery:hover
Calendrier : #i_icon_mini_calendar / #i_icon_mini_calendar:hover
FAQ : #i_icon_mini_faq / #i_icon_mini_faq:hover
Rechercher : #i_icon_mini_search / #i_icon_mini_search:hover
Membres : #i_icon_mini_members / #i_icon_mini_members:hover
Groupes : #i_icon_mini_groups / #i_icon_mini_groups:hover
Profil : #i_icon_mini_profile / #i_icon_mini_profile:hover
Message privé : #i_icon_mini_message / #i_icon_mini_message:hover
Nouveau message privé : #i_icon_mini_new_message / #i_icon_mini_new_message:hover
Se déconnecter : #i_icon_mini_logout / #i_icon_mini_logout:hover
S'enregistrer : #i_icon_mini_register / #i_icon_mini_register:hover
Se connecter : #i_icon_mini_login / #i_icon_mini_login:hover


En espérant que ce code vous serve !

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Okhmhaka

Changer l'opacité d'une image ou d'un bloc (+ survol) - Mer 19 Mai 2010 - 11:42


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


Yop yop^^

Voici un code relativement simple permettant d'avoir une image à opacité réduite qui devient "normale" au survol de la souris.

Exemple :
texte alternatif de l'image



Ce code est fait pour être efficace sous tout les navigateurs.
De plus, bien que je vous montrerai comment faire pour une image, vous pouvez faire la même chose pour tous les types de balises, que ce soit des bloc (div), des paragraphes (p), du texte simple (span), etc.



Commencez par mettre une "class" (sorte de marqueur permettant d'attribuer à tout les éléments comportant ce marqueur un effet CSS) à votre image en l'affichant. Pour cela affichez-la normalement :
Code:
<img src="lienimage.jpg" alt="texte alternatif de l'image" title="texte de l'image" />


Rappel :
le "alt" : est le texte qui s'affiche en cas de problème d'hébergeur si l'image, elle, ne s'affiche pas.
le "title" : est le texte qui s'affiche dans un cadre jaune si vous laissez votre souris sur l'image.
Tant que possible, essayez toujours d'avoir les deux dans votre image, surtout le "alt", afin d'être conforme avec les normes du codage.



Ajoutez dans votre code d'image le fameux marqueur en mettant une "class" :
Code:
<img src="lienimage.jpg" alt="texte alternatif de l'image" title="texte de l'image" class="exemple" />



Vous ne verrez aucun changement, c'est normal, il faut attribuer les valeurs voulues dans le code CSS. Le code suivant est donc à mettre dans "Panneau d'admin > Affichage > Couleurs > Feuille CSS".
Code:
.exemple {
opacity: 0.5;
}

.exemple:hover {
opacity: 1;
}


La première partie du code s'applique sur l'image directement, elle baisse l'opacité de moitié. Vous pouvez bien entendu adapter ces valeurs en mettant à la place de 0.5 > 0.2 (opacité plus basse encore) ou bien 0.7 (opacité plus haute).
La seconde partie s'applique à l'image lorsqu'elle est survolée. J'ai donc remis la valeur maximale pour que l'opacité soit "normale".


Attention : si vous voulez changer le mot "exemple" par celui e votre choix, il faut le changer à la fois dans la "class" de l'image ET dans les deux parties du CSS !


Remarque : l'image en exemple ne comporte pas de lien, c'est une image simple, pour mettre un lien, il vous suffit d'ajouter de part et d'autre de l'adresse de l'image le code de lien normal :

Code:
<a href="adresse"><img src="lienimage.jpg" alt="texte alternatif de l'image" title="texte de l'image" class="exemple" /></a>



Ajout Responsable (Onyx) :

Si vous voulez que le changement d'opacité se fasse progressivement (en transition), il suffit de modifier votre CSS comme cela, soit de rajouter la transition :
Code:
.exemple {
opacity: 0.5;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.exemple:hover {
opacity: 1;
}


Le "transition" sert à indiquer que l'effet se déroulera en 0.5 seconde. Vous pouvez mettre le délai que vous souhaitez, de 0s (instantanné) à n'importe quel autre chiffe (même 1000 secondes si vous voulez).


Voilà c'est tout !

Okhmhaka

Faire un sélecteur de thème - Mer 9 Sep 2009 - 11:48



Salut salut,

À force de subir les demandes, je vous donne une fois pour toutes le code qui m'a servit à faire le Sélecteur de Thème, en vous expliquant en deux mots comment l'utiliser.

Tout d'abord, vous devez vous rendre dans votre template Overhall_Header et vous trouvez ceci :
Code:
</head>


Juste avant, vous mettez le javascript qui fait fonctionner le code :
Code:
  <script type="text/javascript">
    //<![CDATA[
      var scheme = getCookie('template1');
   
   
      if (scheme == 'NOM THÈME #1') {
        document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #1" />');
      }
      else if (scheme == 'NOM THÈME #2') {
        document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #2" />');
      }
      else if (scheme == 'NOM THÈME #3') {
        document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #3" />');
      }
   
   
      function changeskin(change) {
        var scheme = change;
        var name = 'template1';
        var pathname = location.pathname;
        var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
        var ExpDate = new Date ();
        ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
        setCookie(name,scheme,ExpDate,myDomain);
      }
   
      function getCookie(name) {
        var cname = name + "=";
        var dc = document.cookie;
        if (dc.length > 0) {
          begin = dc.indexOf(cname);
          if (begin != -1) {
            begin += cname.length;
            end = dc.indexOf(";", begin);
            if (end == -1) end = dc.length;
              return unescape(dc.substring(begin, end));
            }
          }
        return null;
      }
             
      function setCookie(name, value, expires, path, domain, secure) {
        document.cookie = name + "=" + escape(value) +
        ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
        ((path == null) ? "" : "; path=" + path) +
        ((domain == null) ? "" : "; domain=" + domain) +
        ((secure == null) ? "" : "; secure");
      }
    //]]>
  </script>



Ensuite, vous allez où vous voulez que le sélecteur soit et vous mettez le sélecteur lui-même :
Code:
        <div id="skinselector" style="margin: auto; text-align: center;">
            <form style="margin: auto; text-align: center;">
                <select onchange="changeskin(this.options[this.selectedIndex].value); window.location.reload();">
                    <option> Choisir un thème </option>
                    <option value="NOM THÈME #1"> NOM THÈME #1 </option>
                    <option value="NOM THÈME #2"> NOM THÈME #2 </option>
                    <option value="NOM THÈME #3"> NOM THÈME #3 </option>
                </select>
            </form>
        </div>


Par exemple, disons que vous voulez que le sélecteur soit directement après la navigation, vous allez dans le template "Overhall_Header" et placez le code après :
Code:
            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>



Utilisation :

Vous l'avez donc compris, il faut utiliser UNIQUEMENT les feuilles CSS pour donner au forum son skin, c'est là que réside la difficulté de la tâche, car mettre un code en copier coller c'est facile, mais convertir un design normalement "automatique" en CSS c'est déjà plus difficile.

Pour créer une feuille de CSS, vous pouvez vous ouvrir un bloc-note tout ce qu'il y a de plus normal et y écrire votre CSS. Puis, lorsque vous le sauvegardez, vous écrivez ".css" à la place de ".txt" comme extension.

Une fois que vous avez fait vos différentes feuilles CSS, il faut les héberger. Pour cela, utilisez par exemple Archive-Host.

Enfin, une fois les feuille de CSS hébergées, vous prenez le lien donné et vous pouvez le mettre dans le code du sélecteur de thème.
Les informations à modifier sont en majuscules dans le code (celui du javascript ET celui du sélecteur lui-même), donc vous ne pouvez pas les manquer Wink

C'est tout, bonne journée !

Okhmhaka

[Forum] Opacité réduite ou Transparence (phpBB2) - Mer 2 Sep 2009 - 22:06


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


Bonjour !

Un titre explicite aurait demandé d'avantage de place... donc je m'explique :
Je vais vous donner une astuce pour mettre l'intérieur du forum en transparence, ou bien en "opacité réduite".

Vous allez aller dans :

PA > Affichage > Images & Couleurs > Couleurs > Feuille CSS

... et inclure le code suivant :

Code:
.forumline
{background-color: transparent;
background-image: url(adresse de l'image de fond);
background-repeat: repeat;
}


Remarque :
Si vous souhaitez que votre fond se répète seulement sur la largeur, mettez "repeat-x" à la place de "repeat", et si vous voulez qu'il se répète qu'en hauteur mettez "repeat-y".


N'oubliez pas également d'effacer les codes couleurs présents dans votre palette de couleur du forum.


Il s'agit ensuite de mettre une image de fond en PNG dans l'emplacement de l'image de fond, que vous aurez préalablement fait sous photoshop. Cette petite image se répètera dans votre forum sous les catégories. Comme je suis gentil, je vous ai fait déjà quelques images Razz
Voici donc un pack contenant des images de diverses couleur et de diverses opacités.

Détail :
- le nom des fichiers indique la couleur + opacité (exemple : vert25 = fond vert d'opacité 25%)
- couleurs présentes : blanc, noir, bleu, orange, rouge, vert, violet + transparent
- opacités : 25%, 50%, 75% pour chaque

Télécharger le pack : Cliquez ici !

Dans le même principe, vous pouvez mettre une image de fond de votre choix !

Okhmhaka

Un "Footer" (img bas de page) sur votre Forum - Mer 2 Sep 2009 - 21:28



La question revenant relativement souvent, j'explique ici comment placer une image de bas de page sur vos forum.

Allez dans le panneau > Affichage > Templates > "overall_footer_end"

Vous devez placer le code suivant (donnez à l'id le nom que vous voulez) :
Code:
<div id="newbottom">
</div>


Juste avant ce bout de code :
Code:
<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
</html>


(à la fin du templates donc.)


Une fois que vous avez cela, rien n'apparaitra sur votre forum, normal, vous avez juste signalé une division dans cet endroit, à vous de lui donner la forme voulue (taille, fond, etc...).
Pour cela, il vous faut aller dans :
Affichage > Image & Couleurs > Couleurs > Feuille CSS


Puisque vous avez crée une "div" avec un "id", il vous faudra commencer votre code par "#".
Code:
#newbottom
{
clear: both;
margin: auto;
width: 100%;
background-image: url(http://host.image.files.free.fr/host/4a04c4821c594back-bottom.png);
background-repeat: no-repeat;
background-position: center;
height: 500px;
}


Explications :
clear: both => enlève de manière sûre les mises en forme de division précédentes (surtout lorsqu'il y a des "float" (flottement) à droite ou à gauche).
margin: auto : centre l'image si elle ne fait pas toute la largeur
width: 100% : largeur du bloc, si l'image ne prend pas toute la largeur, vous pouvez diminuez le width en % ou mettre une largeur en px.
background-image : c'est l'adresse de votre image de fond
background-repeat : la répétition du fond, ici elle ne se répètera pas, si vous voulez qu'elle se répète enlevez simplement la ligne, mais pour une image de pied de page c'est assez rare...
background-position: la position du fond, ici au centre
height: sa hauteur en pixel, ici 500px car j'ai pris en exemple les codes de N-U pour le thème actuel


Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


Revenir en haut

La date/heure actuelle est Sam 21 Sep 2019 - 19:06