Bonjour.
Je tient a vous remercier pour le partage de tout ces codes exceptionnels ! Je suis une grande fan o/

Alors, je vais aller de suite à ce qui m'emmène a poster ici.
J'ai décider de créer mon forum après des années d'hésitation. Et voilà que je tombe amoureuse du Skin "Index Floral". Tellement contente j'installe le tout sur mon fofo. Je commence a faire ma bannière et puis je décide de m'attaquer à la P.A, et là, c'est le drame !
Je vois que mon Slideshow n'est pas du tout comme il le faut .O.

Comment il doit être:

Comment il est sur mon forum:

 

Alors j'ai essayer "vite fait" de changer les mesure dans le CSS mais, absolument rien n'a bouger. J'ai pas trop essayer de changer non plus de peur de faire une grosse bêtises.
Donc, je sais vraiment pas comment faire pour arranger le truc.
Oh, et juste la typo, c'est moi qui l'ai changé ^^.
Du coup, je ne sais pas si je dois vous balancer mon forum, où une partie du css ou que sais-je encore X.x

Je vous remercie d'avance pour votre réponse o/

Bonne journée/soirée Bisous dans votre face

Hello ! Merci pour tes jolis compliments, ça nous fait vraiment plaisir.

Alors je vois pas du tout ce qui pourrait merder parce que le code semble bon.
Cela dit, je te recommande de tout mettre dans une page HTML et de mettre une iframe dans "généralité" (là où y a la PA) pour vraiment pas t'embêter (en plus tu as une option prévisualisation pour voir tes modifs au fur et à mesure. ^^)

Dans les pages HTML (module -> HTML & Javascript -> Gestion des Pages HTML), tu fais "Création en mode avancé (HTML). Oublie pas de donner un titre, et tu coches "non" à "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?"

Il te suffira de copier ce code dans son intégralité :

Code:

<meta charset="UTF-8" /><div class="liensut">
<div class="lestruk">
<table>
<tr>
<td>
<span><em class="fas fa-chess-queen"></em></span>contexte.            
 </td>
                                            
 </tr>
 </table>
                                      
 </div>
                                      
 <div class="baseslide">
                                        
 <div class="slideshow-container">
                                          
 <div class="mySlides fade">
                          <img src="http://via.placeholder.com/580x250" />                          
 <div class="insideslide">
                                  
 <h2>
                  Titre du slide.                  
 </h2>
                                              
 <div class="thecaptioninside">
                           Description ou texte.                
 </div>
                                            
 </div>
                                          
 </div>
                                          
 <div style="display:none" class="mySlides fade">
                          <img src="http://via.placeholder.com/580x250" />                          
 <div class="insideslide">
                                  
 <h2>
                  Titre du slide.                
 </h2>
                                              
 <div class="thecaptioninside">
                          Description ou texte.                
 </div>
                                            
 </div>
                                          
 </div>
                                          
 <div style="display:none" class="mySlides fade">
                          <img src="http://via.placeholder.com/580x250" />                          
 <div class="insideslide">
                                  
 <h2>
                  Titre du slide.                
 </h2>
                                              
 <div class="thecaptioninside">
                           Description ou texte.
 </div>
                                            
 </div>
                                          
 </div>
                         <a onclick="plusSlides(-1)" class="prev">❮</a>      <a onclick="plusSlides(1)" class="next">❯</a>                      
 </div>
                                        
 <div style="text-align:center">
                        <span onclick="currentSlide(1)" class="dot"></span>      <span onclick="currentSlide(2)" class="dot"></span>      <span onclick="currentSlide(3)" class="dot"></span>                      
 </div>
                                      
 </div>
</div>
<div class="linksut">
                                      
 <div class="linkuu">
                    <a class="hoversito link6" href="/">Lien</a>                  
 </div>
                                      
 <div class="linkuu">
                   <a class="hoversito link6" href="/">Lien</a>                  
 </div>
                                      
 <div class="linkuu">
                   <a class="hoversito link6" href="/">Lien</a>                  
 </div>
                                      
 <div class="linkuu">
                 <a class="hoversito link6" href="/">Lien</a>                  
 </div>
                                      
 <div class="linkuu">
                 <a class="hoversito link6" href="/">Lien</a>                
 </div>
</div>
<div class="autourblok">
                                      
 <div class="titlepredef">
                  nos beaux prédéfinis                  
 </div>
                                    
 <div style="background-image:url('VOTRE IMAGE ICI')" class="S2">
                                  
 <div class="S3">
                  <span style="font-size:18px; letter-spacing:-2px; font-family:montserrat;">Nom prénom</span><br /><a href="/">la fiche</a>                  
 </div>
                                  
 </div>
                                        
 <div style="background-image:url('VOTRE IMAGE ICI')" class="S2">
                                  
 <div class="S3">
                  <span style="font-size:18px; letter-spacing:-2px; font-family:montserrat;">Nom prénom</span><br /><a href="/">la fiche</a>                  
 </div>
                                  
 </div>
                                        
 <div style="background-image:url('VOTRE IMAGE ICI')" class="S2">
                                  
 <div class="S3">
                  <span style="font-size:18px; letter-spacing:-2px; font-family:montserrat;">Nom prénom</span><br /><a href="/">la fiche</a>                  
 </div>
                                  
 </div>
                                        
 <div style="background-image:url('VOTRE IMAGE ICI')" class="S2">
                                  
 <div class="S3">
                  <span style="font-size:18px; letter-spacing:-2px; font-family:montserrat;">Nom prénom</span><br /> <a href="/">la fiche</a>                  
 </div>
                                  
 </div>
                                      
 <center>
                
 <div class="vte1">
         <a target="_blank" href="/">V</a>        
 </div>
                
 <div class="vte1">
         <a target="_blank" href="/">O</a>        
 </div>
                
 <div class="vte">
         <img src="https://imgur.com/SXoXzr8.png" />        
 </div>
                
 <div class="vte1">
         <a target="_blank" href="/">T</a>        
 </div>
                
 <div class="vte1">
         <a target="_blank" href="/">E</a>        
 </div>
                
 </center>
</div>
                  
<center>
                                      
 <div class="bandetop">
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>                  
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>              
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>        
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>                
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>            
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>                  
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>                  
 </div>
                                        
 <div class="topparto">
                 <a target="_blank" href="/"><img src="/" /></a>
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>                  
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>                
 </div>
                                        
 <div class="topparto">
                 <a target="_blank" href="/"><img src="/" /></a>
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>
            
 <div class="topparto">
       <a target="_blank" href="/"><img src="/" /></a>              
 </div>
            
 <div class="topparto">
                <a target="_blank" href="/"><img src="/" /></a>
 </div>
                                      
 </div>
</center><script>
  var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
  </script>

<style> .vte {
    display:inline-block;
  }
.vte1 {
    display: inline-block;
    position: relative;
    top: -14px;
    margin: 20px;
}
.vte1 a {
    color: #bc4c5b;
    font-size: 42px;
    font-weight: 900;
    font-family: Open Sans condensed;
    font-style: italic;
    transition: all 800ms;
}
.vte1 a:hover {
  transition:all 800ms;
  color:#d2cab7;
  text-shadow: 2px 3px 0px #bc4c5b, 0px 1px #454545, 1px 0px #bc4c5b, -1px 0px #bc4c5b, 0px -1px #bc4c5b;
  font-size:45px;
}
.fondbann {
    height: 668px;
    background: white;
    margin: 0;
    padding: 20px;
}
.liensut {
  width:1000px;
  margin:auto;
  position:relative;
  height:330px;
}
.lestruk {
    width: 300px;
    position: absolute;
    top: 15px;
    left: 25px;
    line-height: 12px;
    text-align: justify;
    background: #d2cab7;
    padding: 20px;
    border-left: 3px solid #bc4c5b;
    overflow: auto;
    height: 262px;
    text-transform: lowercase;
    letter-spacing: 1px;
}
.lestruk span {
    font: 700 20px/1 calibri;
    float: left;
    margin: 5px 15px 5px -5px;
    padding: 28px;
    background: #bc4c5b;
    color: white;
}
.baseslide {
    padding: 10px;
    width: 580px;
    height: 280px;
    position: absolute;
    right: 25px;
    top: 15px;
    background: #f4f4f4;
    border: 1px solid #d2cab7;
}
.slideshow-container {
  max-width: 950px;
  position: relative;
  margin: auto;
}
.mySlides {
  display: none;
}
.prev, .next {
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    color: #fff!important;
}
.next {
  right: 0;
}
.prev {
left:0;
}
.prev:hover, .next:hover {
  background-color:#d2cab7;
}
.insideslide {
    font-family: Dancing Script;
    background: #f4f4f4;
    color: #212121;
    font-size: 15px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    transform: translateY(10px);
    width: 560px;
    padding: 10px;
    height: 30px;
    overflow: hidden;
    transition: 0.7s ease-in-out;
}
.thecaptioninside {
  width:500px;
  height:50px;
  padding:30px;
  overflow-y:auto;
  text-align:justify;
  font-family:Droid Serif;
  font-size:12px;
  line-height:18px;
}
.insideslide h2 {
  width:100%;
  font-family:watermelon_script_demoregular;
  font-size:20px;
  text-align:center!important;
  text-transform:lowercase;
  letter-spacing:6px;
  position:relative;
  color:#bc4c5b;
  top:-10px;
}
.mySlides:hover .insideslide {
  height:150px;
}
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 10px 2px;
  background-color: #ccc;
  border-radius:100%;
  display: inline-block;
  transition: background-color 0.6s ease-in-out;
  border:1px solid transparent;
}
.active, .dot:hover {
  background-color: #bc4c5b;
  border:1px solid #454545;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
.linksut {
  width:990px;
  margin:0 auto;
  padding:5px;
  text-align:center;
}
.linkuu {
  background:#ddd;
  padding:5px;
  width:170px;
  height:20px;
  display:inline-block;
  vertical-align:top;
  margin:5px;
}
a.hoversito {
  color:#bc4c5b;
  font-family: 'Droid Sans', sans-serif;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2px;
  display:block!important;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  top:2px;
  transition: color .3s cubic-bezier(0.11, 0.7, 0, 1);
}
.link6{
  position: relative;
  z-index:1;
}
.link6:after {
  position: absolute;
  top:0; bottom: 0;
  right: 0;left: 0;
  background-color:#bc4c5b;
  content: "";
  transform: translate3d(-101%,0,0);
  z-index:-1;
  transition: transform .3s cubic-bezier(0.11, 0.7, 0, 1);
}
.link6:hover {
  color: #fff!important;
  padding:5px;
  margin-top:-7px;
  height:20px;
  width:170px;
  margin-left:-5px;
}
.link6:hover:after {
  transform: translate3d(0,0,0);
}
.autourblok {
padding:10px;
  width:980px;
  margin:0 auto;
  position:relative;
  top:20px;
  text-align:center;
}
.titlepredef {
    background: #d2cab7;
    padding: 5px;
    color: #bc4c5b;
    font-family: watermelon_script_demoregular;
    font-size: 20px;
    font-weight: 100!important;
    letter-spacing: 2px;
}
.S2 {
    width: 230px;
    height: 60px;
    display: inline-block;
    margin: 5px;
    background-position:50%;
    border:1px solid #AAA;
    overflow: hidden;
    transition:all 800ms;
}
.S3 {
    background:rgba(198, 76, 91, 0.5);
    color: #fff;
    padding-top: 15px;
    height: 45px;
    width: 230px;
    font-size: 8px;
    font-family: calibri;
    opacity:0;
    transform: scale(2,2);
  transition:all 800ms;
}
.S3 a {
    font-size: 14px;
    font-family: calibri;
    color: white;
    text-decoration: none;
}
.S2:hover .S3 {
  opacity:1;
    transition:0.4s linear;
    transform: scale(1,1);
}
.bandetop {
  width:1000px;
  margin:0 auto;
  position:relative;
  top:-10px;
  height:80px;
}
.topparto {
margin:5px;
  display:inline-block;
}
.topparto img {
  width:40px;height:40px;
  border: solid 1px #bc4c5b;
}
.lestruk td {
    font-size: 10px;
    text-align: justify;
    color: #bc4c5b;
}</style>

(il y a deux parties donc : la partie HTML que j'ai laissé en 1er, et la partie CSS entourée des "style" (à ne pas retirer). Comme ça tu verras où est la limite. ^^)

Ca me donne ça via la page HTML (un rendu évidemment pas rempli) :



Les images, c'est du 500x250px, donc il te faudra redimensionner tes images toi-même en 500x250. c:

Une fois tes modifs faites, tu valides ! Et tu copies le lien de ta page HTML (ça va nous servir).
Ensuite, direction les généralités, et tu c/c ce code (sans oublier d'y insérer le lien de ton HTML) :

Code:

<center>
     <iframe src="TON LIEN ICI" scrolling="no" frameborder="no" style="width: 1000px; height: 700px;"> </iframe>
</center>

Et après tu joues avec les valeurs de l'iframe pour bien l'adapter. ^^
Voilà !

Ah oui et sans oublier, si tu veux ajouter les liens de tes différentes polices, tu peux les mettre au tout début, juste après le "meta charset". :3

Je te donne cette solution (de facilité) car les pages HTML sont vraiment sympa à utiliser, surtout avec les PA. Souvent ça fonctionne mieux que par une méthode dite "classique" et ça économise beaucoup le CSS aussi. c:

Si tu rencontres quelques soucis, n'hésite pas !

Wouah ! Super je te remercie beaucoup ! ça fonctionne bien !!

Pour redimensionner les images ça ne sera pas un soucis !

Merci beaucoup !!

Impeccable, au plaisir !