Problème avec la mise en forme de mes sujets

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

Résolu Problème avec la mise en forme de mes sujets

Message par Nerinee le Mer 25 Nov 2015 - 16:12

Bonsoir ! Smile Tout d'abord merci à ceux qui m'aideront à réglé mes petits soucis.

Alors, voilà sur Utopia j'ai trouvé un code pour mettre en forme la mise en page des Sujets.

Mais l'ennuie c'est que j'ai un problème avec les titres, qui sont soit tout petit soit très gros ... enfin j'espère pouvoir les rendre un peu plus jolie mais je n'arrive les codes de semble pas fonctionné .
J'aimerai aussi supprimer la barre noir sur le côté ...

Spoiler:
http://i68.servimg.com/u/f68/14/12/32/93/aide10.png

Voici mes codes :

CSS :
Spoiler:
Code:
 


/* MISE EN FORME DES LISTES DE SUJETS */

.bloc_sujets
{
  width: 950px;
  margin: auto;
  background: #dfdfdf;
 
  a.topictitle {
   font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
   font-size: 1.2em;
   font-weight: bold;
   color: #898989;
   text-decoration: none;
}
 
}
.sujets
{
  background: #ececec;
 
}
.topictitle
{
  font-variant: small-caps;
  font-size: 5px;
  .l1 { text-decoration:none; }
}
.sujets_auteur
{
  display: block;
  width: 200px;
  font-size: 11px;
}
.sujet_last
{
  display: block;
  width: 180px;
  height: 20px;
  background: #f4f4f4;

  font-size: 11px;
}
.sujets_stats
{
  width: 900px;
  text-align: right;
}
.sujets_stats_contenu
{
  font-size: 10px;
  color: #a4a4a4;
}

Template :
Spoiler:
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="forumline">
      <!-- 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="80"><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>&nbsp;</span></div>
 
<!-- END bottom --><!-- BEGIN footer_table -->
</div><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->


Dernière édition par Nerinee le Jeu 26 Nov 2015 - 0:06, édité 1 fois

Nerinee
Nouveau membre

Messages : 8
Inscrit(e) le : 25/11/2015

http://larondedessentiments.forumactif.fr/
Nerinee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la mise en forum de mes sujets

Message par Feuilla' le Mer 25 Nov 2015 - 16:47

Bonjour,
dans votre Feuille de style ligne 12, vous avez ceci :
Code:
  a.topictitle {
  font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  color: #898989;
  text-decoration: none;
}
Sur la ligne
Code:
  font-size: 1.2em;
il faut changer le "1.2" pour changer la taille du texte. Choisissez une taille qui vous convient et validez. Wink
Puis ligne 21, ceci :
Code:
.sujets
{
  background: #ececec;
 
}
rajoutez des lignes pour la largeur et la hauteur, comme ceci :
Code:
.sujets
{
  background: #ececec;
  width:XXpx
  height:YYpx
}
Les "XX" sont à remplacer par un nombre pour la largeur du tableau des sujets, les "YY" par la hauteur.
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

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

Résolu Re: Problème avec la mise en forme de mes sujets

Message par Nerinee le Mer 25 Nov 2015 - 16:54

Merci beaucoup de m'avoir répondu ^^
Mais, ça n'a pas marcher même en changeant la taille, le texte ne prend pas forme ^^

Je viens juste de voir que c'était un conflit avec le css que j'ai mis pour les catégories, en enlevant le css des catégories le texte est devenue normale.

Spoiler:
Code:
  /* --------------------------------- CATEGORIES --------------------------------- */


    /* SOUS-FORUM CACHES */

    .sf {
      width: 100px;
      height: 170px;
      overflow: hidden;
      position: relative;
      top: 0em;
      background-color: #D5D2D2;
    }

    .sf_img {
      position: relative;
      z-index: 2;
      width: 100px;
      height: 170px;
      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;
    }

    .sf:hover .sf_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;
    }
     
  .sf_description {
      position: relative;
      z-index: 1;
      width: 100px;
      height: 170px;
      margin-top: -180px;
      font-size: 11px;
      color: #8c8c8c;
      padding: 15px;
      overflow: auto;
    }

    .sf_description a{
      color: #005677;
    }

    .sf_description a:hover {
      color: #007EAE;
      text-decoration: none !important;
    }

    /*** FONDS GENERAUX ***/

    /* Fond titre catégorie */
    .cate_titre {
      width: 600px;
      margin: auto;
      padding: 5px;
      background-color: #007BAA;
      box-shadow: 2px 2px 15px black;
      -moz-box-shadow: 2px 2px 15px black;
      -webkit-box-shadow: 2px 2px 15px black;
    }

    /* Mise en forme nom de catégorie */
    h2 {
      font-size: 30px;
      font-family: 'Oregano', cursive;
      color: #003E55;
      text-align: center;
    }

    /* Fond du forum */
    .categorie {
      background-color: #B7B3B3;
      width: 700px;
      height: 200px;
      padding: 15px;
    }


    /*** MISE EN FORME DES FORUM ***/

    /* Mise en forme du texte des titres de forum */
    .forumlink {
      position: relative;
      left: 2em;
      top: 0.6em;
      color: white !important;
      font-family: 'Allura', cursive;
      font-size: 36px !important;
      font-weight: none !important;
      z-index: 1;
    }

    .forumlink:hover {
      color: #002F40 !important;
      text-decoration: none !important;
    }

    .forumlink a {
      font-size: 16px;
      width: 500px;
    }

    /* Mise en forme de la description */
    .description {
      width: 350px;
      height: 100px;
      overflow: auto;
      font-size: 11px;
      text-align: justify;
      background-color: #ffffff;
      color: #007BAA;
      border-top: 5px solid #007BAA;
      padding: 15px;
    }

    /*** DERNIERS MESSAGES ***/
    .derniers_messages {
      text-align: center;
      font-size: 11px;
    }

    .derniers_messages a {
      color: #007BAA !important;
    }

        fin
 
 
 
/* MISE EN FORME DES LISTES DE SUJETS */
 
.bloc_sujets
{
  width: 950px;
  margin: auto;
  background: #dfdfdf;
 

 
}
.sujets
{
  background: #ececec;
 
}
  a.topictitle {
  font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
  font-size: 2px;
  font-weight: bold;
  color: #898989;
  text-decoration: none;
}

.sujets_auteur
{
  display: block;
  width: 200px;
  font-size: 11px;
      font-family "Helvetica"
 
}
.sujet_last
{
  display: block;
  width: 180px;
  height: 20px;
  background: #f4f4f4;
 
  font-size: 11px;
}
.sujets_stats
{
  width: 900px;
  text-align: right;
}
.sujets_stats_contenu
{
  font-size: 10px;
  color: #a4a4a4;
}


Nerinee
Nouveau membre

Messages : 8
Inscrit(e) le : 25/11/2015

http://larondedessentiments.forumactif.fr/
Nerinee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la mise en forme de mes sujets

Message par Feuilla' le Mer 25 Nov 2015 - 18:13

Re,
c'est étrange j'ai peut-être mal cherché mais je vois pas les codes sur le forum. Neutral
Qu'entendez-vous par "le texte ne prend pas forme" ou "les rendre un peu plus jolie " ? J'entrendrais par là par exemple mettre le texte en italique, en gras, avec une police différente... ? Par exemple pour mettre les titres en italique, ceci :
Code:
.topictitle {font-style:italic}
Donc police d'écriture, gras, souligné, en majuscules ou en majuscules au survol, rajouter des lignes au-dessus ou en dessous des titres des sujets, ...
Avec quoi voudirez-vous faire prendre forme à votre liste de sujet ? Smile

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

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

Résolu Re: Problème avec la mise en forme de mes sujets

Message par Nerinee le Mer 25 Nov 2015 - 18:21

Hé bien, à cause du code des catégories les titres des sujets, ne prennent pas forme. C'est à dire que je peux lui mettre tout les codes que je veux il restera comme sur le screen en haut et donc c'est pas beau ...
Je crois que je vais aller commander un Codage ><
Sinon, je veux seulement faire des bandes avec le titre après l'auteur, le dernier message par ...
Et ensuite, le texte je veux juste qu'il est une bonne taille une belle typographie enfin un minimum.

http://larondedessentiments.forumactif.fr/f1-guide-de-sweet-amoris voilà, j'ai essayé de mettre le code que vous m'avez donné
D'ailleurs, le code à rajouté à enlever la couleur de mes bandes ><

Nerinee
Nouveau membre

Messages : 8
Inscrit(e) le : 25/11/2015

http://larondedessentiments.forumactif.fr/
Nerinee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la mise en forme de mes sujets

Message par Feuilla' le Mer 25 Nov 2015 - 18:38

Re,
dans ce cas-là tentez de rajouter un morceau pour rajouter de l'importance à votre partie de CSS, afin que les codes de catégories ne soient pas plus "forts" comme ceci :
Code:
.topictitle {exemple:exemple !important}
rajouter le "!important" pour que le code prenne la priorité sur celles des catégories.
Du coup pour la taille vous n'aurez plus qu'à prendre les code précédemment donnés. Wink

Pour le bandeau, je ne suis pas sûre d'avoir compris où, comment ? Confused
Si c'est rajouter un cadre comme je le vois dans la colonne du dernier message, tentez ceci :
Code:
td.row3 {border:3px solid #FFFFFF}

Code:
td.row3 {background-color:#FFFFFF}
Bonne soirée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

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

Résolu Re: Problème avec la mise en forme de mes sujets

Message par Nerinee le Mer 25 Nov 2015 - 18:44



ça ne fonctionne toujours pas :/

Nerinee
Nouveau membre

Messages : 8
Inscrit(e) le : 25/11/2015

http://larondedessentiments.forumactif.fr/
Nerinee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la mise en forme de mes sujets

Message par R-max le Mer 25 Nov 2015 - 21:24

bonsoir Nerinee

tenter ce code ci >>
Code:
a.topictitle2 {
    color: black; /*couleur du titre*/
    font-size: 10px; /*taille du titre*/
    font-family: fantasy; /*forme du texte*/
    font-weight: 700; /*texte en gras/
    text-decoration:none; /*enleve le soulignement du titre */
}
}

pour le bord noir >
Code:
td.catRight, td.row3Right, th.thRight {
    border-width: 0px;
}

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec la mise en forme de mes sujets

Message par Caezd le Mer 25 Nov 2015 - 21:46

Bonjour Nerinee.

Si je comprends bien, tu as récupéré ce code tel quel sur Utopia ? Si c'est le cas, tu devrais leur signaler que les sélecteurs CSS ne peuvent pas être "regroupés" comme pour le SASS (par exemple).

Code:
/* MISE EN FORME DES LISTES DE SUJETS */
.bloc_sujets {
  width: 950px;
  margin: auto;
  background: #dfdfdf;
}

.bloc_sujets a.topictitle {
  font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  color: #898989;
  text-decoration: none;
}

.sujets {
  background: #ececec;
}

.topictitle {
  font-variant: small-caps;
  font-size: 5px;
}

.topictitle .l1 {
  text-decoration: none;
}

.sujets_auteur {
  display: block;
  width: 200px;
  font-size: 11px;
}

.sujet_last {
  display: block;
  width: 180px;
  height: 20px;
  background: #f4f4f4;
  font-size: 11px;
}

.sujets_stats {
  width: 900px;
  text-align: right;
}

.sujets_stats_contenu {
  font-size: 10px;
  color: #a4a4a4;
}

Voici le CSS que tu as fourni une fois corrigé. Ça devrait résoudre certains problèmes, notamment pour le titre de tes sujets.
Sur une base plus saine qui fonctionne tu devrais être en mesure d'effectuer les modifications dont tu as besoin.

Caezd
Nouveau membre

Messages : 18
Inscrit(e) le : 03/08/2014

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

Résolu Re: Problème avec la mise en forme de mes sujets

Message par Nerinee le Mer 25 Nov 2015 - 22:10

Merci à tous ça fonctionne !! Wink
Mais j'aurais deux petits questions encore, si possible !

Nerinee
Nouveau membre

Messages : 8
Inscrit(e) le : 25/11/2015

http://larondedessentiments.forumactif.fr/
Nerinee a été remercié(e) par l'auteur de ce sujet.

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


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