Mise en forme de la partie MP - Comment mettre l'icône de sujet à droite ?

2 participants

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

Résolu Mise en forme de la partie MP - Comment mettre l'icône de sujet à droite ?

Message par mdlettrage Lun 14 Mar 2016 - 19:26

Coucou, un problème chasse l'autre quand on veut être pro ...

Je viens de tester la messagerie du futur forum et j'ai remarqué que l'icône de sujet était en plein milieu de tout au lieu d'être à droite comme sur le reste du forum.

Mise en forme de la partie MP - Comment mettre l'icône de sujet à droite ? Prob-m10

Alors, j'aimerais soit =

- que cet icône "important" se trouve à fond à droite
- qu'il ne soit pas possible de mettre une icône de sujet dans les MP tout en les gardant dans le reste

En clair, c'est cette ligne qui qui qui ...

Code:
<div style="position:absolute; width:24px; height:20px; padding-top:20px; padding-left:24px;">{listrow.PRIVMSG_ICON}</div>

mais, dès que j'y touche, les liens ne sont plus actifs sinon, celle-ci, donnait un bon résultat

Code:
<div style="position:absolute; width:130px; height:40px; padding-top:5px 50px; padding-left:70%;">{listrow.PRIVMSG_ICON}</div>

Merci d'avance pour votre aide (et si je trouve, je vous donne la solution pour aider les membres qui auraient le même problème). Au pire, je vire la ligne et plus d'icône parasite ... mais cela ne fait pas pro.

Bonne soirée
mdlettrage

mdlettrage
***

Masculin
Messages : 168
Inscrit(e) le : 19/01/2016

http://www.csap-liege.forumactif.be
mdlettrage a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme de la partie MP - Comment mettre l'icône de sujet à droite ?

Message par mdlettrage Mar 15 Mar 2016 - 21:42

up
mdlettrage

mdlettrage
***

Masculin
Messages : 168
Inscrit(e) le : 19/01/2016

http://www.csap-liege.forumactif.be
mdlettrage a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme de la partie MP - Comment mettre l'icône de sujet à droite ?

Message par Miettes Mer 16 Mar 2016 - 16:17

Coucou Smile

mais, dès que j'y touche, les liens ne sont plus actifs sinon, celle-ci, donnait un bon résultat
C'est normal ^^ Le padding = du remplissage. Ça signifie en gros que tu as du "vide" à gauche de ton image. Et comme ton image et sur une couche "au dessus" du reste, et bien ça bloque le lien.

L'astuce :
> mettre l'élement parent de cette div en position "relative" (ça sera notre élement de référence pour placer la div)
> Virer les padding (au passage : padding-top:5px 50px ; ça n'existe pas Wink ) et utiliser des infos de positions top, bottom, left et/ou right (comme ton bloc est en position absolute, profites-en ! )

Si tu veux un coup de pouce, n'hésite pas à nous fournir ton template complet (et pourquoi pas le lien vers le forum et un compte de test Wink )
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

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

Résolu Re: Mise en forme de la partie MP - Comment mettre l'icône de sujet à droite ?

Message par mdlettrage Mer 16 Mar 2016 - 20:00

Coucou Miettes....

Premièrement, un grand merci de ton aide ... je vais essayer de suivre tes consignes mais, doutant de moi, je préfère quand même mettre le code et te fournir un compte test (via MP pour le compte)...

Voici le template PRIVMSGS_BODY
Code:

<!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>

<ul id="privmsgs-menu">
 <li>{INBOX_IMG} {INBOX}</li>
 <li>{SENTBOX_IMG} {SENTBOX}</li>
 <li>{OUTBOX_IMG} {OUTBOX}</li>
 <li>{SAVEBOX_IMG} {SAVEBOX}</li>
</ul>

<form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list">

<div class="topic-actions">
   <div class="buttons">
      <div class="post-icon">{POST_PM_IMG}</div>
   </div>
</div>
<div class="clear"></div>

<div class="panel">
   <div class="inner"><span class="corners-top"><span></span></span>
   <!-- BEGIN switch_box_size_notice -->
   <p class="left-box">{BOX_SIZE_STATUS}</p>
   <!-- END switch_box_size_notice -->
   <p class="right-box">
      {L_DISPLAY_MESSAGES}: <select name="msgdays">
      {S_SELECT_MSG_DAYS}
      </select> <input class="button2" type="submit" name="submit_msgdays" value="{L_GO}" />
   </p>
   <div class="clear"></div>
   <span class="corners-bottom"><span></span></span></div>
</div>

<div class="forabg">
   <div class="inner"><span class="corners-top"><span></span></span>

   <ul class="topiclist">
      <li class="header">
         <dl>
            <dt>{L_SUBJECT}</dt>
            <dd class="mark">{L_MARK}</dd>
         </dl>
      </li>
   </ul>

   <ul class="topiclist pmlist bg_none">
   <!-- BEGIN listrow -->
   <li class="row {listrow.ROW_CLASS}">

   <div style="position:absolute; width:24px; height:20px; padding-top:20px; padding-left:24px;">{listrow.PRIVMSG_ICON}</div>

   <dl class="icon" style="background-image: url({listrow.PRIVMSG_FOLDER_IMG});">
         <dt>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="{listrow.U_READ}" class="topictitle">{listrow.SUBJECT}</a><br />
            <span style="margin: 0 16px"><em>{listrow.FROM} - {listrow.DATE}</em></span>
         </dt>
         <dd class="mark"><input type="checkbox" name="mark[]2" value="{listrow.S_MARK_ID}" /></dd>
      </dl>
   </li>
   <!-- END listrow -->
   <!-- BEGIN switch_no_messages -->
   <li class="row row1">
      <dl class="icon">
         <dt>
            <strong>{L_NO_MESSAGES}</strong>
         </dt>
         <dd class="mark"> </dd>
      </dl>
   </li>
   <!-- END switch_no_messages -->
   </ul>

   <span class="corners-bottom"><span></span></span></div>
</div>
<p class="right-box" style="margin: 0;"><a href="javascript:select_switch_privmsg(true);">{L_MARK_ALL}</a> :: <a href="javascript:select_switch_privmsg(false);">{L_UNMARK_ALL}</a></p>
<div class="clear"></div>
<p><span class="pagination">{PAGINATION}</span>{PAGE_NUMBER}</p>
<div class="clear"></div>
<div class="topic-actions">
   <div class="buttons">
      <div class="post-icon">{POST_PM_IMG}</div>
   </div>
   <div class="pagination">
      <p>{S_HIDDEN_FIELDS}
      <!-- BEGIN switch_save -->
      <input class="button1" type="submit" name="save" value="{L_SAVE_MARKED}" />&nbsp;&nbsp;
      <!-- END switch_save -->
      <!-- BEGIN switch_move_profile -->
      <input class="button1" type="submit" name="moveprofile" value="{L_MOVE_PROFILE_MARKED}" />&nbsp;&nbsp;
      <!-- END switch_move_profile -->
      <input class="button2" type="submit" name="delete" value="{L_DELETE_MARKED}" />&nbsp;&nbsp;
      <input class="button2" type="submit" name="deleteall" value="{L_DELETE_ALL}" /></p>
   </div>
</div>
</form>

<div class="clear"></div>
{JUMPBOX}

<br style="clear:both" />

J'ai juste changé la marge de 16px pour reculer un rien le titre par rapport à ma capture d'écran.

Et tant que tu seras en visite chez moi, regarde comme je suis un bon élève (tu peux être fière d'avoir été un bon prof), dans les listes de "mes sujets", "sujets sans réponse" etc, j'ai réussi à mettre le TAG comme tu as eu la gentillesse de me l'apprendre.

Allez bonne soirée et merci

http://csap-liege.forumactif.be/

PS : tu peux poster/écrire ce que tu veux, tout sera nettoyé juste avant ouverture.
mdlettrage

mdlettrage
***

Masculin
Messages : 168
Inscrit(e) le : 19/01/2016

http://www.csap-liege.forumactif.be
mdlettrage a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme de la partie MP - Comment mettre l'icône de sujet à droite ?

Message par mdlettrage Mer 16 Mar 2016 - 22:17

Re coucou,

Malgré tes infos bien précieuses et tout à fait correctes, le code d'origine me résistait encore ... vu que l'icône allait effectivement à droite mais, du coup, au dessus de la case ... donc trop à droite.

En réfléchissant (et oui parfois ...) j'ai eu l'idée folle de recommencer "l'opération tag" comme tu me l'as appris en l'adaptant au template concerné et, bingo, je viens de trouver une solution possible en :

supprimant cette ligne récalcitrante qui voulait ma peau :

Code:
<div style="position:absolute; width:24px; height:20px; padding-top:20px; padding-left:24px;">{listrow.PRIVMSG_ICON}</div>

et en ajoutant ces deux lignes aux endroits adaptés :

Code:
<dd class="icone-sjt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tag</dd>

Code:
<dd class="icone-sjt">{listrow.PRIVMSG_ICON}</dd>

... comme pour le sujet principal ... et tout marche nickel (enfin je crois).

La seul "hic" qu'il reste, mais c'est indépendant de ma modif (j'ai vérifié avec le template d'origine), c'est le texte "selectionner" qui sort du cadre quand on utilise la fonction zoom du navigateur... il devrait être quelques pixels plus à gauche mais bon, là on va pas se chercher des soucis.

Bref, suis-je dans le bon ? Penses-tu que le sujet peut être mis en résolu pour qu'il puisse aider d'autres à l'avenir avec ma version de la modif ou vaut-il mieux attendre une solution plus "passe-partout" ?

Merci
mdlettrage

mdlettrage
***

Masculin
Messages : 168
Inscrit(e) le : 19/01/2016

http://www.csap-liege.forumactif.be
mdlettrage a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme de la partie MP - Comment mettre l'icône de sujet à droite ?

Message par Miettes Jeu 17 Mar 2016 - 11:14

Hello Smile

Oui j'ai vu que tout semble ok ^^

Si tu veux faire en sorte que le texte ne sorte pas de la case en zoom, on peut le couper s'il est trop long. Pour ça, on va juste ajouter ça dans la CSS :
Code:

dd.mark{
    word-break: break-all;
}

Cette solution n'est pas plus complexe que la mienne ^^ Du coup, je pense que tout est ok Smile
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

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

Résolu Re: Mise en forme de la partie MP - Comment mettre l'icône de sujet à droite ?

Message par mdlettrage Jeu 17 Mar 2016 - 13:28

Génial, voilà donc un problème résolu ...

PS : pour le "sélectionner", il est devenu "sélection" ... ce qui évite le souci et, pour être complet, j'ai ajouté quelques espaces pour centrer la case ... Je suis trop méticuleux mais cela a parfois du bon.

Allez, on passe en résolu et encore 1000 fois mercis
mdlettrage

mdlettrage
***

Masculin
Messages : 168
Inscrit(e) le : 19/01/2016

http://www.csap-liege.forumactif.be
mdlettrage a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en forme de la partie MP - Comment mettre l'icône de sujet à droite ?

Message par Miettes Jeu 17 Mar 2016 - 13:28

Je t'en prie Smile

Bon courage pour le reste de tes réglages Wink
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

http://tambouille-raleuses.forumactif.com/
Miettes 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