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.



21 résultats trouvés pour position_fixe

Shoki

Menu latéral fixe [PhPBB2 - PhPBB3] - Jeu 30 Juin 2016 - 9:44



Hello !
Pour mon premier LS ici (oui, j'en fait peu, je ne partage que trèèèès rarement mes codes oui je suis radine Cool), j'ai décidé de frapper fort en vous codant un panneau latéral gris fixe ! Je recommande plutôt Mozilla Firefox pour l'utiliser, mais il fonctionne sous Chrome et Internet Explorer/Microsoft Edge (même si il y a un pas élégant espace). Et pour me faire pardonner de ce petit imprévu, ce code est adapté pour 2 versions de forums (Je suis trop forte je sais huhu) Cool.

   
Pour PhPBB2 et PhPBB3
Aperçu sous Mozilla Firefox : www (le fond rouge correspond à mon forum-test)
Aperçu sous Chrome & IE : www
En action


Les codes


Le CSS est à mettre dans Affichage > Couleurs > Feuille de style CSS
Vous devez avoir accès au compte fondateur pour pour accéder aux templates
Votre forum doit faire grand maximum 800 pixels de largeur

PhPBB2


CSS
Code:
/******************************************************
MENU LATERAL BY MV/SHOKI [BEGIN]
******************************************************/
#panneau_lat {
 position: fixed;
 top: 0;
 left: 0;
 width: 185px;
 height: 100%;
 background: grey;
 z-index: 200;
 padding: 5px;
 font-family: 'Verdana', sans-serif;
}
#panneau_lat h2 {
 font-size: 19pt;
 font-family: 'Georgia', serif;
 text-align: center;
 color: #FFF;
 margin-bottom: 3px;
 margin-top: 1px;
 font-variant: small-caps;
}
#panneau_lat h3 {
 font-size: 15pt;
 text-align: center;
 color: #FFF;
 margin-bottom: 0px;
 margin-top: 10px;
 font-variant: small-caps;
 font-family: 'Georgia', serif;
}
#panneau_lat a { color: #ccc !important; }
#panneau_lat a:hover { color: #999 !important; }
.pres_rapide {
 text-align: center;
 font-variant: small-caps;
 font-family: 'Georgia', serif;
 font-size: 11px;
 color: #FFF;
}
.recherche {
 text-align: center;
 font-family: 'Georgia', serif;
 color: #FFF;
 font-size: 13px;
 font-variant: small-caps;
 margin-top: 3px;
}
.boite {
 width: 175px;
 height: 120px;
 background: #ccc;
 overflow: auto;
 margin: auto;
 padding: 5px;
 font-size: 12px;
 text-align: justify;
}
.membre_mois {
 display: inline-block;
 width: 85px;
 height: 60px;
 background: #ccc;
 border: 1px solid orange;
 margin-left: 4px;
 overflow: hidden;
}
.member_des {
 width: 85px;
 height: 60px;
 overflow: auto;
 text-align: center;
 font-family: 'Georgia', serif;
 background: rgba(250, 250, 250, 0.6);
}
.membre_mois img {
 width: 85px;
 height: 60px;
 overflow: hidden;
 margin-top: -60px;
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 1;
 visibility: visible;
}
.membre_mois:hover img {
 opacity: 0;
 visibility: hidden;
}
.util_link {
 text-align: center;
 font-family: 'Georgia', serif;
 color: #FFF;
 font-variant: small-caps;
 font-size: 15px;
}
.util_link a {
 color: #ccc !important;
 text-decoration: none !important;
 letter-spacing: 0;
 -webkit-transition: all 800ms;
 transition: all 800ms;
}
.util_link a:hover {
 letter-spacing: 2px;
 text-decoration: none !important;
}
.credits_pann {
 font-size: 10px;
 color: #FFF;
 text-align: center;
 font-variant: small-caps;
 font-family: 'Georgia', serif;
 margin-top: 5px;
}
/******************************************************
MENU LATERAL BY MV/SHOKI [END]
******************************************************/


HTML
Vous voulez que le menu s'affiche sur toutes les pages de votre forum

Dans le template overall_header (Affichage > Templates > Général) repérez ceci :
Code:
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Après ces deux lignes, intégrez ce code :
Code:
<!-- Menu latéral by MV/Shoki [BEGIN] -->
<div id="panneau_lat">
  <h2>Bienvenue</h2>
  <div class="pres_rapide">Intégrer ici une courte prez' du fofo (âge limite, type de forum...)</div>
    <h3>Liens utiles</h3>
    <div class="util_link">
      <a href="mon_lien">x Règlement</a><br />
      <a href="mon_lien">x Contexte</a><br />
      <a href="mon_lien">x Annexes</a><br />
      <a href="mon_lien">x FAQ</a><br />
      <a href="mon_lien">x Défis</a><br />
      <a href="mon_lien">x Annonces</a><br />
      <a href="mon_lien">x Partenariats</a>
    </div>
    <h3>Effectifs</h3>
    <div class="recherche">
      Groupe 1 x ... membre(s)<br />
      Groupe 2 x ... membre(s)<br />
      Groupe 3 x ... membre(s)<br />
      Groupe 4 x ... membre(s)</div>
    <h3>Rumeurs</h3>
    <div class="boite">Cette boîte peut servir à mettre des rumeurs, des nouvelles, expliquer une situation IRP...
      <br />La partie "membre du mois" peut être remplacée par "membres du staff" o/</div>
    <h3>Membres du mois</h3>
    <div class="membre_mois"><div class="member_des">NOM<br />
      <span style="font-size: 12px;"><a href="mon_lien">Profil</a></span><br />
      <span style="font-size: 12px;"><a href="mon_lien">Fiche</a></span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
    <div class="membre_mois"><div class="member_des">NOM²<br />
      <span style="font-size: 12px;"><a href="mon_lien">Profil²</a></span><br />
      <span style="font-size: 12px;"><a href="mon_lien">Fiche²</a></span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
    <div class="credits_pann">Code par MV/Shoki - <a href="http://www.never-utopia.com/" target="_blank">Never Utopia</a></div>
  </div>
<!-- Menu latéral by MV/Shoki [END] -->



Vous voulez que le menu ne s'affiche que sur l'index

Dans ce cas, allez dans le template index_body (Affichage > Templates > Général) et juste après
Code:
{JAVASCRIPT}

Mettez le code fourni un peu plus haut.

PhPBB3


CSS
Code:
/******************************************************
MENU LATERAL BY MV/SHOKI [BEGIN]
******************************************************/
#panneau_lat {
  position: fixed;
  top: 0;
  left: 0;
  width: 185px;
  height: 100%;
  background: grey;
  z-index: 200;
  padding: 5px;
  font-family: 'Verdana', sans-serif;
}
#panneau_lat h1 {
  font-size: 19pt;
  font-family: 'Georgia', serif;
  text-align: center;
  color: #FFF;
  margin-bottom: 3px;
  margin-top: 1px;
  font-variant: small-caps;
  border: 0 !important;
}
#panneau_lat h4 {
  font-size: 15pt;
  text-align: center;
  color: #FFF;
  margin-bottom: -1px;
  margin-top: 10px;
  font-variant: small-caps;
  font-family: 'Georgia', serif;
  border: 0 !important;
}
#panneau_lat a { color: #ccc !important; }
#panneau_lat a:hover { color: #999 !important; }
.pres_rapide {
  text-align: center;
  font-variant: small-caps;
  font-family: 'Georgia', serif;
  font-size: 11px;
  color: #FFF;
}
.recherche {
  text-align: center;
  font-family: 'Georgia', serif;
  color: #FFF;
  font-size: 13px;
  font-variant: small-caps;
  margin-top: 3px;
}
.boite {
  width: 175px;
  height: 120px;
  background: #ccc;
  overflow: auto;
  margin: auto;
  padding: 5px;
  font-size: 12px;
  text-align: justify;
}
.membre_mois {
  display: inline-block;
  width: 85px;
  height: 60px;
  background: #ccc;
  border: 1px solid orange;
  margin-left: 4px;
  overflow: hidden;
}
.member_des {
  width: 85px;
  height: 60px;
  overflow: auto;
  text-align: center;
  font-family: 'Georgia', serif;
  background: rgba(250, 250, 250, 0.6);
}
.membre_mois img {
  width: 85px;
  height: 60px;
  overflow: hidden;
  margin-top: -60px;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 1;
  visibility: visible;
}
.membre_mois:hover img {
  opacity: 0;
  visibility: hidden;
}
.util_link {
  text-align: center;
  font-family: 'Georgia', serif;
  color: #FFF;
  font-variant: small-caps;
  font-size: 15px;
}
.util_link a {
  color: #ccc !important;
  letter-spacing: 0;
  -webkit-transition: all 800ms;
  transition: all 800ms;
}
.util_link a:hover {
  letter-spacing: 2px;
}
.credits_pann {
  font-size: 10px;
  color: #FFF;
  text-align: center;
  font-variant: small-caps;
  font-family: 'Georgia', serif;
  margin-top: 5px;
}
/******************************************************
MENU LATERAL BY MV/SHOKI [END]
******************************************************/


HTML

Vous voulez que le menu s'affiche sur toutes les pages de votre forum

Dans le template overall_header (Affichage > Template > Général), repérez
Code:
</head>
<body id="phpbb">


Après ces deux lignes, intégrer le code qui suit
Code:
<!-- Menu latéral by MV/Shoki [BEGIN] -->
<div id="panneau_lat">
  <h1>Bienvenue</h1>
  <div class="pres_rapide">Intégrer ici une courte prez' du fofo (âge limite, type de forum...)</div>
    <h4>Liens utiles</h4>
    <div class="util_link">
      <a href="mon_lien">x Règlement</a><br />
      <a href="mon_lien">x Contexte</a><br />
      <a href="mon_lien">x Annexes</a><br />
      <a href="mon_lien">x FAQ</a><br />
      <a href="mon_lien">x Défis</a><br />
      <a href="mon_lien">x Annonces</a><br />
      <a href="mon_lien">x Partenariats</a>
    </div>
    <h4>Effectifs</h4>
    <div class="recherche">
      Groupe 1 x ... membre(s)<br />
      Groupe 2 x ... membre(s)<br />
      Groupe 3 x ... membre(s)<br />
      Groupe 4 x ... membre(s)</div>
    <h4>Rumeurs</h4>
    <div class="boite">Cette boîte peut servir à mettre des rumeurs, des nouvelles, expliquer une situation IRP...
      <br />La partie "membre du mois" peut être remplacée par "membres du staff" o/</div>
    <h4>Membres du mois</h4>
    <div class="membre_mois"><div class="member_des">NOM<br />
      <span style="font-size: 12px;">Profil</span><br />
      <span style="font-size: 12px;">Fiche</span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
    <div class="membre_mois"><div class="member_des">NOM²<br />
      <span style="font-size: 12px;">Profil²</span><br />
      <span style="font-size: 12px;">Fiche²</span></div><img src="http://zupimages.net/up/16/26/ft49.png" /></div>
    <div class="credits_pann">Code par MV/Shoki - <a href="http://www.never-utopia.com/" target="_blank">Never Utopia</a></div>
  </div>
<!-- Menu latéral by MV/Shoki [END] -->



Vous voulez que le menu ne s'affiche que sur l'index

Dans le template index_body (Affichage > Templates > Général), juste après
Code:
{JAVASCRIPT}

Mettre le code fourni un peu plus haut

 
En cas de soucis avec votre code, le section Problème avec mon Code est disponible. En cas de problème pour personnaliser le menu (changer les couleurs, la taille, la police et autres problèmes liés à la personnalisation), la section Personnalisations est à votre disposition.

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

[HTML5 & CSS3] - Boutons 'Nouveau' & 'Répondre' originaux - Ven 3 Juil 2015 - 16:23




Boutons 'Nouveau' & 'Répondre" originaux


Bonjour à tous ! Alors voici un petit ls concernant les boutons 'Nouveau' et 'Répondre' qui servent respectivement à créer un nouveau sujet et à répondre à un autre, mais ça, vous le saviez déjà.

C'est pourquoi j'ai choisi aujourd'hui de les placer un peu comme des widgets sur la page de visualisation des sujets et des messages.


Pour avoir un petit aperçu je vous invite à checker ce lien où les boutons sont en position fixe sur le côté du forum et où les boutons bougent pour se dévoiler à 100% quand on les survole.



Nous n'allons utiliser dans ce ls que les template 'viewforum_body' et 'viewtopic_body' ainsi que nos CSS.


Je vous rappelle que, vu que nous modifions les templates il sera necessaire que votre forum tourne sous PHPBB2.

Je tiens à rapeler aussi que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci  :toto:



Occupons-nous donc tout d'abord de nos deux templates. Dans le premier qui est 'viewforum_body' nous allons supprimer ce code qui apparaît deux fois:


Code:

<td align="left" valign="middle" width="50">
   <!-- BEGIN switch_user_logged_in -->
   <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}1" alt="{L_POST_NEW_TOPIC}" border="0" /></a>
   <!-- END switch_user_logged_in -->
</td>


Nous allons maintenant tout simplement intégrer ce code:


Code:

<span class="new_topic"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" alt="{L_POST_NEW_TOPIC}" class="new_topic_img"/></a></span>


Que vous pouvez placer n'importe ou dans votre template. Le mieux étant de le mettre à la première ou à la dernière ligne pour s'y retrouver.
Passons maintenant au second template, 'viewtopic_body'. Nous allons procéder de la même manière. Vous allez rechercher ce code qui apparaît deux fois également et que vous allez supprimer.


Code:

<td align="left" valign="middle" nowrap="nowrap">
   <span class="nav">
   <!-- BEGIN switch_user_authpost -->
   <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
   <!-- END switch_user_authpost -->
   <!-- BEGIN switch_user_authreply -->
   <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
   <!-- END switch_user_authreply -->
   </span>
</td>   


Et nous allons ensuite intégrer ce code que vous pouvez placer également n'importe où SAUF entre les balises et présentes dans ce template.


Code:

<span class="new_topic"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" alt="{L_POST_NEW_TOPIC}" class="new_topic_img"/></a></span>
<span class="reply"><a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" class="reply_img"/></a></span>


Vous pouvez maintenant enregistrer et publier vos templates, et nous allons s'occuper des CSS à présent. Un CSS ici qui n'est pas très compliqué et qui fait appel aux propriétés 'transform' et 'transition' de CSS3.


Code:
/* DEBUT MISE EN PAGE BOUTONS NEW ET REPLY - FANGS */

.new_topic {
  position: fixed;
  top: 15px;
  left: -20px;
  -webkit-transition: 1s;
  transition: 1s;
}

.new_topic:hover {
  left: 0px;
}

.reply {
  position: fixed;
  top: 75px;
  left: -20px;
  -webkit-transition: 1s;
  transition: 1s;
}

.reply:hover {
  left: 0px;
}

/* FIN MISE EN PAGE BOUTONS NEW ET REPLY - FANGS */


Une dernière chose avant de vous laisser personnaliser. Pour vos images 'Nouveau' et 'Répondre' que vous pouvez bien évidemment modifier dans les réglages de votre forum.
Et bien sur vous pouvez personnaliser ces codes à l'infini, mais je vous conseille d'avoir quelques notions en codage pour ne pas... tout casser ?



Si vous avez une question, je vous rappelle que cette section est disponible !


Invité

Barre de navigation «Art Sport» - Dim 17 Mai 2015 - 18:24

{#}html{/#} {#}css{/#} {#}navigation{/#} {#}effet_hover{/#} {#}position_fixe{/#} {#}auteur_Asphodèle{/#} {#}phpBB2{/#}




Barre de navigation «Art Sport»


Voir ce que ça donne

- La version du forum doit être PhpBB2.
- La navigation a largeur d'environ 855 pixels.


Le template overhall_header :::
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>
    {RICH_SNIPPET_GOOGLE}

   <!-- 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}">
  <div class="navig" align="{MENU_POSITION}"><div class="navigin">{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="" /> <em>Hit</em>skin.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" style="z-index: 10000 !important;">
      <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 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 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 -->


Le CSS :::
Code:
/* DEBUT BARRE DE NAVIGATION */
.navig {
  height: 41px;
  top: 0;
  left: 0;
  width: 100%;
  position: fixed;
}
.navigin {
  background-color: #BFCFC5;
  box-shadow: 0 0 5px #615B5A;
  font-family: Helvetica,Verdana,Arial;
  height: 41px;
  margin: auto;
  width: 855px;
  text-align: center;
  vertical-align: top;
}
.navig a.mainmenu {
  text-decoration: none;
  color: #F17272;
  display: inline-block;
  margin: 0px;
  font-family: Calibri;
  font-size: 15px;
  font-weight: 700;
  height: 30px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  text-decoration: none;
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
}
.navig a.mainmenu:hover {
  background-color: #8DB09B;
}
.navig a.mainmenu img {
  display: none;
}
/* FIN BARRE DE NAVIGATION */


Pensez à me créditer (Fait par Asphodèle sur Never Utopia.)


code (c) crackle bones



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

Alumine

Chatbox en panneau latéral - Ven 8 Mai 2015 - 18:58


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


Chatbox en panneau latéral




PHPBB2 - Aperçu - code légendé - CSS et templates - affichage uniquement sur la page d'accueil


/!\ Avant toute chose regardez bien comment ça marche: à l'ouverture la chatbox fait se décaler tout le forum ! Ca ne fonctionnera pas bien avec un forum trop large.



Cocher des trucs


Vous pouvez aussi afficher la CB en haut et en bas de page si vous le souhaitez. Rendez-vous dans votre panneau d'administration > Modules > ChatBox > Configuration et cochez les trucs comme suit !
Activer la CB: OUI
Afficher les avatars: OUI
Affichage de la CB: NE PAS AFFICHER
(oui c'est bizarre de l'activer sans l'afficher... mais celle que l'on va rajouter n'est pas gérée par ce bouton )



Template index_body


C'est la structure HTML de la page d'accueil. (Affichage > Templates > général > index_body)
Juste après le {JAVASCRIPT} qui est au début, ajoutez ceci:
Code:

<div id="cb">
  <iframe src="/chatbox/index.forum" style="width: 350px; height: 100%;" frameborder="0" cellspacing="0"></iframe>
</div>


Validez, publiez ! Donc là on vient de rajouter une chatbox supplémentaire uniquement sur la page d'accueil.



CSS


Affichage > Couleurs > feuille de style CSS
Ajoutez tout ça à votre code ! Tout est légendé pour que vous puissiez facilement changer les couleurs et les polices.
Code:
/*CHATBOX, par Alu pour Never-Utopia********************************************************************/
#cb, body{-webkit-transition:margin 2s ease, right 2s ease; transition:margin 2s ease, right 2s ease;}
#cb{height:100%; position:fixed; right:-350px; bottom:0; z-index: 999;}

body.chatbox{
  font-family:'sans-serif';/*police*/
  font-weight:200;/*epaisseur police(normal:enlever la ligne)*/
}
#chatbox_footer, #chatbox_footer .catBottom{height:60px !important;background-color:#C4FF6B; /*couleur du bas de la cb*/}
#chatbox_header{width:100%; position:absolute;background-color:#C4FF6B; /*couleur du haut de la cb*/}
.chatbox_row_2{background: #F0F0F0; /*couleur de la rangée message foncée*/}
.chatbox_row_1, #chatbox{ background:#FFFFFF;/*couleur du fond de la cb et de la rangée message claire*/}
#chatbox_members{width:100%; height: 50px;border:none; background-color:#68BF56 !important;/*couleur de fond de la partie membres en ligne*/ color:white;/*couleur du texte*/}

/*phrases de connexion et déconnexion*/
.msg span[style*="green"] strong{color:#68BF56; font-variant:small-caps; font-weight:normal;}
.msg span[style*="red"] strong {color:black; font-variant:small-caps; font-weight:normal;}

/*remplacer le titre de la chatbox*/
#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before {content:"Discussions ♪♫";font-weight:200}

/*affichage des avatars*/
#chatbox .cb-avatar > img { height: 66px !important; width: 30px !important;}
#chatbox .cb-avatar {
  float: left;
  margin-right: 4px;
  background-color:white;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  height: 40px !important;
  width: 30px;
  vertical-align: middle;
  overflow:hidden !important;
}

/*Ne pas toucher*/
.chatbox td.catBottom{border:none !important;}
#chatbox{top:80px; left:0; bottom:50px;}
#chatbox_header .catBottom{height:30px;}
.chatbox_row_2, .chatbox_row_1{margin:5px 4px 4px; border-radius:2px; box-shadow: inset 0px 0px 30px 0px #EFEFEF;}
.text-styles td{vertical-align:top;}
.chatfootertable{display:block;width:100%; top:13px; position:relative;}
.text-styles td:last-child{display: block !important; position:absolute;right:10px; top:-27px;height:20px;}
.text-styles td:last-child label{display: none;}

.away-users li{display:inline;font-weight:400 !important;color:white !important;}
body.chatbox strong{font-weight:400; font-variant:small-caps;letter-spacing:1px;}
#chatbox .date-and-time {font-size:9px;}
#chatbox_members .member-title{color:white;font-weight:400;font-variant:small-caps;}
#chatbox > p {border-bottom: 1px solid #d5dde5;}

/*bouton de la chatbox*/
.bouton{
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  text-align:center;
  color:#FFFFFF;/*couleur du texte*/
  padding:5px 10px;
  border-radius:2px;
  border:none;
  font: 600 20px 'Amatic SC';/*police*/
  letter-spacing:2px;/*espacement des lettres*/
  text-shadow:0 1px 0 green;/*ombre du texte*/
  background-color:#68BF56;/*couleur de fond*/
  box-shadow: 0px 3px 0px 0px #3D992B;/*ombre*/
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease-in-out;
}
.bouton:hover {background-color: #54B341;/*couleur de fond au survol de la souris*/}
.bouton:active {box-shadow: 0px 1px 0px 0px #3D992B;padding-top:6px; padding-bottom:4px;}/*au moment du clic*/


Voilà... Donc là logiquement la chatbox est invisible. Normal on n'a pas encore mis le bouton qui permet de l'ouvrir !



Bouton


Vous pouvez le mettre où vous voulez, et même le mettre plusieurs fois si vous voulez. Le plus simple est de le mettre dans votre message de page d'accueil. (Affichage > Page d'accueil > Généralités) La partie script contient le javascript qui fait fonctionner l'apparition / disparition de la chatbox. Les deux boutons, ouvrir et fermer, s'intervertissent quand on clique. A vous ensuite d'intégrer et de customiser ce bouton via le CSS pour l'intégrer à votre forum (=
Code:
<script type="text/javascript">
function ouvrircb(name){
  document.getElementById('ouvrir_cb_'+name).style.display='none';
  document.getElementById('fermer_cb_'+name).style.display='block';
  document.body.style.marginRight='350px';
  document.getElementById('cb').style.right='0';
  }
function fermercb(name){
  document.getElementById('ouvrir_cb_'+name).style.display='block';
  document.getElementById('fermer_cb_'+name).style.display='none';
  document.body.style.marginRight='';
  document.getElementById('cb').style.right='';
  } 
</script>
<div class="bouton" id="ouvrir_cb_1" onclick="javascript:ouvrircb(1);" style="width:150px;">Ouvrir CB</div>
<div class="bouton" id="fermer_cb_1" onclick="javascript:fermercb(1);" style="width:150px;display:none;">Fermer CB</div>
 



Et voilà, c'est installé ! Si vous rencontrez des problèmes n'hésitez pas à passer dans la section "problème avec mon code" pour qu'un codeur vous aide ! Je vous demanderai aussi de mettre un crédit à N-U quelque part sur votre forum.

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

Onyx

Barre de navigation ouvrable - Mer 3 Sep 2014 - 7:51




Barre de navigation ouvrable


Salut !

Voici un petit LS d'une barre de navigation ouvrable au clic que j'ai remodelée à partir de la demande de Valou93. À savoir que j'ai utilisé du javascript pour ouvrir/fermer la barre, mais que vous pouvez utiliser ce tuto pour faire la même chose avec des targets qui vous préférez cette méthode.

Pour voir l'aperçu "fermé" : cliquez ici.
Pour voir l'aperçu "ouvert" au clic : cliquez ici.

Ce code est en deux parties.
  • Tout d'abord, nous allons installer la navigation (et le javascript qui la fait fonctionner) dans le template.
  • Puis, nous allons mettre en forme la navigation à l'aide du CSS.

Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.



1. Corps de la navigation (Template Overhall_Header)


Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > OVERHALL HEADER

Nous allons alors chercher l'ancienne navigation qui devrait être aux alentours des lignes 173 à 177 et ressembler à ceci :
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>


Nous allons la remplacer par notre propre navigation, à savoir ceci :
Code:
<table id="navbloc" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td align="center">
      <div class="nav_links">
        {GENERATED_NAV_BAR}
      </div>
    </td>
  </tr>
  <tr>
    <td align="left">
      <span id="nav_ouvrir">Ouvrir la navigation</span>       
      <span id="nav_fermer" style="display: none;">Fermer la navigation</span>
    </td>
  </tr>
</table>
<script>document.getElementById("nav_ouvrir").onclick = function() {nav_open()}; /*Fonction pour ouvrir la navigation*/
document.getElementById("nav_fermer").onclick = function() {nav_close()}; /*Fonction pour fermer la navigation*/
function nav_open() {
  document.getElementById("nav_ouvrir").style.display = "none"; /*Fait disparition le bouton ouvrir*/
  document.getElementById("nav_fermer").style.display = "block"; /*Fait apparaître le bouton fermer*/
  document.getElementById("navbloc").style.top = "0px";} /*Fait baisser la navigation*/
function nav_close() {
  document.getElementById("nav_fermer").style.display = "none"; /*Fait disparition le bouton fermer*/
  document.getElementById("nav_ouvrir").style.display = "block"; /*Fait apparaître le bouton ouvrir*/
  document.getElementById("navbloc").style.top = "-32px";} /*Fait monter la navigation*/</script>



Donc, histoire de comprendre un peu ce qu'on a fait, nous allons regarder un peu le code que nous venons de rajouter :

  • Au tout début, il y a un tableau avec l'id "navbloc" qui nous permet de positionner notre navigation, de la même façon qu'avec la navigation normale.
  • Ensuite, dans la première cellule de notre tableau, nous avons la barre de navigation avec la class "nav_links".
  • Puis, dans la deuxième cellule, nous avons les deux boutons qui sont respectivements idenditifés avec les id "nav_ouvrir" et "nav_fermer". Le bouton "fermer" a un "display: none" pour qu'il soit invisible au départ.
  • Enfin, nous avons le javascript qui permet de fermer et d'ouvrir la navigation. Il y a déjà des explications directement dans le code, alors on va en rester là.



2. Mise en forme (CSS)


Si vous avez installé le code dans le template, vous voyez sans doute tout de suite que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre navigation à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
   /********************************************* NAVIGATION *********************************************/
/*Fixe la navigation en haut cachée*/
#navbloc {
  position: fixed;
  z-index: 20;
  top: -32px;
  left: 0px;
  width: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

/*Barre de la navigation*/
.nav_links {
  background: #1A1815;
  border-bottom: 2px solid #000000;
  color: #88346B;
  height: 20px;
  padding: 5px;
}
/*Liens de la navigation*/
#navbloc a.mainmenu {
  font-family: monotype corsiva;
  font-size: 18px;
  color: darkgoldenrod;
  text-shadow: 1px 1px 1px #000000;
}
/*Liens de la navigation au survol*/
#navbloc a.mainmenu:hover {
  color: goldenrod;
  text-shadow: 1px 1px 1px #000000;
}

/*Boutons pour ouvrir ou fermer la navigation*/
#nav_ouvrir, #nav_fermer {
  display: block;
  width: 190px;
  margin-left: 15px;
  margin-top: -2px;
  background: #1A1815;
  border: 2px solid #000000;
  border-top: none;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  color: darkgoldenrod;
  text-shadow: 1px 1px 1px #000000;
  padding: 5px;
  font-family: Times New Roman;
  font-size: 20px;
  font-variant: small-caps;
  cursor: pointer;
  text-align: center;
}
/*Boutons au survol*/
#nav_ouvrir:hover, #nav_fermer:hover {
  color: goldenrod;
}
   /********************************************* FIN NAVIGATION *********************************************/



Pour ceux qui veulent savoir comme la barre fait pour s'ouvrir et se refermer, je vais juste donner quelques explications qui pourraient être utiles.

  • Dans le CSS du tableau "navbloc", nous avons l'attribut "top". Le "top" indique que le bloc de rechercher à -32px du haut de l'écran.
  • C'est sur cette variable qu'agit le javascript (que nous avons mis dans le template tout à l'heure).
  • Ce javascript reprend le même "top", mais en change la valeur pour "0px" lorsqu'on clique sur le bouton "ouvrir", ce qui redescend la navigation à 0px en haut de l'écran.
  • De façon semblable, lorsqu'on clique sur le bouton "fermer", cela change la valeur pour "-32px" et remet la navigation à -32px en haut de l'écran, ce qui la cache.
  • Du coup, si jamais vous souhaitez modifier les dimensions de la barre de navigation, il faudrait aller le modifier dans le CSS du tableau "navbloc" et aussi dans le javascript pour changer la valeur du "top".


C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !


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

A-Lice

Bandeau de navigation vertical - Jeu 31 Juil 2014 - 14:45




Bandeau de navigation vertical


Suite à une demande de Narakye voici un bandeau de navigation vertical collé sur la droite.

Je précise que l'arrière plan rose et jaune correspond à mon forum.

HTML & CSS ~ Voici donc un aperçu : www


Et le code :
HTML :
Code:
<link href='http://fonts.googleapis.com/css?family=Great+Vibes|Indie+Flower|Love+Ya+Like+A+Sister' rel='stylesheet' type='text/css' />
<div class="bandeau_fond"><span class="bandeau_titre" style="margin-top:30px; font-family: 'Great Vibes', cursive; font-size:30px">Bienvenue</span>
<div class="bandeau_image1"><img src="http://img11.hostingpics.net/pics/920644alice.jpg" alt="" /></div>
<span class="bandeau_titre">Liens utiles</span>
<div class="bandeau_lien"><div class="bandeau_lien_zoom"><a href="ICI LE LIEN">blabla blabla</a></div>
<div class="bandeau_lien_zoom"><a href="ICI LE LIEN">blabla blabla</a></div>
<div class="bandeau_lien_zoom"><a href="ICI LE LIEN">blabla blabla</a></div>
</div>
<span class="bandeau_titre">Les news</span>
<div class="bandeau_news">blablabla
blablablabla
</div>
<span class="bandeau_titre">Interphone</span>
<div class="bandeau_interphone1"><marquee direction="up" scrollamount="2" onMouseOver="this.stop();" onMouseOut="this.start();"><span class="bandeau_interphone2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lectus ultricies nisl vulputate molestie a sed lorem. Nullam consequat pulvinar quam, vel semper orci blandit quis. In id eros massa. Duis eget gravida mi. Aenean pellentesque, purus eget suscipit bibendum, justo lorem fermentum leo.</span></marquee></div>
<span class="bandeau_titre">Nos héros</span>
<div class="bandeau_image2" style="margin-left:30px;"><img src="http://img11.hostingpics.net/pics/920644alice.jpg" alt"" /></div><div class="bandeau_image2" style="margin-left:5px;"><img src="http://img11.hostingpics.net/pics/920644alice.jpg" alt"" /></div><br />
<a href="http://www.never-utopia.com/" class="ALice_credit">© By A-Lice</a>
</div>


Il faut placer ce dernier dans le template index-body, sur la deuxième ligne juste après ceci :
Code:
{JAVASCRIPT}


CSS :
Code:
.bandeau_fond {
width:175px;
padding:5px;
position:fixed;
background-image:url(http://imagesup.org/images12/1406735258-bordure.png);
height:100%;
right:0px;
top:0px;
z-index:100;
}

.bandeau_titre {
font-size:20px;
color:white;
display:block;
text-indent:45px;
margin-top:10px;
font-family: 'Love Ya Like A Sister', cursive;
}

.bandeau_image1 {
width:135px;
height:92px;
margin-left:30px;
overflow:hidden;
}

.bandeau_lien {
width:135px;
padding:5px;
height:11%;
overflow:hidden;
margin-left:25px;
font-family: 'Indie Flower', cursive;
}

.bandeau_lien_zoom {
font-size:12px;
opacity:0.8;
text-align:center;
}

.bandeau_lien_zoom:hover {
font-size:14px;
opacity:1;
text-align:center;
}

.bandeau_news {
background-color:white;
width:125px;
padding:5px;
height:15%;
margin-left:30px;
font-size:12px;
color:black;
text-align:justify;
overflow:auto;
border-radius:15px;
font-family: 'Indie Flower', cursive;
}

.bandeau_interphone1 {
width:135px;
padding:5px;
height:7%;
overflow:hidden;
margin-left:25px;
}

.bandeau_interphone2 {
text-align:justify;
font-size:12px;
color:black;
display:block;
font-family: 'Indie Flower', cursive;
}

.bandeau_image2 {
display:inline-block;
width:68px;
height:67px;
border-radius:100px;
overflow:hidden;
margin-top:5px;
}

a.ALice_credit {
font-size:12px;
text-decoration:none;
display:block;
text-align:center;
color:white;
margin-top:5px;
}



/!\ En cas de problème, c'est ici que ça ce passe.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Halloween

Un Bloc Flottant sauce Louis XIV - Mer 9 Juil 2014 - 14:15



Plop,

Un nouveau LS basé sur une demande de Ginny Blue (qui a fourni notamment le cadre du widget).

Comme toujours, j'aime les merci, ça fait toujours plaisir et ça prend pas 20 minutes de vos vies =3

/!\ Je rappelle que cette section existe en cas de problème, je ne réponds pas aux MP (et encore moins quand ils sont rageux !).



Widget


HTML & CSS ▬ Fonds modifiables

Aperçu ▬ www


CSS
Code:
/* --------------------------------- WIDGET --------------------------------- */

/* Positionnement du widget et choix du fond */
.widget {
  position: fixed;
  top: 2.9em;
  left: 3.8em;
  background-image: url('http://www.photos-public-domain.com/wp-content/uploads/2011/02/black-vertical-siding-texture.jpg');
  width: 20em;
  height: 26em;
  padding: 20px;
  z-index: 2;
}

/* Englobe le titre et le texte du widget */
.widget_interne {
  width: 17em;
  height: 21em;
  padding: 20px;
  padding-top: 0px;
  text-align: justify;
  color: #C0C0C0;
  z-index: 4;
  position: fixed;
  top: 5.5em;
  left: 5em;
}

/* --------------------------------- FIN WIDGET --------------------------------- */



À insérer dans la page d'accueil :
Code:
<link href="http://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet" type="text/css" /><img src="http://img11.hostingpics.net/pics/573458Modification.png" style="height: 35em; position: fixed; top: 0em; left: -1em; z-index: 3;" />
<div class="widget">
   
</div>
 
<div class="widget_interne">
   
   <div style="font-family: 'Parisienne', cursive; font-size: 30px; text-align: center; color: #B19A69;">
       Titre
   </div>
   
   <div style="overflow: auto; width: 17em; height: 19em;">
       Agentes industria idem quaedam perviis omnes omnes agitare cognito casu cognito omnes idem idem in nequo de Gallus quaedam de suae per quaedam ac conaretur omnes incertus casu agentes conducentia in omnes de nequo nequo Gallus perviis perviis de perviis casu industria sunt saluti mortalem conaretur omnes quaedam cognito casu idem suae agentes de omnes saluti saluti ac industria incertus remoti sunt ac Constantius perviis agitare futuris civitatibus agitare exarsit civitatibus remoti perviis remoti casu mortalem de cognito per de idem agentes civitatibus exarsit conaretur sunt sunt nequo in saluti conaretur per idem agentes conaretur casu Gallus ultra nequo omnes.Agentes industria idem quaedam perviis omnes omnes agitare cognito casu cognito omnes idem idem in nequo de Gallus quaedam de suae per quaedam ac conaretur omnes incertus casu agentes conducentia in omnes de nequo nequo Gallus perviis perviis de perviis casu industria sunt saluti mortalem conaretur omnes quaedam cognito casu idem suae agentes de omnes saluti saluti ac industria incertus remoti sunt ac Constantius perviis agitare futuris civitatibus agitare exarsit civitatibus remoti perviis remoti casu mortalem de cognito per de idem agentes civitatibus exarsit conaretur sunt sunt nequo in saluti conaretur per idem agentes conaretur casu Gallus ultra nequo omnes.
   </div>
</div>




Bouton Aide en bas à droite du forum (comme sur ancienne version) - Mar 1 Juil 2014 - 0:04


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


Effets Divers



Ceci est un code crée suite à la Demande de Clarisse, ici.

Pour phbb2 ▬ CSS3 & HTML5 ▬ Bouton au Repos au hover et une fois cliqué


Les effets


La boîte "glisse" pour s'ouvrir.
Les contenus internes ne sont pas fournis!
Vous pouvez changer l'image de la crois ou alors simplement mettre un texte!

Le code


Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> overall_header :
Juste après ça:
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Mettez ça:
Code:
  <div id="target_po">
    <div id="bouton_po">
      <a href="#target_po">Aide</a>
    </div>
    <div id="tableau_po"><div class="fermer"><a href="#"><img src="http://image.noelshack.com/fichiers/2014/24/1402677746-2014-06-13-184010.png" /></a></div>
      <div id="tableau_po_interne">
        <h1 class="titre_po">
          Titre Contenu
        </h1>
        Contenu
      </div>
    </div>
  </div>


Le CSS:
Code:
/********** DÉBUT BOUTON **********/

/* Mise en forme du bouton */
#bouton_po {
  /* Position */
  position: fixed;
  bottom: 0px;
  right: 20px;
  z-index: 900;
  /* Taille */
  width: 65px;
  height: 25px;
  padding: 5px;
  /* Couleur de fond puis de texte */
  background-color: #B7B7B7;
  color: black;
  text-align: center;
  /* Bordure */
  border: 2px solid black;
  border-bottom: 0px solid;
  transition: all ease 0.5s;
}

/* Mise en forme du bouton au passage de la souris */
#bouton_po:hover {
  background-color: #D8D6D6;
  transition: all ease 0.5s;
}

/* Mise en forme du lien dans le bouton */
#bouton_po a, #bouton_po a:hover {
  color: black;
  letter-spacing: 0px;
  text-decoration: none !important;
  transition: all ease 0.5s;
}

/* Effet sur le lien au passage de la souris */
#bouton_po:hover a, #bouton_po:hover a:hover {
  color: black;
  letter-spacing: 3px;
  text-decoration: none !important;
  transition: all ease 0.5s;
}

/* Mise en forme du contenu */
#tableau_po {
  visibility: hidden;
  /* Position du contenu */
  position: fixed;
  bottom: 0px;
  right: 20px;
  z-index: 999;
  /* Hauteur de base pour l'effet. */
  width: 0px;
  height: 0px;
  /* Couleur de fond puis de texte */
  background-color: #B7B7B7;
  color: black;
  /* Bordure */
  border: 2px solid black;
  transition: all ease 0.5s;
}

/* Apparition du contenu au click sur le bouton */
#target_po:target #tableau_po {
  visibility: visible;
  /* Taille du contenu */
  width: 401px;
  height: 556px;
  transition: all ease 0.5s;
}

/* Marge entre le bord et le bouton de fermeture */
#tableau_po .fermer {
  margin: 3px;
}

/* Dans le cas où le bouton de fermeture est un texte */
#tableau_po .fermer a, #tableau_po .fermer a:hover {
  text-decoration: none !important;
}

#tableau_po .fermer a {
  color: black;
  transition: all ease 0.5s;
}

#tableau_po .fermer a:hover {
  color: white;
  transition: all ease 0.5s;
}

/* Pour un overflow: auto */
#tableau_po_interne {
  /*taille*/
  height: 535px;
  width: 390px;
  margin: auto;
  overflow: auto;
}

/* Mise en forme des titres dans le contenu */
h1.titre_po {
  width: 100%;
  border: 0px solid;
  margin: 0px;
  margin-bottom: 10px;
  background: none;
  font-weight: normal;
  text-align: center;
  border-bottom: 1px solid black;
  font-size: 15pt;
}
/********** FIN BOUTON **********/


Changer la croix / ce qui permet de fermer l'aide


Le code correspondant est celui-ci:
Code:
<div class="fermer"><a href="#"><img src="http://image.noelshack.com/fichiers/2014/24/1402677746-2014-06-13-184010.png" /></a></div>

Il suffit de retirer l'image ou la changer mais ne touchez surtout pas le lien autour, ni la div, uniquement l'image ou vous ne pourrez plus fermer votre aide!
Le code CSS correspondant est celui-ci:
Code:

/* Marge entre le bord et le bouton de fermeture */
#tableau_po .fermer {
  margin: 3px;
}

/* Dans le cas où le bouton de fermeture est un texte */
#tableau_po .fermer a, #tableau_po .fermer a:hover {
  text-decoration: none !important;
}

#tableau_po .fermer a {
  color: black;
  transition: all ease 0.5s;
}

#tableau_po .fermer a:hover {
  color: white;
  transition: all ease 0.5s;
}

Halloween

Navigation supplémentaire sur le côté - Dim 15 Juin 2014 - 18:43



Plop,

La taille des images est de 100*100px.

Navigation


Version  phpBB2 ▬ CSS & HTML ▬ Info-bulles

Aperçu ▬ www


CSS
Code:
/* --------------------------------- NAVIGATION --------------------------------- */

/* Contient les cercles */
.bloc_onglet {
  position: fixed;
  top: 50px;
}

/* Info-bulles */
.bloc_infobulle {
  z-index: 24;
  text-decoration: none;
  position: relative;
  margin-top: 20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
/*Image*/
.bloc_imgbulle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
/* Triangle noir */
.bloc_anglebulle {
  border: 0 solid transparent;
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-right: 11px solid black;
  position: absolute;
  left: -10px;
  top: 45px;
}
/*Bloc des liens*/
.bloc_bulle {
  display: none;
  position: absolute;
  top: 0px;
  left: 120px;
  height: 150px;
  width: 200px;
  background: #000000;
  text-align: center;
  font-weight: none;
  padding: 20px 5px 5px 5px;
  text-align: center;
}
.bloc_infobulle:hover .bloc_bulle {
  display: block;
}
.bloc_infobulle:hover {
  width: 120px;
}
/*Liens*/
.bloc_infobulle a {
  text-decoration: none !important;
  color: #a3a3a3;
}
.bloc_infobulle a:hover {
  color: #dfdfdf;
}

/* --------------------------------- FIN NAVIGATION --------------------------------- */


HTML
Code:
  <div class="bloc_onglet">
    <div class="bloc_infobulle">
      <img class="bloc_imgbulle" src="http://nsa34.casimages.com/img/2014/07/05/140705051110210270.jpg" alt="" />
      <div class="bloc_bulle">
        <div class="bloc_anglebulle"></div>
        <a href="#">Je suis un lien</a><br />
        <a href="#">Je suis un lien</a><br />
        <a href="#">Je suis un lien</a><br />
        <a href="#">Je suis un lien</a>
      </div>
    </div>
    <div class="bloc_infobulle">
      <img class="bloc_imgbulle" src="http://nsa34.casimages.com/img/2014/07/05/140705051110210270.jpg" alt="" />
      <div class="bloc_bulle">
        <div class="bloc_anglebulle"></div>
        <a href="#">Je suis un lien</a><br />
        <a href="#">Je suis un lien</a><br />
        <a href="#">Je suis un lien</a><br />
        <a href="#">Je suis un lien</a>
      </div>
    </div>
    <div class="bloc_infobulle">
      <img class="bloc_imgbulle" src="http://nsa34.casimages.com/img/2014/07/05/140705051110210270.jpg" alt="" />
      <div class="bloc_bulle">
        <div class="bloc_anglebulle"></div>
        <a href="#">Je suis un lien</a><br />
        <a href="#">Je suis un lien</a><br />
        <a href="#">Je suis un lien</a><br />
        <a href="#">Je suis un lien</a>
      </div>
    </div>
    <div class="bloc_infobulle">
      <img class="bloc_imgbulle" src="http://nsa34.casimages.com/img/2014/07/05/140705051110210270.jpg" alt="" />
      <div class="bloc_bulle">
        <div class="bloc_anglebulle"></div>
        <a href="#">Je suis un lien</a><br />
        <a href="#">Je suis un lien</a><br />
        <a href="#">Je suis un lien</a><br />
        <a href="#">Je suis un lien</a>
      </div>
    </div>
  </div>


Pour afficher la navigation dans toutes les pages, il faut ajouter ce code dans le template overall_header après l'ouverture de la balise body.

En fonction de la version de votre forum, l'ouverture de la balise body dans le template ne ressemblera pas à la même chose. Voici comment la trouver :
Spoiler:
Sur Invision et Punbb, mettre le code après :
Code:
<body>


Sur phpbb3, mettre le code après :
Code:
<body id="phpbb">


Sur phpbb2, mettre le code après :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">



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

Onyx

Bloc flottant latéral ouvrant "onclick" (javascript) - Sam 11 Jan 2014 - 5:11



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


Bouh!

Autant j'aime bien le bloc flottant latéral ouvrant "onclick" (CSS avec target) d'Okhmhaka, autant je préfère passer par le javascript pour éviter d'avoir les "#target_onglet" dans ma barre d'adresse.

Du coup, j'ai laissé tombé l'idée d'utiliser le CSS3 pour ça et me voilà avec du javascript qui vous donnera le même résultat avec une méthode différente.

Sachant que tout le monde n'adore pas nécessairement faire du graphisme, vous avez l'option d'avoir un bouton pour ouvrir/fermer l'onglet fait avec des images ou avec du texte ^^

Je vous montre un petit exemple juste ici avec la méthode qui ne demande pas d'images.



Si le bouton est une image



Dans votre template "Overhall Header", vous devez trouver l'ouverture de la balise "body". Sous phpBB2, elle ressemble à ceci :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Voici le code du bloc flottant que vous pouvez installer suite à cette balise :
Code:
  <div id="ongleton">
    <div class="ongleton_contenu">
      Contenu du bloc
    </div>
    <img id="ongleton_ouvrir" src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" />
    <img id="ongleton_fermer" src="http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png" style="display: none;" />
  </div>
  <script type="text/javascript">
  //<!--
    $('#ongleton_ouvrir').click(function(){
      $('#ongleton_ouvrir').css("display", "none");
      $('#ongleton_fermer').css("display", "block");
      $('#ongleton').css("left", "0px");
    });
    $('#ongleton_fermer').click(function(){
      $('#ongleton_ouvrir').css("display", "block");
      $('#ongleton_fermer').css("display", "none");
      $('#ongleton').css("left", "-212px");
    });
  //-->
  </script>


Si on décortique ceci, nous avons tout d'abord un bloc (id="ongleton") qui englobe le bloc flottant et le bouton servant à l'ouvrir et à le fermer.
Ensuite, nous avons le bloc flottant (class="ongleton_contenu").
Puis, nous avons deux div, soit deux boutons.
La première image est le bouton pour ouvrir (id="ongleton_ouvrir").
La deuxième image est le bouton pour fermer (id="ongleton_fermer").
Enfin, nous avons le javascript qui fait fonctionner le tout.

Attention, dans le javascript, il  faut indiquer la largeur du bloc flottant (bordures, padding et marges inclus) en remplaçant le 212px à cet endroit :
Code:
$('#ongleton').css("left", "-212px");



Enfin, vous pourrez modifier à votre sauce le bloc flottant dans le CSS en y mettant le code suivant:
Code:
/*Bloc qui contient le bloc flottant et les boutons*/
#ongleton {
  position: fixed;
  height: 90%; /*Hauteur du bloc flottant*/
  top: 5%; /*Espace du haut*/
  left: -212px;
  z-index: 999;
  transition: 1s;
  -webkit-transition: 1s;
}
/*Bloc flottant*/
.ongleton_contenu {
  width: 200px; /*Largeur*/
  height: 100%;
  padding: 5px;
  background-color: #1B2836;
  color: #9BB9D9;
  font-size: 13px;
  font-family: Time New Roman;
  border: 2px #6993BE solid;
  border-left: none;
  border-radius: 0 30px 30px 0;
}
/*Boutons Ouvrir et Fermer*/
#ongleton_ouvrir, #ongleton_fermer {
  position: absolute;
  top: 45%;
  left: 212px; /*Mettre le bouton à 212px du bord, donc pour qu'il dépasse*/
  z-index: 999;
  cursor: pointer;
}


Voilà, votre bloc flottant est installé ^^






Si le bouton est un texte



Dans votre template "Overhall Header", vous devez trouver l'ouverture de la balise "body". Sous phpBB2, elle ressemble à ceci :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Voici le code du bloc flottant que vous pouvez installer suite à cette balise :
Code:
  <div id="ongleton">
    <div class="ongleton_contenu">
      Contenu du bloc
    </div>
    <div id="ongleton_ouvrir">
      Ouvrir
    </div>
    <div id="ongleton_fermer" style="display: none;">
      Fermer
    </div>
  </div>
  <script type="text/javascript">
  //<!--
    $('#ongleton_ouvrir').click(function(){
      $('#ongleton_ouvrir').css("display", "none");
      $('#ongleton_fermer').css("display", "block");
      $('#ongleton').css("left", "0px");
    });
    $('#ongleton_fermer').click(function(){
      $('#ongleton_ouvrir').css("display", "block");
      $('#ongleton_fermer').css("display", "none");
      $('#ongleton').css("left", "-212px");
    });
  //-->
  </script>


Si on décortique ceci, nous avons tout d'abord un bloc (id="ongleton") qui englobe le bloc flottant et le bouton servant à l'ouvrir et à le fermer.
Ensuite, nous avons le bloc flottant (class="ongleton_contenu").
Puis, nous avons deux div, soit deux boutons.
La première div est le bouton pour ouvrir (id="ongleton_ouvrir").
La deuxième div est le bouton pour fermer (id="ongleton_fermer").
Enfin, nous avons le javascript qui fait fonctionner le tout.

Attention, dans le javascript, il  faut indiquer la largeur du bloc flottant (bordures, padding et marges inclus) en remplaçant le 212px à cet endroit :
Code:
$('#ongleton').css("left", "-212px");



Enfin, vous pourrez modifier à votre sauce le bloc flottant et les boutons dans le CSS en y mettant le code suivant:
Code:
/*Bloc qui contient le bloc flottant et les boutons*/
#ongleton {
  position: fixed;
  height: 90%; /*Hauteur du bloc flottant*/
  top: 5%; /*Espace du haut*/
  left: -212px;
  z-index: 999;
  transition: 1s;
  -webkit-transition: 1s;
}
/*Bloc flottant*/
.ongleton_contenu {
  width: 200px; /*Largeur*/
  height: 100%;
  padding: 5px;
  background-color: #1B2836;
  color: #9BB9D9;
  font-size: 13px;
  font-family: Time New Roman;
  border: 2px #6993BE solid;
  border-left: none;
  border-radius: 0 30px 30px 0;
}
/*Boutons Ouvrir et Fermer*/
#ongleton_ouvrir, #ongleton_fermer {
  position: absolute;
  top: 45%;
  left: 212px; /*Mettre le bouton à 212px du bord, donc pour qu'il dépasse*/
  z-index: 999;
  cursor: pointer;
  width: 100px;
  height: 20px;
  background-color: #1B2836;
  border: 2px solid #6993BE;
  border-bottom: none;
  text-align: center;
  color: #9BB9D9;
  padding: 5px;
  padding-top: 10px;
  border-radius: 30px 30px 0 0;
  margin-left: -42px; /*Pour coller le bouton contre le bloc flottant*/
  -webkit-transform:rotate(90deg); /*Pour tourner le texte sur le côté (Chrome et Safari)*/
  transform:rotate(90deg); /*Pour tourner le texte sur le côté*/
}


Voilà, votre onglet flottant est installé ^^




N'oubliez pas de créditer N-U è_é

Variante du Tutoriel de Amaziel (barre de navigation en haut du forum) - Ven 18 Oct 2013 - 2:55



Bonjour, :love: 

Suite à un magnifique tutorel (maintenant archivé) de Amaziel pour coller la barre de navigation en haut du forum (aperçu : ici), j'en ai changé quelque particularité qui, je pense, feront plaisir à certain. Dans ce tuto je vous monterais deux façons de modifier la barre : 
- Mettre la barre en Transparence au dessus de votre header
- Mettre la barre en transparente SUR votre header.


Etape -0 (reproduire le tuto d'Amaziel)
Tout d'abord, vous rendre dans le bon template :
Panneau d'administration >> Affichage >> Templates >> General >> Template overall_header

Puis, supprimer la barre de navigation de base qui est dans le template :
Code:
{GENERATED_NAV_BAR}


Vous retrouvez ensuite ce bout de code dans le template :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">


Et vous ajoutez, directement après, ce code :
Code:
<table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: #000000; z-index:1000; width: 100%; border-bottom:1px solid #5E4036;" ><tr><td><center>{GENERATED_NAV_BAR}</center></td></tr></table>


Vous enregistrez et publiez le template et voilà !


Variante 1 : Mettre la barre en Transparence au dessus de vôtre header[/b]

Repérer la ligne suivante que Amaziel vous as fait installer dans l' Overall_hearder
Code:
<table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: #000000; z-index:1000; width: 100%; border-bottom:1px solid #5E4036;" ><tr><td><center>{GENERATED_NAV_BAR}</center></td></tr></table>


Et changer le par celui-ci : 
Code:
<TABLE STYLE="POSITION: FIXED; LEFT: 0PX; TOP: 0PX; RIGHT: 0PX; BACKGROUND-COLOR: none!important; Z-INDEX:1000; WIDTH: 100%;" ><TR><TD><CENTER>{GENERATED_NAV_BAR}</CENTER></TD></TR></TABLE>


S'il se présente un espace entre la barre et le haut de vôtre forum, ce qui est possible car nous avons supprimer la couleur régler le :
"top: 0px;" à "top: -10px;" de manière a ne plus voir cette espace.

Ce qui vous donnera ceci : 






[u]Variante 2
: Mettre la barre en transparence SUR votre header.

Les code suivants sont basée en fonction d'un header collé en haut du forum. 

[b]Etape 1 : CSS du header

Allez dans: Affichage > couleur > feuille de style css.

Puis, collez ceci dans votre feuille de CSS :
Code:
/* LOGO DU FORUM */
img#i_logo {
width: 100%!important;
margin-left: 0px!important;
margin-right: 0px!important;
margin-top: -10px!important;
}


Ce code est configuré pour que votre image colle au bords de droite, de gauche et du haut de votre forum, vous pouvez bien sur les modifier. Le "margin-top: -10px" sert à monter l'image en haut pour la rétrécir si vous le souhaiter.


Repérer une fois de plus la ligne suivante que Amaziel vous as fait installer dans l' Overall_hearder
Code:
<table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: #000000; z-index:1000; width: 100%; border-bottom:1px solid #5E4036;" ><tr><td><center>{GENERATED_NAV_BAR}</center></td></tr></table>


et remplacer le par celui-ci : 
Code:
<TABLE STYLE="POSITION: ABSOLUTE;
              LEFT: 0PX;
              TOP: 0PX;
              RIGHT: 0PX;
              BACKGROUND-COLOR: none!important;
              Z-INDEX:1000;
WIDTH: 100%;" >
<TR><TD><CENTER>{GENERATED_NAV_BAR}</CENTER></TD></TR>
</TABLE>


Cela devrait  donner ceci :


Voila, Voila :cow:

Si vous avez la moindre question ou si vous souhaiter une modification a cette petite barre, n'hésitez pas a répondre à ce message, je reviendrait régulièrement vous aider. 

Bonne journée à tous :love:

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 :




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)

Taktiik

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



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


W W W

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

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

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

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

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


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


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

Navigation





Menu avec possibilité de Ouvrir/Fermer


Partie Template

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

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

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

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

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

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

         case 'left':
            break;

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

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

         default:
            slid_vert = true;
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
  
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://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 -->
N'oubliez pas de remplacer les liens dans le code signalez par :" adresse de votre forum" Winkà partir de la l.218
Publiez votre template et dirigez-vous vers votre Feuille de style CSS =)!


Partie CSS

Maintenant, Ajoutez ce CSS au votre :

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

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

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

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

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

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





Menu qui reste toujours ouvert


Partie Template

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

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

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

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

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

         case 'left':
            break;

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

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

         default:
            slid_vert = true;
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
  
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://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 -->
Partie CSS

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

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

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



Navigation




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

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

sébastien

Navigation rapide - Bloc flottant qui s'ouvre au survol - Ven 23 Nov 2012 - 17:01


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






Navigation rapide


Difficulté
Facile,il ne reste qu'à personnaliser
Outils
Aucun
Résultat
Avoir une navigation rapide pratique et discrète
correction du CSS
Sparrow-style
Crédit
© Never-Utopia



code HTML et CSS



Le code HTML est à mettre dans les annonces.
PA=>général=>messages et emails =>annonces

Pour les paramètres de l'annonce, vous choisissez :
> Activer les annonces : Oui
> Affichage des annonces : Toutes les pages
> Défilement : Désactiver

Puis vous mettez créez une annonce et y mettez ce code :
Code:
<div class="widget_flottant">
<span class="widget_flottant3">
<a href="http://l-anneau-des-dragons.1fr1.net/" class="postlink"><span style="font-size: 18px; line-height: normal; text-decoration: underline; font-weight: bold;">Index</span></a></br></br>
<u>Info</u></br>
<a href="lien" class="postlink"><strong>Règlement</strong></a></br>
<a href="lien" class="postlink"><strong>Backgroud</strong></a></br>
<a href="lien" class="postlink"><strong>Races jouables</strong></a></br>
<a href="lien" class="postlink"><strong>Compétences</strong></a></br>
<a href="lien" class="postlink"><strong>Modèle de fiche</strong></a></br>
<a href="lien" class="postlink"><strong>Cadre de topic</strong></a></br></br>
<u>HRP</u></br>
<a href="lien" class="postlink"><strong>Administration</strong></a></br>
<a href="lien" class="postlink"><strong>Taverne</strong></a></br>
<a href="lien" class="postlink"><strong>Archive</strong></a></br></br>
<u>RP</u></br>
<a href="lien" class="postlink"><strong>RP-1</strong></a></br>
<a href="lien" class="postlink"><strong>RP-2</strong></a></br>
<a href="lien" class="postlink"><strong>RP-3</strong></a></br>
<a href="lien" class="postlink"><strong>RP-5</strong></a></br>
<a href="lien" class="postlink"><strong>RP-6</strong></a></span>
<span class="widget_flottant2"><img src="http://i44.servimg.com/u/f44/15/54/03/92/anneau10.gif" border="0" alt="" />
</span>
</div>



Vous allez ensuite dans la feuille de CSS pour mettre le CSS :
Code:
.widget_flottant
{
  z-index: 999;
  position:fixed;
  top: 50px;
  right: 0px;
  width: 0px;
  height: 100px;
  transition: 1s;
  -webkit-transition: 1s;
  color: #dfdfdf;
  font-size: 12px;
  font-family: 'verdana';
}
.widget_flottant:hover
{
  width: 150px;
  height: 361px;
  transition: 1s;
  -webkit-transition: 1s;
}
.widget_flottant3
{
  display:block;
  text-align: center;
  margin: 0px;
  height: 361px;
  overflow: hidden;
  background: #7F7F7F;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border: 2px #000000 solid;
}
.widget_flottant2
{
  position: relative;
  float:left;
  display:block;
  margin: 0px;
  overflow: hidden;
  width: 33px;
  height: 175px;
  left: -33px;
  top: -320px;
  background-image: url(http://img15.hostingpics.net/pics/621948navrap.png);
  background-repeat: no-repeat;
}
.widget_flottant a {
  color: #c4c4c4!important;
}
.widget_flottant a:hover {
  color: #ffffff!important;
}



Personnalisation


Pour personnaliser ce code, je vous suggère d'aller lire ce sujet, il m'a aidé à construire le CSS de ce code. Il devrait pouvoir vous aider à le personnaliser.

Nom du sujet
.code { CSS: ???; }
Lien
http://www.never-utopia.com/t41098-code-css
Réaliser par
Shinomix




© Never-Utopia

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

[Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Jeu 21 Juin 2012 - 20:40


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




Tuto : Bottom & Up



Niveau : Facile / Exemple : Par là


Bonjour à tous, en ce jour d'été, je vais vous montrer comment placer les images/boutons/icônes haut et bas pour accéder directement en haut de la page ou en bas de la page. C'est une sorte de navigation rapide si vous préférez. Bref, sans plus attendre, je vais rentrer dans le vif du sujet.

Donc pour commencer, vous devrez vous rendre au Panneau d'Administration > Affichage > Templates > Général > overall_header !
Trouvez la fermeture de la balise "head" :
Code:
</head>


Et juste après, vous trouverez l'ouverture de la balise "body".
Juste après l'ouverture de la balise body, collez-y juste, ce code :

Code:
  <div class="haut">
    <a href="#top"><img src="http://illiweb.com/fa/pbucket.gif" alt="RSS" style="border:none" /></a>
  </div>
  <div class="bas">
    <a href="#bottom"><img src="http://illiweb.com/fa/pbucket.gif" alt="RSS" style="border:none" /></a>
  </div>

  <!-- Script pour que le défilement vers le haut ou le bas soit fluide -->
  <script src="http://milouze14.fr/M14smoothscroll.js" type="text/javascript"></script>



Donc nous allons étudier ce petit code. Donc en premier temps, on retrouve une classe nommé ''haut'' dans une div. Rien de très spéciale. Ensuite, on retrouve cette ligne de code :
Code:
<a href="#top">

Si je ne me trompe pas, c'est une ancre en langage informatique qui nous amènera directement au top, c'est-à-dire en haut de la page lorsqu'on cliquera dessus.

Puis nous retrouvons ceci :

Code:
<img src="http://illiweb.com/fa/pbucket.gif" alt="RSS" style="border:none" />

C'est très simple. Ce sera l'image que vous choisira comme bouton pour accéder en haut de la page. Personnellement, j'ai choisi une image merdique. Vous pouvez donc la changer directement ou ultérieurement si vous préférez.

Bref, si nous allons un peu plus loin, la div se referme puis une nouvelle div s'ouvre cette fois avec comme classe '' bas ''. C'est le même principe que l'autre div. On retrouve une ancre qui mène directement au bottom, c'est-à-dire au bas de la page puis l'image que vous choisirez pour représenter le bouton ''bottom/bas'' dont vous pouvez changez.

À la toute fin, on retrouve un code java dont vous n'avez pas besoins de vous préoccuper.

Donc c'est tout pour le code html. Assurez-vous de bien enregistrer et de confirmer en cliquant sur le ''+'' en vert qui servira à publier.


Ce n'est pas encore fini. Nous allons maintenant nous diriger vers le CSS.

Donc cette fois, c'est Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS !

Collez une fois que vous y êtes ce code CSS :

Code:
.haut{
        position:fixed;
        bottom:500px;
        left:10px;}
       
.bas{
        position:fixed;
        bottom:460px;
        left:10px;}

Comme vous pouvez le constater, on retrouve les deux classes qu'on a vu plus tôt dans la template overall_header : ''haut'' et ''bas''. On retrouve la position fixe évidemment et sa place. Il est libre à vous de personnaliser les deux boutons comme vous le voulez en rajoutant une bordure, un hover, etc. Si vous ignorez comme coder en CSS, vous pouvez suivre le cour détaillé sur le "Site du Zero". Une fois que vous avez fini, enregistrez et le tour est joué. Vous avez terminé et votre navigation rapide est officiellement présente.

C'est tout. Si vous avez une quelconque question, n'hésitez pas à la dans la section "problème avec mon code".


Acnolir : Toute reproduction partielle ou complète est strictement interdite.

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

Coriolis

Widget flottant - Bloc flottant sans survol - Ven 4 Juin 2010 - 18:37



Créer un bloc flottant

Le bloc flottant, c'est un petit cadre qui se place sur votre page et qui accompagne le visiteur même s'il descend ou remonte sur cette même page. Sa position est fixe, ainsi, peu importe où vous vous situez sur la page il restera présent.

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


Avant tout chose, il faut créer le bloc en lui-même.
Pour ma part, j'ai choisi de créer une petite fenêtre avec, par exemple, mon partenaire (Never-utopia). Je crée une division, avec son contenu (le contenu ici est donc le logo de N-U, il est possible d'y mettre ce que l'on veut, une navigation, une liste de logo, des avatars, le copyright du forum).

Code:
<div class="bloc_flottant"><a href="http://www.never-utopia.com" target="_blank"><img src="http://host.image.files.free.fr/host/49abfc8769e6cbouton-nu.png"></a></div>

Note : la class de la division se nomme \\"bloc_flottant\\", c'est elle qui va nous guider pour la suite.

Placez ce code à la suite de votre page d'accueil (en-tête).
Chemin sur Forumactif : Panneau d'administration > affichage > généralités.


À présent le reste du travail concerne uniquement du code css.
Dans la feuille de style du forum.
Chemin sur Forumactif : Panneau d'administration > affichage> couleurs > feuille de style

Il faut commencer par établir la taille de notre wiget.
Code:
.bloc_flottant
{
width: 150px;
height: 100px;
}

Note : Mon bloc fera 150pixels de large et 100 de haut.


Plaçons-le à présent sur la page.

Attention : lorsqu'on a placé le premier code dans le cadre de l'en-tête, on a, implicitement, choisi de ne faire apparaitre ce bloc que sur l'index du forum. Si vous souhaitez l'afficher sur l'intégralité du forum, il est possible de placer le code dans le template overhall_header.

Pour placer le bloc sur la page, on utilise la position:fixed. Le bloc restera présent à l'écran au même endroit même si le visiteur descend ou remonte sur la page.
Code:
.bloc_flottant
{
width: 150px;
height: 100px;
position:fixed;
top: 50px;
right: 10px;
}

Note : "top" signifie que j'ai placé mon bloc à 50 pixels du haut de ma page (entre le bloc et le haut de page il y aura 50px de marge). "right" signifie que j'ai placé mon bloc à 10pixels du bord droit de ma page.

Testez, vous verrez le bloc existe, le bloc flotte, mais le bloc est encore un peu moche, là, non ? En ajoutant quelques propriétés css vous pourrez améliorer la présentation de ce petit objet. Quelques exemples.
un couleur de fond, une image de fond avec la propriété background-color ou background-image. Une bordure (border), on peut l'arrondir (-moz-border-radius & cie) etc.


(sachez que ce tutoriel est ma création et que je l'ai déjà proposé sur d'autres supports d'entraide.)

Naviguation sur le côté sans les widgets - Mer 10 Mar 2010 - 21:11



Voila, si vous voulez une naviguation sur le côté et sans utiliser de widget qui déforme la page :

Vous prenez le code de la naviguation et vous le mettez dans ce code :

Code:

<table style="position: fixed; bottom: 50px; left: 0px;background-color: ;z-index:10000;"><tr><td>ICI METTEZ LES CODE DE VOTRE NAVIGUATION</td><td style="vertical-align: bottom;"><img src="" onClick="document.getElementById('chatboxpop').style.display=(this.src=='')?'block':'none';this.src=(this.src=='')?'':'';"/></td></tr></table>


Ensuite vous copiez le code juste en haut que vous aurez modifier et vous le mettez dans
"Panneau d'administration -> Affichage -> Page d'accueil -> Généralité" et vous mettez ce code

Ensuite vous allez dans "Panneau d'administration -> Affichage -> Templates -> Général"

Et dans tout les templates que je vais citer , vous mettez le code du haut que vous aurez modifier (tout en haut du template)
topics_list_box
viewtopic_body
viewforum_body


Ensuite publier et voila cheers Je vous conseil d'éssayez sur un forum test avant Sleep
Le code du haut est un remix du code "Chat Box Latéral" Donc il y a encore des restes du code en question que j'ai pas tros voulu toucher (je veux pas créez de gros bug :§(zze: )

Voili Voilou

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

Denkou

ChatBox latérale (avec ou sans transition) - Mer 16 Déc 2009 - 11:21


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, voici un code qui vous permettra de faire ceci :

Spoiler:


Ensuite, on va aller mettre la chatbox où vous voulez qu'elle soit.

Si vous voulez qu'elle apparaisse uniquement sur l'index, vous allez dans :
Panneau d'administration > Affichage > Page d'accueil > Generalité

Si vous voulez qu'elle apparaisse sur toutes les pages, vous allez dans :
Panneau d'administration > Affichage > Templates > Général > overhall_header
Et vous allez mettre le code juste sous la balise body. Pour phpBB2, la balsie body ressemble à ceci :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">





Puis, vous mettez le code de la chatbox à l'endroit choisi.

Code normal de la chatbox :
Code:
<table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: 0px; z-index:10000;"><tr><td style="background-color: #ffffff;"><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; margin: 2px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/></td></tr></table>


Code de la chatbox avec transition fluide :
Code:
  <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: -804px; z-index:10000; -webkit-transition: 1s; transition: 1s;" id="chatboxpop">
    <tr>
      <td style="background-color: #ffffff; padding: 2px;">
        <iframe src="/chatbox/index.forum" scrolling="no" style="width: 800px; height: 400px;" frameborder="0">
        </iframe>
      </td>
      <td style="vertical-align: bottom;">
        <img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.left=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'0px':'-804px';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/>
      </td>
    </tr>
  </table>





Pour personnaliser, vous pouvez utiliser les codes ci-bas :

Code normal de la chatbox :
Code:
<table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: 0px; z-index:10000;"><tr><td style="background-color: #ffffff;"><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; margin: 2px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="ADRESSE DE L'IMAGE OUVRIR" onClick="document.getElementById('chatboxpop').style.display=(this.src=='ADRESSE DE IMAGE OUVRIR')?'block':'none';this.src=(this.src=='ADRESSE DE IMAGE OUVRIR')?'ADRESSE DE IMAGE FERMEE':'ADRESSE DE IMAGE OUVRIR';"/></td></tr></table>


Code de la chatbox avec transition fluide :
Code:
  <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: -804px; z-index:10000; -webkit-transition: 1s; transition: 1s;" id="chatboxpop">
    <tr>
      <td style="background-color: #ffffff; padding: 2px;">
        <iframe src="/chatbox/index.forum" scrolling="no" style="width: 800px; height: 400px;" frameborder="0">
        </iframe>
      </td>
      <td style="vertical-align: bottom;">
        <img src="ADRESSE DE IMAGE OUVRIR" onClick="document.getElementById('chatboxpop').style.left=(this.src=='ADRESSE DE IMAGE OUVRIR')?'0px':'-804px';this.src=(this.src=='ADRESSE DE IMAGE OUVRIR')?'ADRESSE DE IMAGE FERMER':'ADRESSE DE IMAGE OUVRIR';"/>
      </td>
    </tr>
  </table>


Voilà !




Important : Faites attention aux " et aux ', sans cela le code ne fonctionne pas.

Histoire de ne pas avoir 2 ChatBox, allez dans : P.A > Module > ChatBox > Ne plus afficher.

Voilou !

Edit Sparrow : veillez à avoir deux adresses d'image DIFFERENTES pour l'ouverture et la fermeture de la CB. Si vous souhaitez mettre la même image, hébergez-la deux fois pour que les adresses soient différentes.

Vous avez une question ou un problème pour installer ou personnaliser ce LS ? Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.


Revenir en haut

La date/heure actuelle est Mar 21 Nov 2017 - 20:17