Une apparence de catégorie personnalisé

[Edonna]

Bonjour, aujourd'hui j'aimerais savoir comment changer l'apparence des catégorie =)

Je souhaiterais avoir quelque chose dans ce genre la :

Spoiler:

Pensez vous que cela soit possible ?
Et savoir dans quel template il faut modifier ? index_box ?

Quelqu'un pourrait-il me donner un coup de mains pour modifier tout ça ?
Ou si par hasard pour connaissez un logiciel qui permet de coder et de voir la mise en page, ca pourrais m'aidé aussi =)

Sur ce, merci de votre aide ^^

[tupac]

Bonsoir

Pour commencer vous pouvez faire les changements de votre catégorie a l'aide de ce sujet.

[Edonna]

Oui j'ai déjà testé ce sujet mais ce n'est pas ce que je recherche ^^

J'ai testé la mise en page comme ça, mais je n'aime pas car il reste les cadres de catégorie, tout bien carré et tout...

Mais merci quand même !

[tupac]

J'avais bien compris votre demande c'est pour ça que dans un premier temps je vous ai demandé de faire ce changement et nous aurions par la suite fait les changements pour les cadres et tous le reste.
Donc en faisant les changements du sujet que je vous ai donné vous auriez du déjà avoir cela.

[Edonna]

Ah \0/ Merci beaucoup alors x3
Je vais allé installer ca de ce pas alors ^^

Edit : voila qui est fait ^^

[tupac]

Bonjour

Nous allons maintenant placer le titre du forum a la place de ( X messages dans X sujets ) donc pour se faire repérer la partie suivante

Code:

                <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}>

et placez-la a la place de ceci qui se trouve entre les balise DIV

Code:

{catrow.forumrow.POSTS} messages, dans {catrow.forumrow.TOPICS} sujets.

Maintenant plaçons ( X messages dans X sujets ) a l'intérieur de la description donc repérer ceci.

Code:

        <div class="forum-description">
                    <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        </div>

et remplacez-le par ça

Code:

        <div class="forum-description">

      <div align="right">{catrow.forumrow.POSTS} messages, dans {catrow.forumrow.TOPICS} sujets.</div>

        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        </div>

[Edonna]

Bonjour et merci =)

Voila qui est fait ^^

[tupac]

Ok maintenant pour entourer le dernier message posté et le speudo repérer ceci,toujours dans le même template

Code:

       
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>


et remplacez-le par ça

Code:

        <div class="stats">
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
        </div>

puis le css pour l'abillage

Code:

.stats{
  border: 3px solid #fff;
  -moz-border-radius-: 14px;
  -webkit-border-radius: 14px;
  border-radius: 14px;
  padding: 4px;
}

Nous allons aussi retirer les lignes qui séparent dernier message posté de la description et celles qu'il y a entre l'image nouveau message et la description,donc repérer la partie suivante et mettre 0 a cellspacing et dites-moi se qui reste a faire.

Code:

        <!-- BEGIN catrow -->
        <!-- BEGIN tablehead -->

        <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

[Edonna]

Oki merci =D

Alors il reste a faire :
- mettre un cadre aux images,
- euh, lorsqu'il n'y a pas de sous forum, ca me fait une case vide, et lorsqu'il y en a trop, tout ne rentre pas dedans, donc faire que la case s'adapte automatiquement a se qu'il y a dedans. Voila une capture d'écran pour mieu m'expliquer ^^ encadré en rouge. Comme tu peux le constater, ca fait bizarre ^^"

Spoiler:

- et pour finir, en haut, les nom des catégorie et Derniers Messages, remplacer par le cadre qui face toute la longueur avec seulement le nom de la catégorie.

Voila ^w^ merci bien !

Petite édit :
Pour le cadre des images, j'ai remplacer ça :

Code:

<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

Par ça :

Code:

<div class="stats"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>

Cela te semble bon ? En tout cas ça semble marcher =0

[tupac]

Pour encadrer l'image repérer cette partie.

Code:

             
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
           

et remplacez-la par celle-la

Code:

              <div class="img_new">
                            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
              </div>

puis dans votre feuille de style placer ceci

Code:

.img_new{
  border: 3px solid #fff;
  -moz-border-radius-: 14px;
  -webkit-border-radius: 14px;
  border-radius: 14px;
  padding: 4px;
}

ensuite pour le titre catégorie repérer ceci

Code:

      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>

et remplacez le par ça

Code:

<center><div width="100%" class="titre_cat">{catrow.tablehead.L_FORUM}</div></center><br>

et pour ce qui est du cadre des sous forums il vous suffi de régler le WIDTH et le HEIGHT dans le css dans cette class ( forum-sousforum )

[Edonna]

Merci !

Pour les cadres des sous-forum j'aimerais que ce soit automatique en faite =/ en fonction de ce qu'il y a dedans !

Sinon j'ai un nouveau brobléme (voir image). En faite maintenant qu'on a changé les titres de catégories, la colonne de droite s'est toute réduite ! Donc comment fait-on pour réduire les espaces entre l'image et la description et entre la description et les statistiques ? Je pense que rien que ca pourrais améliorer la colonne de droite non ?

Spoiler:

[tupac]

Oups pardon j'ai oublié de vous donner ceci

Donc repérer cette partie

Code:

        <div class="stats">
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
        </div>

et remplacez-la par celle-la

Code:

        <div class="stats"><div style="width:150px;"></div>
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
        </div>

[Edonna]

xp Impeccable ! Merci !

Par contre, tu n'as donc pas de solution pour les sous-forums ? =/

Et sinon, pourrais tu me dire se qu'il faut mettre dans les codes SCC pour modifier la taille d'un texte stp ? x)
Par exemple, dans mon CSS, pour les catégories, j'ai créé ça :

Code:

.categories{
border: 2px solid #404040;
-moz-border-radius-: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
padding: 4px;
background-image: url('http://img809.imageshack.us/img809/4017/barrehorizontal.png');
text-align:center;
}

Mais comment faire pour agrandir le texte ? ^^

[tupac]

et bien non se sera a vous régler la largeur des sous forums tout ce que vous pouvez faire c'est rajouter le code suivant le cadre s'agrandira automatiquement lorsque vous rajouterez un sous forum.

Code:

overflow: hidden;

... et pour réduire la marge ( stats-description ) et ( image-new-description ) il vous faut élargir la description dans le css donc ceci ( width: 90% )
et pour la taille du texte rajouter ce code

Code:

 font-size: 14px;

[Edonna]

Bon ok pour les sous-forums ! C'est juste dommage qu'on ne puisse pas le retirer lorsqu'il n'y en a pas ><

Par contre pour le texte ca ne fonctionne pas... =/

[tupac]

Effectivement le code ne fonctionne pas dans le css il faut le placer directement dans la description comme ceci

Code:

<font face="Comic Sans MS" size="2" color="#000">
texte texte texte
</font>

Je vous ai donné un code ou vous pouvez grossir le texte mais aussi changer la police d'écriture et la couleur.

EDIT: je viens de me rendre compte quand plaçant le font size dans la description le ( X message dans X sujets ) allait doubler de volume donc pour éviter ça toujours dans le même template remplacer cette partie

Code:

<div align="right">{catrow.forumrow.POSTS} messages, dans {catrow.forumrow.TOPICS} sujets.</div>

par celle-ci

Code:

<div align="right" style="font-size: 15px; color: #000;">{catrow.forumrow.POSTS} messages, dans {catrow.forumrow.TOPICS} sujets.</div>

vous pouvez y regler la couleur et la taille du texte

[Edonna]

Euh... Bon, j'y arrive pas >< Mais bon, c'est pas bein grave, merci quand même beaucoup pour ton aide =D Je trouve que ça a beaucoup de gueule comme ça =D

Par contre j'aurais une dernière petite question, concernant les couleurs de mon forum.
Je viens tout juste d'installer mon nouveau thème
Mais j'ai un petit problème de couleur, voyez par vous même :

http://edonnas-war.forumsactifs.com/

Vous voyez tout se blanc au niveau des catégories ? j'aimerais savoir comment le mettre en transparent ? =3 Si tu sais bien entendu ^^
Car je trouve que ca gâche un peu le thème avec ce blanc, car ca coupe les images ^^"

Voila, merci en tout cas, je pense que ce sera ma dernière question >///<

[tupac]

Donc pour le fond blanc ça se passe bien sur dans le panneau d'administration puis affichage => couleur => les couleurs de fond => table Rangée Couleur 1 - table Rangée Couleur 2 et surbrillance - table Rangée Couleur 3 et séparations.
Vous pouvez aussi retirer la couleur intérieure du cadre du forum.

Euh... Bon, j'y arrive pas >< Mais bon, c'est pas bein grave, merci quand même beaucoup pour ton aide =D Je trouve que ça a beaucoup de gueule comme ça =D

Qu'est ce que vous n'arrivez pas a faire?

[Edonna]

A agrandir le texte des catégories ><

Mais la je viens de me faire un coup de chaud ! je venais d'installer mon nouveau thème, tout enregistré et tout bien, et la, l'ancien thème qui ressurgie, les templates modifiés tout moche, l'ancien thème et le nouveau se sont mélangé... Le gros coup de pression >< j'ai cru que j'avais fait tout se travail pour rien ! J'espère que c'était ForumActif qui bidouillait à faire des mise a jours ><

Sinon pour les couleurs, il faut que je retire quoi dans les templates ? Car dans les couleurs, j'ai déjà retiré enfaite dans les petites cases. Il n'y a plus rien, et pourtant c'est toujours blanc ><

[tupac]

Avez-vous pensé a bien retirer toutes ces couleurs.

1 => Couleur du fond de page
2 => Couleur intérieure du cadre du forum
3 => Table Rangée Couleur 1
4 => Table Rangée Couleur 2 et surbrillance
5 => Table Rangée Couleur 3 et séparations
ou peut-être avez-vous dans votre feuille de style css un ( bodyline ) ou ( forumline ) avec un fond blanc

et pour la taille du texte dans la description normalement ça aurait du fonctionner avez-vous pensé a augmenter le SIZE=2 ?

Code:

        <font face="Comic Sans MS" size="2" color="#000">
        ~ ETAPE 1 ~
Avant toutes choses, venez ici prendre connaissance de tout se qu'il faut savoir pour rp sur ce forum et signer le règlement dans un premier temps.
        </font>

[Edonna]

Alors pour le fond blanc, oui j'ai tout retiré, et je n'ai rien dans les CSS du genre bodyline ou forumline =/

Pour la taille du texte, c'est ca (voir image) que j'ai envi de changer, et non la taille des descriptions x)

Spoiler:

[tupac]

D'accord je pensais que c'était pour le texte des descriptions et bien pour le titre tu places le même code autour du non de ta catégorie comme ceci.

Code:

<font face="Comic Sans MS" size="5" color="#000000"> Catégorie 1 </font>

J'ai trouvé ceci dans ton css tu va me faire le plaisir de le supprimer stp

Code:

.forumline{background-color:#fff;border:2px #fff solid}

[Edonna]

Ca fonctionne pour les catégories merci ^^

Pour le CSS parcontre je pense que c'est la fatigue, je ne le trouve vraiment pas u_u

Code:

.body {background-repeat: no-repeat;}
.ban1 { background-image: url('http://i41.servimg.com/u/f41/16/31/84/13/5aeypj10.jpg'); }
.ban2 { background-image: url('http://i41.servimg.com/u/f41/16/31/84/13/29mkun10.jpg'); }
.ban3 { background-image: url('http://i41.servimg.com/u/f41/16/31/84/13/2uz70210.jpg'); }
.categories{
border: 2px solid #404040;
-moz-border-radius-: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
padding: 4px;
background-image: url('http://img809.imageshack.us/img809/4017/barrehorizontal.png');
font-size: 14px;
text-align:center;
}
.img_new{
border: 2px solid #404040;
-moz-border-radius-: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
padding: 4px;
}
.stats{
border: 2px solid #404040;
-moz-border-radius-: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
padding: 4px;
background-color: #E6E6E6;
}
/*--- Cette partie correspond à la description du forum ---*/
.forum-description {
      margin: auto;
      padding: 10px;
      color: #000000;
      width: 80%;
      border: 2px solid #404040;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      font-size: 12px;
background-color: #E6E6E6;
}
 
/*--- Cette partie correspond à l'onglet "X messages dans X sujets" ---*/
.forum-stats {
      -moz-border-radius-topleft: 20px;
      -moz-border-radius-topright: 20px;
      -webkit-border-top-right-radius: 20px;
      -webkit-border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border-top-left-radius: 20px;
      border-bottom: 0 none !important;
      border-left: 2px solid #404040;
      border-right: 2px solid #404040;
      border-top: 2px solid #404040;
      color: #000000;
      font-size: 11px;
      font-style: italic;
      height: 14px;
      left: 60px;
      padding: 3px;
      position: relative;
      text-align: center;
      width: 200px;
overflow: hidden;
background-image: url('http://img809.imageshack.us/img809/4017/barrehorizontal.png');
}
 
/*--- Cette partie correspond à l'affichage des sous-forums ---*/
.forum-sousforum {
      color: #000000;
      border: 2px solid #404040;
      border-top: 0px !important;
      -moz-border-radius-bottomleft: 14px;
      -moz-border-radius-bottomright: 14px;
      -webkit-border-bottom-right-radius: 14px;
      -webkit-border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
      border-bottom-left-radius: 14px;
      margin: auto;
      padding: 4px;
      color: #000000;
      width: 70%;
      text-align: center;
      height: 30px;
      font-size: 11px;
background-image: url('http://img809.imageshack.us/img809/4017/barrehorizontal.png');
}
.center{
  text-align: center;
  }
.justify{
  text-align: justify;
  }
.contour{
border: 1px solid #404040;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
margin: 5px;
padding: 5px;
text-align: center;
text-decoration: none !important;
border-bottom: 3px solid #404040;
border-top: 1px solid #404040;
background-image: url('http://img705.imageshack.us/img705/165/16909487.png');
}
input,textarea, select {
color : #000000;
font: normal 10px comic sans ms;
border-color : #FFFFFF;
border-radius: 9px 9px;
-webkit-border-radius: 9px;
}
a.pa {
text-decoration: none !important;
color: #404040;
}
a.pa:hover {
color: white;
letter-spacing: 2px;
}
.background {
background-image: url('http://i41.servimg.com/u/f41/16/31/84/13/n310.png');
width: 750px;
}
.paback {
background-image: url('http://i41.servimg.com/u/f41/16/31/84/13/n310.png');
border: 2px solid #404040;
margin: 10px;
box-shadow: 0px 0px 5px #404040;
border-radius: 10px;
padding: 5px;
}
.bienvenue {
font-size: 25px;
color: white;
text-align: center;
}
.histoire {
text-align: justify;
}
/** INFOBULLE **/
div.infobulle {
position: relative;
float: left;
}
div.infobulle span {
display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}
div.infobulle:hover span {
display: inline;
position: absolute;
top: 0px;
left: 0px;
background-image: url('http://i41.servimg.com/u/f41/16/31/84/13/n310.png');
color: #000000;
padding: 2px;
border: 1px solid #404040;;
text-align: center;
}
/** INFOBULLE **/
.title {
font-size: 15px;
text-transform: uppercase;
color: white;
text-align: center;
border-bottom: 2px solid #404040;
border-top: 1px solid white;
border-radius: 10px;
}
.credits {
text-align: center;
}
body {
background-repeat: no-repeat;
background-position: top; center;
}



/*---FICHE DE ROUTE BY NIGHT NEKO---*/

.titre_route {
font-family:Courier New;
font-size:29px;
 font-weight:bold;
text-transform:uppercase;
text-align:center;
display: block;
color:MediumSlateBlue;
}

.texte_route {
font-size: 12px;
color:MediumSlateBlue;
}

.droite {
text-align: justify;
padding: 8px;
padding-top: 15px;
 background-color: Lavender;
border: 10px solid MediumSlateBlue;
border-radius: 10px 10px 10px 10px;
 width: 300px;
overflow: auto;
color:MediumSlateBlue;
height:330px;
}

.droite_img {
border: 10px solid MediumSlateBlue;
border-radius: 10px 70px 10px 10px;
}

.gauche {
text-align: justify;
padding: 8px;
padding-top: 15px;
 background-color: Lavender;
border: 10px solid MediumSlateBlue;
border-radius: 10px 10px 10px 70px;
 width: 300px;
overflow: auto;
color:MediumSlateBlue;
height:330px;
}

.gauche_img {
border: 10px solid MediumSlateBlue;
border-radius: 10px 10px 10px 70px;
}

.texte_link {
height:305px;
text-align: justify;
padding: 8px;
background-color: Lavender;
border: 10px solid MediumSlateBlue;
border-radius: 10px 10px 10px 10px;
width: 200px;
overflow: auto;
color:MediumSlateBlue;
}

.img_link {
border: 10px solid MediumSlateBlue;
width: 190px;
height: 310px;
border-radius: 70px 70px 70px 70px;
margin-left:10px;
}

Je retournerais chercher demain lorsque j'aurais les yeux reposés XD
En tout cas merci beaucoup de toutes tes aides =)
Bonne soirée !

[tupac]

Le ( forumline ) se trouve dans le css de base en bas de page de ta feuille de style css désactive le pour voir si le fond blanc disparait mais je te conseille de le réactiver sinon tu n'auras plus accès aux couleurs.

[msfeettoes]

bonjour
et ou mettre tous ces codes.. et sous quel version du forum
merci.

[Edonna]

J'ai testé le CSS désactivé, le pb c'est que ca modifie pas mal de chose et ça fait tout moche donc non ca fonctionne pas ><

[msfeettoes]

ok merci..

[Edonna]

J'ai trouvé pour le fond des catégories en transparent =D

Merci beaucoup en tout cas >w< Pour toutes tes aides !
Merci merci !

Edit : Encore une petite question avec ce fichu forum transparent ><

Maintenant que j'ai le font de mes catégories en transparent, ce sont mes sujets aussi qui sont transparent T-T Comment remédier à tout ça ? Moi je souhaiterais que le fond de mes sujets soit avec cette couleur #E6E6E6