Présentation général des forums

[Lunathiel]

Bonjour bonjour... me revoila de retour...

Après une grosse analyse de mon forum il s'est avéré que le graphisme de mon forum était "Moyen"
C'est donc pourquoi j'ai décidé de revoir entièrement l'esthétique de mon forum.
Niveau graphisme je pense pourvoir y arriver mais j'ai besoin d'un petit coup de main pour pouvoir le mettre en place.

Pour commencer j'aimerais modifier l'apparence de mon forum SUR LA PAGE D ACCUEIL seulement

J'aimerais que les 3 colonnes de mon forum ne fasse plus qu'une comme ceci:


[Le I représente l'image "nouveau message" "pas de "nouveau message"

Je suis déjà arrivé a ce résultat que vous pouvez voir sur mon forum test ici => http://thoawin-test.forumgratuit.be/

Mais le soucis avec cette technique c'est que toutes les séparations de mon forum partout (en plus de la page d'accueil) on disparue elles aussi.

Je voudrais donc arriver a supprimer les traits de séparations des colonnes sur la page d'accueil (catégories) uniquement mais pas ailleurs pour garder cet aspect (voir image ci dessous) pour les forums


Ensuite

j'aimerais rendre translucide les cellules DE LA PAGE D ACCUEIL UNIQUEMENT encore une fois pour laisser apparaitre deux images.
Une en haut et une en bas comme ceci



Pour avoir ce résultat final


Tout en ne gardant la transparence que sur la page d'accueil

j'espère que vous pourrez m'aider.

J'ai modifié mes templates et je pense qu'il ne s'agit pas que de css pour en arriver là...

Je vous en serré énormément reconnaissant pour l'aide que vous m'apporterez pour cette demande. Un grand merci

[Lunathiel]

le petit up du jour^^

Merci beaucoup

[Lunathiel]

Bonjour... j'ai déjà commencer a regardé de mon côté déjà depuis un moment mais via le css je n'arrive pas a dissocié le fond de la page d'accueil du fond du reste du forum... un petit coup de main s'il vous plait

[Lunathiel]

Un petit coup de main s'il vous plait?

[Anzu]

Bonjour,

Ce que vous demandez n'est pas possible. Etant donné que l'index box touche à "tout" et pas qu'à l'index.
Donc si vous voulez que l'index soit transparent, le contenu des catégories le sera aussi.
Etc, pareil pour tout ^^"

Cordialement.

[Lunathiel]

Ok je comprends... alors comment puis je faire ceci et qu'il le soit aussi pour le contenu des catégories?

[Anzu]

Vous pouvez récapituler ce que vous aimeriez faire ? (que ce soit un peu plus clair )

[Scoubifitz]

bonjour,

si je comprends bien , vous voulez enlever les bordures de cellules , mais juste sur la page d'accueil et la page de catégorie ?
c'est faisable par un identifiant unique ...

[Lunathiel]

Pour récapituler en final, j'aimerais faire apparaitre une image en haut de mes catégories et une seconde en bas (le centre sera bleu et donc le fond actuel)

laissons tomber pour les bordures

J'aimerais mettre donc une image fixée en haut et une en bas en fond pour mes catégories

[Scoubifitz]

bonsoir,

c'est un peu plus dur que prévu , puisqu'il faut afficher une image de fond dans
la 1ere catégorie et rien dans les suivantes ...

puis afficher une image de fond dans la table des catégories , en bas de page ...
ce qui donnera l'impression que l'image est dans la dernière catégorie ...

les bordures sont toujours encore absentes ...

défi réussi ?

[Lunathiel]

Ohoooo je n'ai pas pensé à ce système... je vais tester dés demain

Edit: Le problème c'est que l'image du haut s'affiche uniquement dans la catégorie et pas derrière la colone "dernier message" et derrière l'image de "pas de nouveau message"
Elle se place juste dans la colonne centrale =/

[Lunathiel]

Un petit coup de main s'il vous plait

[Scoubifitz]

bonsoir,

mon astuce consiste à mettre l'image du haut en fond d'image (background-image)
dans la première cellule (td) ...

le souci est que l'image est affichée dans toutes les cellules de cette ligne ...

il faut donc faire en sorte qu'il n'y ait plus qu'une seule cellule ,
avec plein de "div" pour afficher le contenu de la catégorie ...

et pour un supplément de cellule sous la première , on n'affiche pas d'image ...

parce que l'image du bas sera en fond d'image pour la "table" ...
et fixée en bas de table (bottom) ...

et on ne travaille qu'avec l' " id " pour le CSS ...

je prépare un 'tite explication ...

[Lunathiel]

Merci pour l'explication parce que la je suis complétement perdue

[Scoubifitz]

je pense que vous avez déjà dû visiter mon forum test ?

http://privateroom.forumperso.com/

pour les "div" , rien de méchant ...

* une 1ere à gauche (float:left), pour les "news , no news"

news no news

* une 2eme à droite (float:right) pour "sujet, message"

news no news

sujet message

* le titre de la caté

news no news

le titre

sujet message

* une 3eme , qui englobe les 2 précédentes , à gauche (float:left) avec une largeur fixe (width:500)

news no news

le titre

sujet message

* une 4 eme à droite (float:right), pour "derniers messages"

news no news le titre sujet message

derniers messages

* ... et le tout dans la cellule (td, /td)...

news no news le titre sujet message

derniers messages

[Scoubifitz]

bonsoir,

la suite , d'après votre Template ( pensez à le sauvegarder avant d'essayer ) ...

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><table width="100%" id="category_table" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
<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}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<div style="float:left;width:500px;"><div class="nouvel1"><div class="{catrow.forumrow.inc.INC_CLASS}" width="50"><img src="{SPACER}" height="0" width="50" alt="." /></div><div class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div></div>
<div class="mess"><span class="gensmall">{L_TOPICS} : {catrow.forumrow.TOPICS}</span><br>
<span class="gensmall">{L_POSTS} : {catrow.forumrow.POSTS}</span></div>
<div><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}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span></div>
</div>
<!-- BEGIN forum_link_no -->
<div class="dermess">
<span class="gensmall">{L_LASTPOST}<br>{catrow.forumrow.LAST_POST}</span></div>
</td>
<!-- END forum_link_no -->
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

et le code CSS qui l'accompagne ( dites moi s'il y a un souci ) ...

Code:

.forumline{
/* Cadre Catégories */
 width:800px;}

.mess {
background-color:#b79427;
width: 120px;
padding:5px;
position:relative;
float:right;
top:5px;
text-align:right;
padding-right:20px;
border: 1px solid #a52a2a;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
border-radius:15px;
}
.dermess {
background-color:#b79427;
width: 200px;
padding:5px;
position:relative;
float:right;
top:5px;
text-align:center;
padding-right:20px;
border: 1px solid #a52a2a;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
border-radius:15px;
}
.nouvel1 {
background-color:#b79427;
width: 65px;
position:relative;
float:left;
top:5px;
margin-right:10px;
border: 1px solid #a52a2a;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
border-radius:15px;
}
#category_table {border-spacing:0px;
background-image:url('http://i64.servimg.com/u/f64/12/14/82/30/bascat10.jpg');
background-repeat:no-repeat;
background-position:bottom;
}
#category_table tr+tr td {
height:150px;
background-image:url('http://i64.servimg.com/u/f64/12/14/82/30/hautca10.jpg');
background-repeat:no-repeat;
}
#category_table tr+tr+tr td {
background-image:url('http://2img.net/i/fa/empty.gif');background-color:transparent;
background-repeat:no-repeat;
}

[Scoubifitz]

bonjour,

les essais sont-ils concluants ?

[Lunathiel]

Ooula... C'est un peux le bazar^^



je ne comprends pas trop comment modifié ça =/

déjà, sujet et message on peux supprimé^^ et "dernier message" aussi je n'ai gardé que la date et le dernier auteur

ensuite ma 1er image fait 150px*150, on peux donc modifié la 1er partie. Jusque la ok... mais le gros soucis c'est que j'ai modifié mon forumline

/*---------------coin arrondis du forum----------------- */
.forumline{
background-color: #2E77AA;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-top:5px solid #36587D;
border-bottom:5px solid #36587D;
border-left:8px solid #36587D;
border-right:8px solid #36587D;
background-image: url('https://i.servimg.com/u/f64/16/24/80/66/fond_d16.png');
background-repeat: no-repeat;
background-position:bottom center;

}


toute seule je suis arrivée à ça =>


Comment fait ton pour isoler la 1er catégorie?

[Scoubifitz]

bonjour,

désolé pour le retard ...

remplacer votre template par celui-ci :(pensez à sauvegarder le votre)

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 width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="400" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
</tr></table>
<table class="forumline" id="category_table" width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
<td colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" height="0"></td>
<td nowrap="nowrap" width="150"><div style="width:150px;"></div></td>
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
<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}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle"><div style="width:150px;">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<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}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<!-- BEGIN forum_link_no -->

<td class="row3 over" align="center" valign="middle" width="150"height="150"><div class="cadrederniermessage">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
</td>
<!-- END forum_link_no -->
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

dans votre CSS , remplacer :

Code:

#category_table {
border-spacing:0px;
}

par ceci :

Code:

#category_table {
border-spacing:0px;
background-color:#2E77AA;
background-image:url('http://i64.servimg.com/u/f64/16/24/80/66/fond_d16.png');
background-repeat:no-repeat;
background-position:bottom left;
}
#category_table tr+tr {
height:150px;
background-image:url('http://i64.servimg.com/u/f64/12/14/82/30/hautca10.jpg');
background-repeat:no-repeat;
}
#category_table tr+tr+tr {
background-image:url('http://2img.net/i/fa/empty.gif');background-color:transparent;
background-repeat:no-repeat;
}

[Lunathiel]

héhéééééééééééééé!!!!

ça a l'air de fonctionner parfaitement!!!
Je vais faire le teste en modifiant l'image du haut étant donné qu'elle n'est pas de la même taille que celle du fond.

J'aurais cependant une petite question.
Lorsqu'il n'y a qu'une seule catégorie, les deux images se superposent. Est-il possible de faire en sorte que ce soit l'image du bas qui prime sur l'image du haut dans le cas où il n'y a qu'une seule catégorie?

Si ce n'est pas possible ce n'est pas bien important mais si c'est envisageable j'aimerais le mettre en place

Autrement tout est parfait, je peaufine et si tout va bien après votre réponse je pourrais clôturer !!!

[Scoubifitz]

bonjour,

il vous reste surement quelques liens à enlever dans le template ,
que vous aviez déjà enlevé précédemment ...

j'étais tellement content de trouver une solution toute simple que
je n'ai pas ôté tous les liens
(Voir les nouveaux messages depuis votre dernière visite
-Voir ses messages - Voir les messages sans réponses ...)

pour votre question , malheureusement l'image de fond de la table est
placée sous l'image de fond de la première catégorie ...

et puisqu'il faut afficher une catégorie ...

pensez à faire une image du haut assez large pour toutes les résolutions d'écran ,
puisque votre forum a gardé une largeur variable (en %) ...

en 1440x900



en 1024x768



autre précision , concernant les descriptions de catégories sous forme de tableaux ,

la 1ère ligne (tr) sera normale ,
la 2e ligne (tr) de ce tableau prendra le fond d'image de la catégorie ,
la 3e ligne (tr) sera normale ...

[Lunathiel]

J'ai effacé les liens inutiles (merci du 1er regard je ne les avait même pas vu ces vilains liens =P)

J'ai verrouillé la taille de mon forum en pixel, ça me simplifiera grandement la vie ^^

et pour le tableaux, je pense (de mémoire) que la plupart de mes descriptions sont en un tableau a une ligne et 3 cases. Je pense donc que ça ne pausera pas de problème =D

Un immmmmmense merci pour ce beau travail que tu as fait la!! Je te suis énormément reconnaissant !!!

[Scoubifitz]

bonne suite à ton projet ...

résolu ?

[Lunathiel]

Résolu^^ Merci beaucoup