Selecteur de thème

[Arisana]

Bonjour,

J'ai récemment installé un sélecteur de thème en suivant un tuto de S.O.S forum.
C'est le seul tuto qui rendait mes thèmes identiques à ce que je voulais.
En revanche, il y a deux soucis.

1- Une barre prévisualisation hitskin apparaît, et il me semble qu'elle n'y a pas toujours été
2- (Mon soucis Majeur) à chaque poste de message ou prévisualisation, on retombe sur le thème actuel.

J'ai essayé divers autres tutos mais tous ne rendaient pas DU TOUT le thème comme il le fallait ...

J'espère donc que quelqu'un ici aura la solution, sachant que j'ai aussi essayé l'astuce du selecteur de theme de forumactif, qui ne rendait pas comme je le souhaitais.

Arisana

[diedblack]

Prend le sélecteur de thème proposer dans les tutoriels officiels de ce forum.
Il doit se trouver surement dans Questions et réponses fréquentes ou dans Trucs et astuces...

J'ai essayé de le chercher pour toi mais ces tellement mellant :S -.- ya des tutoriels un peu n'importe ou dans les deux catégorie et ces plein, bonne chance

[Savalogin]

Bonsoir,

Juste pour ajouter par rapport à ce que dit mon voisin du dessus. Le tutoriel se trouve à cette adresse: Lien Tuto

Cordialement.

[Arisana]

Tout d'abord, merci de vos réponses !

Il s'agit d'un peu près le même genre de tutos que j'avais essayé, et celui ci précise bien : "Il ne s'agit pas d'un changement complet de thème, mais de la possibilité pour les utilisateurs d'un choix entre plusieurs fichiers CSS différents. "

Or justement, dans certains thèmes que je propose, le fond est répété, dans d'autres il est fixe, et ceci n'apparaît pas dans le CSS, et je me retrouve avec des erreurs comme sur ce forum test : http://passionmangabeta.forumgratuit.org/?sid=c8b298bff17bfcec139b4c5dcf6f0743
Je ne suis pas contre l'idée de ne changer que le CSS, mais chaque version de mon forum est différente de l'autre.
Si vous souhaitez voir ces différentes versions =>
Le selecteur de thème se trouve en widget => http://passionmangang.forumactif.com/forum

[Arisana]

Up ...

[Arisana]

Up up ....

[kheino]

Bonjour,

Il y a une autre façon de créer un sélecteur de thèmes, un peu plus long à réaliser, mais très efficace et plus "indépendant" :

- Tout d'abord créer ses différentes feuilles de style CSS
Là on peut préciser TOUT ce l'on veut qui diffère du thème de base, le CSS en place prenant la priorité sur les réglages du PA >> Images
- Héberger ses feuilles CSS via un hébergeur (il y en a des gratuits et ce ne sont pas des fichiers lourds)

Ensuite installer les rappels dans le template overall_header :

Code:

<link rel="alternate stylesheet" type="text/css" href="url-compter_perso-hébergeur/css_theme_baselight.css" title="titre du thème1" />

En HTML, on installera son sélecteur dans un tableau de préférence (pour le styler), donc par exemple :

Code:

<div id="theme" style="visibility: hidden; display: none;">
<table onclick="javascript:toggleVisibility('theme')" class="viewon" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td align="center" valign="middle">
<a href="#" onclick="setActiveStyleSheet('MEME TITRE QUE LA FEUILLE HEBERGEE'); return false;">Titre du thème1</a>
 <a href="#" onclick="setActiveStyleSheet('MEME TITRE QUE LA FEUILLE HEBERGEE'); return false;">[eco (allégée)]</a>
<br />
ETC
</td></tr></table>
</div>

EDIT : Ah oui,il y a aussi le JS toggleVisibility à héberger dans les pages de gestion des javascripts :

Code:

function toggleVisibility(tagId) {
      if (!document.getElementById) {
        msg = 'Votre navigateur est trop ancien pour profiter de votre visite\n';
        msg += 'Veuillez le mettre à jour ou vous en procurer un autre';
        return false;
      }
      var tagToToggle;
      try {
        tagToToggle = document.getElementById(tagId);
      }
      catch (e) {
        alert('Je n\'ai pas pu trouver la balise cible');
      }
      try {
        if (tagToToggle.style.display == 'none') {
            tagToToggle.style.display = 'inline';
        }
        else {
            tagToToggle.style.display = 'none';
        }
      }
      catch (e) {}
      if (tagToToggle.style.visibility == 'hidden') {
        tagToToggle.style.visibility = 'visible';
      }
      else {
        tagToToggle.style.visibility = 'hidden';
      }
  }

Ensuite il faut revenir au moins une fois à l'index pour que le choix du thème soit validé.

[Arisana]

Bonjour,


Merci de la réponse.
J'ai suivis pas à pas la méthode et j'ai créé une feuille de css pour tester mais le problème c'est que le sélecteur de thème n'apparaît même pas sur l'index ...

[kheino]

Où l'as-tu mis ? Dans le message d'accueil ?
Essaie de ne mettre que

Code:

<table onclick="javascript:toggleVisibility('theme')" class="viewon" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td align="center" valign="middle">
<a href="#" onclick="setActiveStyleSheet('MEME TITRE QUE LA FEUILLE HEBERGEE'); return false;">Titre du thème1</a>
 <a href="#" onclick="setActiveStyleSheet('MEME TITRE QUE LA FEUILLE HEBERGEE'); return false;">[eco (allégée)]</a>
<br />
ETC
</td></tr></table>

[Arisana]

Heu ... En fait chu' entrain de me demander, ce code-là, il va toujours dans le template ou dans une fiche html ?
En tout cas en plaçant la nouvelle version dans le template, j'ai du test qui apparaît tout en haut :
"
test[eco (allégée)]
ETC"

[kheino]

Tout dépend où tu veux ton sélecteur de thèmes :
Pour plus d'accessibilité en tests, peut-être c'est mieux dans le message d'accueil...

Perso, une fois fini, je l'ai mis dans le overall_header et positionné dans la navbar (le bouton).

[Arisana]

Je l'aurai bien vu dans le coin au gauche de l'index

Voici le template où je l'ai placé :

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="alternate stylesheet" type="text/css" href="http://www.archive-host.com/files/1315707/87b7da27d1ef7640049ee9e6a5e9856a14a9c88f/avril.css" title="test" />
<<table onclick="javascript:toggleVisibility('theme')" class="viewon" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td align="center" valign="middle">
<a href="#" onclick="setActiveStyleSheet('test'); return false;">test</a>
 <a href="#" onclick="setActiveStyleSheet('test'); return false;">[eco (allégée)]</a>
<br />
ETC
</td></tr></table>
  <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 ?l?ments */
            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 contenur en fonction des ?l?ments et de la hauteur personnalis?e dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des ?l?ments 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}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

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

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

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

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

[kheino]

Ah que nenni point du tout ! tu ne peux pas mettre le HTML entre les balises "head", c'est seulement pour les scripts et les rappels de scripts.
Donc ta feuille de style de l'hébergeur on la met bien entre les "head", mais le HTML (le tableau) il faut le placer après l'ouverture de la balise "body" (le corps du forum) :

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}" />
   
<link rel="alternate stylesheet" type="text/css" href="http://sd-1.archive-host.com/membres/up/9115553352330177/css_theme_berdolplanet.css" title="berdolplanet" />
 
 
        <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 ?l?ments */
            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 contenur en fonction des ?l?ments et de la hauteur personnalis?e dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des ?l?ments 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}">
 
<table class="selecthemes" onclick="javascript:toggleVisibility('theme')" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td align="center" valign="middle">
<a href="#" onclick="setActiveStyleSheet('berdolplanet'); return false;">test</a>
<br />
ETC
</td></tr></table>
   
   <!-- BEGIN hitskin_preview -->

ATTENTION pour le copié-collé, vois bien où je me suis arrêtée dans le template, parce que je ne t'ai donné que le début jusqu'au tableau.

Ensuite, j'ai mis un class="selecthemes"au table à reprendre dans le CSS pour le positionnement et le style général de ton sélecteur (rien ne t'empêche de le mettre dans un autre tableau, etc...).

EDIT : Il y avait un "class" de trop, c'est corrigé et le CSS était bien là où tu l'avais placé.

[kheino]

Désolée pour le doublon, mais il y a encore un script à héberger et à rappeler dans le overall_header, ainsi qu'un attribut id à assigner au HTML (attention plus haut j'ai aussi rééditer le tout (2x).

Code:

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
      && a.getAttribute("rel").indexOf("alt") == -1
      && a.getAttribute("title")
      ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document·cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document·cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

Ensuite dans le template, avant la nouvelle variable {HOSING_TJS} on insert le rappel du script :

Code:

   <!-- END switch_ticker_new -->
 
<script type="text/javascript" src="HEBERGEUR.js"></script>
 
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->

Dans le HTML au même endroit que précisé plus haut, ça devient :

Code:

<div class="selectheme"><a href="javascript:toggleVisibility('theme')"><img src="http://i43.servimg.com/u/f43/17/03/76/41/elepha10.gif" /></a></div>
<div id="theme" style="visibility: hidden; display: none;">
<div class="thembox">
<table onclick="javascript:toggleVisibility('theme')" class="viewon" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td align="center">
<div align="center" class="themhit">THEMES</div>
<table class="thembox1" style="width: 0 auto; padding-right: 2px; padding-left: 2px;" border="0" cellspacing="0" cellpadding="0">
<tr><td class="themlist">
<div class="marquer"><a href="#" onclick="setActiveStyleSheet('default'); return false;">Base</a>
 <a href="#" onclick="setActiveStyleSheet('baselight'); return false;">[eco]</a></div>
<div class="marquer"><a href="#" onclick="setActiveStyleSheet('test'); return false;">Berdolplanet</a>
 <a href="#" onclick="setActiveStyleSheet('testlight'); return false;">[eco]</a></div>
</td></tr></table>
</td></tr></table>
</div></div>

Désolée, mais ça faisait un bon moment que j'avais installé mon sélecteur...

Pour la peine, je vais t'ai fait un HTML et un CSS un peu plus complet avec déjà le positionnement que tu pourras encore adapter et l'option retour au thème de base (attention, les identifiants plus haut ne sont pas les mêmes):

Spoiler:

N'oublie pas que pour valider un thème, il faut changer de page, rester sur la même page sélectionne le thème mais ne le valide pas.

Bien du plaisir.

[Arisana]

Je crois que je me suis emmêlée les pinceaux (j'ai pas vraiment un bon niveau en la matière ...)
En tout cas j'ai bien le gif avec le tableau (merci beaucoup, d'ailleurs, il est super ) mais lorsque je clique et que je change de page le thème n'est pas modifié.
J'ai rien modifié dans le code, je suppose que ce n'est pas normal, que je dois rajouter des trucs ? Et ça "HEBERGEUR.js" ça correspond à quoi ?

Après, tous les codes vont dans le template overall_header donc ? Sauf le "spoiler" qui va dans le HTML ?

Merci de prendre sur votre temps pour me répondre et m'aider

[kheino]

- Tous les codes HTML vont dans le overall_header LÀ où je les ai placés :
Rappels des feuilles de style hébergées
Rappel du deuxième JS
Code su sélecteur
- Ce qui entre le spoiler va dans la feuille de style CSS.
- Le JS toggleVisibility dans les modules > Gestion des pages JS (attention de l'activer).
- Le rappel du deuxième JS (que je donne dans l'avant-dernier de mes posts est à héberger aussi) :

Code:

<script type="text/javascript" src="HEBERGEUR.js"></script>

Enfin :
- Dans le "spoiler" va dans la feuille de style CSS du forum.

Les options [eco] sont des feuilles de styles avec le thème (image de fond, couleur du texte, etc) auxquels j'ai supprimé les effets comme les arrondis, certaines images en fond, des cadres en images, les -shadow, etc...
Ceci afin d'alléger le chargement du forum pour ceux qui ont des bandes passantes plus faibles, et ma foi, parce que c'est aussi agréable de temps en temps de naviguer sur un forum "épuré". La feuille de style du CSS de base (celle qui est sur le forum) allégée est aussi à héberger, d'où le "baselight" chez moi.
Ce n'est qu'une option, mais pas du tout obligée...

[Arisana]

Okay, merci pour l'explication ! C'est donc au niveau du JS que je me suis plantée. J'avais pas saisis que js = javascript.
J'crois que c'est bon, que tout est au bon endroit. Par contre, lorsque j'utilise le selecteur, il y a un # qui se rajoute à l'adresse, et lorsque je change de page il disparaît, mais le thème ne change pas ...

Vraiment merci beaucoup de m'aider

[kheino]

Peux-tu donner l'url du forum en question ?

[sefyu783]

Je suis Sefyu et depuis plusieurs mois, j’essaie d'installé un sélecteur de thème et je n'y arrive pas. Peut on m'aider par le biais d'une vidéo SVP car je suis des instruction que l'on ma donné précédemment et sa fait juste apparaitre un #


Merci d'avance
Sefyu le désespérer lol

[Arisana]

Tiens, c'est un forum test => http://passionmangabeta.forumgratuit.org/

[kheino]

Si ça vous fait ça à toi Arisana et Sefyu, c'est que fait une erreur au niveau du deuxième script, celui des thèmes.

Recommençons depuis le début et veillez bien à remplacer les url dans les liens de rappel des feuilles de style et du JS.

1°- Créer vos feuilles de style avec notepad ou bloc-notes et les enregistrer au format .css
- Copier-coller le js suivant et enregistrer au format .js :

Code:

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}
 
function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}
 
function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
      && a.getAttribute("rel").indexOf("alt") == -1
      && a.getAttribute("title")
      ) return a.getAttribute("title");
  }
  return null;
}
 
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document·cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document·cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
 
window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}
 
window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}
 
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

2°- Héberger les fichiers.cs et le fichier.js (je ne sais pas pourquoi il ne fonctionne pas directement dans les pages js du forum celui-ci).

3°- dans le PA >> Modules > Gestion des pages javascripts copier-coller le script "toggleVisibility" (que vous pouvez utiliser pour beaucoup d'effets demandant d'ouvrir quelque chose de caché comme le bouton-éléphant de notre sélecteur, avec juste une ligne de rappel dans le HTML).
Attention, ceci n'est pas une obligation, juste une option. Le sélecteur peut très bien être un tableau ouvert :

Code:

function toggleVisibility(tagId) {
      if (!document.getElementById) {
        msg = 'Votre navigateur est trop ancien pour profiter de votre visite\n';
        msg += 'Veuillez le mettre à jour ou vous en procurer un autre';
        return false;
      }
      var tagToToggle;
      try {
        tagToToggle = document.getElementById(tagId);
      }
      catch (e) {
        alert('Je n\'ai pas pu trouver la balise cible');
      }
      try {
        if (tagToToggle.style.display == 'none') {
            tagToToggle.style.display = 'inline';
        }
        else {
            tagToToggle.style.display = 'none';
        }
      }
      catch (e) {}
      if (tagToToggle.style.visibility == 'hidden') {
        tagToToggle.style.visibility = 'visible';
      }
      else {
        tagToToggle.style.visibility = 'hidden';
      }
  }

4°- Dans le template overall_header copier-coller jsuqu'à la dernière grande balise où je me suis arrêtée (ceci pour le cas où vous auriez modifié plus bas la navbar ou autres).
- Pensez à placer vos url (adresses à la place des TON_HEBERGEUR.css oule TON_HEBERGEUR.js
-Veillez à ce les titres des thèmes soient pariels que ceux des fichiertitre.css et entre ('tritre') du code HTML-sélecteur (ce sont des rappels).
- Iln'y a que le titre ('default') qui reste pour le rappel de la feuille de style du forum, celle de base :

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

 <link rel="alternate stylesheet" type="text/css" href="TON_HEBERGEUR.css" title="baseeco" />
<link rel="alternate stylesheet" type="text/css" href="TON_HEBERGEUR.css.css" title="titre2" />
 <link rel="alternate stylesheet" type="text/css" TON_HEBERGEUR.css.css" title="titre2eco" />
   
        <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 ?l?ments */
            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 contenur en fonction des ?l?ments et de la hauteur personnalis?e dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des ?l?ments 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 -->
 
<script type="text/javascript" src="TON_HEBERGEUR.js"></script>
 
   {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 class="selectheme viewon"><a href="javascript:toggleVisibility('theme')"><img src="http://i43.servimg.com/u/f43/17/03/76/41/elepha10.gif" /></a></div>
<div id="theme" style="visibility: hidden; display: none;">
<div class="thembox">
<table onclick="javascript:toggleVisibility('theme')" class="viewon" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td align="center">
<div align="center" class="themhit">THEMES</div>
<table class="thembox1" style="width: 0 auto; padding-right: 2px; padding-left: 2px;" border="0" cellspacing="0" cellpadding="0">
<tr><td class="themlist">
<div class="marquer"><a href="#" onclick="setActiveStyleSheet('default'); return false;">Base</a>
 <a href="#" onclick="setActiveStyleSheet('baselight'); return false;">[eco]</a></div>
<div class="marquer"><a href="#" onclick="setActiveStyleSheet('berdolplanet'); return false;">Berdolplanet</a>
 <a href="#" onclick="setActiveStyleSheet('berdolplanetlight'); return false;">[eco]</a></div>
</td></tr></table>
</td></tr></table>
</div></div>
 
   <!-- BEGIN hitskin_preview -->

- Je vous rappelle que les thèmes-[eco] sont une option personnelle à mon sélecteur, donc pas obligatoire !
- Les div class="marquer" sont une option en plus à personnaliser, mais pas obligé, ont peut séparer par le code des sauts de ligne :

Code:

<br />

- Les [eco] sont séparer par le code html de l'espacement latéral & nbsp; (sans espace)

5°- le CSS à personnaliser à votre sauce.

[Arisana]

J'ai tout refais en suivant pas à pas, mais le problème est le même.
J'me demandais, est-ce qu'il faut remplacer dans :

Code:

<div class="marquer"><a href="#" onclick="setActiveStyleSheet('berdolplanet'); return false;">Berdolplanet</a>

le # par quelque chose ? Parce que c'est ce qui apparaît dans la barre de titre ...

[Ea]

Bonjour,



À ma connaissance la solution donnée ici c'est juste ceci :
https://forum.forumactif.com/t308631-selecteur-de-style#2696643

En bien plus compliqué, et vous sembliez dire ne pas vouloir cela.

Pour la question du premier message, vous pouvez mettre ce script sur toutes les pages :

Code:

(function(){if(+my_getcookie("htheme")){$("head").append("<style type='text/css'>#hitskin_preview{display:none!important}body{margin-top:0!important}</style>");var a=document.location.href,b=a.indexOf("#");if(-1!=b)var c=a.substr(b),a=a.substr(0,b);else c="";b=a.indexOf("?");-1==a.indexOf("theme_id="+my_getcookie("htheme"),b)&&document.location.replace(a+(-1==b?"?":"&")+"theme_id="+my_getcookie("htheme")+c);$(function(){$("form").each(function(){var a=$(this).attr("action"),b=a.indexOf("#");if(-1!=
b)var c=a.substr(b),a=a.substr(0,b);else c="";b=a.indexOf("?");-1==a.indexOf("theme_id="+my_getcookie("htheme"),b)&&$(this).attr("action",a+(-1==b?"?":"&")+"theme_id="+my_getcookie("htheme")+c)})})}else if(null!==my_getcookie("htheme"))a=document.location.href,b=a.indexOf("#"),-1!=b?(c=a.substr(b),a=a.substr(0,b)):c="",b=a.indexOf("?"),b=a.indexOf("theme_id=",b),-1!=b&&document.location.replace(a.substr(0,b)+"dump"+a.substr(b+8)+c)})();

( voir ce tutoriel )

Ce code fonctionne comme suit :

SI il n'y a pas de cookie avec un numéro de thème hitskin : rien ne se passe
SINON :

il fait disparaître le bandeau hitskin
SI il n'y a pas theme_id=id_du_theme dans l'adresse, il recharge la page avec
il modifie les liens des formulaires pour ne pas perdre le thème à l'envoi ou prévisualisation d'un message
SI le thème est celui par défaut du forum et qu'il y a un theme_id= dans l'url on le remplace par dump=

Donc là en fait il y a déjà la plus grosse brique faite, ensuite il suffit de mettre le sélecteur de thème :

Code:

<select onchange="my_setcookie('htheme',this.value,1,0);document.location.reload()">
   <option>Choisir thème</option>
   <option value="130608">Stylize Darkgrey FR</option>
   <option value="137958">Wow pvp</option>
   <option value="100085">Dofus Nature</option>
   <option value="0">Thème du forum</option>
</select>

Et c'est fini, je l'ai testé là : http://teta.123.st/ ( le sélecteur de style est dans le footer mais on peut le mettre n'importe où ( même sur une seule page ) ).

Si ça va pour vous je verrais pour l'ajouter au tutoriel de sélecteur de thème ( dans un autre message et ça serait un sélecteur de "thème" hitskin ).

[kheino]

je l'ai testé là : http://teta.123.st/

Oui, mais ce sélecteur doit contenir :

SI il n'y a pas de cookie avec un numéro de thème hitskin : rien ne se passe

Le mien est "indépendant".
Plus long certes, mais pas plus compliqué vu que le toggleVisibility n'est qu'une option et le résultat est 100% sans bug...

[Ea]

Et bien les moins de votre solution par rapport à https://forum.forumactif.com/t308631-selecteur-de-style :

• Plus compliqué à mettre en place.
  
• Plus long.
  
• Aucune fonctionnalité en plus.
  
• Des fonctionnalités en moins.
  
• Nécessite une modification de template.

Les plus de votre solution par rapport à https://forum.forumactif.com/t308631-selecteur-de-style :

• L'affichage différent pour changer de thème.

Sauf que le script de mon sélecteur est évidemment modifihable comme on le souhaite, par exemple sur ce forum c'est une modification de mon sélecteur de style les petits carrés en haut qui permettent de changer le fond : http://www.gurafikku.org/ et j'ai déjà eu aussi des demandes pour mettre le choix du thème dans le profil ( comme une des autres options ) ou dans un widget ce qui est facilement réalisable.

Enfin je m'épanche sur tout ça alors que donc ce que je disais au départ surtout c'était que ni ma solution https://forum.forumactif.com/t308631-selecteur-de-style ni votre solution ne répondaient au problème du premier message ( mettre un thème hitskin complètement y compris les images et le changement de template ), ce qui est fait par contre par la solution que j'ai donné ci-dessus.

[kheino]

En effet, ma solution est une alternative au premier message du sujet et je l'ai spécifié dans ma première intervention :

Il y a une autre façon de créer un sélecteur de thèmes, un peu plus long à réaliser, mais très efficace et plus "indépendant"

[Arisana]

J'ai suivis la solution d'Etana qui se rapproche plus de ce que je cherchait (merci tout de même, Final-Blonde )
Mais le problème c'est que le thème ne change pas ...
J'ai mis mon code en widget le voici :

Code:

<select onchange="my_setcookie('htheme',this.value,1,0);document.location.reload()">
  <option>Choisir thème</option>
  <option value="179719">Halloween by Kimeko</option>
  <option value="179720">Automne by Naiige</option>
  <option value="178482">Août by Kimeko</option>
  <option value="178484">Juillet by Maggy-chan</option>
  <option value="178481">Mai by Kimeko</option>
  <option value="178483">Avril by Naiige</option>
  <option value="0">Thème du forum</option>
</select>

[Ea]

Il doit y avoir une erreur dans les autres scripts, vous pourriez me donner chacune des adresses des autres scripts ( sur toutes les pages ) du forum ?

( les adresses sont dans la colonne URL )

[Arisana]

Pas de soucis, d'ailleurs le script du selecteur de couleurs a cessé de marcher quand j'ai changé le thème ...

selec theme http://passionmangang.forumactif.com/14320.js
mp message profil http://passionmangang.forumactif.com/13735.js
sauvegarde http://passionmangang.forumactif.com/12550.js
Selecteur de couleurs http://passionmangang.forumactif.com/11305.js

[Ea]

Merci ^^

Il me semble que c'est juste le sauvegarde où il manque le f devant unction ( premier mot du script ).