Créer un slider en css sur la page index

Révision infoking1 du 17/07/2011

Créer un slider en css sur la page index

Introduction

C'est le slider mis en place sur le thème CsN 2011. Avec les flux rss bien entendu, cela sera à vous de les supprimer si vous le désirez.

Le voici en image:

Le fichier css

Pour commencer enregistrez ce code dans un document texte, avec comme nom de fichier : "horizontalaccordion.css", que vous placerez ensuite dans le dossier "/templates/VOTRE-THEME/theme/".

Voici le code:

Code CSS :

 
.horizontalaccordion{
background: url("images/accordion.png") no-repeat scroll 0 0 transparent;
border:1px solid #000000;
height: 300px;
-moz-box-shadow: 2px 2px 3px #343434;
-webkit-box-shadow: 2px 2px 3px #343434;
-o-box-shadow: 2px 2px 3px #343434;
box-shadow: 2px 2px 3px #343434;
}
.horizontalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
   height: 300px;
}
.horizontalaccordion>ul>li {
background: url("images/slide.jpg") no-repeat scroll 0 0 transparent;
    display:block;
overflow: hidden;
    float:left;
    margin: 0;
    padding: 0;
    list-style:none;
width:55px;
height: 300px;
    /* CSS3 Transitions */
    transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
}
.horizontalaccordion>ul>li>h3 {
    /*background: none repeat scroll 0 0 #CCCCCC;
    border-left: 1px solid #F0F0F0;*/
    color: #000000;
    display: block;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    height: 19px;
    margin: 0;
    padding: 10px;
    text-decoration: none;
    text-transform: uppercase;
    width: 280px;
}
.horizontalaccordion>ul>li>div {
    text-shadow: 0 0 0.2em #000000;
background: url("images/div.png") no-repeat scroll 0 0 transparent;
    display: none;
    float: left;
color:#FFFFFF;
    height: 290px;
    left: 55px;
    list-style: none outside none;
    margin: 0;
    overflow: auto;
    padding: 8px;
    position: relative;
    top: -40px;
    width: 325px;
overflow: auto;
    *+html top:0px;       /* IE7 Hack */
    *+html left:0px;      /* IE7 Hack */
    *+html background-color:#000000;      /* IE7 Hack */
*+html height: 285px;
}
div#imgaccordion {
    margin-left: -10px;
    margin-top: -10px;
}
.horizontalaccordion>ul>li:hover {
    overflow: hidden;
width: 380px;
}
.horizontalaccordion:hover>ul>li:hover>div {
    display:block;
}
.horizontalaccordion:hover>ul>li:hover>h3 {
    /* Decorative CSS 
    color:#fff;
    background:#000000;*/
}
.horizontalaccordion>ul>li>h3:hover {
    cursor:pointer;
}
.horizontalaccordion>ul>li>div a{
 text-shadow: 0 0 0.2em #000000;
color:#FFFFFF;
}
.horizontalaccordion>ul>li>div a:hover{
 text-shadow: 0 0 0.2em #FFFFFF;
color:#000000;
}

Le header.tpl

Entre la balise <head> ... </head> dans votre header.tpl en dessous de:

Code TPL :

 
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/bbcode.css" type="text/css" media="screen, print, handheld" />

Rajoutez cette ligne :

Code TPL :

        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/horizontalaccordion.css" type="text/css" media="screen" />

Ensuite entre les balises <body> ...<script></script><script></script></body>, Rajoutez le code du slider où vous le voulez :

Code HTML :

<div class="horizontalaccordion">
<ul>
<li>
<h3><div id="imgaccordion"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/accordeon/slide-slide.png" height="300px" width="55px" alt=""></div></h3>
<div>
<br /><u>title</u>:
<br />
<br />» Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu.
<br />» Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu.
<br />» Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu.
</div>
</li>
<li>
<h3><div id="imgaccordion"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/accordeon/slide-site.png" height="300px" width="55px" alt="Site"></div></h3>
<div>
<br /><u>title</u>:
<br />
<br />» Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu.
<br />» Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu.
<br />» Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu.
</div>
</li>
<li>
   <h3><div id="imgaccordion"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/accordeon/slide-support.png" height="300px" width="55px" alt="Support"></div></h3>
<div><?php echo Feed::get_parsed('forum', DEFAULT_FEED_NAME, 0, false, 18); ?></div>
</li>
<li>
   <h3><div id="imgaccordion"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/accordeon/slide-news.png" height="300px" width="55px" alt="News"></div></h3>
<div><?php echo Feed::get_parsed('news', DEFAULT_FEED_NAME, 0, false, 18); ?></div>
</li>
<li>
   <h3><div id="imgaccordion"><img src="{PATH_TO_ROOT}/templates/{THEME}/theme/images/accordeon/slide-doc.png" height="300px" width="55px" alt="Documentation"></div></h3>
<div><?php echo Feed::get_parsed('wiki', DEFAULT_FEED_NAME, 0, false, 18); ?></div>
</li>
</ul>
</div>

Une fois que vous avez placé et modifié ce code à votre goût, enregistrez et fermez.

Les images

Vous allez maintenant télécharger l'archive suivante, la dézipper, et placer le dossier accordeon dans le dossier "/templates/VOTRE-THEME/theme/images/".

accordeon.zip

Et normalement vous devriez avoir le même visuel que l'image que je vous ai mis en haut de ce tutoriel. Vous pouvez ensuite si vous le souhaitez modifier le css et les images pour avoir votre slider

Si vous avez des questions, n'hésitez pas à les poser sur le forum

Créé le 14/07/2011, par Swan