Hello hello,
Mon premier LS sur Never Utopia
Un petit libre service de catégories créé à la demande de d'elsa2607 qui a réalisé le schéma ainsi que le choix des couleurs.
Informations
Rendu visuel :
- Pour avoir la bonne structure :
PA > Affichage > Page d'accueil > Structure et hiérarchie et choisir "Séparer les catégories sur l'index" ainsi que le niveau de compression de l'index "Moyen". - Largeur des catégories : 900px.
- Les images à droites sont les new / no new / lock. Les dimensions maximales sont de 90px pour la largeur et 150px pour la hauteur.
PA > Affichage > Images > Avancé > Icônes du forum. - Il faut activer l'affichage des sous forums
PA > Affichage > Page d'accueil > Structure et hiérarchie > Lien vers les niveaux inférieurs (oui ou bien "avec une image).
(Si "avec une image", elle se change ici : PA > Affichage > Images > Avancé > Mini icones). - Pour régler le dernier message affiché :
PA > Affichage > Page d'accueil > Structure et hiérarchie. - cocher Oui pour Afficher le titre du sujet du dernier message d'un forum sur l'index.
- Pour la longueur, mettre environ 15 à Longueur du titre du sujet affiché.
Les codes
Mais si vous le souhaitez, vous pouvez toujours dire merci, personne ne vous mangera.
Et ça fait toujours plaisir (◕‿◕✿)
L'ensemble du template index_box à remplacer :
Compte fondateur : PA > Affichage > Templates > Général ( + vérifier que "Forcer les templates par défaut" est bien coché à "Non")
- Spoiler:
- 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>
<!--
* --------------------------------------
* DÉBUT CATÉGORIES
* LIBRE SERVICE TROUVÉ SUR NEVER UTOPIA
* --------------------------------------
-->
<!-- Ajout des polices -->
<link href='http://fonts.googleapis.com/css?family=Oswald|Roboto:300' rel='stylesheet' type='text/css'>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="categorie">
<!-- Titre de la catégorie -->
<div class="cate-title">{catrow.tablehead.L_FORUM}</div>
<!-- Bloc contenant la liste des forums d'une catégorie -->
<div class="forums-container">
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- Message d'erreur-->
<p style="font-size: 15px; color: red; font-weight: bold;">Si ce message apparait, merci d'aller dans PA > Affichage > Page d'accueil > Structure et hiérarchie et choisir "Séparer les catégories sur l'index" ainsi que le niveau de compression de l'index "Moyen".</p>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="un-forum">
<!-- Bloc statistiques (dernier message + statistiques) -->
<div class="stats-forum">
<div class="last-message">{catrow.forumrow.LAST_POST}</div>
<div class="sujets-messages">
{catrow.forumrow.TOPICS} sujets • {catrow.forumrow.POSTS} msg
</div>
</div>
<!-- Bloc infos : titre + description + sous forums -->
<div class="infos-forum">
<div class="titre-forum"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
<div class="description-forum">
<div class="description">
{catrow.forumrow.FORUM_DESC}
</div>
<div class="sous-forums gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
</div>
</div>
<!-- Bloc nouveaux messages / pas de nouveaux messages / verrouillé -->
<div class="status-forum">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>
</div> <!-- fermeture .un-forum -->
<!-- END forumrow -->
<!-- BEGIN catfoot --><!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div><!-- fermeture /.forums-container -->
</div><!-- fermeture /.categorie -->
<!-- END tablefoot -->
<!-- END catrow -->
<!--
* --------------------------------------
* FIN CATÉGORIES
* --------------------------------------
-->
Le CSS
PA > Affichage > Couleurs > Feuille de style CSS
- Spoiler:
- Code:
/*
* --------------------------------------
* CODAGE DES CATEGORIES
* LIBRE SERVICE TROUVÉ SUR NEVER UTOPIA
* --------------------------------------
*/
/* Bloc categorie */
.categorie {
width: 900px;
margin: auto;
margin-bottom: 25px;
border-bottom: 10px solid #A0CE50; /* bordure en bas */
font-family: 'Roboto', sans-serif;
}
/* Titre de la catégorie */
.cate-title {
text-align: center;
height: 70px;
color: #9BE937; /* couleur */
font-size: 45px;
font-family: 'Oswald', sans-serif;
}
/* Texte titre de la catégorie, remise à zero du style */
.cate-title h2 { color: inherit; font-size: inherit; margin: 0; }
/* Bloc englobant les forums */
.forums-container {
padding: 20px 0;
background: white;
overflow: hidden;
}
/* Bloc entourant un forum */
.un-forum {
width: 95%;
margin: auto;
overflow: hidden; /* ne pas enlever, clear le float */
}
/* marge entre les forums */
.un-forum + .un-forum {
margin-top: 25px;
}
/* Remise à zéro du style des liens*/
.un-forum a { color: inherit; text-decoration: inherit; }
/* Bloc gauche Dernier message + stats */
.stats-forum {
float: left;
width: 20%;
background: #A0CE50;
text-align: center;
text-transform: uppercase;
}
/* Bloc dernier message */
.last-message {
padding: 20px 0;
font-size: 12px;
height: 80px;
}
/* centrage vertical du dernier message */
.last-message > span {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
/* Liens dernier message */
.last-message a {
font-size: 16px;
color: black;
}
/* Statistiques nombre sujets & messages */
.sujets-messages {
background: #E6E6D3;
line-height: 30px; /* hauteur de la ligne */
}
/* Bloc titre forum + description + sous forums */
.infos-forum {
display: inline-block;
width: 550px;
margin: auto;
margin-left: 22px; /* marge à gauche à définir manuellement */
overflow: hidden;
}
/* Bloc new / no new / lock */
.status-forum {
float: right;
overflow: hidden;
width: 90px;
max-height: 150px;
}
/* Style image new / no new / lock */
.status-forum img {
width: 100%;
}
/* Titre du forum */
.titre-forum {
line-height: 30px;
margin-bottom: 10px;
padding: 0 5px;
background: #89CEEA;
text-transform: uppercase;
color: #4B4B4B;
font-weight: bold;
text-align: right;
overflow: hidden;
white-space: nowrap; /* empeche de retour à la ligne si le texte est trop long */
}
/* Bloc description + sous forums du forum */
.description-forum {
background: #E6E6D3;
overflow: hidden;
height: 110px;
}
/* Description du forum */
.description {
height: 75px;
padding: 5px;
overflow: auto;
text-align: justify;
font-size: 14px;
}
/* Bloc sous forum */
.sous-forums {
padding: 0 5px;
line-height: 25px;
text-align: right;
}
/* Liens de sous forums */
.sous-forums a {
text-decoration: none;
}
/* Image "new / no new / lock" pour les sous forums */
.sous-forums a img {
margin-top: 8px;
}
/*
* --------------------------------------
* FIN CODAGE DES CATEGORIES
* --------------------------------------
*/
Ajout
Petit ajout personnel, si vous souhaitez avoir le texte indiquant qu'il n'y a pas encore de message dans un forum :
Rendu visuel :
Le CSS à rajouter :
- CSS à rajouter:
- Code:
/* Ajout catégorie :
* message indiquant "Pas de message"
* dans un forum (à la place des statistiques)
* Crédits : Never Utopia
*/
/* Premiere ligne */
.last-message:empty:before {
content: "Vide ♥";
display: block;
margin-top: 35px;
}
/* Seconde ligne */
.last-message:empty:after {
content: "Viens poster un message !";
}
/* On prend toute la hauteur */
.last-message:empty {
height: 110px;
}
/* On masque les statistiques*/
.last-message:empty + .sujets-messages {
display: none;
}
/* Fin ajout absence de message*/
Dernière édition par Nihil Scar Winspeare le Lun 22 Déc 2014 - 19:17, édité 1 fois