Modifier cellules du menu accordéon

[Solid6Snake]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.entraide-youtubers.com/

Description du problème

Bonjour, j'ai installé mon menu accordéon je sais modifier la couleur de fond, une image de fond ou même la taille d'écriture par contre je souhaite modifier la couleur des cellules et aussi retirer les chiffres 123456789...

J'ai regardé dans mon CSS modifié deux trois chose mais je ne trouve pas et j'ai peur de faire une bêtise ^^

Merci d'avance, bonne journée à vous.

[Solid6Snake]

Bonsoir, je sais que la modération à énormément de boulot ici mais je place quand même mon petit Up juste au cas ou

Merci à vous.

[MlleAlys]

Bonjour,
pourriez vous redonner tous les codes actuels que vous utilisez pour votre accordéon s'il vous plait ? merci ^^"

[Solid6Snake]

Bonjour,

Voilà mon code feuille de style CSS accordéon:

Code:

@charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
  color: black;
    font-size: 13px;   
  font-weight: normal;
  margin: 0;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: right top;
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
  -o-transform: translateX(-100%) rotate(-90deg);
  -o-transform-origin: right top;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Dark */
.accordion {
    border: 9px solid #353535;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #030303;
    -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.accordion .slide > h2 span { background: #353535; color: white }
.accordion .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
    background: #353535;
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.accordion .slide > h2.selected b {
    background: #0383838;
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: linear-gradient(top,  #3a3a3a 0%,#363636 100%);
}
 .accordion .slide > div { background: #0424242; margin-left: 5px }
/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }

/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }

/* centrer l'accordéon */
.accordion { margin: auto; }

bouton haut/bas

.bouhautbas {
    bottom: 40px;
    left: 10px; /* remplacez left par right pour afficher les boutons à droite */
    position: fixed;
    z-index: 100;
}

[Solid6Snake]

Bonjour,

Voilà mon code feuille de style CSS accordéon:

Code:

@charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
  color: black;
    font-size: 13px;   
  font-weight: normal;
  margin: 0;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: right top;
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
  -o-transform: translateX(-100%) rotate(-90deg);
  -o-transform-origin: right top;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Dark */
.accordion {
    border: 9px solid #353535;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #030303;
    -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.accordion .slide > h2 span { background: #353535; color: white }
.accordion .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
    background: #353535;
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.accordion .slide > h2.selected b {
    background: #0383838;
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: linear-gradient(top,  #3a3a3a 0%,#363636 100%);
}
 .accordion .slide > div { background: #0424242; margin-left: 5px }
/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }

/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }

/* centrer l'accordéon */
.accordion { margin: auto; }

bouton haut/bas

.bouhautbas {
    bottom: 40px;
    left: 10px; /* remplacez left par right pour afficher les boutons à droite */
    position: fixed;
    z-index: 100;
}

Je souhaite:

1/ modifier la couleur des cellules 1234567...
2/ supprimer les chiffres 1234567...

Voilà sinon tout le reste est parfait

[MlleAlys]

par Solid6Snake Aujourd'hui à 8:10
par Solid6Snake Aujourd'hui à 8:12

..

Bonjour, Je vous rappelle qu'il est autorisé un seul UP ou double post par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné ! Pour ajouter ou modifier des informations si 24h ne sont pas passées, merci d'éditer votre message précédent plutôt que poster à nouveau directement à sa suite ! Pour éditer cliquez sur le bouton en haut à droite du message. Je vous invite à lire : - Règles générales du forum - Charte de ce forum A bientôt sur ForumActif

Et j'aurais également besoin des codes html et javascript s'il vous plait.

[Solid6Snake]

Désolé mais je suis allé trop vite et pas moyen de supprimer nos messages ici c'est dommage.

Voilà mon code java:

Code:

$(document).ready(function() {
  $("#accordeon-pa").each(function(){
    $(this).liteAccordion({
      autoPlay:true,
      pauseOnHover:true,
      rounded:true,
      enumerateSlides:true,
      containerWidth: 1080,
      containerHeight: 200
    })
  });
});
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
(function(b){var a=function(g,l){var i={headerWidth:40,activateOn:"click",firstSlide:1,slideSpeed:800,onTriggerSlide:function(){},onSlideAnimComplete:function(){},autoPlay:false,pauseOnHover:false,cycleSpeed:6000,easing:"swing",theme:"basic",rounded:false,enumerateSlides:false,linkable:false},h=b.extend({},i,l),c=g.children("ol").children("li"),j=c.children(":first-child"),k=c.length,f=h.containerWidth-k*h.headerWidth,e={play:function(m){var n=d.nextSlide(m&&m);if(d.playing){return}d.playing=setInterval(function(){j.eq(n()).trigger("click.liteAccordion")},h.cycleSpeed)},stop:function(){clearInterval(d.playing);d.playing=0},next:function(){e.stop();j.eq(d.currentSlide===k-1?0:d.currentSlide+1).trigger("click.liteAccordion")},prev:function(){e.stop();j.eq(d.currentSlide-1).trigger("click.liteAccordion")},destroy:function(){e.stop();b(window).unbind(".liteAccordion");g.attr("style","").removeClass("accordion basic dark light stitch").removeData("liteAccordion").unbind(".liteAccordion").find("li > :first-child").unbind(".liteAccordion").filter(".selected").removeClass("selected").end().find("b").remove();c.removeClass("slide").children().attr("style","")},debug:function(){return{elem:g,defaults:i,settings:h,methods:e,core:d}}},d={setStyles:function(){g.width(h.containerWidth).height(h.containerHeight).addClass("accordion").addClass(h.rounded&&"rounded").addClass(h.theme);c.addClass("slide").children(":first-child").width(h.containerHeight).height(h.headerWidth).eq(h.firstSlide-1).addClass("selected");j.each(function(m){var p=b(this),o=m*h.headerWidth,n=j.first().next(),q=parseInt(n.css("marginLeft"),10)||parseInt(n.css("marginRight"),10)||0;if(m>=h.firstSlide){o+=f}p.css("left",o).next().width(f-q).css({left:o,paddingLeft:h.headerWidth});h.enumerateSlides&&p.append("<b>"+(m+1)+"</b>")})},bindEvents:function(){if(h.activateOn==="click"){j.bind("click.liteAccordion",d.triggerSlide)}else{if(h.activateOn==="mouseover"){j.bind({"mouseover.liteAccordion":d.triggerSlide,"click.liteAccordion":d.triggerSlide})}}if(h.pauseOnHover&&h.autoPlay){g.bind("mouseover.liteAccordion",function(){d.playing&&e.stop()}).bind("mouseout.liteAccordion",function(){!d.playing&&e.play(d.currentSlide)})}},linkable:function(){var m=(function(){var o=[];c.each(function(){if(b(this).attr("name")){o.push((b(this).attr("name")).toLowerCase())}});return m=o})();var n=function(p){var o;if(p.type==="load"&&!window.location.hash){return}if(p.type==="hashchange"&&d.playing){return}o=b.inArray((window.location.hash.slice(1)).toLowerCase(),m);if(o>-1&&o<m.length){j.eq(o).trigger("click.liteAccordion")}};b(window).bind({"hashchange.liteAccordion":n,"load.liteAccordion":n})},currentSlide:h.firstSlide-1,nextSlide:function(m){var n=m+1||d.currentSlide+1;return function(){return n++%k}},playing:0,animSlideGroup:function(m,o,n){var p=n?":lt("+(m+1)+")":":gt("+m+")";c.filter(p).each(function(){var r=b(this),q=c.index(r);r.children().stop(true).animate({left:(n?0:f)+q*h.headerWidth},h.slideSpeed,h.easing,function(){if(!d.slideAnimCompleteFlag){h.onSlideAnimComplete.call(o);d.slideAnimCompleteFlag=true}})})},slideAnimCompleteFlag:false,triggerSlide:function(p){var o=b(this),m=j.index(o),n=o.next();d.currentSlide=m;d.slideAnimCompleteFlag=false;j.removeClass("selected").filter(o).addClass("selected");if(p.originalEvent&&h.autoPlay){e.stop();e.play(m)}if(h.linkable&&!d.playing){window.location.hash=o.parent().attr("name")}h.onTriggerSlide.call(n);d.animSlideGroup(m,n,true);d.animSlideGroup(m,n)},ieClass:function(){var m=+(b.browser.version).charAt(0);if(m<7){e.destroy()}if(m===7||m===8){c.each(function(n){b(this).addClass("slide-"+n)})}g.addClass("ie ie"+m)},init:function(){if(b.browser.msie){d.ieClass()}d.setStyles();d.bindEvents();if(h.cycleSpeed<h.slideSpeed){h.cycleSpeed=h.slideSpeed}if(h.linkable&&"onhashchange" in window){d.linkable()}h.autoPlay&&e.play()}};d.init();return e};b.fn.liteAccordion=function(e){var d=this,c=d.data("liteAccordion");if(typeof e==="object"||!e){return d.each(function(){var f;if(c){return}f=new a(d,e);d.data("liteAccordion",f)})}else{if(typeof e==="string"&&c[e]){if(e==="debug"){return c[e].call(d)}else{c[e].call(d);return d}}}}})(jQuery);

J'ai que ça à vous donner par contre, le CSS du dessus et ce code Java.

[MlleAlys]

quel code avez vous mis à l'endroit où afficher le menu en accordéon ? ^^"

[Solid6Snake]

Sur ma page accueil:

Code:

<div id="accordeon-pa" class="accordion">
                                                                                                                                                                                                                                                
   <ol>
                                             
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>Speed par Cristell</span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>            <iframe src="https://www.youtube.com/embed/tAMX7RAWyBs" frameborder="0" allowfullscreen="" style="width: 320px; height: 200px;"></iframe>                </figure>                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
      </li>
                                                                 
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>Ghostbusters song</span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>              <iframe style="width: 320px; height: 200px;" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/gx4VjHNe91o"></iframe>                                                                                                              </figure>                 
         </div>
                                                                                                                                                                                                                                                          
      </li>
                     
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>ByCriz</span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>            <iframe style="width: 320px; height: 200px;" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5tbiJeb6j8g"></iframe>                </figure>                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
      </li>
                                                                                                                                                                                                                                                                                 
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>The Web Monney</span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>                <iframe src="https://www.youtube.com/embed/iCR5xBjFluU" frameborder="0" allowfullscreen="" style="width: 320px; height: 200px;"></iframe>            </figure>                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
      </li>
                                                                       
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>PM 3D #Alien </span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>            <iframe style="width: 320px; height: 200px;" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/XmemJ3_xG-g"></iframe>                  </figure>                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
      </li>
                       
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>Kaptain2Nos</span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>                <iframe style="width: 320px; height: 200px;" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/cN0UB6lNwx4"></iframe>            </figure>                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
      </li>
                                                                                                                                                                                                                                               
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>TF Movies</span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>              <iframe style="width: 320px; height: 200px;" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/CCQ-DXcMxeQ"></iframe>              </figure>                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
      </li>
                             
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>Animé/Manga</span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>                  <iframe src="https://www.youtube.com/embed/3cQJiOFMJm0?list=PL6mtO37tKk8IlG7AVrxeldHhGU_EgQXXV" frameborder="0" allowfullscreen="" style="width: 320px; height: 200px;"></iframe>                                                                                                          </figure>                 
         </div>
                                          
      </li>
                             
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>Exobnkr Jeu indé</span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>            <iframe style="width: 320px; height: 200px;" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/nVGdopybd5I"></iframe>                  </figure>                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
      </li>
                         
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>Tuto XBenReplay</span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>              <iframe src="https://www.youtube.com/embed/p4uFDhDijlI" frameborder="0" allowfullscreen="" style="width: 320px; height: 200px;"></iframe>                </figure>                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
      </li>
                                                                                                                                                                                                                                             
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>Interview n°6</span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>          <iframe style="width: 320px; height: 200px;" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/PXpDZZjcRS4"></iframe>                  </figure>                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
      </li>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>Imagine R</span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>                <iframe style="width: 320px; height: 200px;" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/W0YJrvWXc1Y"></iframe>            </figure>                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
      </li>
                                                                                                                                                                                                                   
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>GMV en groupe</span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>              <iframe style="width: 320px; height: 200px;" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/4zNTgxkcLWQ"></iframe>              </figure>                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
      </li>
                                                                                                                                                                                                                                                                                                             
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>MV Entertainment</span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>      <iframe src="https://www.youtube.com/embed/yE8P_axpwZI" frameborder="0" allowfullscreen="" style="width: 320px; height: 200px;"></iframe>                        </figure>                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
      </li>
                                                                                                                                       
      <li>
                                                                                                                                                                                                                                                              
         <h2>
                                                                                                                                <span>Yéti Story</span>                                                                                                                   
         </h2>
                                                                                                                                                                                                                                                              
         <div>
                                                                                                                                              <figure>    <iframe style="width: 320px; height: 200px;" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/-JrpiqAek-A"></iframe>                        </figure>                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
      </li>
                                                                                                                                                                                                                                                                                                                                             
   </ol>
</div>

Mais à c'est certainement sur ce CSS qu'il faut modifier je vois plein de ligne #color mais il faut trouver celle des catégories en faite ^^

Voilà mon code CSS:

Code:

@charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
  color: black;
    font-size: 13px;   
  font-weight: normal;
  margin: 0;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: right top;
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
  -o-transform: translateX(-100%) rotate(-90deg);
  -o-transform-origin: right top;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Dark */
.accordion {
    border: 9px solid #353535;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #030303;
    -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.accordion .slide > h2 span { background: #353535; color: white }
.accordion .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
    background: #353535;
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.accordion .slide > h2.selected b {
    background: #0383838;
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: linear-gradient(top,  #3a3a3a 0%,#363636 100%);
}
 .accordion .slide > div { background: #0424242; margin-left: 5px }
/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }

/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }

/* centrer l'accordéon */
.accordion { margin: auto; }

bouton haut/bas

.bouhautbas {
    bottom: 40px;
    left: 10px; /* remplacez left par right pour afficher les boutons à droite */
    position: fixed;
    z-index: 100;
}

[MlleAlys]

oui très certainement, mais si je veux pouvoir tester de mon côté, il faut bien que j'ai tous les codes...

- pour les numéros, au début du javascript, modifiez la ligne
enumerateSlides:true,
en
enumerateSlides:false,

Pour la couleur des onglets,
localisez dans votre css la ligne suivante :
.accordion .slide > h2 span { background: #353535; color: white }
Il s'agit de la couleur de fond et de la couleur de fond et de la couleur du titre des onglets inactifs

Pour la couleur de fond de l'onglet actif, juste en dessous vous trouverez le code suivant :

Code:

.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
    background: #353535;
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}

Simplifiez-le ainsi :

Code:

.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
    background: #353535;
}

Puis modifiez la couleur restante par celle de votre choix.

[Solid6Snake]

Génial ça fonctionne un grand merci à vous

Franchement merci, Bonne soirée.