Bannière aléatoire de fond

[LuckyChi]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://lgdc-elements.forumactif.org/

Description du problème

Rebonjour !

Alors, le problème est que j'ai une bannière de fond, enfin j'avais. Car elle était juste de rechange. Maintenant, j'ai trois bannières de fond. J'ai suivi le tutoriel pour les bannières aléatoire, car je voulais qu'elles soit aléatoires. Mais l'ancienne bannière apparait toujours. Dans un ancien sujet ici, j'avais ajouté à mon CSS un code où il y avait le lien de la seule bannière que j'avais. Je pense que c'est à cause de ça que ça apparaît toujours. Je ne sais pas quel lien je dois mettre à cette place. Pouvez-vous m'aider ?

Merci d'avance !

[◦Jay◦]

Bonjour LuckyChi, dans votre PA>Affichage>Images et Couleurs>Gestion des images>Mode Avancé>Logo du forum : Avez-vous retiré le lien ?

[LuckyChi]

Oui, je l'ai fait.

[◦Jay◦]

Bonjour LuckyChi, veuillez coller votre css ici entre balise code s'il vous plait.

Bien à vous.

[LuckyChi]

Code:

/* --------------------------------- CATEGORIES --------------------------------- */
 
    .imgforum {
      border-radius: 100%;
      border: 2px solid #ffffff;
    }
 
    .bloc1 {
      background-color: #3C1423;
      width: 500px;
      height: 150px;
      position: relative;
    left: 3em;
      box-shadow: 2px 2px 15px black;
    -moz-box-shadow: 2px 2px 15px black;
      -webkit-box-shadow: 2px 2px 15px black;
    }
 
 
    /*** FONDS GENERAUX ***/
 
    /* Contenu de l'ensembre des forum */
    .categorie {
      width: 700px;
      height: 200px;
      padding: 10px;
    }
 
    /* Fond des forum */
    .sous-forum {
      width: 300px;
      height: 50px;
      overflow: auto;
      top: -10em;
    }
 
    /* Fond titre catégorie */
    .cate_titre {
      width: 800px;
      margin: auto;
      padding: 5px;
      background-color: #3c1423 ;
      box-shadow: 2px 2px 15px black;
    -moz-box-shadow: 2px 2px 15px black;
      -webkit-box-shadow: 2px 2px 15px black;
    }
 
    /* Mise en forme nom de catégorie */
    h2 {
      font-size: 20px;
      font-family: 'Carrois Gothic SC', sans-serif;
      color: #662d42;
      text-align: center;
    }
 
 
 
 
    /*** MISE EN FORME DES FORUM ***/
 
    /* Mise en forme du texte des titres de forum */
    .forumlink {
      color: #662d42 !important;
      font-family: 'Vampiro One', cursive;
      font-size: 25px !important;
      font-weight: none !important;
      position: relative;
      top: 0.5em;
      left: -2em;
      z-index: 1;
    }
 
    .forumlink:hover {
      color: #662d42 !important;
      text-decoration: none !important;
    }
 
    .forumlink a {
      font-size: 16px;
      width: 500px;
    }
 
    /* Mise en forme de la description */
    .description {
      width: 400px;
      height: 90px;
      font-size: 11px;
      text-align: justify;
      color: #662d42;
      background-color: #662d42;
      border: 2px solid #662d42
      border-radius: 5px;
      position: relative;
      top: 1em;
      left: 3em;
      padding: 15px;
    }
 
    .imagedesc {
      position: relative;
      right: -6em;
      top: -2em;
    -moz-transform:rotate(8deg);
      -webkit-transform:rotate(8deg);
      transform:rotate(8deg);
    }
 
 
 
 
    /*** SOUS-FORUM ***/
 
    .lienssf {
      width: 490px;
      max-height: 15px;
      overflow: auto;
      background-color: #662d42;
      padding: 5px;
      position: relative;
    }
 
    .lienssf a {
      color: #662d42 !important;
      text-decoration: none !important;
    }
 
    .lienssf a:hover {
      color: #662d42 !important;
    text-decoration : none !important;
    }
 
 
 
 
    /*** DERNIERS MESSAGES ***/
 
    .last_mess {
      width: 120px;
      position: relative;
      left: 6em;
      top: 1.5em;
      background-color: #3c1423;
      color: #662d42;
      padding: 10px;
      font-size: 11px;
      border-radius: 5px;
    }
 
    .last_mess a {
      color: black !important;
      text-decoration: none !important;
    }
 
    .last_mess a:hover {
      color: #662d42 !important;
    text-decoration : none !important;
    }
 
 
    /*--------------------------------- FIN CATEGORIES --------------------------------- */
 
.avatar_mess
{
  display: block;
  width: 200px;
  height: 320px;
  margin-left: -10px;
  margin-right: 10px;
  overflow: hidden;
  background: #272726;
  border: 5px solid #3e1d19;
  transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -htm-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  box-shadow: 0px 0px 6px #000000;
  -moz-box-shadow: 0px 0px 6px #000000;
  -o-box-shadow: 0px 0px 6px #000000;
  -htm-box-shadow: 0px 0px 6px #000000;
  -webkit-box-shadow: 0px 0px 6px #000000;
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.avatar_mess:hover
{
  margin-left: 5px;
  transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -htm-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess
{
  position: absolute;
  display: block;
  width: 190px;
  height: 310px;
  margin: auto;
  padding: 5px;
  overflow: auto;
  background: #6b664e;
  color: #c5bea0;
  font-size: 11px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess:hover
{
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.pseudo_mess
{
  display: block;
  position: relative;
  z-index: 2;
  width: 190px;
  margin-top: -15px;
  margin-left: 10px;
  text-align: center;
  font-size: 18px;
  font-family: courier;
  font-weight: bold;
  text-shadow: 0px 0px 3px #c5bea0;
  background: #94855c;
  padding-top: 5px;
  border-left: 3px solid #371e1a;
  border-right: 3px solid #371e1a;
  border-top: 1px solid #371e1a;
  border-bottom: 1px solid #371e1a;
  box-shadow: 0px 0px 3px #000000;
  -moz-box-shadow: 0px 0px 3px #000000;
  -o-box-shadow: 0px 0px 3px #000000;
  -htm-box-shadow: 0px 0px 3px #000000;
  -webkit-box-shadow: 0px 0px 3px #000000;
}
 
 
 
 
  /* ------------------------------- QEEL ------------------------------- */
 
    .fond_QEEL {
      font-size: 11px;
      font-family: arial;
      background-color: #FAEDD1;
      color: #000000;
      padding: 15px;
      text-align: justify;
    }
 
    #kaboum .row1 {
      background-color: #EBE3CA;
      width: 770px;
      height: 150px;
      padding: 15px;
      overflow: auto;
      text-align: center;
    }
 
    /* ------------------------------- FIN QEEL ------------------------------- */
body {
background-repeat: no-repeat;
}
body {
    background-size: cover;
}
/* --------------------------------- PA --------------------------------- */
 
/* slideshow */
#slideshow {
  position:relative;
  width:380px;
  height:145px;
}
 
/* gestion des dimensions et débordement du conteneur */
#slideshow .container {
  position:relative;
  width:380px;
  height:145px;
  overflow:hidden;
}
 
/* le conteneur des slides */
#slideshow .slider {
  position:absolute;
  left:0;
  top:0;
  width:400%;
  height:145px;
  animation:slider 16s infinite;
  -webkit-animation:slider 16s infinite;
}
 
/* Fonction animation */
@keyframes slider {
  0%,20%,100% {left:0}
  25%,45% {left:-100%}
  50%,70% {left:-200%}
  75%,95% { left:-300%}
}
@-webkit-keyframes slider {
  0%,20%,100% {left:0}
  25%,45% {left:-100%}
  50%,70% {left:-200%}
  75%,95% { left:-300%}
}
 
/* Fond de la PA */
.fond_PA {
  padding:10px;
  background-color:#556B2F;
  width:800px;
  position:relative;
}
 
/* Contexte */
.contexte_PA {
  margin-right:10px;
  background-color:#5D7D4C;
  width:370px;
  height:115px;
  padding:15px;
  color:#BC7349;
  text-align:justify;
  font-size:12px;
  overflow:auto;
}
 
/* Liens */
.nema {
  height:40px;
  width:150px;
  display:inline-block;
}
 
.nema a {
  display:inline-block;
  background-color:#5D7D4C;
  color:#fff;
  font-family:'Dosis',sans-serif;
  font-size:25px;
  height:40px;
  text-align:center;
  width:145px;
  transition:all 1s ease;
  -webkit-transition:all 1s ease;
}
 
.nema a:hover {
  background-color:#5D7D4C;
  color:#fff;
}
 
.nema_2 {
  height:22px;
  width:266px;
  display:block;
  margin-bottom:5px;
  background-color:#5D7D4C;
  color:#fff!important;
  font-family:'Dosis',sans-serif;
  font-size:16px;
  text-align:center;
  transition:all 1s ease;
  -webkit-transition:all 1s ease;
}
 
.nema_2:hover {
  background-color:#5D7D4C;
  color:#fff;
}
 
/*Titre Staff*/
.nema_title {
  display:inline-block;
  color:#fff;
  font-family:'Dosis',sans-serif;
  font-size:25px;
  height:30px;
  text-align:center;
  margin-bottom:5px;
  margin-top:10px;
}
 
/* Effets staff + predef */
.stafef {
  width:320px;
  height:75px;
  background:#5D7D4C;
  opacity:0;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
}
 
.stafef:hover {
  opacity:1;
  -webkit-transform:rotate(-360deg);
  transform:rotate(-360deg);
}
 
.stafefico {
  width:100px;
  height:100px;
  display:inherit;
  background:#5D7D4C;
  opacity:0;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
}
 
.stafefico:hover {
  opacity:1;
  transform:rotate(-360deg);
  -webkit-transform:rotate(-360deg);
}
 
.predef {
  width:60px;
  height:100px;
  display:inherit;
  background:#5D7D4C;
  opacity:0;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
}
 
.predef:hover {
  opacity:1;
  transform:rotate(-360deg);
  -webkit-transform:rotate(-360deg);
}
body{background-image:url(http://img15.hostingpics.net/pics/847021grisfinit.png);
Background-size:100%;}
.maintitle{margin-top:500px;}

[◦Jay◦]

Bonjour LuckyChi, la bannière n'est pas dans votre css, avez-vous vérifié vos script ? Dans votre PA>Modules>HTML & JAVASCRIPT>Gestion des codes Javascript

Votre bannière est à cet endroit.

[kiwi14637]

Bonjour,

C'est bien celle-là que vous voulez enlever : ? (très belle bannière soit dit en passant)
Si oui, elle se trouve à plusieurs endroits :
- dans votre CSS

Code:

body{background-image:url(http://img15.hostingpics.net/pics/847021grisfinit.png);

- dans la gestion des images (chercher le lien https://2img.net/r/hpimg15/pics/847021grisfinit.png)

Bonne journée !

PS : Vous auriez dû laisser le fond transparent sous Photoshop car ça fait bizarre...

[◦Jay◦]

J'ai pris le sujet à l'envers ! Merci kiwi14637.

[LuckyChi]

Oui, elle se trouve là mais pas dans la gestion des images. Si j'enlève le lien de la bannière du CSS, cela va sûrement beuger. Dans un ancien sujet, j'avais ajouté cela à mon CSS car cela beugait. Donc, que dois-je faire ?

[◦Jay◦]

Faites ce que kiwi a dit, je pensais que vous souhaitiez garder celle avec le fond noir moi ...

[LuckyChi]

Non, j'ai trois bannières de fond à placer et j'aimerais qu'elles soient aléatoires.
Dois-je enlever ce code ?

Code:

body{background-image:url(http://img15.hostingpics.net/pics/847021grisfinit.png);

[kiwi14637]

Oui

[LuckyChi]

Ok. Je l'ai fait, mais les bannières ne sont pas en fond. C'était ce code qui permettait que les bannières soient en fond.

[◦Jay◦]

Je vois bien vos bannières LuckyChi.

[LuckyChi]

Oi mais c'est comme si elles étaient à la place du logo. Elles sont bien là, mais pas en fond. Les catégories font la même taille que les bannières (en largeur).

[◦Jay◦]

Oui, cela est normal, vous avez mis une bannière aléatoire, en cherchant, j'ai trouvé ce sujet, je n'ai pas testé mais apparemment, à l'époque, cela fonctionnait.

[LuckyChi]

Désolé, mais cela ne marche pas. La bannière n'apparait pas et quand je vais dans MEMBRES, ça beug complètement et la ban s'affiche totalement et sur toute la page.

[◦Jay◦]

Il faut ajouter à votre css :

Code:

.ban1,.ban2,.ban3{background-size:100%;}

Plus si vous avez plus de bannière.

[LuckyChi]

Tout est parfait, merci. Mais les bannières sont beaucoup trop grandes. Quand le grapheur a mis les liens, quand on clique dessus, elles avaient une taille normal mais quand je les installe sur mon forum, elles sont beaucoup trop grandes. Comment faire ?

[◦Jay◦]

Bonjour LuckyChi, changez vos images par celles-ci et dites moi si cela vous conviendrait :

https://2img.net/image.noelshack.com/fichiers/2016/14/1459776060-ban1.png

https://2img.net/image.noelshack.com/fichiers/2016/14/1459776069-ban2.png

https://2img.net/image.noelshack.com/fichiers/2016/14/1459776069-ban3.png

Bien à vous.

[LuckyChi]

Je vais encore vous embêter, mais encore plus petit ? Je peux le faire moi-même, si vous vous voulez.
En tous cas, c'est déjà mieux qu'avant. Par contre, je n'arrive pas à trouver la bonne couleur de fond.
Il y a-t-il un logiciel pour trouver la bonne couleur ? En fait, le grapheur m'a donné le code couleur mais apparemment, ce n'est pas le bon.
Il y a une ligne qui sépare la bannière et la couleur de fond que j'ai mis.

[◦Jay◦]

La couleur de fond est #8da676 , j'ai refait un essai, cela ne me dérange pas :

https://2img.net/image.noelshack.com/fichiers/2016/14/1459787903-a-ban.png

https://2img.net/image.noelshack.com/fichiers/2016/14/1459787912-b-ban.png

https://2img.net/image.noelshack.com/fichiers/2016/14/1459787915-c-ban.png

[LuckyChi]

Ok, cest bon. Merci beaucoup ! Le problème est résolu.
Encore merci à Jay et à Kiwi14637 !