Accordeon

[Invité]

Problème avec accordeon aidez moi!

http://opchopper.forumactif.org

Veut pas se mettre comme au début...

[Scipion]

Bonsoir

Avez-vous utilisé un tutoriel pour installer votre accordéon ?

Cordialement

[Invité]

Bonjour,

Avant de changer de thème mon accordéon marchait à merveille

Hier j'ai changé de thème ça a buger et j'ai décidé de recommencer mais rien Ça refait comme avant

[Scipion]

Bonjour

En effet, mais lorsque vous changez de thème un message d'avertissement vous prévient toujours que les codes CSS ne peuvent être sauvegardés automatiquement. Il faut le faire manuellement.

Pour être sûr du code résiduel qui reste sur le forum, j'ai besoin de savoir si vous avez utilisé ce tutoriel

Message d'accueil en accordéon

Cordialement

[Invité]

Mince j'avais vu un message mais il a disparu

Sinon j'ai bien lu ce message et je me suis aidé de ça !

Que faire alors ???

[Scipion]

Faites un petit contrôle pour confirmez la présence dans votre forum de ces deux éléments de l'accordéon :

- Le code javascript
- Le message sur la page d'accueil

Cordialement

[Invité]

Bon,

J'ai fait ce que vous avez dit et:

opchopper.forumactif.org voilà ce que ça fait !

[Scipion]

On ne s'est pas bien compris mais ce n'est pas grave.

Vous allez sur PA >> Affichage >> Page d'accueil >> Généralités >> Message sur la page d'accueil :

Contenu du message : copiez tout le contenu et mettez-le ici entre balises code.

Cordialement

[Invité]

Désolé mais entre balises cordes veut dire ? Pourriez vous me donner un exemple ? Merci beaucoup.

[Scipion]

Dans le menu que vous apercevez lorsque vous écrivez un message :

- cliquez sur ce bouton
- collez le contenu du message d'accueil
- fermez la balise en cliquant une deuxième fois sur le même bouton

ce qui donne, à titre d'exemple :

Code:

<strong>exemple</strong>

Cordialement

[Invité]

Il n'y a pas cette petite icône désolé

Cordialement

[Scipion]

A partir de la gauche, la petite icône est en cinquième position.

Cordialement

[Invité]

Pourriez vous me dire soit:

- Une photo
- La page précise

Je sais que je vous embête mais je suis désolé

[Scipion]

Vous allez sur PA >> Affichage >> Page d'accueil >> Généralités >> Message sur la page d'accueil :

Contenu du message : copiez tout le contenu et collez-le ici

Cordialement

[Invité]

Voilà le contenu

Code:

<div id="accordeon-pa" class="accordion">
<ol>
<li>
<h2><span>L'équipe =D</span></h2>
<div>
<figure>

</figure>Bonjour ! Ici vous avez officiellement le nom de tous les membre de l'équipe: C'est à dire que je mets le nom de quelqu'un qui est dans l'équipe et je mets ses fonctions ( administrateur, modérateur, newser... ).
<br />
Comment être membre de l'équipe ?
<br />
Vous n'avez pas à avoir peur un sujet sera exprès pour ça...Bon pour le moment il y a peu de membres alors il y a peu de membres de l'équipe:
<br />
<br />

Kaizoku-chopper: Administrateur, Modérateur
<li>
<h2><span>Pokémon de la semaine X)</span></h2>
<div>
<figure> Le Pokémon de la semaine du 11/02/2013 au 18/02/2013 est: Emolga !
<img class="full" src= "http://images2.wikia.nocookie.net/__cb20110511195740/pokeespectaculos/es/images/5/5a/Emolga_de_Iris.png"alt="image" />
</figure> Emolga ! !
</div>
</li>
<li>
<h2><span>Les anniversaires </span></h2>
<div>
<figure> Aujourd'hui 10 février il n'y a aucun anniversaire  Mais si c'est ton anniversaire à toi !
<img class="full" src="http://sorayalni.s.o.pic.centerblog.net/jmwawh6p.gif" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Blog de l'administrateur ♥</span></h2>
<div>
<figure> Salut ! Ici vous avez <a href="http://kaizoku-chopper.skyrock.com" class="postlink" target="_blank" rel="nofollow">l'adresse du blog de l'administrateur Kaizoku-chopper en réserve</a>
<br />
Alors ce blog parle de Mario, Pokémon et principalement One Piece. Il réunit toutes les informations possibles, anniversaires, personnages... Il fournit aussi des sondages, des questionnaires et encore pleins a découvrir. En tout le blog comporte:
<br />
<br />
1492 visites, 59 articles ( 4 secrets ), 725 commentaires, 1741 amis, 26 fans, 2088 kiffs
<br />
<br />
Bien sûr quelques news et biographie seront affiché sur le blog !
Voilà j'ai finit mon blabla...
</figure>
</div>
</li>
<li>
<h2><span>Les 20 clips du mois ♫ </span></h2>
<div>
<figure> 1- <a href="http://www.youtube.com/watch?v=Anrc4jE8JVE" class="postlink" target="_blank" rel="nofollow">Amel Bent - Ma chance</a>
<br />
2- <a href="http://www.youtube.com/watch?v=TFrGD6kfwIc" class="postlink" target="_blank" rel="nofollow"> Kenza Farah & Soprano - Coup de coeur</a>
<br />
3- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=FfipXOpd3WU" class="postlink" target="_blank" rel="nofollow"> La fouine - J'avais pas les mots</a>
<br />
4- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=GRrZFL3z0aY" class="postlink" target="_blank" rel="nofollow"> Nolwenn Leroy - La jument de Michao</a>
<br />
5- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=pBU7VvCYZIY" class="postlink" target="_blank" rel="nofollow"> Nolwenn Leroy - Juste pour me souvenir</a>
<br />
6- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=_2OXVoBzdss" class="postlink" target="_blank" rel="nofollow"> Keen'V - Fatoumata Elle t'a maté</a>
<br />
7- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=4xST4BQFEUs" class="postlink" target="_blank" rel="nofollow"> Lyllo & Willy William - Baila</a>
<br />
8- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=_LTsjwiTN7w" class="postlink" target="_blank" rel="nofollow"> Céline Dion - Parler à mon père</a>
<br />
9- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=tAR6Y15R_0M" class="postlink" target="_blank" rel="nofollow"> Wati B & Big Ali - Wati Big Ali</a>
<br />
10- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=U9xKbqUbAJQ" class="postlink" target="_blank" rel="nofollow"> 1789, Les Amants de la Bastille - Tomber dans ses yeux</a>
<br />
11- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=NOubzHCUt48" class="postlink" target="_blank" rel="nofollow"> Ke$ha- Die Young</a>
<br />
12- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=wcLNteez3c4" class="postlink" target="_blank" rel="nofollow"> Hyuna & Psy - Gangnam Style 오빤 딱 내 스타일</a>
<br />
13- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=iP6XpLQM2Cs" class="postlink" target="_blank" rel="nofollow"> Ke$ha - TiK ToK</a>
<br />
14- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=kYtGl1dX5qI" class="postlink" target="_blank" rel="nofollow"> Will.i.am & Brintney Spears - Scream and Shout</a>
<br />
15- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=vGxOs9OrLYk&list=PL7Lq5lN-giw3JuQ7dNaSWZ5T4ADJpARBu" class="postlink" target="_blank" rel="nofollow"> Sherifa Luna - Il avait les mots</a>
<br />
16- <a href="http://www.youtube.com/watch?v=Q03E7oTc5qo" class="postlink" target="_blank" rel="nofollow"> Emeli Sandé - Read All About It Pt</a>
<br />
17- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=xyqQ4iT4IeU" class="postlink" target="_blank" rel="nofollow"> David Guetta - Just One Last Time </a>
<br />
18- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=PVzljDmoPVs" class="postlink" target="_blank" rel="nofollow"> David Guetta & Sia - She Wolf</a>
<br />
19- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=Sv0m8zXjTos" class="postlink" target="_blank" rel="nofollow"> Amel Bent - Toi</a>
<br />
20- <a href="http://www.youtube.com/watch?feature=player_detailpage&v=ixMY1jiiLSs" class="postlink" target="_blank" rel="nofollow"> Jenifer - L'amour et Moi</a>
</figure>
</div>
</li>
</ol>
</div>

[Scipion]

Pour retrouver votre accordéon vous devez juste compléter avec le code CSS ci-dessous, en allant sur PA >> Affichage >> Images et couleurs >> Couleurs >> Feuille de style CSS :

Collez ce code

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: 16px;
  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 }
 
/***************************************** Light */
.accordion {
    border: 9px solid white;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #a0a0a0;
    -webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% }
.accordion .slide > h2 span {
    background: #fcfcfc;
    background: -moz-linear-gradient(left,  #fcfcfc 0%, #ededed 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed));
    background: -webkit-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: -o-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: -ms-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    background: linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
    -webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    -moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    -o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
  box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
    color: #909090;
}
.accordion .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white }
.accordion .slide > h2.selected span, .accordion .slide h2.selected span:hover, .accordion .slide > h2.selected b { background: #ffffff }
.accordion .slide > div { background: #a0a0a0; 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% }
.accordion .slide > h2 span { filter: none }
 
/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }
 
/* centrer l'accordéon */
.accordion { margin: auto; }

Cliquez sur Valider

Cordialement

[Invité]

problème réglé mais maintenant mon fond a disparu...

[Invité]

Non beh alors je le choisis moi ! merci beaucoup