Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

La date/heure actuelle est Jeu 19 Juil 2018 - 21:12

15 résultats trouvés pour i_logo

Code à utiliser pour insertion banderole animée (gif) dans le header

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Moi uniquement
Lien du forum : http://anaaga.forumactif.com/forum

Description du problème

Bonjour à tous
SUJET RESOLU SEUL !
Je souhaiterai placer ma banderole animée en haut du forum dans le header.
Pour voir la banderole en question:
https://redcdn.net/hpimg4/pics/681645BanderolleFinaleGA.gif

En cherchant sur les forums d'aide, j'ai trouvé ce code javascript que j'ai essayé d'utiliser:

$(function() {var a = ["https://redcdn.net/hpimg4/pics/681645BanderolleFinaleGA.gif"];b=function(){$("#pun-logo img,#i_logo,#logo img").attr("src",a[Math.floor(Math.random()*a.length)])};b();setInterval(b,7*1000);});

Les Problèmes:
- L'animation du gif est coupée (on ne voit que le début)
- J'aimerai qu'il prenne toute la largeur du header (le gif fait 640x91 px)

Merci par avance de votre aide !
par Arnould Jf Leclercq
le Dim 12 Nov 2017 - 10:57
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Code à utiliser pour insertion banderole animée (gif) dans le header
Réponses: 1
Vues: 244

2 forums avec les mêmes membres.

Les icônes des message ainsi que les images de fond derrière les titres de catégories ne sont pas modifiables ?


Le background des catégories l'est facilement :
Code:
body.game1 th {
  background-image: url("LIEN DE L'IMAGE");
}
body.game2 th {
  background-image: url("LIEN DE L'IMAGE");
}


Toutes les images que vous avez modifié jusqu'à présent sont soit des images de fond (fond de page, fond des catégories...) qui se modifient donc via le CSS, soit des images ayant un identifiant bien particulier (la bannière, avec un sélecteur #i_logo). Pour les images de messages, malheureusement il ne s'agit ni d'images de fond, ni d'image ayant un sélecteur permettant facilement de les modifier.
On peut envisager de les modifier mais il va falloir un script, ce qui s'avère un peu plus compliqué...

PS : l'anti clic-droit, en plus d'être inefficace, est l'un des scripts qui agace le plus les visiteurs d'un forum.
par Walt
le Dim 30 Juil 2017 - 14:48
 
Rechercher dans: Archives des problèmes avec un code
Sujet: 2 forums avec les mêmes membres.
Réponses: 27
Vues: 907

2 forums avec les mêmes membres.

Pareil pour les catégories qui sont actuellement des images et non du texte.


Sur le forum en question vous avez énormément de catégories, il faudrait en réalité n'en afficher que deux sur la page principale. Si leurs titres sont composés d'une image, vous avez un code similaire à celui-ci :

Code:
<img src="ADRESSE DE L'IMAGE" alt="" />


Vous pouvez donc ajouter un id comme je le préconisais plus haut :

Code:
<img id="car_game1" src="ADRESSE DE L'IMAGE" alt="" />


Mais comment définir une bannière pour chaque jeu ?


Toujours avec un script. La bannière de votre forum est l'élément ayant l'identifiant #i_logo
Il suffit donc d'indiquer à notre script que selon les cas, cette bannière aura telle ou telle image.

Or, une image en HTML s'affiche, nous l'avons dit, de cette façon :
Code:
<img src="ADRESSE DE L'IMAGE" alt="" />


Reprenons notre exemple précédent :
Code:
    $(function() {
      if( $('#cat_game1').length ) {
        $('body').addClass('game1');
        $('#i_logo').attr('src', 'URL_IMAGE_JEU1');
      }
      if( $('#cat_game2').length ) {
        $('body').addClass('game2');
        $('#i_logo').attr('src', 'URL_IMAGE_JEU2');
      }
    });


Nous avons rajouté deux lignes :
Code:
$('#i_logo').attr('src', 'URL_IMAGE_JEU1');

et
Code:
$('#i_logo').attr('src', 'URL_IMAGE_JEU2');


Traduites en français, elles signifient : modifie la valeur de l'attribut src de l'élément #i_logo (la bannière) par 'URL_IMAGE_JEU1' Smile

Cordialement,
Walt
par Walt
le Lun 24 Juil 2017 - 16:48
 
Rechercher dans: Archives des problèmes avec un code
Sujet: 2 forums avec les mêmes membres.
Réponses: 27
Vues: 907

comment bien centrer la bannière ?!

Hello,
Même solution que sur votre autre sujet.

Panneau d'administration » Affichage » Images et Couleurs : Couleurs » Feuille de style CSS

Trouver #i_logo et supprimer le CSS lié à cet élément. Il faut donc complètement retirer le code suivant du CSS :

Code:
#i_logo {
    margin-top: -18px;
}
par ZYVHK
le Mar 6 Déc 2016 - 16:23
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: comment bien centrer la bannière ?!
Réponses: 3
Vues: 317

Diaporama JavaScript

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://modelismenavalradioc.nouvellestar6.com/

Description du problème

Bonjour.

J'ai un diaporama sur mon forum dont les photos s'affichent de façon aléatoire.
Je souhaiterai que les photos défilent dans l'ordre.
Voici le script actuel:

$(function() {

var a =

["https://i.servimg.com/u/f57/18/73/58/54/0111.jpg","https://i.servimg.com/u/f38/15/65/84/19/01710.jpg","https://i.servimg.com/u/f57/18/73/58/54/0211.jpg","https://i.servimg.com/u/f57/18/73/58/54/0311.jpg","https://i.servimg.com/u/f57/18/73/58/54/0410.jpg","https://i.servimg.com/u/f57/18/73/58/54/0510.jpg","https://i.servimg.com/u/f57/18/73/58/54/0610.jpg","https://i.servimg.com/u/f57/18/73/58/54/0710.jpg","https://i.servimg.com/u/f57/18/73/58/54/0810.jpg","https://i.servimg.com/u/f57/18/73/58/54/0910.jpg","https://i.servimg.com/u/f57/18/73/58/54/01010.jpg","https://i.servimg.com/u/f57/18/73/58/54/01110.jpg","https://i.servimg.com/u/f57/18/73/58/54/01210.jpg","https://i.servimg.com/u/f57/18/73/58/54/01310.jpg","https://i.servimg.com/u/f57/18/73/58/54/01410.jpg","https://i.servimg.com/u/f57/18/73/58/54/01510.jpg","https://i.servimg.com/u/f57/18/73/58/54/01610.jpg","https://i.servimg.com/u/f57/18/73/58/54/01810.jpg","https://i.servimg.com/u/f57/18/73/58/54/01910.jpg","https://i.servimg.com/u/f57/18/73/58/54/02010.jpg","https://i.servimg.com/u/f57/18/73/58/54/02110.jpg","https://i.servimg.com/u/f57/18/73/58/54/02210.jpg","https://i.servimg.com/u/f57/18/73/58/54/02310.jpg","https://i.servimg.com/u/f57/18/73/58/54/02410.jpg","https://i.servimg.com/u/f57/18/73/58/54/02510.jpg","https://i.servimg.com/u/f57/18/73/58/54/02610.jpg","https://i.servimg.com/u/f58/15/65/84/19/02710.jpg","https://i.servimg.com/u/f58/15/65/84/19/02810.jpg","https://i.servimg.com/u/f58/15/65/84/19/02910.jpg","https://i.servimg.com/u/f58/15/65/84/19/03010.jpg","https://i.servimg.com/u/f58/15/65/84/19/03110.jpg","https://i.servimg.com/u/f58/15/65/84/19/03210.jpg","https://i.servimg.com/u/f58/15/65/84/19/3310.jpg","https://i.servimg.com/u/f58/15/65/84/19/3410.jpg","https://i.servimg.com/u/f18/15/65/84/19/3510.jpg"];

b=function(){$("#pun-logo img,#i_logo,#logo img").attr("src",a[Math.floor(Math.random()*a.length)])};b();setInterval(b,5*1000);

});


Ne connaissant strictement rien en programmation, qui aurait la gentillesse de me communiquer la modification à effectuer.

Cordialement.

Bertrand
par bertrand78
le Ven 16 Sep 2016 - 9:02
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Diaporama JavaScript
Réponses: 2
Vues: 329

Javascripts pour bannière défilante

Desole je suis très nul :'(

[code][code]$(function() {

var a = [http://hpics.li/0c8a482, http://hpics.li/1ca27f1, http://hpics.li/8ae4fbd];

b=function(){$("#pun-logo img,#i_logo,#logo img").attr("src",a[Math.floor(Math.random()*a.length)])};b();setInterval(b,7*1000);

});[code][/code]
par Skydreth
le Mer 6 Juil 2016 - 20:36
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Javascripts pour bannière défilante
Réponses: 18
Vues: 605

L'ouverture de la toolbar décale la barre de navigation

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 7 septembre 2015
Lien du forum : http://huhugaf.forumactif.fr/

Description du problème

Bonjour ! D'avance merci aux personnes qui sauront m'aider dans la résolution de mon problème. Je pense que ce n'est pas quelque chose de sorcier, mais comme je galère... Je préfère autant faire appel à vous !

Je prépare actuellement la future version de mon forum. Ce matin, je me suis rendu compte que j'avais oublié d'activer la Toolbar sur mon forum de test afin de l'assortir au reste du thème. Et là, patatra ! Lorsque la toolbar s'ouvre, la barre de navigation est décalée vers le bas et sort du cadre qui lui est assigné (cf capture d'écran). L'ennui, c'est que cela ne le fait pas sur mon "vrai" forum (où figure ancienne version), où la navigation est présentée de la même façon (http://yuck-it-up.forumactif.com). Les deux codes propres à la barre de navigation et à la toolbar sont identiques (à part pour les couleurs et les margin), donc je ne comprends pas pourquoi dans un cas ça décale et pas dans l'autre... Je vous donne mes codes, sait-on jamais. Ils sont sous balise hide !
par skitty.
le Lun 7 Sep 2015 - 11:54
 
Rechercher dans: Archives des problèmes avec un code
Sujet: L'ouverture de la toolbar décale la barre de navigation
Réponses: 2
Vues: 730

Elargir son forum

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.lgda.taguilde.net

Description du problème

Bonjour le peuple !

Donc je recherche à élargir les catégories qui sont présente sur mon forum. Bref je suis allé sur PA/Général/Configuration/Largeur du forum (nombre ou pourcentage %).

J'ai changé les chiffres, mais rien ne se passe. Niveau codage, je suis une bille... par contre je peux vous coller les codse que j'ai actuellement sur ma fiche CSS (au cas ou il y a un soucis directement dedans)

Spoiler:

body

{
background-color: ;
background-position: top center;
background-repeat: repeat-y;
}

a
{
outline: none;
}

a:link
{
text-decoration: none !important;
}

.bodylinewidth
{display: table;
width: 1000%
}

#page-body
{
margin-top: 100px;
}

.forumline
{
max-width: 850px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
background-image: url(https://redcdn.net/hpimg15/pics/990052Sanstitre1.png);
background-repeat: repeat;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomright: 6px;
border-radius: 6px 6px 6px 6px;
-moz-box-shadow: 1px 1px 2px #f0b643;
box-shadow: 1px 1px 2px #f0b643;
padding: 5px;
margin-bottom: 10px;
}

a.forumlink
{
display: block;
padding: 4px;
border-bottom: 2px solid #1b1b1b;
}
a.forumlink:hover
{
text-decoration: none !important;
margin-left: 20px;
font-style: italic;
}

table
{
max-width: 850px;
margin: auto;
}

#i_logo
{
margin-top: -18px;
margin-bottom: -40px;
}

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


.mini_ava {
float: left;
}
.mini_ava img {
width: 40px;
height: 40px;
margin: 0 5px;
border-radius: 10px;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.mini_ava img:hover
{
width: 80px;
height: 80px;
}

#page-footer
{
background-image: ;
background-repeat: ;
background-position: ;
width: ;
height: ;
margin-bottom: ;
}

#page-footer a
{
font-size: 10px;
text-decoration: none !important;
}
par atlatann
le Ven 28 Aoû 2015 - 5:09
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Elargir son forum
Réponses: 3
Vues: 619

Centrer une image d'en-tête très large et caché le surplus

Bonjour,

La bannière est bien dans la panneau d'affichage. (j'ai essayé de la mettre ailleurs, sans plus de résultat).
Ce code ne change rien. Mais je suis certaine que #i_logo fait bien référence au bon élément. J'ai bidouillé un peu le code, il fait bien bouger la bannière.

J'ai reprit tout un ensemble de code que je n'ai pas fait moi-même, si je vous copie tout le template, je ne sais pas si ça va aider ^^"
Je vous copie quand même overall_header :


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
  <link href='http://fonts.googleapis.com/css?family=Euphoria+Script' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Dynalight' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope">
         
                <script language="javascript" src="http://hypotest.forumactif.org/h1-organisation-onglets"></script>
         
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

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

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

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

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

         case 'left':
            break;

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

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

         default:
            slid_vert = true;
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <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">
      <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 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 />&nbsp; </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 class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
                         
                            <center><div class="maBarreDeNavigation" align="center">
                              <br/>
                                    {GENERATED_NAV_BAR}
 
                              </div>
                            </center>

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

par papilusion
le Dim 23 Aoû 2015 - 15:43
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Centrer une image d'en-tête très large et caché le surplus
Réponses: 7
Vues: 572

Changer la couleur automatique pour les messages, et avoir plus de choix de couleur pour les titres des sujets

j'ai la palette de couleur étendue et le WYSIWYG n'est pas activé et voilà le code css du thème :

body{
background-position:top center;font-weight:normal;}
body{margin-top:0px;}
#page-body{
margin:10px 22px 10px 22px;}
button.button2:hover,input.button2:hover{
color:#000;font-weight:bold;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz210.png');background-position:top;background-position:top;}
input.liteoption{color:#000;font-weight:bold;background-repeat:repeat-x;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz110.png');background-position:top;background-position:center;}
input.liteoption:hover{
font-weight:bold;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz210.png');background-position:top;color:#000;background-position:top;}
input.mainoption{color:#000;font-weight:bold;background-repeat:repeat-x;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz110.png');background-position:top;background-position:center;}
input.mainoption:hover{font-weight:bold;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz210.png');background-position:top;color:#000;background-position:top;}
.catBottom{
border:none !important;} .catHead{border:none !important;}
.thLeft{border:none !important;} .thRight{border:none !important;}
.forumline{background-image:url('https://i.servimg.com/u/f30/13/30/32/72/b1_bas10.png');background-repeat:no-repeat;background-position:bottom;padding-bottom:34px;/padding-bottom:3px;/background-image:none;/background-repeat:repeat;}
td.cat{background-repeat:repeat;
}
td.catHead{background-repeat:repeat;}
td.catSides{
background-repeat:repeat;}
td.catLeft{background-repeat:repeat;border-left:none !important;} td.catRight{background-repeat:repeat;}
td.catBottom{background-repeat:repeat;} #plus_menu{background-color:#23201b;border:1px solid #2e2b26 !important;}
.wysiwyg{background-color:#2e2b26 !important;} .bodyline{background-image:url('https://i.servimg.com/u/f35/11/95/30/70/217.png');background-position:bottom right;background-repeat:no-repeat;}
#text_editor_textarea{background-color:#1B1915 !important;color:#d1ba88;}
.attachbox{
background-color:#2e2b26;background-image:url('https://i.servimg.com/u/f30/13/30/32/72/fond_s10.png');border:1px solid #6c6657;padding:5px;-moz-border-radius-topleft:15px;-webkit-border-radius-topleft:15px;-moz-border-radius-topright:15px;-webkit-border-radius-topright:15px;border-radius-topleft:15px;border-radius-topright:15px;-moz-box-shadow:0px 0px 10px #000;-webkit-box-shadow:0px 0px 10px #000;box-shadow:0px 0px 10px #000;
}
.attachbox dl.file{background-color:#212121;margin-top:8px;padding:5px;border:1px solid #6c6657;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;-moz-box-shadow:0px 0px 10px #000;-webkit-box-shadow:0px 0px 10px #000;box-shadow:0px 0px 10px #000;}
.row1,.row2,.row3,.row3Right{background-image:url('https://i.servimg.com/u/f30/13/30/32/72/fond_c10.jpg');background-repeat:repeat;border:1px solid #37342d;} .container_IE{background-image:url('https://i.servimg.com/u/f35/11/95/30/70/copy11.png');background-position:bottom right;background-repeat:no-repeat;}
div.errorwrap,div.infowrap{background-color:#776952;border:1px solid #ac9a7b;color:#443b2b !important;font-weight:bold;}
div.errorwrap h4,div.infowrap h4{background-color:#443b2b;border:1px solid #ac9a7b;color:#ac9a7b;} div.errorwrap p,div.infowrap p{color:#443b2b;font-weight:bold;}

.code{background-color:#2c2a25;border:1px solid #6c6657;background-image:url('https://i.servimg.com/u/f30/13/30/32/72/fond_s10.png');-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:12px;color:#caba9f;padding:5px;-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.quote{background-color:#2c2a25;border:1px solid #6c6657;background-image:url('https://i.servimg.com/u/f30/13/30/32/72/fond_s10.png');-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:12px;color:#caba9f;padding:5px;-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.spoiler{background-color:#2c2a25;border:1px solid #6c6657;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/35px10.png');-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:12px;color:#caba9f;padding:5px; -moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.spoiler_closed{background-color:#2c2a25;border:1px solid #6c6657;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:12px;color:#caba9f;padding:5px;}
.spoiler_content{background-color:#2c2a25;border:1px solid #6c6657;background-image:url('https://i.servimg.com/u/f30/13/30/32/72/fond_s10.png');-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:12px;color:#caba9f;padding:5px;}
#i_logo{
margin-top:-7px !important;
/position:relative;} .catSides{border:none !important;}
button.button2,input.button2{
color:#000000;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz110.png');background-position:top;}
button.button2:hover,input.button2:hover{border:1px solid #000000;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz210.png');background-position:top;color:#000000;}
button.button2,input.button2{
color:#000;font-weight:bold;background-repeat:repeat-x;background-image:url('https://i.servimg.com/u/f35/11/95/30/70/zz110.png');background-position:top;background-position:center;}

#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "Le Coin des Bavardages"; }

p.chatbox_row_1 {
background-color:#1B1915;
}
p.chatbox_row_2 {
background-color:#1a1a19;
}

par evahiné
le Ven 3 Juil 2015 - 18:42
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Changer la couleur automatique pour les messages, et avoir plus de choix de couleur pour les titres des sujets
Réponses: 4
Vues: 1723

Taille de l'avatar petite

Bonsoir Smile 

Je n'ai pas ça dans le CSS ^^

Voici ce que j'ai : 
#i_logo{
            margin-bottom: 20px;
        }

.maintitle
{
margin-top:-30px;
}

#search-box{
visibility:hidden;
}

.genmed.module-title, a.cattitle  { color:#FFF}

Merci
par *Daenerys
le Mer 3 Juin 2015 - 19:05
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Taille de l'avatar petite
Réponses: 5
Vues: 800

Version Mobil

Bonjour Chacha et merci pour l'ouverture du sujet
Sur les conseilles de 1baptiste j'ai mis #i_logo{width:auto;} dans la feuille de style.
Malheureusement cela ne change rien a mon problème
Le bandeau est bien a la largeur de la tablette mais les colonnes sont devenues plus petite
D'autre idées ?
Par avance merci
Claude
par BM92
le Mar 2 Juin 2015 - 12:11
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Version Mobil
Réponses: 16
Vues: 853

Problème de code de couleurs dans le profil

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://quebec-masquerade.forumofficiel.com

Description du problème

Bonjour!

J'ai récemment composé un forum en utilisant un code CSS que j'ai trouvé et je n'avais aucun problème avec ce dernier jusqu'à hier (je crois). Certaines personnes se sont plaintes qu'elles ne voyaient pas bien la couleur de la police sur le fond. J'ai donc opéré quelques changements de couleurs pour rendre le tout plus confortable à l'oeil, mais voilà que certains titres de champ dans les profils ne s'affichent plus ni en cliquant sur profil ni dans les messages.

Je me demande bien où j'aurais m*rdé. J'ai cherché partout, mais mes connaissances ne doivent pas être assez grande pour que je puisse déceler le problème toute seul ^^'

Je vous mets donc ici le code CSS ainsi que quelques captures d'écran pour expliciter le problème :

Spoiler:
body
{
background: url(\'https://i.servimg.com/u/f39/19/03/50/36/13030710.png\') repeat-y center, url(\'http://images3.alphacoders.com/278/278957.jpg\') no-repeat left top;
background-attachment: fixed, fixed;
background-color: #000000;
}

.bodylinewidth
{
width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: -9px;
margin-bottom: -9px;
}

.bodyline
{
width: 900px;
padding: 0;
}

.mbodyline
{
width: 900px:
}


#navigation
{
position: fixed;
z-index: 999;
height: 30px;
width: 980px;
margin-left: -490px;
left: 50%;
}
#navig
{
width: 980px;
margin: auto;
text-align: center;
background: #000000;
border-bottom: 2px solid #470B0B;
border-right: 2px solid #470B0B;
border-left: 2px solid #470B0B;
border-radius: 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px;
-webkit-border-radius: 0px 0px 20px 20px;
-khtml-border-radius: 0px 0px 20px 20px;
padding-bottom: 3px;
padding-top: 10px;
box-shadow: 2px 2px 5px black;
}

#navig a
{
font-weight: bold;
color: #000000 !important;
text-shadow: 1px 1px 0px #060808;
font-size: 13px;
}

#navig a:hover
{
color: #000000 !important;
font-variant: small-caps;
font-size: 13px;
font-style: normal;
}

#i_logo
{
margin-top: 30px
}

table
{
width: 98%;
margin: auto;
}

.forumline
{
width: 100%;
border-bottom: 8px solid #470B0B;
border-top: 8px solid #470B0B;
border-left: 2px solid #470B0B;
border-right: 2px solid #470B0B;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 4px;
background-color: #13181A;
-moz-border-radius: 40px 0px 40px 0px;
-webkit-border-radius: 40px 0px 40px 0px;
-o-border-radius: 40px 0px 40px 0px;
border-radius: 40px 0px 40px 0px;
}



a.forumlink
{
display: block;
width: 100%;
border-bottom: 2px dotted #470B0B;
padding: 4px;
font-size: 16px;
font-weight: bold;
font-variant: small-caps;
text-shadow: 0px 0px 2px #000000;
letter-spacing: 2px;
}

a:hover
{
text-decoration: none !important;
}

#page-footer a
{
font-size: 10px;
}



.quote
{ background: url(\'https://i.servimg.com/u/f39/19/03/50/36/13050110.png\') no-repeat right bottom, url(\'https://i.servimg.com/u/f39/19/03/50/36/13050111.png\') no-repeat left top;
padding-left: 30px;
padding-right: 30px;
height: px;
border-radius: 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px;
-webkit-border-radius: 0px 0px 20px 20px;
-khtml-border-radius: 0px 0px 20px 20px;
border-top: 3px solid #470B0B;
border-left: 3px solid #470B0B;
border-color: #470B0B;
}

.code
{
background: url(\'https://i.servimg.com/u/f39/19/03/50/36/13050112.png\') no-repeat left top, url(\'https://i.servimg.com/u/f39/19/03/50/36/13050113.png\') no-repeat right bottom;
padding-left: 30px;
padding-right: 30px;
height: px;
border-radius: 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px;
-webkit-border-radius: 0px 0px 20px 20px;
-khtml-border-radius: 0px 0px 20px 20px;
border-top: 3px solid #470B0B;
border-left: 3px solid #470B0B;
border-color: #470B0B;
color: #3E4F54;
}

.spoiler_closed
{
border-radius: 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px;
-webkit-border-radius: 0px 0px 20px 20px;
-khtml-border-radius: 0px 0px 20px 20px;
border-color: #470B0B;
border-top: 3px solid #470B0B;
border-left: 3px solid #470B0B;
}

.spoiler_content
{
background: url(\'https://i.servimg.com/u/f39/19/03/50/36/13051910.png\') no-repeat left top, url(\'https://i.servimg.com/u/f39/19/03/50/36/13051911.png\') no-repeat right bottom;
border-radius: 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px;
-webkit-border-radius: 0px 0px 20px 20px;
-khtml-border-radius: 0px 0px 20px 20px;
padding-left: 30px;
padding-right: 30px;
height: px;
border-color: #470B0B;
border-top: 3px solid #470B0B;
border-left: 3px solid #470B0B;
}

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

.mainoption
{
-moz-border-radius: 10px 0px 10px 0px;
-webkit-border-radius: 10px 0px 10px 0px;
-o-border-radius: 10px 0px 10px 0px;
border-radius: 10px 0px 10px 0px;
}

.liteoption
{
-moz-border-radius: 10px 0px 10px 0px;
-webkit-border-radius: 10px 0px 10px 0px;
-o-border-radius: 10px 0px 10px 0px;
border-radius: 10px 0px 10px 0px;
}

.opacite
{
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=50);
transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-htm-transition: opacity 1s;
}

.opacite:hover
{
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=1);
transition: opacity 2s;
-moz-transition: opacity 2s;
-o-transition: opacity 2s;
-webkit-transition: opacity 2s;
-htm-transition: opacity 2s;
}
#slide_avatar {
width:200px; /* largeur avatar */
height:320px; /* hauteur avatar */
border: 1px solid #470B0B; /* couleur bordure avatar */
overflow:hidden; /* ne pas toucher */
position:relative; /* ne pas toucher */
}

.glisse_avatar {
-webkit-transition:all 0.5s; /* fait glisser l avatar */
-moz-transition:all 0.5s; /* fait glisser l avatar autre navigateur */
-o-transition:all 0.5s; /* fait glisser l avatar autre navigateur */
-ms-transition:all 0.5s; /* fait glisser l avatar autre navigateur */
transition:all 0.5s; /* fait glisser l avatar autre navigateur */
top:0; /* ne pas toucher */
left:0; /* ne pas toucher */
width:100%; /* ne pas toucher */
height:100%; /* ne pas toucher */
position:absolute; /* ne pas toucher */
z-index:1;
}

#slide_avatar:hover > .glisse_avatar {
margin-left:200px; /* fait glisser l avatar a droite */
}

.infos_avatar {
background-color:#000000 !important; /* fond infos */
padding: 7px;
top:0; /* ne pas toucher */
left:0; /* ne pas toucher */
width:100%; /* ne pas toucher */
height:100%; /* ne pas toucher */
z-index:0;
}
body.chatbox {
background-color: #000000
}
.onglet {
display: inline-block;
margin: 0px 5px -4px 10px;
font-family : Verdana;
height : 20px;
width : 120px;
text-align: center;
font-family: georgia;
background-color: #transparant;
color: #FFFFFF;
border-radius: 10px;
}

.onglet_0 {
color: #999999;
position: relative;
font-family: georgia;

}

.onglet_1 {
font-family: georgia;
color: #999999;
position: relative;
font-variant: small-caps;
}
.contenu_onglet {
background-image: url(\'http://1.bp.blogspot.com/_DuJbw1RP8kI/SwceA2MkERI/AAAAAAAAAC4/SBszKEg7YBc/s1600/transparant.gif\');
padding:5px;
display:none;
text-align:center;
border-radius: 20px;
height: 300px;
width: 600px;
overflow : auto;
box-shadow: 0px 0px 10px grey;
background-repeat:no-repeat;
text-align: center;
color: #999999;


}
::-webkit-scrollbar {
height: 5px;
width: 10px;
background-color: #adb2bc; /* couleur de fond */
}

html > ::-webkit-scrollbar {
width: 8px; /* largeur de la barre */
}

::-webkit-scrollbar-thumb {
background: #4a576f; /* couleur de la barre qui se déplace */
border-radius: 50px; /* Arrondis */
}

::-webkit-scrollbar-track-piece {
background-color: #000000; /* couleur de fond */
}

#top_sites {
background:#adb2bc; /* couleur de fond */
border:2px solid #4a576f; /* couleur de la bordure */
position:absolute; /* élément flottant */
left:-90px; /* position par rapport à la gauche */
top:50px; /* position par rapport au haut */
height:260px; /* hauteur du cadre */
width:110px; /* largeur du cadre */
}

#top_sites:hover {
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
left:0px; /* position par rapport à la gauche */}


https://i.gyazo.com/e26727585f93394352cdd5a4f9647199.png
https://i.gyazo.com/87989c2e6d9cb1ccbcae55f410f47bec.png
https://i.gyazo.com/7dcc26e2acdc4da088c8fc59d3ef2314.png

Aidez-moi, pitié! Razz

Merci!
par Maeve la Renarde
le Jeu 26 Mar 2015 - 16:29
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Problème de code de couleurs dans le profil
Réponses: 5
Vues: 1372

Fusionner : Bannière aléatoire + Arrière-plan extensible ( Et si possible créer un décalage )

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 03/01/2015
Lien du forum : http://www.teso-event.com/

Description du problème

Bonjour ! Je voudrais fusionner la java de bannière aléatoire ( https://forum.forumactif.com/t223082-banniere-aleatoire-ou-defilante )

Code:
$(function() {
        
var a = ["http://adresse_image_1", "http://adresse_image_2", "http://adresse_image_3"];
        
$("#pun-logo img,#i_logo,#logo img").attr("src", a[Math.floor(Math.random() * a.length)])
        
});


Avec un css de fond de page extensible :

Code:
body { margin:0;
padding:0;
background: url(http://adresse_image) no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;}


Pour pouvoir tout simplement avec un fond d'écran extensible, mais avec plusieurs images ( qui changerons donc à l’actualisation ).

J'ai essayer quelques bidouillages, mais rien ne s'affiche. Genre remplacer "{#}pun-logo{/#} img,{#}i_logo{/#},{#}logo{/#} img" par "body" et retirer l'image du css, mais ça ne fonctionne pas. J'ai aussi tenter de m'inspirer d'un de mes ancien topic ( https://forum.forumactif.com/t348748-fusionner-les-scripts-fonds-aleatoires-adaptes-a-la-resolution ) en vain.

Help! Surprised

Ps : En plus, dans ce futur code ( si c'est réalisable ), je voudrais pouvoir imposer une marge en hauteur, pour que les images ne soient pas rogner par ma barre de navigation ( http://www.teso-event.com/ ), ce serais à l’occurrence 48px. J'avais essayer sur mon css de base d'ajouter une marge, mais j'imagine que c'est .body qui pose soucis, vu que c'est justement le référentiel, enfin, je crois...
par Invité
le Sam 3 Jan 2015 - 21:08
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Fusionner : Bannière aléatoire + Arrière-plan extensible ( Et si possible créer un décalage )
Réponses: 6
Vues: 957

Exécuter un code javascript sous certaines conditions

Exécuter un code javascript
sous certaines conditions


Le javascript est un langage de script qui permet à son exécution de modifier des éléments de la page. Il est possible de mettre des codes javascripts dans le panneau d'administration pour qu'ils soient exécutés sur le forum ( voir Gestion des codes Javascript ).

Accessibilité aux éléments de la page par le code javascript :

Le code javascript a accès à tout les éléments existant avant là où il se trouve, les codes javascript mis dans le panneau d'administration sont mis dans la partie <head> ... </head> du forum ( où on spécifie l'adresse de la feuille de style, le titre de la page, l'encodage de la page ), ce qui veut dire que le script n'a accès au départ à aucun des éléments du contenu de la page ( vu qu'ils se trouvent après ).

Comment accéder aux éléments se trouvant après le script ? C'est assez simple, il suffit de retarder l'exécution du code. Il y a moyen de le faire avec des dispositifs de base de javascript, mais en les utilisant mal ( et beaucoup de scripts existants les utilisent mal ), 2 scripts auraient de fortes chance de ne pas fonctionner l'un avec l'autre. Alors plutôt que d'utiliser ce moyen il est préférable d'utiliser celui fourni par jQuery ( qui est une bibliothèque de javascript disposant de fonctions simplifiants les actions à faire pour arriver au résultat voulu ). En jQuery pour retarder l'exécution du code à quand tout les éléments de la page existent, il suffit de mettre :

Code:
$(function(){

  /* votre code javascript */

});

Le code que vous mettez à la place de /* votre code javascript */ sera exécuté à la fin de la page ( c'est à dire quand tout les éléments de la page existent et sont accessibles par le code ).

Pourquoi ne pas le faire automatiquement sur tout les codes ? Plein de raison peuvent faire que votre script n'a pas besoin d'accéder aux éléments de la page, par exemple si quand le titre de page est "Poster un nouveau sujet" on veut le remplacer par "Ouvrir un nouveau topic de discussion", il suffit de mettre ce script :

Code:
if(document.title=="Poster un nouveau sujet") document.title= "Ouvrir un nouveau topic de discussion";

Et pas besoin de le retarder, ça fonctionne bien juste comme cela.

Comment mettre une condition sur le code ?

C'est très simple il suffit de mettre :

Code:
if(condition) {

  /* votre code javascript à exécuter si la condition est vrai */

}


Comment faire une condition ?

Il suffit de mettre un élément, il sera évalué et suivant sa valeur la valeur de la condition sera vrai ou faux.

Ce qui est vrai :

  • la valeur true ( = valeur vrai )

  • toutes les chaînes de caractère ( non vide ).

  • tout les nombres sauf 0, -0 et NaN ( = pas un nombre ( Not a Number ), par exemple parseInt est une fonction qui transforme une chaîne de caractère en un entier, par exemple parseInt("4") renvoie le chiffre 4, et bien si on met parseInt("a") ce qui est renvoyé est le chiffre "spécial" NaN qui signifie pas un nombre ).


Ce qui est faux :

  • les valeurs undefined ( valeur qui indique que quelque chose a été déclaré mais n'a pas été défini par exemple en mettant "var test;" la valeur que test à est undefined tant qu'on ne lui a pas donné une autre valeur ( avec "test=3;" par exemple ) ), null ( valeur utilisée pour mettre une variable vide sans la mettre en indéfinie ( undefined ) ) et false ( = faux ).

  • les chaînes vides ( donc "" et '' ).

  • le nombre 0, -0 et NaN.

Pour comparer 2 valeurs ( et que le résultat donne vrai ou faux ) il faut utiliser un opérateur de comparaison parmi les suivants :

  • == : permet et vérifier que ce qu'il y a à gauche égale ce qui a à droite ( par exemple 1==3 renvoie faux et 42-2==40 est vrai ), vous pourriez le remplacer par égale en lisant ( par exemple if(3==5) donne si trois égale 5 ). Il faut faire attention que le type est ignoré ( par exemple "7"==7 est vrai et false==0 est vrai aussi ).

  • != : pareille que == mais ça compare si ce qu'il y a à droite est différent de ce qu'il y a à gauche ( par exemple 1!=3 est vrai et 10+7!=17 est faux ), vous pourriez le remplacer par est différent en lisant ( par exemple if(6!=7) donne si six est différent de sept ). Il faut faire attention aussi au fait que le type soit ignoré ( "7"!=7 est faux et false!=0 est faux ).

  • > : permet de tester si ce qui est à gauche est plus grand que ce qui est à droite ( par exemple 3<10 est vrai, 5<5 est faux ), vous pourriez le remplacer en lisant par est plus grand ( par exemple if(5>3) donne si 5 est plus grand que 3 ). Il faut faire attention à ne pas mélanger entier et chaîne de caractère, quand vous comparez 2 chaînes de caractère celle qui est plus grande que l'autre est juste déterminée par l'ordre alphabétique avec les majuscules avant les minuscules et les chiffres avant les lettres ( "aaa">"0zzz" est vrai, "aaa">"ZZZ" est vrai ( car les majuscules sont avant les minuscules ) et "6">"50" est vrai ( car 6 est avant 5 ) ) que c'est surtout destiné aux nombres, si vous testez un entier avec une chaîne, la chaîne sera convertie en nombre et si elle ne peut pas être convertie en nombre ( la chaîne "a" par exemple ) elle devient NaN et toutes les comparaisons de grandeur renvoient faux ( "a">7 est faux et "a"<=8 est faux, mais si la chaine peut être convertie en nombre c'est bon, "40">5 renvoie vrai ).

  • >= : permet de tester que ce qu'il y a à gauche est plus grand ou égale à ce qu'il y a à droite ( 3>=2 renvoie vrai, 19>=19 renvoie vrai et 12>=5225 renvoi faux ), vous pourriez le remplacer en lisant par est plus grand ou égal ( par exemple if(24>=5) donne si 24 est plus grand ou égal à 5 ). Même remarque pour les chaînes de caractères ( si 2 chaînes : ce sera par ordre alphabétique, si 1 chaîne et un nombre : la chaîne sera convertie en nombre ).

  • < : permet de tester que ce qu'il y a à gauche est plus petit que ce qu'il y a à droite ( 2<2 renvoie faux et 19<20 renvoie vrai ), vous pourriez le remplacer en lisant par est plus petit ( par exemple if(2<3) donne si deux est plus petit que trois ). Même remarque pour les chaînes de caractères ( si 2 chaînes ce sera par ordre alphabétique et si 1 chaîne et un nombre la chaîne sera convertie en nombre ).

  • <= : permet de tester que ce qu'il y a à gauche est plus petit ou égale à ce qu'il y a à droite ( 3<=2 renvoie faux, 19<=19 renvoie vrai et 12<=5225 renvoie vrai ), vous pourriez le remplacer en lisant par est plus petit ou égal ( par exemple if(24>=5) donne si 24 est plus petit ou égal à 5 ). Même remarque pour les chaînes de caractères ( si 2 chaînes ce sera par ordre alphabétique et si 1 chaîne et un nombre la chaîne sera convertie en nombre ).

  • === : permet de tester l'égalité et si c'est le même type ( 1===1 renvoie vrai mais 1==="1" renvoi faux ), vous pourriez le remplacer en lisant par est égale et du même type ( par exemple if(24===45) donne si 24 est égale et du même type que 45 ).

  • !== : permet de tester la différence ou si c'est un type différent ( 1!==2 renvoie vrai mais 1!=="2" renvoie faux ), vous pourriez le remplacer en lisant par est différent ou d'un type différent ( par exemple if(1!=="1") donne si un est différent ou d'un type différent que la chaîne de caractère "1" ).


Comment combiner plusieurs conditions ?

Vous pouvez soit combiner plusieurs if, par exemple :

Code:
if(condition1)
{
  if(condition2)
  {
     
      /* votre code javascript à exécuter si les 2 conditions sont vrai */

  }
}

Ou bien il y a des opérateurs qui permettent de combiner une condition à l'autre :

  • && : permet de tester la condition à gauche et à droite ( si celle à gauche est vrai ), si une des deux conditions est fausse la valeur renvoyée est faux, sinon la valeur renvoyée est vrai ( 1==1&&"3"==3 renvoie vrai mais 1==3 && 5==5 ou 1==1 && 3==4 ou 2==4 && 6==3 renvoient faux ).

  • || : permet de tester si la condition à gauche et à droite ( si celle à gauche est fausse ), si une des deux conditions est vrai la valeur renvoyée est vrai, sinon la valeur renvoyée est faux ( 1==1&&"3"==3, 1==3 && 5==5 ou 1==1 && 3==4 sont vrai mais 2==4 && 6==3 est faux ).

Ainsi l'exemple de juste au dessus pourrait s'écrire simplement :

Code:
if(condition1 && condition2)
{

    /* votre code javascript à exécuter si les 2 conditions sont vrai */

}


Exemples

Vous avez tout ce qu'il vous faut pour exécuter un code javascript sous certaines conditions, mais voici quelques exemples pour mettre cela en application.

Changer la bannière si on est sur le sujet 40 :

    Tout d'abord il faut mettre le script juste sur les pages de sujet. Ensuite chaque sujet à un numéro qu'on retrouve dans l'adresse de la page, par exemple /t40- pour le sujet 40 ( ou /t40p15- pour une page du sujet ).

    Tout les éléments concernant la page, se trouve dans l'objet document, ce qui nous intéresse dedans est document.location qui a plusieurs propriété concernant la page sur laquelle on se trouve, par exemple si on était sur https://forum.forumactif.com/h3-tutoriels?test#bonjour, voici les propriétés qu'il y aurait :

    • document.location.hash => #bonjour
    • document.location.host => forum.forumactif.com
    • document.location.href => http://forum.forumactif.com/h3-tutoriels?test#bonjour
    • document.location.origin => http://forum.forumactif.com
    • document.location.pathname => /h3-tutoriels
    • document.location.search : ?test

    Grâce à ces variables on a moyen de récupérer l'adresse de la page sur laquelle on est ( ensuite il suffit de la tester pour voir si on est sur la bonne page, ici donc les adresses pourraient être :

    Code:
    http://adresse-forum/t40-nom-du-sujet
    http://adresse-forum/t40p50-nom-du-sujet
    http://adresse-forum/t40-nom-du-sujet#424

    Donc il faut que notre test fonctionne avec tout cela.

    On ne peut pas faire simplement un test d'égalité car si le sujet fait 4 pages il faudrait déjà faire :

    Code:
    if(document.location.pathname=="/t40-nom-du-sujet" || document.location.pathname=="/t40p15-nom-du-sujet" || document.location.pathname=="/t40p30-nom-du-sujet" || document.location.pathname=="/t40p45-nom-du-sujet")
    {

        /*  code à exécuter */

    }

    Et si il en fait 200 n'en parlons pas.

    Donc plutôt que d'utiliser cela on va utiliser les expressions régulières ( des "modèles" pour lesquels on peut tester si une chaîne de caractère y correspond ou pas ).

    Pour faire une expression régulière il suffit de mettre :

    Code:
    /test/

    Et on peut l'utiliser de plusieurs façons, pour ce qu'on veut faire on peut l'utiliser de cette façon :

    Code:
    /test/.test("chaine de caractère contenant test")

    Si l'expression régulière /test/ est trouvée dans la chaîne, vrai est renvoyé sinon faux est renvoyé.

    Donc il nous suffit de trouver une expression régulière qui correspond à l'url de la page et ce sera notre condition pour exécuter le code.

    L'expression régulière qui convient ici si on teste le document.location.pathname ( donc /t40p2145-nom-du-sujet ) est :

    Code:
    /^\/t40(p[1-9][0-9]*)?-/

    Le ^ permet de signifier ce que je trouve doit commencer par ce qui suit, le \/ c'est juste pour chercher le / ( vu que c'est le caractère qui signale la fin de l'expression régulière on doit mettre \/ pour l'utiliser dedans ), ensuite le (contenu)?, les parenthèse permettent juste de sélectionner une partie, et le ? signifie ce qui précède doit être présent ou pas ( donc le contenu de la parenthèse est facultatif ), le [1-9], le [ et ] signifie une des lettres qui me compose ( donc par exemple aaa[edc]bbb ça trouvera aaaebbb, aaadbbb et aaacbbb ), le trait d'union à l'intérieur et entre deux caractère signifie "et tout ce qu'il y a entre" ( donc [1-7] c'est pareille à mettre [1234567] ) et puis pour finir le * signifie ce qui précède est présent 0 ou plusieurs fois.

    Donc si on voulait exprimer ce que fait le /^\/t40(p[1-9][0-9]*)?-/ ce serait trouver les chaînes de caractères qui commencent par /t40 après quoi il peut y avoir p1 à p9999... ( autant qu'on veut ) après quoi il y a un trait d'union.

    Donc on a notre code final :

    Code:
    if(/^\/t40(p[1-9][0-9]*)?-/.test(document.location.pathname))
    {
      // on retarde l'exécution pour que l'image existe à l'exécution de la partie de code
      $(function(){
        $("#pun-logo,#i_logo,#logo img").attr("src","http://illiweb.com/fa/i/smiles/icon_cat.png");
      });
    }

    Pour ce qui est du code pour changer la bannière, le $("selecteur") ( de la librairie jQuery inclue sur les forum forumactifs ) permet de sélectionner des éléments par un sélecteur CSS, le sélecteur #pun-logo,#i_logo,#logo img permet de sélectionner la bannière ( #i_logo celle de phpbb2, #logo img celle de phpbb3 et invision et #pun_logo celle de... punbb ), ensuite à cette sélection d'élément on peut faire un peu tout ce qu'on veut, nous on utilise la méthode attr("nom de l'attribut","valeur qui doit lui être mise") qui permet de modifier la valeur d'un attribut afin de changer l'adresse de l'image dans notre cas.

    Plus d'info sur les expressions régulières : comment ça marche, tout javascript et développez.

    Plus d'info sur les sélecteurs d'élément en jQuery : jquery (anglais), développeur web et jarodxxx.

    Plus d'info sur la méthode attr() de jQuery : jquery (anglais), développeur web et jarodxxx.


Mettre une alerte "hello amigo" à un membre qui n'avait pas visité le forum depuis 24h :

    Tout d'abord pour savoir si un membre est connecté ou pas, on peut utiliser le lien de déconnexion de la barre de menu, il est comme ceci :

    Code:
    <a class="mainmenu" href="/login?logout=1&tid=1e5fcece9113042c5a59c10f9ba5e060&key=afc70e" rel="nofollow" id="logout" >

    Et n’apparaît évidemment que si on est connecté, on peut le sélectionner facilement avec $("#logout") et il y a la propriété length de jQuery qui peut nous renvoyer combien d'éléments sont sélectionnés ( donc si on est connecter $("#logout").length renverra 1, et si on est déconnecté cela renverra 0 ).

    Ensuite pour savoir si le membre n'a pas ouvert de page depuis 24h, il suffit à chaque page ouverte d'enregistrer un cookie avec la date.

    Pour avoir la date il faut faire new Date() qui nous renvoie un objet Date contenant la date actuelle ( et pour le transformé en entier qui sont plus facile à utiliser, il suffit de mettre un + devant ).

    Forumactif inclut des fonctions pour lire et écrire des cookies sur ses forums. Il suffit de faire my_setcookie("nom du cookie","valeur",1,0) pour écrire un cookie et my_getcookie("nom du cookie") pour lire un cookie ( si on lit un cookie qui n'existe pas, la valeur null sera renvoyée ).

    On a tout ce qu'il nous faut, voici le code pour résoudre notre désir :

    Code:
    // vu qu'on test l'existant du bouton de logout, il faut retarder l'exécution du code pour que le bouton puisse être vu
    $(function(){
      // on fait juste $("#logout").length car à part (-)0, et NaN tout les chiffres sont "vrai"
      // on pourrait mettre $("#logout").length==1 ou $("#logout").length!=0
      if($("#logout").length)
      {
        // on regarde si le cookie n'existe pas ou bien si la date enregistrée est plus petite que la date actuelle moins 24h
        if(my_getcookie("dernierePage")===null || my_getcookie("dernierePage") < new Date()-1000*60*60*24)
        {
          alert("hello amigo");
        }
        // on met à jour la date de la dernière page affichée
        my_setcookie("dernierePage",+new Date(),1,0);
      }
    });

    Pour plus d'info sur la propriété length de jQuery : jquery, développeur web et jarodxxx.


Afficher un message à l'écriture d'un nouveau sujet dans le forum 6, 7 et 8 :

    Cette fois encore, il faut faire en fonction de l'adresse, l'adresse pour écrire un message dans le forum 7 est :

    Code:
    http://adresse-du-forum/post?f=7&mode=newtopic

    Donc il faut que le document.location.pathname soit /post et que le document.location.search soit ?f=7&mode=newtopic ou ?f=8&mode=newtopic ou ?f=9&mode=newtopic, on a ainsi déjà notre condition :

    Code:
    document.location.pathname=="/post" && /^\?f=[789]&mode=newtopic$/.test(document.location.search)

    ( il faut mettre \? à la place de ? quand on veut le chercher, car ? est un caractère spécial, et le $ signifie ce qui précède doit finir la ligne )

    Il nous reste juste à mettre un message, ce qui nous donne :

    Code:
    if(document.location.pathname=="/post" && /^\?f=[789]&mode=newtopic$/.test(document.location.search))
    {
      // retardement pour que la page soit chargée à l'exécution du code
      $(function(){
        $("form[name=post]").prepend('<div style="text-align: center; font-weight: bold; font-size: 20px; color: red">Pensez à mettre un titre explicite ;)</div>');
      });
    }

    prepend est une méthode de jQuery qui permet d'ajouter du code html au début d'un élément, aussi il faut faire attention car on met le contenu à afficher sous forme de chaîne javascript, dans une chaîne de texte javascript :

    Code:
    "cc'aa\\bb"xx" est le texte cc'aa\bb"xx
    'cc\'aa\\bb"xx' est le texte cc'aa\bb"xx

    ( si il est dans la chaîne, il faut mettre devant le caractère de fin et début ( qui est soit ' soit " ) un antislash ( \ ) )



par Ea
le Dim 31 Juil 2011 - 7:16
 
Rechercher dans: Trucs et astuces
Sujet: Exécuter un code javascript sous certaines conditions
Réponses: 0
Vues: 10396

Revenir en haut

Sauter vers: