Modifier cellules du menu accordéon

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Modifier cellules du menu accordéon

Message par Solid6Snake le Dim 3 Mai 2015 - 1:48

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.



Dernière édition par Solid6Snake le Mer 6 Mai 2015 - 22:01, édité 1 fois

Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier cellules du menu accordéon

Message par Solid6Snake le Lun 4 Mai 2015 - 19:52

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 Wink

Merci à vous.

Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier cellules du menu accordéon

Message par MlleAlys le Mar 5 Mai 2015 - 22:17

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

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier cellules du menu accordéon

Message par Solid6Snake le Mer 6 Mai 2015 - 8:10

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

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier cellules du menu accordéon

Message par Solid6Snake le Mer 6 Mai 2015 - 8:12

@Solid6Snake a écrit: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 Wink

Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier cellules du menu accordéon

Message par MlleAlys le Mer 6 Mai 2015 - 12:45

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 :editer: en haut à droite du message.

Je vous invite à lire :

A bientôt sur ForumActif Smile

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

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier cellules du menu accordéon

Message par Solid6Snake le Mer 6 Mai 2015 - 18:06

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.







Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier cellules du menu accordéon

Message par MlleAlys le Mer 6 Mai 2015 - 18:12

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

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier cellules du menu accordéon

Message par Solid6Snake le Mer 6 Mai 2015 - 18:28

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




Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier cellules du menu accordéon

Message par MlleAlys le Mer 6 Mai 2015 - 19:19

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.

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier cellules du menu accordéon

Message par Solid6Snake le Mer 6 Mai 2015 - 22:00

Génial ça fonctionne un grand merci à vous thumright

Franchement merci, Bonne soirée.

Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum