Deux mini questions
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Deux mini questions
Ami du jour bonjour, ou ami du soir bonsoir, tout dépend de l'heure ou l'on lira mon message. J'ai découvert sur le site en fouinant un peux partout, le tuto du tableau en accordéon et j'aimerais beaucoup savoir si l'on peu retirer les chiffres que j'ai mis dans le cadre rouge suivant ça et aussi si à la place de la couleur grise déprimante comment mettre tout en blanc, mais en gardant les cadres comme il sont et la couleur de texte en noir ?!
Merci d'avance pour toute vos réponse
Merci d'avance pour toute vos réponse
Dernière édition par Missindo le Dim 15 Avr 2012 - 17:08, édité 1 fois
Re: Deux mini questions
Bonsoir,
Serait-il possible d'avoir les codes que vous avez inséré pour obtenir cet accordéon ? HTML / CSS
Serait-il possible d'avoir les codes que vous avez inséré pour obtenir cet accordéon ? HTML / CSS
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Deux mini questions
Bien sur que oui ^^
Html :
CCS :
Et voilà!!
Html :
- Code:
<div id="accordeon-pa" class="accordion">
<ol>
<li>
<h2><span>♥ Contexte ♥</span></h2>
<div>
<figure>
En cours
</figure>
</div>
</li>
<li>
<h2><span>♦ Liens utiles ♦</span></h2>
<div>
<figure>
A Venir
</figure>
</div>
</li>
<li>
<h2><span>♣ Staff ♣</span></h2>
<div>
<figure>
....
</figure>
</div>
</li>
<li>
<h2><span>☼ Crédit ☼</span></h2>
<div>
<figure>
/*-/*-/*-
</figure>
</div>
</li>
<li>
<h2><span>♫ Nos Amis ♫</span></h2>
<div>
<figure>
.................
</figure>
</div>
</li>
</ol>
</div>
CCS :
- 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 #FFFFFF inset, 1px 1px 0 #FFFFFF inset;
color: #000000;
}
.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; }
Et voilà!!
Re: Deux mini questions
Merci
Alors, concernant les chiffres en bas, ils proviennent du code jQuery, mais je ne vais pas être en mesure de vous aider davantage… Ce langage et moi ne sommes pas encore complètement amis… Il va falloir attendre la réponse d'une personne plus compétente.
En revanche, pour ce qui est de la personnalisation, il va falloir modifier ça dans les CSS. Et pour ce faire sans se prendre la tête, ça va être très simple, il vous suffit de recherchez à chaque fois cette couleur : #A0A0A0, qui correspond au gris clair, pour la modifier par celle de votre choix Modifiez-la sur chacun des éléments que vous désirez colorer.
Alors, concernant les chiffres en bas, ils proviennent du code jQuery, mais je ne vais pas être en mesure de vous aider davantage… Ce langage et moi ne sommes pas encore complètement amis… Il va falloir attendre la réponse d'une personne plus compétente.
En revanche, pour ce qui est de la personnalisation, il va falloir modifier ça dans les CSS. Et pour ce faire sans se prendre la tête, ça va être très simple, il vous suffit de recherchez à chaque fois cette couleur : #A0A0A0, qui correspond au gris clair, pour la modifier par celle de votre choix Modifiez-la sur chacun des éléments que vous désirez colorer.
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Deux mini questions
Merci beaucoup pour ce petit début d'aide ^^ j'adore ton vava
Edit: En fait si je change juste ça, ben ça deviens tout moche
Edit: En fait si je change juste ça, ben ça deviens tout moche
Re: Deux mini questions
désolé du double poste
Couleur c'est bon j'ai ce que je voulais, mais pour retirer les chiffres ont fait comment ?
Couleur c'est bon j'ai ce que je voulais, mais pour retirer les chiffres ont fait comment ?
Re: Deux mini questions
Merci pour l’avatar
Par contre, pour les chiffres, comme je l’ai précisé plus haut, je n’ai pas les compétences requises pour vous aider. Je vais donc signaler votre message à des personnes plus qualifiées afin qu’elles puisse vous venir en aide.
Par contre, pour les chiffres, comme je l’ai précisé plus haut, je n’ai pas les compétences requises pour vous aider. Je vais donc signaler votre message à des personnes plus qualifiées afin qu’elles puisse vous venir en aide.
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Deux mini questions
Merci beaucoup c'est très gentil de ta part ^_^
Re: Deux mini questions
Bonjour,
Attention, les balises <figure> n'existent qu'en HTML5, et ton forum est en xhtml.
Ensuite, sans aller jusqu'à modifier le jQuery, tu peux simplement masquer le chiffre en CSS :
Sinon, les options du Slider prévoient le fait que tu ne veuilles pas de ces nombres, il suffit de le préciser lors de l'appel de la fonction. Il y a en effet un endroit dans ton forum (poste un lien, je serais en mesure de voir où) où tu dois avoir quelque chose du style :
Qu'il te suffit de modifier comme suit :
Ce, en gardant bien sûr d'éventuelles modifications déjà effectuées.
À noter qu'il faudrait au passage rendre les balises script valide xhtml en précisant le type, donc :
Attention, les balises <figure> n'existent qu'en HTML5, et ton forum est en xhtml.
Ensuite, sans aller jusqu'à modifier le jQuery, tu peux simplement masquer le chiffre en CSS :
- Code:
.accordion .slide h2 > b { visibility: hidden }
Sinon, les options du Slider prévoient le fait que tu ne veuilles pas de ces nombres, il suffit de le préciser lors de l'appel de la fonction. Il y a en effet un endroit dans ton forum (poste un lien, je serais en mesure de voir où) où tu dois avoir quelque chose du style :
- Code:
<script>
$('#yourdiv').liteAccordion();
</script>
Qu'il te suffit de modifier comme suit :
- Code:
<script>
$('#yourdiv').liteAccordion({
enumerateSlides : false
});
</script>
Ce, en gardant bien sûr d'éventuelles modifications déjà effectuées.
À noter qu'il faudrait au passage rendre les balises script valide xhtml en précisant le type, donc :
- Code:
<script type="text/javascript">
$('#yourdiv').liteAccordion({
enumerateSlides : false
});
</script>
Re: Deux mini questions
Dernière édition par Missindo le Ven 13 Avr 2012 - 18:17, édité 1 fois
Re: Deux mini questions
Dis-nous si tu y arrives.
Re: Deux mini questions
Je me rend, je ferais mieux de faire ça à tête reposé
Re: Deux mini questions
j'abandonne j'arrive à rien du tout, je laisse tel que c'est
Re: Deux mini questions
Pourquoi tu n'ajoutes pas simplement ça dans ton css ?
- Code:
.accordion .slide h2 > b { visibility: hidden }
Re: Deux mini questions
euh pas bête xd
Re: Deux mini questions
Alors ?
Re: Deux mini questions
juste comme ça ou à la place d'autre chose?
edit: rahh je laisse tomber, j'ai tout foiré
edit: rahh je laisse tomber, j'ai tout foiré
Dernière édition par Missindo le Dim 15 Avr 2012 - 16:53, édité 1 fois
Re: Deux mini questions
Juste comme ça oui
Re: Deux mini questions
ouiiiiiiiiiiiiiiiiiii merci du fond du coeur
Re: Deux mini questions
Je t'en prie. Pense à mettre le sujet en résolu.
Re: Deux mini questions
c'est fait
Sujets similaires
» Deux questions
» Deux questions pratique.
» DEUX PETITES QUESTIONS
» Deux questions sur les thèmes !
» Création de forum : Deux questions.
» Deux questions pratique.
» DEUX PETITES QUESTIONS
» Deux questions sur les thèmes !
» Création de forum : Deux questions.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum