Yosh'a !
Nous revoilà pour un nouveau LS, encore une fois celui-ci est basé sur une demande, c'était une demande de catégorie à bord arrondies, avec un effet au survol d'une image qui permettait d'afficher les sous-forums, et avec une autre image servant de cadre aux sous-forums.
Pour ce LS vous aurez besoin de :
- L'accès au template Index-Box (Pour rappeler : PA > Affichage > Templates > Général > Index-Box via le compte Fondateur uniquement)
- Et de la feuille de style CSS accessible à tous les Admins du forum.
Pour voir à quoi ressemble ce LS :
De base : http://puu.sh/bxah1/85f5a773cf.png
Au survol : http://puu.sh/bxaj6/db968b576e.png
De base : http://puu.sh/bxah1/85f5a773cf.png
Au survol : http://puu.sh/bxaj6/db968b576e.png
- Spoiler:
- Tout d'abord commençons par le commencement, le template.
Une fois que vous avez ouvert votre template, remplace TOUT et absolument tout par le suivant :
- Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall">{LAST_VISIT_DATE}<br/>
{CURRENT_TIME}<br/>
</span>
<!-- END switch_user_logged_in -->
<div class="nav">
<a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}
</div>
</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br/>
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br/>
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead --><div class="cat_titre">
{catrow.tablehead.L_FORUM}
</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow --><div class="cat_forum"><div class="forum_titre">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</div>
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="display: inline-block; border-radius: 15px;" /><div class="last_post_stats">
<div class="last_post">
{catrow.forumrow.LAST_POST}
</div>
<div class="stats">
{catrow.forumrow.TOPICS} Sujets<br/>
{catrow.forumrow.POSTS} Messages
</div>
</div>
<div class="descri_forum">
{catrow.forumrow.FORUM_DESC}
</div>
<div class="bloc_sf">
<img src="http://image.noelshack.com/fichiers/2014/37/1410479048-200x200.jpg" alt="sous-forums" class="image_sf" />
<img src="http://img15.hostingpics.net/pics/183380sousF.png" alt="fond_sforum" class="fond_sforum" />
<div class="s_forum" id="s_forum">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
<script type="text/javascript">jQuery('#s_forum').html(jQuery('#s_forum').html().replace(/, /g,'<br />')).removeAttr('id');</script>
</div>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
<!-- END tablefoot -->
<!-- END catrow -->
Une fois cela fait, pensaient à enregistrer puis valider votre template. Toutes les images présentes dans le template sont modifiable, évidemment, celle des "old/new/lock" qui se trouvent tout à gauche n'est pas fourni avec, il vous suffira d'en ajouter une vous-même comme si vous ajoutiez celle-ci à votre forum de base ^^
Pendant que nous y sommes, nous allons installer les polices d'écritures de Google Font que j'utilise pour ce LS. Vous êtes libre de les changer bien évidemment.
Rendez-vous donc dans le template Overall-header cette fois-ci, puis repérez "< head >" (ligne 3) et changer la par :
- Code:
<head>
<link href="http://fonts.googleapis.com/css?family=Pacifico|Gabriela" rel="stylesheet" type="text/css" />
Si vous avez déjà ajouté des polices Google Font sur votre forum, vous pouvez ajoutez celle-ci à la suite de la votre en séparant chaque nom de police par un " | " (alt gr + 6 sur les chiffres en haut) et en mettant des "+" pour les espaces. Ici nous avons donc la police "Gabriela" et "Pacifico" d'installé. Vous pourrez les réutiliser où vous voulez sur votre forum dorénavant.
- Spoiler:
- Passons à la partie CSS, rendez-vous donc dans votre feuille de style CSS et ajoutez-y simplement :
- Code:
/* Titre des Catégories */
.cat_titre {
height: 65px;
border: 4px solid #000;
border-radius: 15px;
text-align: center;
}
.cat_titre h2 {
margin: -5px auto 0;
font: 42px 'Pacifico';
}
/* Bloc des Forums */
.cat_forum {
width: 892px;
height: 260px;
margin: auto;
}
/* Titre des Forums */
.forum_titre {
text-align: center;
}
.forum_titre a,
.forum_titre a:visited,
.forum_titre a:link {
font: 34px 'Marck Script';
color: black;
transition: 1s all;
}
.forum_titre a:hover {
color: white;
}
/* Derniers Messages et Statistiques du forum */
.last_post_stats {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
vertical-align: top;
}
.last_post {
width: 100px;
height: 122px;
margin-bottom: 5px;
padding-top: 30px;
border: 1px solid #000;
border-radius: 10px;
text-align: center;
font: 14px 'gabriela';
background: #282828;
}
.last_post .gensmall {
font: 14px 'gabriela';
}
.last_post a,
.last_post a:visited,
.last_post a:link {
color: grey;
}
.last_post a:hover {
color: darkgrey;
}
.stats {
width: 100px;
height: 40px;
border: 1px solid #000;
border-radius: 10px;
text-align: center;
font: 16px 'gabriela';
background: #282828;
}
/* Description du Forum */
.descri_forum {
display: inline-block;
width: 400px;
height: 180px;
margin-right: 10px;
padding: 10px;
border: 1px solid #000;
border-radius: 25px;
text-align: justify;
font: 12px 'gabriela';
vertical-align: top;
background: #282828;
}
/* Bloc des Sous-Forums */
.bloc_sf {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.bloc_sf .image_sf {
z-index: 997;
position: absolute;
border-radius: 25px;
opacity: 1;
transition: 1s all;
}
.bloc_sf:hover .image_sf {
opacity: 0;
}
.fond_sforum {
z-index: 998;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 25px;
}
.s_forum {
z-index: 999;
position: relative;
width: 150px;
height: 100px;
margin-top: 50px;
margin-left: 25px;
overflow: auto;
text-align: center;
font: 11px 'gabriela';
opacity: 0;
transition: 2s all;
}
.bloc_sf:hover .s_forum {
opacity: 1;
}
.s_forum a,
.s_forum a:visited,
.s_forum a:link {
color: black;
}
.s_forum a:hover {
color: grey;
}
Tout n'est pas détaillé mais vous avez la majeur partie des choses à savoir pour modifier l'apparence des catégories, ensuite, le reste n'est que de la logique, ce sont des choses assez facile si vous avez déjà trifouillé des codes. Dans le doute, n'hésitez pas à aller faire un tour dans les cursus ou tutos et à poster dans la section des problèmes si vous avez un soucis. Ou encore, à enlever un bout de code pour voir ce qui change puis à la remettre
- Spoiler:
- Il va nous falloir ajouter le code HTML dans la description de chaque forum, sinon, la mise en page ne sera pas exactement la même... Evidemment, celui-ci est libre de personnalisation, et si vous souhaitez mettre l'image à gauche au lieu de droite, vous pouvez changer le "float: left;" par "float: right;" libre aussi de changer la disposition pour CHAQUE forum
Allez donc dans la description de votre/vos forum/s et ajoutez-y ceci :
- Code:
<img src="http://image.noelshack.com/fichiers/2014/37/1410479048-100x150.jpg" style="float: left; border-radius: 10px; margin-top: 10px;" alt="description" /><span style="margin-left: 10px; overflow: auto; height: 190px;">Description du forum</span>
Vous pensez remplacer le lien de l'image par le votre, et changer la description du forum par votre texte, le "alt" peut aussi être changé pour afficher le texte que vous voulez si jamais l'image ne s'affiche plus pour une quelconque raison.[/code]
Un petit merci ou commentaire est toujours le bienvenu ^^
- Mettre/laisser un crédit vers Never-Utopia est obligatoire.
- Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.
- Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.
Dernière édition par Alzufen le Mar 16 Sep 2014 - 23:46, édité 1 fois
