Menu de flux des téléchargements en position verticale sur l'index
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