Rappel du premier message :
Ceci est un code de sous-forums crée suite à la Demande de Dark6nika, ici.
Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_box /!\ Ceci est tout le template! /!\ :
Code HTML à mettre dans chaque description de sous-forum:
Le CSS:
Dans ce code, beaucoup de choses sont modulables. Si vous voulez des exemples, de choses à changer ou SAVOIR comment modifier certaines choses, n'hésitez pas à poster à la suite ou dans les problèmes. Voici une liste d'idée qui pourraient être expliquées plus tard si besoin est:
Sous-Forums
Ceci est un code de sous-forums crée suite à la Demande de Dark6nika, ici.
Version phbb2 ▬ CSS3 & HTML5 ▬ Ce que ça donne
L'image des sous-forums pour indiquer nouveaux messages/pas de nouveaux messages/verrouillé doit être en 100px*140px. L'image de description de catégorie (la large image à droite) est en 350px*177px. Si vous modifiez ces tailles, vous pourriez avoir des problèmes de positions.
Le code
Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_box /!\ Ceci est tout le template! /!\ :
- 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 --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>
<div class="secondarytitle"> {catrow.tablehead.L_FORUM} </div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<div class="catte_titre">
<h{catrow.cathead.LEVEL} class="hierarchy">
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
</h{catrow.cathead.LEVEL}>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="sous_forum_contour">
<div class="title_forum">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>
</h{catrow.forumrow.LEVEL}>
</div>
<div class="contour_description">
<img class="img_cate" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<div class="decription">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
</div>
</div>
<div class="forum_liens">
<span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
</div>
<div class="position_last_mess">
{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
<div class="dernier_mess">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</div>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</td>
</tr>
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Code HTML à mettre dans chaque description de sous-forum:
- Code:
<img src="URL_IMAGE_DE_DROITE_ICI" />
<h3>
Titre Quelconque -
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet erat ac arcu hendrerit posuere. Donec eu justo vulputate, ultrices quam non, cursus dolor. Nam vitae ornare nulla. Vestibulum sit amet diam mi. Cras quis erat et purus lobortis consectetur. Morbi dui tortor, consectetur scelerisque diam non, sagittis commodo est. Suspendisse ultrices nibh id lobortis aliquet. Phasellus faucibus quam vitae bibendum blandit. Sed tristique nec lacus id tempus. Donec ornare, orci sed sagittis laoreet, tellus quam ornare nisl, in pretium nibh odio vitae neque. Praesent sit amet lectus vehicula, ornare justo in, pulvinar nisl. Nunc ligula lectus, sagittis at vehicula eget, laoreet id odio. Quisque a cursus neque. Nullam non semper lectus. Suspendisse ut neque purus. Etiam in iaculis ligula.
</p>
Le CSS:
- Code:
/*********** DÉBUT CATÉS ***********/
/* Couleur de fond d'intérieur du forum À retirer si vous avez prévu autre chose. */
.bodyline {
background-color: #DCE4E1;
}
/* Entoure les sousforums: va permettre de positionner les choses de façon absolue plus tard. */
.sous_forum_contour {
position: relative;
height: 230px;
width: auto;
padding: 30px;
}
/* Permet de retirer les bords et la couleur de fond de base. */
.forumline {
background: none;
border: none;
}
/* Mise en forme du titre de catégorie */
.secondarytitle h2 {
display: block;
width: 100%;
text-align: center;
font-size: 18pt;
color: black;
font-weight: bold;
}
/* Mise en forme du titre de forum */
.title_forum {
width: 490px;
text-align: right;
margin-bottom: 10px;
}
/* Permet d'avoir la bonne couleur de lien */
.title_forum .forumlink a, .title_forum .forumlink a:link, .title_forum .forumlink a:visited {
color: black;
font-size: 14pt;
font-weight: bold;
letter-spacing: 1px;
transition: all ease 1s;
}
/* Titre du forum au passage de la souris */
.title_forum .forumlink a:hover {
color: #51A8AC;
letter-spacing: 3px;
text-decoration: none !important;
transition: all ease 1s;
}
/* Crée la petite barre bleue qui suit le titre du forum */
.title_forum:after {
content:"";
display: inline-block;
height: 1px;
width: 100px;
margin: 5px;
/* Couleur de la barre */
background-color: #51A8AC;
/* Permet de lui donner une ombre */
box-shadow: 2px 2px 1px black;
}
/* Permet d'avoirle carré blanc qui entoure la description */
.contour_description {
overflow: visible;
width: 455px;
height: 140px;
padding: 20px;
/* Couleur puis bordure de l'élément */
background-color: #FFFFFF;
border: 1px solid #51A8AC;
}
/* Permet de placer la description correctement. */
.decription {
width: 340px;
height: 100px;
display: inline-block;
vertical-align: top;
}
/* Mise en forme de la description */
.decription p {
width: 340px;
height: 50px;
padding: 5px;
overflow: auto;
/* Couleur du texte */
color: grey;
margin: 0px;
/* Police du texte puis sa taille */
font-family: 'Times New Roman';
font-size: 10pt;
text-align: justify;
/* Permet de donner une ombre au texte */
text-shadow: 1px 1px 1px grey;
}
/* Mise en forme du titre dans la description */
.decription h3 {
font-weight:normal;
margin: 0px;
margin-left: 20px;
text-shadow: 1px 1px 1px grey;
}
/* Permet de placer l'image de catégorie à droite. */
.decription img {
position: absolute;
right: 60px;
bottom: 47px;
}
/* Place les liens de sous-forums */
.forum_liens {
position: absolute;
bottom: 90px;
left: 160px;
width: 376px;
height: 16px;
padding: 2px;
/* Couleur de fond des liens */
background-color: #51A8AC;
overflow: auto;
}
/* Permet de donner leur couleur aux liens de sous-forums */
.forum_liens a, .forum_liens a:link, .forum_liens a:visited, .forum_liens a:hover {
color: white;
text-decoration: none !important;
}
/* Positionnement du dernier message & du nombre de sujets et messages */
.position_last_mess {
position: absolute;
bottom: 20px;
left: 300px;
text-align: center;
/* Détermine la taille du nombre de sujets et messages */
font-size: 9pt;
}
/* Mise en forme du dernier message */
.dernier_mess {
width: 175px;
height: 40px;
padding: 5px;
/* Couleur de fond */
background-color: #C6C8DC;
/* Alignement du texte */
text-align: right;
/* Permet de donner au texte une ombre. */
text-shadow: 1px 1px 1px grey;
}
/*********** FIN CATÉS ***********/
Modifications supplémentaires
Dans ce code, beaucoup de choses sont modulables. Si vous voulez des exemples, de choses à changer ou SAVOIR comment modifier certaines choses, n'hésitez pas à poster à la suite ou dans les problèmes. Voici une liste d'idée qui pourraient être expliquées plus tard si besoin est:
- Modifier les titres de catégories: placement et mise en forme (CSS à modifier: .secondarytitle et .secondarytitle h2)
- Mettre des coins arrondis: (CSS à modifier: .contour_description, .forum_liens et .dernier_mess)
- Mettre des effets sur les divers titres et liens (Titre de sous.forum, lien vers les sous-forums et titre de la description): (CSS à modifier: .title_forum .forumlink a, .title_forum .forumlink a:link, .title_forum .forumlink a:visited et .title_forum .forumlink a:hover, .forum_liens a, .forum_liens a:link, .forum_liens a:visited et séparer .forum_liens a:hover et .decription h3 et .decription h3:hover (ou .decription:hover h3))
- Modifier ce qui suit le titre de catégorie (retirer la barre): (CSS à modifier: .title_forum:after)
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.
