Intégration d'un carousel vertical comme header

[ssamiiex]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour

J'espère que vous allez bien ! J'aimerais intégrer ce code à la place de mon header. Une fois installé dans ma feuille CSS et dans mon template Overall_header, ce dernier n'affiche pas. Est-ce parce que les code CodePen ne sont pas compatible avec la plateforme Forumactif? Comment puis-je faire pour l'intégrer à mon code?

Merci et bonne journée,
ssamiiex

[Toryudo]

Bonjour !
Est-ce que vous avez mis le CSS tel qu'il est affiché sur la page par défaut, ou est-ce que vous avez sélectionné le "View compiled CSS" ? C'est bien le "Compiled CSS" qu'il faut ajouter dans la feuille CSS, soit celui-ci :

Code:

.vertical.carousel .carousel-control {
  bottom: auto;
  width: 100%;
  height: 15%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0) 100%);
}
.vertical.carousel .carousel-control.right {
  top: auto;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.vertical.carousel .carousel-control .glyphicon {
  transform: rotate(90deg);
}
.vertical.carousel .carousel-indicators {
  bottom: auto;
  top: 50%;
  left: auto;
  right: 10px;
  width: 14px;
  margin: 0;
  transform: translateY(-50%);
}
.vertical.carousel .carousel-inner > .item {
  left: 0;
  top: 0;
}
.vertical.carousel .carousel-inner > .item > img {
  width: 100%;
}
.vertical.carousel .carousel-inner > .item.next,
.vertical.carousel .carousel-inner > .item.active.right {
  transform: translate3d(0, 100%, 0);
  top: 0;
}
.vertical.carousel .carousel-inner > .item.prev,
.vertical.carousel .carousel-inner > .item.active.left {
  transform: translate3d(0, -100%, 0);
  top: 0;
}
.vertical.carousel .carousel-inner > .item.next.left,
.vertical.carousel .carousel-inner > .item.prev.right,
.vertical.carousel .carousel-inner > .item.active {
  transform: translate3d(0, 0, 0);
  top: 0;
}
.vertical.carousel .carousel-inner > .active,
.vertical.carousel .carousel-inner > .next.left,
.vertical.carousel .carousel-inner .prev.right {
  top: 0;
}
.vertical.carousel .carousel-inner > .next,
.vertical.carousel .carousel-inner > .active.right {
  top: 100%;
  left: 0;
}
.vertical.carousel .carousel-inner > .prev,
.vertical.carousel .carousel-inner > .active.left {
  top: -100%;
  left: 0;
}
.s {
  color: #d44950;
}
/* Literal.String */
.na {
  color: #4f9fcf;
}
/* Name.Attribute */
.nt {
  color: #2f6f9f;
}
/* Name.Tag */


[ssamiiex]

Bonjour @"Toryudo"
Merci pour votre réponse rapide.

C'est en effet ce CSS que j'ai mis, je l'ai essayé en iframe également et le "javascript" ou du moins ce qui actionne les onglets ne fonctionnent pas, d'une façon ou d'une autre.

Serait-ce parce qu'il y a certaines balises que Forumactif ne supporte pas?

Merci

[Toryudo]

Hm... bizarrement, j'ai l'impression qu'il manque des choses dans le CSS.
Rien que le fait que les lignes 68 à 112 du CSS qu'ils fournissent soient vides, ça me parait étrange, comme s'il en manquait un bout.

Il va falloir regarder tout ce qui est dans le CSS de base de la démo, https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css et recouper avec ce qui est utile pour le module. En tout cas, une fois que tout aura été récupéré, il marchera bien sur Forumactif, sans problème !
Vous vous sentez à regarder ou vous attendez ce soir que je regarde tout ça ?

[ssamiiex]

Coucou,

Ah? o.O C’est étrange quand même! Mais merci à vous de l’avoir souligné. Malheureusement, je ne suis disponible que ce soir, mais je me sentirais mal que vous ayez à le regarder à ma place. Je le regarderai donc ce soir et reviendrai vous donner des nouvelles si cela vous convient.

Bonne journée,
ssamiiex

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[ssamiiex]

Bonjour Chacha,

Désolée avec le travail je n'ai pas eu le temps de me poser correctement sur le codage, mais j'ai commencé à regarder hier. Le sujet est toujours d'actualité.

Merci,
ssamiiex

[Toryudo]

Je n'avais pas tilté, mais c'est du Bootstrap... Ils expliquent mal ce qu'il faut installer en plus du code qu'ils fournissent. Je vous donne une partie de la réponse parce qu'elle n'est pas simple à deviner...

Alors, le code CSS est bien de ce type :

Code:

.vertical.carousel .carousel-control {
  bottom: auto;
  width: 100%;
  height: 15%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0) 100%);
}
.vertical.carousel .carousel-control.right {
  top: auto;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.vertical.carousel .carousel-control .glyphicon {
  transform: rotate(90deg);
}
.vertical.carousel .carousel-indicators {
  bottom: auto;
  top: 50%;
  left: auto;
  right: 10px;
  width: 14px;
  margin: 0;
  transform: translateY(-50%);
}
.vertical.carousel .carousel-inner > .item {
  left: 0;
  top: 0;
}
.vertical.carousel .carousel-inner > .item > img {
  width: 100%;
}
.vertical.carousel .carousel-inner > .item.next,
.vertical.carousel .carousel-inner > .item.active.right {
  transform: translate3d(0, 100%, 0);
  top: 0;
}
.vertical.carousel .carousel-inner > .item.prev,
.vertical.carousel .carousel-inner > .item.active.left {
  transform: translate3d(0, -100%, 0);
  top: 0;
}
.vertical.carousel .carousel-inner > .item.next.left,
.vertical.carousel .carousel-inner > .item.prev.right,
.vertical.carousel .carousel-inner > .item.active {
  transform: translate3d(0, 0, 0);
  top: 0;
}
.vertical.carousel .carousel-inner > .active,
.vertical.carousel .carousel-inner > .next.left,
.vertical.carousel .carousel-inner .prev.right {
  top: 0;
}
.vertical.carousel .carousel-inner > .next,
.vertical.carousel .carousel-inner > .active.right {
  top: 100%;
  left: 0;
}
.vertical.carousel .carousel-inner > .prev,
.vertical.carousel .carousel-inner > .active.left {
  top: -100%;
  left: 0;
}
.s {
  color: #d44950;
}
/* Literal.String */
.na {
  color: #4f9fcf;
}
/* Name.Attribute */
.nt {
  color: #2f6f9f;
}
/* Name.Tag */

Par contre, en plus du code HTML, il faut rajouter les choses suivantes dans vos Templates (ou le message d'accueil) pour installer la base de Bootstrap.
Le CSS de Bootstrap :

Code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">

Le Javascript de Bootstrap (ainsi qu'une version plus récente de jquery) :

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>

Ça rend la chose plus compliquée à installer, mais si vous voulez tester par exemple, il vous suffit de mettre le CSS dans votre feuille CSS personnalisée, et de mettre ce code dans le message d'accueil :

Code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
<div class="contenu">
  <div class="vertical carousel slide" id="carousel-example-generic" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
      <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="https://i26.servimg.com/u/f26/20/36/24/15/0110.jpg" alt="first slide [900x500]">
      </div>
      <div class="item">
        <img src="https://i26.servimg.com/u/f26/20/36/24/15/0210.jpg" alt="second slide [900x500]">
      </div>
      <div class="item">
        <img src="https://i26.servimg.com/u/f26/20/36/24/15/0310.jpg" alt="third slide [900x500]">
      </div>
    </div>
    <a href="#carousel-example-generic" class="left carousel-control" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">previous</span>
    </a>
    <a href="#carousel-example-generic" class="right carousel-control" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">next</span>
    </a>
  </div>
</div>

Là, le slider devrait apparaitre.
Il faudra sûrement quelques ajustements, mais c'est l'idée en tout cas !

[ssamiiex]

Coucou <3

Pardon des délais. Je travaille dessus présentement, parce que le code a bousillé le template overall_header et le code que j'avais installé auparavant.

Je vous reviens, merci beaucoup d'avoir épluché le code et d'avoir décelé le javascript. Je ne l'aurais jamais su.

Merci,
ssamiiex

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[ssamiiex]

Bonjour

Le sujet est toujours d’actualité. Devrais-je le mettre dans un iframe?

Merci,
ssamiiex

[Toryudo]

Bonjour !
Pourquoi pas, oui, ça pourrait être plus propre !
Vous mettez le code dans une page HTML et vous utilisez un iframe pour afficher cette page où vous voulez, ça pourrait marcher sans problème.

[ssamiiex]

Ça fonctionne ! Merci beaucoup Toryudo pour avoir pris le temps de m'aider, d'analyser le code et de m'avoir pisté sur le Bootstrap.