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


5 résultats trouvés pour target

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


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


Widgets FA dans un volet coulissant



Présentation



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

Exemple en images :




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


Afficher les Widgets



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

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



Modification du template



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

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

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

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

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

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

         case 'left':
            break;

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

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

         default:
            slid_vert = true;
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

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

   <a name="top"></a>
   {JAVASCRIPT}
 
  <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

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

Astuce pour ôter le saut de page avec l'utilisation du target - Lun 10 Juin 2013 - 19:53


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


On utilise souvent le target pour les ancres ou pour les onglets.

Cependant, il arrive souvent que lorsqu'on clique sur l'onglet, il s'affiche quelque chose de détestable, désagréable et de parfaitement agaçant : un saut de page plus ou moins important.

Il existe une solution pour lui couper les vivres. :)

Une astuce pour être précise. Je l'ai utilisé => sur cette fiche . C'était pour une commande = ne pas s'en inspirer merci :).

Vous remarquerez que le saut de page n'existe plus lorsqu'on passe de la carte d'identité aux liens.



En premier, débutez avec votre html.

Vous mettez :
Code:
<div id="conteneur_information">

  <a id="votre_onglet01" class="ancre"></a>
  <a id="votre_onglet02" class="ancre"></a>
  <a href="#votre_onglet01" class="votreclassonglet" >Nom Onglet 1</a>
  <a href="#votre_onglet02" class="votreclassonglet">Nom Onglet 2</a>


Vous rajoutez autant de cette partie que vous avez d'onglet en changeant leur numéro :
Code:
  <a id="votre_onglet02" class="ancre"></a>
  <a href="#votre_onglet02" class="votreclassonglet" >Nom Onglet 1</a>



Ensuite, à la suite du code précédent, vous préparez la div qui accueillera les contenus des onglets comme ceci :
Code:
  <div class="votre_class_contenu">


Pour les contenu d'onglets, la manipulation n'est pas dure. Il faut surtout surtout faire attention que l'id ne porte pas le nom de l'id onglet. Si vous le faite, cela ne marchera pas. ^^

Bref, voilà :
Code:
    <div id="votre_onglet1">Contenu onglet 1</div>

    <div id="votre_onglet2">Contenu onglet 2</div>


Une fois que c'est fait, vous ajoutez 2 fermeture de div pour fermer le bloc du contenu des onglets et le bloc qui contient tout :
Code:
  </div>
</div>



Le html est terminé. Cela devrait donner quelque chose comme ceci :
Code:
<div id="conteneur_information">

  <a id="votre_onglet01" class="ancre"></a>
  <a id="votre_onglet02" class="ancre"></a>
  <a href="#votre_onglet01" class="votreclassonglet" >Nom Onglet 1</a>
  <a href="#votre_onglet02" class="votreclassonglet">Nom Onglet 2</a>

  <div class="votre_class_contenu">
    <div id="votre_onglet1">Contenu onglet 1</div>
    <div id="votre_onglet2">Contenu onglet 2</div>
  </div>

</div>



Il reste le css :) :
Code:
/*Fait disparaître les ancres*/
#conteneur_information a.ancre {display: none;}

/*Styliser les onglets*/
.votreclassonglet {
}

/*Bloc qui contient les contenus d'onglets*/
.votre_classe_contenu {
}

/*Contenu onglet 1*/
#votre_onglet1 {
}

/*Contenu onglet 2*/
#votre_onglet2 {
}

/*Cache les contenus d'onglets*/
#votre_onglet1 {display: none;}
#votre_onglet2 {display: none;}

/*Fait apparaître les contenus d'onglet*/
#conteneur_information a#votre_onglet01:target ~ .votre_class_contenu #votre_onglet1{display: block;}
#conteneur_information a#votre_onglet02:target ~  .votre_class_contenu #votre_onglet2{display: block;}


Si vous avez des questions, je serais ravie de vous répondre :)

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


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


Hello x)

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

Voici donc l'aperçu :

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

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



Installation HTML

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

Repérez ce code (ligne 201) :

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


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

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


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


Installation CSS

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

Code:
/* ONGLET DEVOILE EN CLIC */

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


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


Personnalisation

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

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

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

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

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

[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://2img.net/i/fa/pbucket.gif" alt="RSS" style="border:none" /></a>
  </div>
  <div class="bas">
    <a href="#bottom"><img src="http://2img.net/i/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://2img.net/i/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.


Revenir en haut

La date/heure actuelle est Ven 16 Avr 2021 - 4:43