Commande
Elément à coder : Forum en double-colonnes
Adresse du forum : http://test-prisonrpg.bbfr.net/ (adresse provisoire, en attente de trouver un nom au forum >x<)
Description du résultat voulu : Bien le bonjour! Ça fait longtemps que je ne suis pas venue vous voir. En fait, normalement je code mon forum moi-même, mais je suis vraiment trop rouillée (j'ai pas codé depuis plus d'un an) et du coup, je me rappelle plus comment faire tout ça comme je veux >__< ! Je me bats avec des codes que je maîtrisais l'an dernier, alors je suis désespérée/découragée sérieux XD
Je vous montre un schéma de ce que je voudrais pour une catégorie.
Couleurs ou tons :
Fond boîte principal : #d9d9d9
Cadre boîte principal : #cecccc
Cadre de la description : #472928 (1px solid)
Images :
Image par défaut pour description de catégorie : https://2img.net/r/ihimg/a/img4/9281/catimage.png
Image nouveau message : https://2img.net/r/ihimizer/img402/6084/iconnewmess.png
Image fond titre de catégorie : https://2img.net/r/ihimg/a/img43/5995/fondcat.png
Autres précisions :
Je vous laisse mon codage CSS pour la partie des catégories. Mon template est, en ce moment, celui par défaut donné par Sparrow-style dans son tuto (celui-ci : click! )
S'il manque des informations, n'hésitez surtout pas à me demander! Ça me fera plaisir de rajouter des précisions.
Je sais que le forum n'a pas l'air très avancé, mais je travailles dessus depuis hier seulement, et tout s'installe petit à petit. Je me concentre surtout sur le codage d'abord, et le contenu ensuite.
Un GRAND et ÉNORME merci à qui pourrait m'aider! <3
Code HTML dans les descriptions
Code CSS >
Template index_box (je fournis quand même) >
Elément à coder : Forum en double-colonnes
Adresse du forum : http://test-prisonrpg.bbfr.net/ (adresse provisoire, en attente de trouver un nom au forum >x<)
Description du résultat voulu : Bien le bonjour! Ça fait longtemps que je ne suis pas venue vous voir. En fait, normalement je code mon forum moi-même, mais je suis vraiment trop rouillée (j'ai pas codé depuis plus d'un an) et du coup, je me rappelle plus comment faire tout ça comme je veux >__< ! Je me bats avec des codes que je maîtrisais l'an dernier, alors je suis désespérée/découragée sérieux XD
Je vous montre un schéma de ce que je voudrais pour une catégorie.
- Spoiler:
Bon alors j'explique. C'est très simple. À la place des lignes/dotted sous le nom de la catégorie, je mettrais une image. Ensuite, pour chaque catégorie, voilà ce qui suit. La tache de sang, c'est l'icône du nouveau/vieux/verrouillé. Elle demeure en arrière-plan de préférence (en dessous du reste quoi). Le tableau à sa droite, en fait s'il est fait en 2 tableaux, ça ne me dérange pas. La partie à gauche, c'est la liste des sous-forums. Chaque sous-forum est sur une ligne propre, et ce serait vraiment bien si la case pouvait défiler lorsqu'il y a plusieurs sous-forums. À droite, bah c'est comme dit là XD PS : Pas obligé que la bordure soit visible, c'est juste pour définir à peu près l'espace nécessaire. Et en gros en dessous, on retrouve la description de la catégorie. J'aimerais que l'image défile vers le haut ou le bas, au choix (en ce moment, elle défile vers la droite, mais ça ferait plus concept que ça aille en vertical qu'en horizontal. Malheureusement, mes tests ne sont pas du tout concluants)
Donc en résumé.
- Icône statut des messages en haut à gauche (peut/doit dépasser)
- Deux "tableaux" en haut à droite; pour les sous-forums : doit pouvoir défiler; pour les stats:
- Description des catégories en bas. L'image défilerait vers le haut ou le bas
- Une image sous le titre de catégorie.
Tailles à prévoir (idéalement.)
Boîte principale de la catégorie : 460*190
Tableau pour les sous-forums + derniers messages : ~290*50
Description de catégorie cachée sous une image : 400*100
Icône nouveau/vieux/verrouillé : 135*85
Couleurs ou tons :
Fond boîte principal : #d9d9d9
Cadre boîte principal : #cecccc
Cadre de la description : #472928 (1px solid)
Images :
Image par défaut pour description de catégorie : https://2img.net/r/ihimg/a/img4/9281/catimage.png
Image nouveau message : https://2img.net/r/ihimizer/img402/6084/iconnewmess.png
Image fond titre de catégorie : https://2img.net/r/ihimg/a/img43/5995/fondcat.png
Autres précisions :
Je vous laisse mon codage CSS pour la partie des catégories. Mon template est, en ce moment, celui par défaut donné par Sparrow-style dans son tuto (celui-ci : click! )
S'il manque des informations, n'hésitez surtout pas à me demander! Ça me fera plaisir de rajouter des précisions.
Je sais que le forum n'a pas l'air très avancé, mais je travailles dessus depuis hier seulement, et tout s'installe petit à petit. Je me concentre surtout sur le codage d'abord, et le contenu ensuite.
Un GRAND et ÉNORME merci à qui pourrait m'aider! <3
Code HTML dans les descriptions
- Spoiler:
- Code:
<br /><div class="cate"><div class="cate_img"><img src="http://img4.imageshack.us/img4/9281/catimage.png" /></div><div class="cate_description">Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est.</div></div><div style="clear: both;"></div>
Code CSS >
- Spoiler:
- Code:
/* ------------------------------------------ MISE EN FORME CAT ET FORUM ------------------------------------------ */
.cate_titre
{
clear: both;
height: 100px;
margin-top: 50px;
}
.catetitre_bloc
{
position: relative;
z-index: 1;
display: block;
width: 90%;
height: 20px;
margin-left: auto;
margin-right : auto;
background-color: #a8a8a8;
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-htm-transform: rotate(5deg);
}
.catetitre_content
{
position: absolute;
z-index: 2;
display: block;
width: 950px;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
text-align: center;
padding: 2px;
border-bottom: 3px dotted #191817;
}
.catetitre
{
color: #454545;
font-family: arial;
font-size: 26px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 0px #000000;
}
.forum_bloc
{
width: 950px;
margin-left: auto;
margin-right: auto;
margin-top: -30px;
}
.forum
{
float: left;
width: 460px;
height: 250px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 50px;
}
a.forumlink
{
position: relative;
z-index: 2;
display: block;
width: 100%;
color: #454545;
text-align: center;
font-family: georgia;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 0px #000000;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
a.forumlink:hover
{
letter-spacing: 4px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.forum_contenu
{
position: relative;
z-index: 1;
width: 98%;
height: 90%;
padding: 4px;
margin-left: auto;
margin-right: auto;
margin-top: -8px;
background-color: #d9d9d9;
border: 1px solid #cecccc;
box-shadow: 0px 0px 5px #cecccc;
}
/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */
.cate
{
width: 400px;
height: 100px;
margin: auto;
overflow: hidden;
border: 1px solid #472928;
background-color: #ffffff;
}
.cate_img
{
position: relative;
z-index: 2;
width: 400px;
height: 100px;
margin-left: 0px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate_description
{
position: relative;
z-index: 1;
width: 395px;
height: 100px;
margin-top: -100px;
text-align: justify;
font-size: 11px;
color: #8c8c8c;
padding: 2px;
overflow: auto;
}
.icone_stats
{
width: 300px;
margin: auto;
margin-top: -30px;
}
.stats_lastpost
{
display: block;
width: 120px;
height: 70px;
margin-left: 10px;
background-color: #dbdbdb;
border: 1px dotted #b5b5b5;
padding: 5px;
text-align: center;
}
.stats
{
display: block;
margin-bottom: 5px;
border-bottom: 1px dotted #b5b5b5;
padding-bottom: 5px;
font-size: 10px;
color: #8f8f8f;
}
.lastpost
{
display: block;
font-size: 11px;
}
/* Sous-forums */
/*.sforum
{
position: relative;
z-index: 3;
display: block;
height: 0;
background: #191817;
color: #b5b5b5;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.ouverture_sousforum
{
position: relative;
z-index: 3;
display: block;
float: right;
width: 120px;
margin-right: 20px;
background: #191817;
color: #b5b5b5;
font-size: 11px;
text-align: center;
padding: 4px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.sous_forum:hover .sforum
{
height: 50px;
background: #191817;
color: #b5b5b5;
padding: 4px;
overflow: auto;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.sous_forum a
{
color: #b5b5b5 !important;
text-shadow: 1px 1px 0px #000000;
}
.sous_forum a:hover
{
color: #ffffff !important;
} */
Template index_box (je fournis quand même) >
- 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>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="cate_titre"><span class="catetitre_bloc"></span>
<span class="catetitre_content">{catrow.tablehead.L_FORUM}</span></div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="forum_bloc">
<div class="forum">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>
<div class="forum_contenu">
{catrow.forumrow.FORUM_DESC}<br />
<div class="icone_stats"><table><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" /></td>
<td><span class="stats_lastpost">
<span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
<span class="lastpost">{catrow.forumrow.LAST_POST}</span>
</span></td>
</tr></table></div>
</div>
<div class="sous_forum">
<span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
<span class="ouverture_sousforum">Voir les sous-forum</span>
</div>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
<!-- END tablefoot --><!-- END catrow -->
Dernière édition par Ravener le Jeu 16 Mai 2013 - 6:16, édité 1 fois
Je remonte le sujet, en espérant que quelqu'un puisse le voir et m'aider =)
