Message d'accueil en accordéon

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

  • 0

Astuce Message d'accueil en accordéon

Message par Pinguino Mer 21 Mar 2012 - 12:17

Message d'accueil en accordéon

A travers cette astuce, nous allons apprendre comment créer un message d'accueil en accordéon comme celui qui suit :

 - Message d'accueil en accordéon Cap110

 - Message d'accueil en accordéon Capt210

Création du script


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Message d'accueil en accordéon" et pour placement "Sur l'index" (plus d'informations sur la gestion des scripts).

Code:
$(document).ready(function() {
    $("#accordeon-pa").each(function() {
        $(this).liteAccordion({
            autoPlay: true,
            pauseOnHover: true,
            rounded: true,
            enumerateSlides: true,
            containerWidth: 960,
            containerHeight: 320
        })
    });
});
/*************************************************!
 *
 *  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: 48,
                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);

Les variables containerWidth et containerHeight permettent de définir respectivement la largeur et la hauteur de votre message d'accueil en accordéon.

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Insérer le code HTML


Panneau d'administration  Affichage  Page d'accueil - Généralités

Code:
<div id="accordeon-pa" class="accordion">
    <ol>
        <li>
            <h2><span>Slide 1</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i.imgur.com/SHaqP.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Slide 2</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i.imgur.com/v5LuU.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Slide 3</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i.imgur.com/VdDge.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Slide 4</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i.imgur.com/EwuD0.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Slide 5</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i.imgur.com/Wl1P6.jpg" alt="image" />
              </figure>
            </div>
        </li>
    </ol>
</div>

Vous pouvez modifier les éléments "Slide #" qui seront les titres des slides et remplacer les <img class="full" src="https://i.imgur.com/{...}.jpg" alt="image" /> par le HTML souhaitez.

N'oubliez pas de cliquer sur le bouton :enreg: afin de sauvegarder les modifications.

Insertion du CSS


Nous vous proposons trois thèmes prêts à l'emploi. Toutefois, vous pouvez évidement modifier le CSS pour modifier l'aspect des slides selon vos désirs.

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Thème 1 : thème par défaut


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 }
 
/****************************************** Basic */
.accordion .slide > h2 { background: #333; color: white; line-height: 225% }
 
/*************************************** 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 }
 
/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }
 
/* centrer l'accordéon */
.accordion { margin: auto; }

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Thème 2 : Thème foncé


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 }

/****************************************** 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: #383838;
    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: #030303; 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; }

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Thème 3 : Thème léger


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

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Pinguino

Pinguino
Adminactif
Adminactif

Masculin
Messages : 13622
Inscrit(e) le : 02/05/2004

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

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

- Sujets similaires

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