Menu de flux des téléchargements en position verticale sur l'index

Introduction

Ce tutoriel n'est valable que pour votre index.php !!

Le système de CSN à un inconvénient auquel, je n'ai pas encore palier... Vous ne pourrez pas mettre plus de 3 ou 4 téléchargements en page d'accueil c'est à dire sur la page "index.php".. Selon la configuration de votre page d'accueil.

Le dossier download

Nous allons commencer par aller dans le dossier de votre thème :"templates/Votre-Thème/modules", Regardez si vous avez ce dossier :"download".

Dans ce dossier, vous devriez y avoir :

- download
--

- framework
-----

- content
---------

- syndication
-------------

feed.tpl

Si vous ne l'avez pas, créez le ! Et les sous-dossiers aussi !!

Le fichier feed.tpl

Ce que nous allons modifier est le "feed.tpl", s'il est présent dans le dossier" syndication", il sera codé de cette manière:

Code TPL :

# START item #
<div style="margin-bottom:2px;padding:2px;">
<div style="float:left;width:75px;height:57px;text-align:center;border:1px solid #8883B9;">
# IF item.C_IMG #
<img src="{item.U_IMG}" alt="" />
# ENDIF #
</div>
<div style="float:left;width:250px;padding-left:6px;">
    <a href="{item.U_LINK}">{item.TITLE}</a>
    <p class="text_small">{L_ON} {item.DATE} - <a href="{item.U_LINK}" class="small_link">{L_READ}</a></p>
</div>
<div class="spacer"></div>
</div>
# END item #

- Il est présent, éditez le...
- Il n'est pas présent, ouvrez Notepad++ !

Nous allons remplacer le code ci-dessus par celui-ci:

Code TPL :

<table style="width:100%;" align="center"><tr>
# START item #
<td align="center">
<div style="float: left; width: 25%;">
    <div class="wrap1">
        <div class="wrap2" >
            <div class="wrap3">
            # IF item.C_IMG #
            <center><img class="thumbnail" src="{item.U_IMG}" alt=""  /></center>
            <br />
            # ENDIF #
            </div>
            <div class="wrap4" >
                <a href="{item.U_LINK}">{item.TITLE}</a> 
            <p class="text_small">Mis en ligne le : {L_ON} {item.DATE} </p>
            </div>
            <br />
            <div class="spacer"></div>
        </div>    
        <div class="wrap5" >
            <a href="{item.U_LINK}" class="small_link" title="{L_POSTED_ON}" style="valign:bottom;">[ Détails ]</a>
        </div>
    </div>
</div>    
</td>
# END item #
</tr></table>

-Vous l'avez édité, enregistrez le...
-Vous avez ouvert Notepad++, enregistrez le sous: feed.tpl et placez le dans le dossier "syndication" !

Le CSS

Maintenant vous allez vous rendre dans "templates/VOTRE-THEME/theme". Éditez le "design.css" et allez à la fin du fichier et copiez ce code :

Code CSS :

 
/* #######################################*/
/*         Feed.pl : Download             */
/* #######################################*/
.wrap1{
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
background:transparent url(images/backthumb.png) no-repeat scroll center top;
border:1px solid #989898;
display:inline-block;
height:200px;
margin:5px 5px 2px;
padding:2px;
text-align:center;
vertical-align:top;
width:150px;
}
.wrap1:hover{
background:#FFFFFF url(images/backthumb_hover.png) no-repeat scroll center top;
border:1px solid #000000;
}
.wrap2 {
float:left;
height:180px;
padding-left:6px;
width:140px;
}
.wrap3 {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
height:96px;
margin:4px;
text-align:center;
width:128px;
}
.wrap4 {
}
.wrap2 img {
background-color:#FFFFFF;
border:1px solid #CCCCCC;
height:85px;
padding:5px;
width:118px;
}
.wrap2 img:hover {
background-color:#FFFFFF;
border-color:#848484;
}
.content ul.thumbnails span.wrap2 img {
background-color:#FFFFFF;
border:1px solid #CCCCCC;
padding:5px;
}

Enregistrez et fermez le design.css.

Les images

Vous aurez besoin de ces deux images :

- backthumb.png
- backthumb_hover.png

Les voici:

Pour enregistrer ces images, clic droit et "Enregistrer sous...".
Bien sur vous pouvez les modifier à votre convenance

Placez ces images dans le dossier "templates/VOTRE_THEME/theme/images". Et voilà c'est fini ^^

Note:

Le code php qui vous permettra d'appeler le flux modifié :

Code PHP :

<?php echo Feed::get_parsed('download', DEFAULT_FEED_NAME, 0, false, 4); ?>

-Si la valeur "4" déforme votre index remplacez celle-ci par 3 et vice versa si cela fait trop cours sur votre présentation dans votre page index.
- La valeur étant le nombre de fichiers qui s'afficheront.

Après avoir modifié votre thème, régénérez les caches PBt (Administration/Outils) et celui de votre navigateur.

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