Sujets similaires

Bonjour à vous,

J'écris ce premier topic car j'ai un soucis de décalage à cause de mes catégories qui ont été graphées.
En effet, j'ai réalisé mes catégories moi-même sur Photoshop, les ai installées comme il fallait mais malheureusement cela déforme mon forum comme vous pourrez le voir sur l'image jointe.

Auriez-vous une idée de solution à me proposer pour régler ce problème ?
Comme par exemple passer le nom de la catégorie au dessus de l'encadré plutôt qu'au même niveau que "Derniers Messages" ?

Image :

Spoiler:

Un très très grand merci à vous ! ♥

Bonjour Elf of Nature Smile

Pourrais tu rajouter le lien vers ton forum s'il te plait ? Smile

+ ajouter le template modifié & le CSS ^^ ?
Pourrais tu me détailler davantage ce qui est déformé aussi s'il te plait Very Happy

?

Salut Nihil,

Merci pour ton aide.

Alors le lien de mon forum (qui est actuellement en construction du coup je ne sais pas si tu y auras accès mais je peux éventuellement voir pour le débloquer le temps que tu passes voir) : http://showyourart.forumpro.com

Alors le template modifié, c'est le Index_Box pour les derniers messages au bout à droite Wink

Mais même sans cette modification, ça déforme le forum :-/

Et donc ce qui est déformé, c'est que quand je mets les images de catégories (qui ont été faites graphiquement et que tu vois sur le screen) mes icônes se décalent, mes forums, enfin ça fait un bazar sur mon forum :-/ Alors que quand les titres sont (comme actuellement) juste écrit, il n'y a aucune déformation.

J'en conclus donc que la longueur des images de catégories ne convient pas et ce parce qu'elles sont coincées dans un petit cadre (sur la même droite que le titre "Derniers Messages") et j'aurais bien aimé que ce ne soit pas le cas :-/

Merci beaucoup Nihil.

Template modifié :

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
   <td valign="bottom">
      
      <span class="gensmall">{LAST_VISIT_DATE}<br />
      {CURRENT_TIME}<br />
      </span>
      
      <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
   </td>
   <td class="gensmall" align="right" valign="bottom">
      
      <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
      <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
      
      <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
   </td>
</tr>
</table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
   <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>
</tr>


<tr>
   
   <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <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>


<tr>
   
   <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
   
   <td 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}" />
   </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><br />
         </span>
      </h{catrow.forumrow.LEVEL}>
      <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
      <span class="gensmall">
         
         {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
         
         {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
      </span>
   </td>
   <td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}<br/>{catrow.forumrow.POSTS} messages <br /> {catrow.forumrow.TOPICS} sujets </span>
   </td>
</tr>


<tr>
   
   <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table><img src="{SPACER}" alt="" height="5" width="1" />

Mon css :

Code:: /***** FORUM ET CATÉGORIES *****/

.bodyline{
margin-top:-10px;
margin-bottom:-10px;
}
.forumline
{
max-width: 1050px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
margin-bottom: 20px;
background-repeat: repeat;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomright: 6px;
border-radius: 6px 20px 20px 6px;
-moz-box-shadow: 1px 1px 2px #002f00;
box-shadow: 1px 1px 2px #002f00;
padding: 5px;
margin-bottom: 10px;
}

/***** LIENS *****/

a.forumlink
{
display: block;
padding: 4px;
border-bottom: 2px solid #716b08;
}
a.forumlink:hover
{
text-decoration: none !important;
font-style: italic;
}
a:link
{
text-decoration: none !important;
}

/***** PRÉSENTATION DES MESSAGES *****/

.postbody {
padding: 15px;
text-align: justify;
}

/***** BAS DE PAGE ! FOOTER *****/

#page-footer
{
background-image: url(http://nsm08.casimages.com/img/2013/09/21//13092105400516259111572020.png); /* Image du bas */
background-repeat: no-repeat;
background-position: top center;
padding-top: 170px;
height: 100px;
margin-bottom: -18px;
}

#page-footer a
{
font-size: 10px;
text-decoration: none !important;
}

/* Diminution taile catégorie dans forums */

a.nav img
{
width: 0px;
}

/*** COULEURS EDITEUR MSG ***/

/*--- Bloc réponse rapide ---*/
.sceditor-container.ltr.sourceMode {
width:550px !important;
background-color: #061900 !important;
}
.sceditor-container.ltr.wysiwygMode {
width:550px !important;
background-color: #061900 !important;
}
/*--- Partie supérieur contenant les outils ---*/
div.sceditor-toolbar {
background-color: #061900 !important;
width: 540px !important;
}
/*--- Partie texte area : fond ---*/
.sceditor-container iframe, .sceditor-container textarea {
background-color: #061900 !important;
text-align:justify;
margin:0 !important;
line-height: 16px;
width: 540px !important;
color: #A6A83E !important;
font-size:11px !important;
}

/*** IMAGES CATEGORIES ! ***/

a.forumlink span, a.forumtitle span { display: none; }
a.forumlink img, a.forumtitle img { display: inline!important; }

a.cattitle span, .secondarytitle h2 span, .table-title h2 span, .maintitle h2 span, .page-title h2 span { display: none; }
a.cattitle img, .secondarytitle h2 img, .table-title h2 img, .maintitle h2 img, .page-title h2 img { display: inline!important; }

/*** Enlever les traits au dessus catégories ***/
.catHead { border: none !important;}
.catBottom { border: none !important;}
.thLeft { border: none !important;}
.thRight { border: none !important;}
.row3Right { border: none !important;}

Et le code que je mets dans le titre des catégories (dans la création de catégories) pour afficher l'image :

Code:: <span>Le Grand Grimoire</span><img style="displayne"src=" http://nsm08.casimages.com/img/2013/09/06//13090605333316259111528810.png" />

Voilà :-) Merci beaucoup beaucoup

Effectivement ton image https://nsm08.casimages.com/img/2013/09/06//13090605333316259111528810.png fait 900px de large, et du coup elle déforme le forum Smile

Tu peux choisir de diminuer sa largeur, puis centrer l'image (tu garderais la case "Derniers messages).
Sinon si tu veux enlever la case "Derniers messages", je te conseille ce tutoriel là de CSSActif : Fusionner les en-têtes des forums

Ha super ce tutoriel semble bien pour accorder les deux colonnes et peut-être me permettre de garder mes tailles, aussi je regarderai à assortir les mêmes tailles pour tous la prochaine fois :-)

Je vais essayer avec ce tuto et en retouchant quelques peu si nécessaire mes études et je te tiens informé ! :-)

En tout cas un grand merci à toi ! Smile

Me revoici après le test du tutoriel.
Vraiment génial ce tuto, mais il n'a malheureusement pas réglé l'entièreté de mon soucis :-/

Est-ce que tu penses que le soucis qu'il reste est à cause des longueurs de catégories ? :-/

Image :

Spoiler:

Et voici ce qu'il se passe quand je mets une seule image de catégorie :-/
ça déplace tout en dessous :-/

Avec catégorie en image :

Spoiler:

Sans catégorie en image :

Spoiler:

Citation :: Alors le lien de mon forum (qui est actuellement en construction du coup je ne sais pas si tu y auras accès mais je peux éventuellement voir pour le débloquer le temps que tu passes voir) : http://showyourart.forumpro.com

Le lien ne marche pas chez moi, mais pas grave ^^

Quelle est la largeur de base de ton forum ? Par ce ton image fait 900 pixels de large, donc forcément si la largeur du forum était plus petite, cela va causer un problème Razz

. Il faut que tu changes la taille de ton image pour que sa largeur ne déforme pas ton forum ^^.

Ha je dois vérifier cela. Je ne sais pas exactement. Je pense qu'elle était à 1050px ; mais je dois vérifier si j'ai bien cela partout ! ;-)

J'ai regardé et voilà : Apparemment c'était en 850, donc j'ai repassé en 1050. ça ne changeait rien mais ça éloignait les petits messages au dessus, donc j'ai repassé en 75%. Mais dans tous les cas ça ne change pas beaucoup de choses :-/
Et du coup ça ne change rien... :-/

Image :

Spoiler:

Tu as aussi accès au forum pour voir si tu veux Smile

(voir plus bas)

Sinon pour le lien du forum, excuse-moi, je m'étais trompée : http://showyourart.forumactif.pro/
Là ça ira :-) Mais bon j'ai remis les titres en texte du coup pour pas bloquer le tout :-/

* Au fait, est-ce que par hasard tu sais comment enlever ou modifier l'encadrement que j'ai autour de mes catégories/forums?

J'ai du mal m'exprimer, en fait ce que je voulais dire c'est :
- Il faut garder la largeur du forum telle qu'elle l'est définie dans ton PA. Si c'était 850, je te conseille de laisser 850 (si cela te convenait ^^).
- Il faut modifier l'image de titre en elle même. Comme sa largeur est de 900px, elle déforme forcément ^^. Il suffit de rogner sur la partie transparente sur les côtés pour faire une image moins large.

Si j'ai bien compris, sans les images le forum n'a aucun problème de déformation. Il suffit donc de limiter la taille de tes images pour régler le problème.

En effet, chacune de tes images à énormément de place transparente sur les côtés, tu n'as pas besoin de faire cela. Il suffit de recadrer l'image pour qu'elle fasse juste le titre, juste la partie nécessaire, pas besoin du transparent sur les côtés ^^. En plus l'image sera plus légère donc ton forum chargera un tout petit peu plus vite Very Happy

.

Citation :: * Au fait, est-ce que par hasard tu sais comment enlever ou modifier l'encadrement que j'ai autour de mes catégories/forums?

Oui, dans ton CSS il faut chercher ce que tu as défini pour ".forumline" Smile

Code:: .forumline{
/* ton code CSS */
}

Ha ! Je pense avoir compris ce que tu veux dire désormais :-)
Mais au départ j'avais 850 dans la PA dans configuration ; et j'avais 1050 dans mon css en fait :-) ♥
Je vais laisser 850 je crois que ça m'allait bien et que c'était mon choix de départ et voir pour les images.

Je te tiens au courant si ça change quelque chose, je n'avais même pas vu que j'avais autant de transparent ! ;-) Merci de me l'avoir fait remarquer, j'espère que ça va s'améliorer :-D

*** Et bien ma foi ça fonctionne !!!! :-D Woaw ! ♥ Quelle perspicacité hihihi ! :-) Un grand merci pour ton aide ! :-D ♥

Pour le css voilà mon css :

Code:: /***** FORUM ET CATÉGORIES *****/

.bodyline{
margin-top:-10px;
margin-bottom:-10px;
}
.forumline
{
max-width: 1050px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
background-repeat: repeat;
-moz-border-radius-topright:30px;
-moz-border-radius-bottomleft: 30px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 0px;
border-radius: 0 30px 0 30px;
-moz-box-shadow: 1px 1px 2px #002f00;
box-shadow: 1px 1px 2px #002f00;
padding: 10px;
margin-bottom: 15px;
}

/***** LIENS *****/

a.forumlink
{
display: block;
padding: 4px;
border-bottom: 1px solid #716b08;
}
a.forumlink:hover
{
text-decoration: none !important;
font-style: italic;
}
a:link
{
text-decoration: none !important;
}

/***** PRÉSENTATION DES MESSAGES *****/

.postbody {
padding: 15px;
text-align: justify;
}

/***** BAS DE PAGE ! FOOTER *****/

#page-footer
{
background-image: url(http://nsm08.casimages.com/img/2013/09/21//13092105400516259111572020.png); /* Image du bas */
background-repeat: no-repeat;
background-position: top center;
padding-top: 170px;
height: 100px;
margin-bottom: -18px;
}

#page-footer a
{
font-size: 10px;
text-decoration: none !important;
}

/* Diminution taile catégorie dans forums */

a.nav img
{
width: 0px;
}

/*** COULEURS EDITEUR MSG ***/

/*--- Bloc réponse rapide ---*/
.sceditor-container.ltr.sourceMode {
width:550px !important;
background-color: #061900 !important;
}
.sceditor-container.ltr.wysiwygMode {
width:550px !important;
background-color: #061900 !important;
}
/*--- Partie supérieur contenant les outils ---*/
div.sceditor-toolbar {
background-color: #061900 !important;
width: 540px !important;
}
/*--- Partie texte area : fond ---*/
.sceditor-container iframe, .sceditor-container textarea {
background-color: #061900 !important;
text-align:justify;
margin:0 !important;
line-height: 16px;
width: 540px !important;
color: #A6A83E !important;
font-size:11px !important;
}

/*** IMAGES CATEGORIES ! ***/

a.forumlink span, a.forumtitle span { display: none; }
a.forumlink img, a.forumtitle img { display: inline!important; }

a.cattitle span, .secondarytitle h2 span, .table-title h2 span, .maintitle h2 span, .page-title h2 span { display: none; }
a.cattitle img, .secondarytitle h2 img, .table-title h2 img, .maintitle h2 img, .page-title h2 img { display: inline!important; }

/*** Enlever les traits au dessus catégories dans forums ***/
.catHead { border: none !important;}
.catBottom { border: none !important;}
.thLeft { border: none !important;}
.thRight { border: none !important;}
.row3Right { border: none !important;}

/*** Colonnes derniers messages ***/
.statsforum {
width: 140px;
}

J'ai préféré te le mettre en entier comme j'ai plusieurs choses à propos des catégories ;-) ♥
En tout cas, merci si tu sais m'aider ! :)Le cadre plus clair autour de mes forums m'ennuie, j'espère qu'on peut l'enlever :-P Ou peut-être le remplacer ou quoi, dans le cas où on voudrait mettre une image en fond, je sais pas trop :-P
Et merci beaucoup pour ta rapidité aussi, c'est super ! *-*

Ton forum est mis en maintenance, je n'y ai donc plus accès.
J'ai mis ton CSS + ton template sur mon forum, mais le petit problème c'est que je n'ai pas les mêmes couleurs que toi sur mon forum test... Du coup le cadre "plus clair" ne me parle pas forcément, n'hésite pas à faire une screenshot, en ajoutant des annotations pour que je comprenne mieux ! Razz

Oups !
Je te libère de suite mon forum, j'ai pas pensé que tu aurais encore besoin d'y aller -_-
Merci beaucoup

Au fait, j'ai encore une petite question d'ordre semi-importante Smile

Est-ce que tu saurais comment insérer des petites icônes devant le nom des sous forums ? (Pour voir quand il y a un nouveau message dans cette catégorie là ou non)

Citation :: Au fait, j'ai encore une petite question d'ordre semi-importante Smile Est-ce que tu saurais comment insérer des petites icônes devant le nom des sous forums ? (Pour voir quand il y a un nouveau message dans cette catégorie là ou non)

Oui cela se règle dans le panneau d'admin Razz

PA > Affichage > Page d'accueil > Structure & Hiérarchie > Hiérarchie > Lien vers les niveaux inférieurs et là tu coches "Oui avec une image". Ensuite l'image se change dans la partie image du panneau d'admin ^^

Pour enlever donc la bordure plus claire (celle qui est vert très clair ?), il faut simplement spécifier dans le CSS pour .forumline que tu ne veux pas de bordure.

Code:: .forumline {
border: none; /* supprime la bordure */
}

Ooooh tu es géniale ! *-* ♥
Tu viens de répondre à toutes mes questions et je suis juste super contente ! *-* ♥ Je te remercie bien fort et si je peux faire quelque chose pour toi en retour ce sera avec plaisir ;-) ♥

Un grand merci à toi Nihil :-) Je reviendrais si j'ai besoin :-D ♥
Merci, merci, merci ! ♥

Est ce que tu pourras éditer le titre de ton message pour mettre le mention "Résolu" ^^ ?
N'hésites pas à repasser sur CSSActif si tu as une demande d'aide Very Happy

Oui je fais ça de suite :-)
Pas de soucis ! Merci beaucoup Nihil et au plaisir ! ♥

[Résolu] Problème avec les catégories.

[Résolu] Problème avec les catégories.

Sujets similaires

Sujets similaires

Partenaires Or