Mise en forme de la liste des sujets

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Mise en forme de la liste des sujets

Message par CathyCréation Sam 15 Juin 2013 - 6:29

Bonjour,
et oui encore moi, j'ai un soucis avec la mise en forme de mes sujets, 
et j'aurai besoin d'un tit coup de pouce pour que tout sois en place quand je mettrai mon nouveau design lundi sur mon forum.

Alors voici ce que j'obtient

https://i.servimg.com/u/f82/16/13/63/20/sans_t11.png

Et voila ce que j'aimerai obtenir avec les couleur modifiable

https://i.servimg.com/u/f82/16/13/63/20/sans_t13.png

Je vous mes mon code css 

Code:
/* ----------------------- MISE EN FORME DES LISTES DE SUJETS --------------------------*/

.bloc_sujets
{
  width: 800px;
  margin: auto;
  background: #;
  border: 2px solid #7B1405;
  box-shadow: 0px 0px 0px #868686;
  -o-box-shadow: 0px 0px px #868686;
  -moz-box-shadow: 0px 0px px #868686;
  -webkit-box-shadow: 0px 0px px #868686;
  -htm-box-shadow: 0px 0px px #868686;
  padding: 5px;
}
.sujets
{
  background: #e0d3c0 ;
  border: px dotted #7B1405;
  padding: px;
  box-shadow: 2px 2px 2px 2px #7b1405;
  -o-box-shadow: 2px 2px 2px 2px #7b1405;
  -moz-box-shadow: 2px 2px 2px 2px #7b1405;
  -webkit-box-shadow: 2px 2px 2px 2px #7b1405;
  -htm-box-shadow: 2px 2px 2px 2px #7b1405;
}
.topictitle
{
  font-variant: small-caps;
  font-size: 12px;
}
.sujets_auteur
{
  display: block;
  width: 200px;
  font-size: 11px;
 
}
.sujet_last
{
  display: block;
  width: 180px;
  height: 40px;
  background: #;
  border-left: 0px solid #9e9e9e;
  border-right: 0px solid #9e9e9e;
  padding-top: 10px;
  font-size: 11px;
 
}
.sujets_stats
{
  width: 800px;
  text-align: right;
  margin-bottom: 5px;
}
.sujets_stats_contenu
{
  font-size: 10px;
  color: #540A00;
}

/* ----------------------- FIN MISE EN FORME DES LISTES DE SUJETS --------------------------*/
 


Merci de votre aide


Dernière édition par CathyCréation le Lun 17 Juin 2013 - 3:04, édité 1 fois
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme de la liste des sujets

Message par CathyCréation Dim 16 Juin 2013 - 11:57

up
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme de la liste des sujets

Message par Dr. Sam Dim 16 Juin 2013 - 12:05

Bonjour,

Pourrais-je avoir votre template topics_list_box ?


Cordialement,
Smile
Dr. Sam

Dr. Sam
*****

Masculin
Messages : 894
Inscrit(e) le : 28/06/2012

http://www.fa-aide.com/
Dr. Sam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme de la liste des sujets

Message par CathyCréation Dim 16 Juin 2013 - 12:27

Merci Mr Doc'

voici mon tamplate

Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
  var all_checked = true;
  for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
        all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
  }
  document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
  for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
        document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
  }
}
</script>
<!-- END multi_selection -->

<div class="bloc_sujets">
      <!-- BEGIN multi_selection -->
      <span align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></span>
  <!-- END multi_selection -->
 
  <!-- BEGIN pagination -->
      <span align="right"><span class="gensmall">{PAGINATION}</span></span>
  <!-- END pagination -->
 
  <!-- END header_table --><!-- BEGIN header_row -->
<!-- END header_row -->
 
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
 
 
    <table class="sujets"><tr>
      <!-- BEGIN single_selection -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
      <!-- END single_selection -->
      <td><span class="icones_sujets"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></span></td>
      <!-- BEGIN icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
      <!-- END icon -->
                <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
        <div class="topictitle">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title">
              <a class="topictitle2" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
        </div>
        <!-- BEGIN switch_description -->
        <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
        </span>
        <!-- END switch_description -->
        <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
        <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
      </td>

      <td class="row3" align="center" valign="middle"><span class="sujets_auteur"><i>par {topics_list_box.row.TOPIC_AUTHOR}</i></span></td>
      <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap"><span class="sujet_last">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></td>
<!-- BEGIN multi_selection -->
      <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
  <!-- END multi_selection -->
  </tr></table>
  <div class="sujets_stats"><span class="sujets_stats_contenu">Ce sujet a été vu {topics_list_box.row.VIEWS} fois et a reçu {topics_list_box.row.REPLIES} réponse(s).</span></div>
  <!-- END topic --><!-- BEGIN no_topics -->
  <table><tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
          </tr></table>
  <!-- END no_topics --><!-- BEGIN bottom -->

  <br /><br />
<div class="pages"><span class="gensmall">{PAGINATION}</span>
  <span><a href="#top">{L_BACK_TO_TOP}</a> </span></div>
 
<!-- END bottom --><!-- BEGIN footer_table -->
</div><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme de la liste des sujets

Message par Dr. Sam Dim 16 Juin 2013 - 12:57

Bon Smile!

Alors voici ton nouveau template:
Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
  var all_checked = true;
  for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
        all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
  }
  document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
  for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
        document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
  }
}
</script>
<!-- END multi_selection -->

<div class="bloc_sujets">
      <!-- BEGIN multi_selection -->
      <span align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></span>
  <!-- END multi_selection -->
 
  <!-- BEGIN pagination -->
      <span align="right"><span class="gensmall">{PAGINATION}</span></span>
  <!-- END pagination -->
 
  <!-- END header_table --><!-- BEGIN header_row -->
<!-- END header_row -->
 
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
 
 
    <table class="sujets"><tr>
      <!-- BEGIN single_selection -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
      <!-- END single_selection -->
      <td><span class="icones_sujets"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></span></td>
      <!-- BEGIN icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20" style="background: #e0d3c0;">{topics_list_box.row.ICON}</td>
      <!-- END icon -->
                <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="400px" style="background: #e0d3c0; border-right: 2px dotted #B35A4F;">
        <div class="topictitle">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title">
              <a class="topictitle2" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a> <span class="sujets_auteur"><i>par {topics_list_box.row.TOPIC_AUTHOR}</i></span>
            </h2>
        </div>
        <!-- BEGIN switch_description -->
        <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
        </span>
        <!-- END switch_description -->
        <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
        <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
      </td>

      <td class="row3" align="center" valign="middle" style="background: #e0d3c0; border-right: 2px dotted #B35A4F;"><span class="sujets_stats_contenu">Ce sujet a été vu {topics_list_box.row.VIEWS} fois et a reçu {topics_list_box.row.REPLIES} réponse(s).</span></td>
      <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap" style="background: #e0d3c0; border-radius: 0 20px 20px 0;"><span class="sujet_last">Le dernier sujet à été posté<br />{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></td>
<!-- BEGIN multi_selection -->
      <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
  <!-- END multi_selection -->
  </tr></table>
  <div class="sujets_stats"></div>
  <!-- END topic --><!-- BEGIN no_topics -->
  <table><tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
          </tr></table>
  <!-- END no_topics --><!-- BEGIN bottom -->

  <br /><br />
<div class="pages"><span class="gensmall">{PAGINATION}</span>
  <span><a href="#top">{L_BACK_TO_TOP}</a> </span></div>
 
<!-- END bottom --><!-- BEGIN footer_table -->
</div><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Et voici ton nouveau code CSS:
Code:
/* ----------------------- MISE EN FORME DES LISTES DE SUJETS --------------------------*/
 
.bloc_sujets
{
  width: 800px;
  margin: auto;
  background: #;
  border: 2px solid #7B1405;
  box-shadow: 0px 0px 0px #868686;
  -o-box-shadow: 0px 0px px #868686;
  -moz-box-shadow: 0px 0px px #868686;
  -webkit-box-shadow: 0px 0px px #868686;
  -htm-box-shadow: 0px 0px px #868686;
  padding: 5px;
}
.sujets
{
  background: #e0d3c0;
  border: px dotted #7B1405;
  border-radius: 20px;
  padding: px;
  margin-top: 10px;
  box-shadow: 1px 1px 10px #7b1405;
  -o-box-shadow: 1px 1px 10px #7b1405;
  -moz-box-shadow: 1px 1px 10px #7b1405;
  -webkit-box-shadow: 1px 1px 10px #7b1405;
  -htm-box-shadow: 1px 1px 10px #7b1405;
}
.topictitle
{
  font-variant: small-caps;
  font-size: 12px;
}
.sujets_auteur
{
  display: block;
  width: 200px;
  font-size: 11px;
 
}
.sujet_last
{
  display: block;
  width: 180px;
  height: 40px;
  background: #;
  border-left: 0px solid #9e9e9e;
  border-right: 0px solid #9e9e9e;
  padding-top: 10px;
  font-size: 11px;
 
}
.sujets_stats
{
  width: 800px;
  text-align: right;
  margin-bottom: 5px;
}
.sujets_stats_contenu
{
  font-size: 10px;
  color: #540A00;
}
 
/* ----------------------- FIN MISE EN FORME DES LISTES DE SUJETS --------------------------*/
 


Cordialement,
Smile
Dr. Sam

Dr. Sam
*****

Masculin
Messages : 894
Inscrit(e) le : 28/06/2012

http://www.fa-aide.com/
Dr. Sam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme de la liste des sujets

Message par Matriochka Dim 16 Juin 2013 - 15:31

Bonjour vous deux,

Mr. Docteur je rappelle que le forum de support n’est pas censé délivrer des codes tout préparés. La moindre des choses, c’est d’expliquer les manœuvres aux membres afin qu’ils puissent comprendre comment les choses fonctionnent… Ça n’est pas les aider que de leur mâcher le travail.

À l’avenir, si tu veux aider, merci d’y faire attention.

Ce message n’attend aucune réponse,

Bonne journée.
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme de la liste des sujets

Message par CathyCréation Dim 16 Juin 2013 - 17:41

Merci beaucoup doc',
juste une chose je vais ou pour agrandir  la liste de message entre les deux ligne pointillée, je voudrais que la premiere soit plus loin que l'autre pour que le texte sois que sur deux ligne

http://passioncathy.forumactif.com/f3-essai-5
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme de la liste des sujets

Message par Dr. Sam Lun 17 Juin 2013 - 0:16

Alors il faut rapetisser l'espace pour le titre.

Soit ce code:
Code:
<td class="row1" onmouseover="this.className=&quot;row2&quot;" onmouseout="this.className=&quot;row1&quot;" width="400px" style="background: #e0d3c0; border-right: 2px dotted #B35A4F;">

Un fois trouvé, tu regarde le code pour trouver celui-ci:
Code:
width="400px"

Tu rapetisse le 400px par 300px par exemple Wink


Cordialement,
Smile
Dr. Sam

Dr. Sam
*****

Masculin
Messages : 894
Inscrit(e) le : 28/06/2012

http://www.fa-aide.com/
Dr. Sam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme de la liste des sujets

Message par CathyCréation Lun 17 Juin 2013 - 3:04

c'est parfait merci beaucoup
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum