Bonjour ^^
Je pense pouvoir me rendre utile en la matière =). Mais compte tenu de la demande, je pense avoir besoin du template correspondant : "overall_header", et certainement du css correspondant à cette partie. Si tu ne trouves pas à quelle partie cela correspond, tu peux me donner tout le code css.

J'aimerais également si possible avoir l'url du forum où tu as déjà posté les codes. Ce sera beaucoup plus facile pour moi de travailler avec.

Voilà, j'attends ça pour te proposer une solution :). Ce serait bien que tu aies déjà des exemples de bannières et de personnages que tu veux mettre à gauche.

Hello !

Tout d'abord merci de ton aide, j'ai un peu bossé tout seul dessus entretemps et du coup je suis arrivé à ce résultat : http://fallouttowrpg.forumactif.org/
Après le template et le CSS, je te les communique par MP c'est ça ?
Disons qu'à l'heure actuelle, ce que j'aurais aimé faire aurait été de déplacer le vault boy un peu plus à droite et le relever (de manière à ce qu'il ne disparaisse plus dans les bords) mais surtout tu verras qu'il y a un bug quand on passe la souris du côté droit du header, le vault-boy sort, ça fait comme si le second personnage (qu'il y a dans le header de base non personnalisé) était encore présent, en fait c'est surtout d'aide pour corriger ce bug que j'aurais besoin ^^
Et bien sûr, si tu peux me faire une image changeante, je prend de suite ! =D Je m'occuperais du graphisme ne t'inquiète pas, je te donnerai des liens à copier/coller

Merci d'avance ! =D

Alors, en fait, l'effet de déplacement du personnage de gauche se fait à chaque fois que tu survoles tout le header (donc ce n'est pas à cause du personnage qui était à droite) mais c'était apparemment l'effet désiré par le capitaine à la base. En gros, toi tu voudrais que le personnage de gauche ne se déplace qu'à partir du moment où lui seul est survolé ?

Je te propose de poster les codes que je t'ai mentionnés au dessus, ici dans le sujet, dans une balise hide si tu ne veux pas qu'ils soient vus par d'autres. Ce sera plus pratique que par mp.

On pourra gérer ensuite le déplacement du personnage un peu plus dans le cadre ainsi que la gestion des images par heures.

Oui c'est exactement ça ! =D Si on pouvait arranger ce problème, ça serait cool ^^

Alors voilà le code du header :

Spoiler:

Et voici le code CSS

Spoiler:

Bonjour !
Alors, dans le code css, on va d'abord repositionner un peu ton personnage comme tu l'as demandé. J'ai mis des valeurs qui me semblaient juste par rapport à ce que tu demandais (qu'il ne disparaisse plus dans les bords), mais tu veux peut-être autre chose, donc à toi de le dire. Il faut donc remplacer le code css # render1 qui est déjà dans ton css par celui-ci

Code:

#render1
{
  position: absolute;
  width: 250px;
  height: 500px;
  background: url(http://image.noelshack.com/fichiers/2015/47/1447698755-vault-boy-2.png); /* render de gauche */
  margin-left: 0px; /* decalage du render */
bottom:20px;
  transition: 1s;
}

Ensuite, tu remplaces ce code-ci (donc supprime le, fais bien attention):

Code:

#bloc_ban:hover #render1
{
  margin-left: 50px; /* decalage du render gauche au survol de banniere - pour pas de decalage mettre la meme marge que plus haut */
  transition: 1s;
}
#render1:hover
{
  margin-left: 0px !important; /* decalage du render gauche au survol de lui-meme - pour pas de decalage mettre la meme marge que plus haut */
  transition: 2s !important;
}

par ceci (cela va faire que le déplacement se fera uniquement au survol du personnage de gauche et non de toute la bannière)

Code:

#render1:hover
{
  margin-left: 50px;
  transition: 1s;
}


Je te propose d’essayer déjà ça, on corrigera les éventuelles erreurs, puis on fera l’effet des images  changeantes.

Ça marche super ! =) Je ferais quelques ajustements pour l'image (car je me rend compte qu'en fait l'image vault-boy convient peut-être pas du mieux Meeh...) mais je pourrai le faire tout seul

En tout cas merci, je suis impatient de découvrir la suite ! =D

Est-ce que la demande est terminée? ^^ Peut-on classer?

Ah bah non ! On a pas encore fait les images changeantes ^^

Me revoilà avec le template overall_header modifié. Il faudra évidemment que tu remplisses le code avec des vraies images que tu veux mettre. Voir instruction ici en bas du code.

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>


  <!-- AJOUT FONTS -->
  <link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700|Six+Caps|PT+Mono' rel='stylesheet' type='text/css'>


   <!-- 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="" /> <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}

  <!-- AJOUT NAVIGATION ET BANNIERE -->
    <div id="navigation">{GENERATED_NAV_BAR}</div>

  <div id="bloc_ban">
    <div id="render1">
      <div id="render1_bloc">
        <div class="ban_titre">Contexte</div>
        <div class="ban_contenu">Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella,
          deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus,
          reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.
        </div>
      </div>
    </div>
    <a href="/forum" style="display: block; width: 100%; height: 100%;"></a>
  </div>

  <script type="text/javascript">
    var d= new Date();
    var hours='h'+d.getHours();
    var backgrounds= {
      h0:'http://image.noelshack.com/fichiers/2015/47/1447937575-banniere.jpg',
      h1:'http://www.s2pmag.ch/wordpress/wp-content/uploads/2015/11/fallout-4-release-date.jpg',
      h2:'',
      h3:'',
      h4:'',
      h5:'',
      h6:'',
      h7:'',
      h8:'',
      h9:'',
      h10:'',
      h11:'',
      h12:'http://www.s2pmag.ch/wordpress/wp-content/uploads/2015/11/fallout-4-release-date.jpg',
      h13:'',
      h14:'',
      h15:'',
      h16:'',
      h17:'',
      h18:'',
      h19:'',
      h20:'',
      h21:'',
      h22:'',
      h23:''
    };
    var characters= {
      h0:'http://image.noelshack.com/fichiers/2015/47/1447698755-vault-boy-2.png',
  h1:'http://img1.wikia.nocookie.net/__cb20100325144630/fallout/images/5/57/34_Harbinger_of_War.png',
      h2:'',
      h3:'',
      h4:'',
      h5:'',
      h6:'',
      h7:'',
      h8:'',
      h9:'',
      h10:'',
      h11:'',
  h12:'http://img1.wikia.nocookie.net/__cb20100325144630/fallout/images/5/57/34_Harbinger_of_War.png',
      h13:'',
      h14:'',
      h15:'',
      h16:'',
      h17:'',
      h18:'',
      h19:'',
      h20:'',
      h21:'',
      h22:'',
      h23:''
    };
    var newBackground='url('+ backgrounds[hours] +')';
    var newChara='url('+ characters[hours]+')';
  $('#bloc_ban').css('background-image',newBackground);
  $('#render1').css('background-image',newChara);
  </script>
   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">



          <!-- PERSONNALISER LE TITRE DU FORUM -->
  <div id="titre_forum">Blackout</div>
  <div id="sous_titre_forum">everything is falling apart</div>



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

Explications
Il y a deux "tableau" de données à remplir avec les urls de tes images. J'ai prévu qu'il y ait une image par heure pour chaque élément de la bannière (donc le fond et le personnage de gauche) mais tu peux tout à fait mettre la même url pour plusieurs heures. Dans le code, les deux tableaux à remplir sont :

ici(tableau des images de fond)

Code:

   var backgrounds= {
      h0:'http://image.noelshack.com/fichiers/2015/47/1447937575-banniere.jpg',
      h1:'http://www.s2pmag.ch/wordpress/wp-content/uploads/2015/11/fallout-4-release-date.jpg',
      h2:'',
      h3:'',
      h4:'',
      h5:'',
      h6:'',
      h7:'',
      h8:'',
      h9:'',
      h10:'',
      h11:'',
      h12:'http://www.s2pmag.ch/wordpress/wp-content/uploads/2015/11/fallout-4-release-date.jpg',
      h13:'',
      h14:'',
      h15:'',
      h16:'',
      h17:'',
      h18:'',
      h19:'',
      h20:'',
      h21:'',
      h22:'',
      h23:''
    };

et (tableau des personnages de gauche)

Code:

   var characters= {
      h0:'http://image.noelshack.com/fichiers/2015/47/1447698755-vault-boy-2.png',
  h1:'http://img1.wikia.nocookie.net/__cb20100325144630/fallout/images/5/57/34_Harbinger_of_War.png',
 h2:'',
      h3:'',
      h4:'',
      h5:'',
      h6:'',
      h7:'',
      h8:'',
      h9:'',
      h10:'',
      h11:'',
  h12:'http://img1.wikia.nocookie.net/__cb20100325144630/fallout/images/5/57/34_Harbinger_of_War.png',
      h13:'',
      h14:'',
      h15:'',
      h16:'',
      h17:'',
      h18:'',
      h19:'',
      h20:'',
      h21:'',
      h22:'',
      h23:''
    };

Il te suffit de modifier dans le premier code que je t'ai donné ces deux zones avec comme dans h0, h1 et h12, des valeurs entre les guillemets. Comme tu l'auras certainement compris, h0 correspond à minuit, h1 à 1 heure du matin, h2 à 2 heures du matin, h13 à 13 heures (dont 1h de l'après-midi). Pour le moment les valeurs que j'ai mises sont juste des exemples donc à toi de créer les images qui y correspondront. Le code ne pourra pas fonctionner correctement tant que tu n'auras pas mis des urls pour toutes les heures (tous les h0,h1,h2,h3,h4,etc...). Mais tu pourras bien sûr faire des répétitions comme je te l'ai dit en mettant la même url à plusieurs "h"

Voilà, j'espère que c'est compréhensible. Normalement, ça devrait fonctionner quand tu auras tout rempli. Si tu as un problème, signale le ensuite ^^

C'est génial ! merci ^^ J'irais mettre ça en place très vite ! =D

D'accord, j'attends des nouvelles de ton installation alors ! ^^

Ca marche du feu de dieu ! merci

Je t'invites à aller voir ton œuvre publiée ^^ Désolé de ne pas l'avoir fait plus tôt, c'est un peu la course en semaine pour moi en ce moment
Par contre, une petite question, est-ce que tu serais prête à remettre le couvert pour autre chose ? (je ferais une demande officielle de toute façon, je vais pas essayer de banditer mes peanuts ). En fait si tu étais d'accord, j'aurais eu besoin de panneaux latéraux coulissants et/ou un portail. Quelle que soit ta réponse, merci beaucoup ! =}
Ma reconnaissance éternelle

Hello! ^^
Du coup est-ce que la demande est terminée? Si c'est le cas, pense à mettre l'icône terminée! ^^

Coucou ! Alors dans l'absolu la demande est terminée mais j'attends encore la réponse de Chinelle à ma question, faut pas qu'il soit verrouillé ! ^^

Tu sais, tu peux simplement poster ta demande et, si elle veut la prendre, elle la prendra. Sinon quelqu'un d'autre le fera ^^
En attendant, je classe ^^