"Dernier message" texte en diagonal et repositionné

2 participants

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

Résolu "Dernier message" texte en diagonal et repositionné

Message par Brotherhood Dim 12 Aoû 2012 - 20:18

Bonsoir !

Alors voila, j'ai un soucis que je ne sais pas comment régler ! Voici mon forum test : http://brotherhood.forumactif.fr

Comme vous pouvez le voir, je me suis contentée de faire une image "test" pour la zone "Dernier message" dans les catégories.
Celle-ci en fait :
Spoiler:

Je l'ai mise ainsi pour que mon problème soit plus clair.
En fait, j'aimerais que le texte où s'affiche le titre du dernier sujet actualisé, la date du message et le nom du posteur, soit vers le bas de mon image et qu'il soit mis en diagonal afin de suivre les lignes de mon image.

Voici mon template index_box

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 --><center><div class="titrecat">{catrow.tablehead.L_FORUM}</div></center><DIV CLASS="fond_forumline">
 
  <table class="forumline" width="98%" border="0" cellspacing="1" cellpadding="0">
  <!-- 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="80%">
        <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>
          <img src="http://img11.hostingpics.net/pics/529147titre1.png">
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
 
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="98"><img src="{SPACER}" height="94" width="98" alt="." /></td>
      <!-- END inc -->
 
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="70%" 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}>
 
        <!--
  ******************************************************************
  ***** Personnalisation d'affichage des forums et sous-forums *****
  ******************************************************************
      Code proposé par Lostmindy sur CSSActif
      http://www.css-actif.com
  ******************************************************************
-->

<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
      <td valign="center" align="center">
        <div class="forumdesc">
            <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 -->
            </span>
        </div>
      </td>
      <td valign="center" align="center">
        <div class="listeforums">
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </div>
      </td>
  </tr>
</table>

<!--
  *************************************************
  ***** Fin des personnalisations d'affichage *****
  *************************************************
-->
      </td>
   
          <!-- BEGIN forum_link_no -->
 
      <td class="row3 over" align="center" valign="middle" height="50" width="20%">
                <span class="gensmall">{catrow.forumrow.LAST_POST} <br /><br /> <br /> <br /> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span>
           
        <span class="gensmall"><b>{catrow.forumrow.TOPICS}</b> sujets <b>&</b> <b>{catrow.forumrow.POSTS}</b> messages</span><br/><br/></td>
          <!-- END forum_link_no -->
   
  <!-- 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></div><center><img src="http://img15.hostingpics.net/pics/608103bascat2.jpg" alt="" /></center><!-- END tablefoot --><!-- END catrow -->

Je ne sais même pas si cela est possible mais je vous remercie d'avance.

Bonne soirée.


Dernière édition par Brotherhood le Dim 19 Aoû 2012 - 14:57, édité 1 fois
Brotherhood

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par skysky Dim 12 Aoû 2012 - 20:36

Bonsoir,

Il faut ajouter un peu de css ...

Commence par reperer ceci :
Code:
<span class="gensmall">{catrow.forumrow.LAST_POST} <br /><br /> <br /> <br /> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span>
           
        <span class="gensmall"><b>{catrow.forumrow.TOPICS}</b> sujets <b>&</b> <b>{catrow.forumrow.POSTS}</b> messages</span><
Tu mets une div avec classe css de ce genre :
Code:
.incline {
-webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  transform: rotate(15eg);
}
ce n'est le CSS qui ne fait que l'inclinaison.

Il faudra changer les valeurs pour adapter a ton image

Bon courage
skysky

skysky
***

Masculin
Messages : 179
Inscrit(e) le : 04/08/2012

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

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par Brotherhood Dim 12 Aoû 2012 - 23:43

Bonsoir ! Merci de ta réponse

Pour la div classe à rajouter, je lui donne bien comme nom "incline" mais est-ce que j'entoure de cette classe toute la portion de template que tu m'as citée ? J'ai essayé ça et d'autres combinaisons... Mais dans tous les cas, rien ne fonctionne
Brotherhood

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par skysky Lun 13 Aoû 2012 - 7:53

Bonjour,

Alors je viens de tester rapidement sur mon forum et ca fonctionne.

Tu remplace :
Code:
<span class="gensmall"><b>{catrow.forumrow.TOPICS}</b> sujets <b>&</b> <b>{catrow.forumrow.POSTS}</b> messages</span>
par :
Code:
<div class="incline"><span class="gensmall"><b>{catrow.forumrow.TOPICS}</b> sujets <b>&</b> <b>{catrow.forumrow.POSTS}</b> messages</span></div>

Dans ton css tu mets :
Code:
.incline {
  -webkit-transform: rotate(XXdeg);
  -moz-transform: rotate(XXdeg);
  -ms-transform: rotate(XXdeg);
  -o-transform: rotate(XXdeg);
  transform: rotate(XXeg);
  height:XXpx !important;
  width:XXpx !important;
  background-color:#transp;
}
Tu remplace les XX par tes valeurs.
Pour l'incliner comme tu veux je tenterais -15 pour voir et adapter ensuite.
Le -15 tu le mets dans la partie css "transform"

Il y a beaucoup de transform car c'est pour la plupart des navigateur (google chrome, firefox, ...)

Si cela ne marche marche pas peux tu me donner ton image de fond ou le texte doit apparaitre que je rectifie au besoin ?

Bonne journée
skysky

skysky
***

Masculin
Messages : 179
Inscrit(e) le : 04/08/2012

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

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par Brotherhood Lun 13 Aoû 2012 - 15:40

Alors en fait, ça marche bien, mais c'est pas cette partie là que je veux bouger mais le, par exemple, "Votre 1er sujet...
Mar 3 Juil 2012 - 17:18
Nathane" avec le raccourci pour voir le dernier message
Brotherhood

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par skysky Lun 13 Aoû 2012 - 16:02

Donc c'est la partie "1er sujet" que tu veux mettre en diagonale ?
et 1 messages dans 1 sujets ?
skysky

skysky
***

Masculin
Messages : 179
Inscrit(e) le : 04/08/2012

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

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par Brotherhood Lun 13 Aoû 2012 - 19:50

Oui, c'est cette partie là que je veux mettre en diagonale et mettre en bas de l'image !

Pour la partie X messages et X sujets en fait je pensais le mettre pas du tout là ! Sous la description ou sous l'image que j'ai faite justement pour la partie Dernier message, mais je sais pas encore.
Brotherhood

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par skysky Lun 13 Aoû 2012 - 20:20

Ok ben j'ai jamais fait mais ca doit pas etre impossible a faire.

on va tenter le coup.

Donc supprime la partie X messages dans X sujets. C'est cette partie :
Code:
<span class="gensmall"><b>{catrow.forumrow.TOPICS}</b> sujets <b>&</b> <b>{catrow.forumrow.POSTS}</b> messages</span>

Le div class="incline" je te propose de le mettre ou tu le souhaite.
Tu cherche :
Code:
<span class="gensmall">{catrow.forumrow.LAST_POST} <br /><br /> <br /> <br /> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span>

et tu mets ceci a la place :
Code:
<div class="incline"><span class="gensmall">{catrow.forumrow.LAST_POST} <br /><br /> <br /> <br /> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span></div>

Se pose alors le soucis de l'image de fond. je suppose qu'elle change en fonction si un nouveau message ou pas ou s'il est vérrouiller ?

skysky

skysky
***

Masculin
Messages : 179
Inscrit(e) le : 04/08/2012

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

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par Brotherhood Lun 13 Aoû 2012 - 23:45

C'est parfait, ça marche ! Par contre, est-ce qu'il y a moyen de réduire le texte (lorsque j'utilise "font-size" dans le CSS ça ne marche pas) et s'il existe un moyen de "limiter" le texte (par exemple, que le texte soit coupé si la ligne dépasse une certaine grandeur, plutôt que de retourner à la ligne) ?

Pour l'image de fond, oui ça changera selon si c'est un nouveau message ou ancien ou verrouillé. Mais là c'est pas encore le cas vu que j'ai fait juste une image test ^^

Brotherhood

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par skysky Mar 14 Aoû 2012 - 7:33

Bonjour,

Merci pour ces informations.
Je vais donc continuer a tester de mon coté et je reviens dans la journée ou ce soir avec la solution. (Je travaille la journée donc pas très présent)

Je me baserais sur l'image fournie pour les tests

Pour le font-size ... essaye ceci :
Code:
font-size:10px !important;
remplace le 10 par ce que tu veux

Bonne journée
skysky

skysky
***

Masculin
Messages : 179
Inscrit(e) le : 04/08/2012

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

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par Brotherhood Mar 14 Aoû 2012 - 14:11

Bonjour,

Ca ne marche toujours pas, comme hier.

Pas de problème pour le temps de réponse, je comprends Smile
Brotherhood

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par skysky Mar 14 Aoû 2012 - 18:33

Bonsoir,

Bon je n'arrive pas a mettre l'image de fond ni réduire la taille de l'écriture.
Je vais continuer mes tests et te tiens au courant
skysky

skysky
***

Masculin
Messages : 179
Inscrit(e) le : 04/08/2012

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

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par Brotherhood Mer 15 Aoû 2012 - 23:31

Merci beaucoup ! J'attendrai
Brotherhood

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par Brotherhood Sam 18 Aoû 2012 - 14:19

Du nouveau ?
Brotherhood

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par skysky Sam 18 Aoû 2012 - 14:20

Bonjour,

Désolé je n'arrive a rien.
Je passe la main

j'espère qu'une autre personne trouvera la solution

Bonne journée
skysky

skysky
***

Masculin
Messages : 179
Inscrit(e) le : 04/08/2012

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

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par Brotherhood Dim 19 Aoû 2012 - 14:56

On m'a donné la solution ailleurs !

Il faut fusionner la classe "div class="incline"" avec la "span class="gensmall"" en faisant une balise "div class="gensmall incline"" et ça marche pour la personnalisation du texte !

Merci de ton aide, tu as quand même résolu le principal problème !

Problème résolu !
Brotherhood

Brotherhood
**

Féminin
Messages : 83
Inscrit(e) le : 21/05/2008

http://brotherhood.forumsactifs.com
Brotherhood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: "Dernier message" texte en diagonal et repositionné

Message par skysky Dim 19 Aoû 2012 - 14:59

Super pour toi et merci pour l'info
skysky

skysky
***

Masculin
Messages : 179
Inscrit(e) le : 04/08/2012

http://skysky.forumactif.com/
skysky 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