Never-Utopiasection codage

Partie 3 - TP6 - Introduction - Étape 1 - Réaliser son fond et sa bannière - Étape 2 - Préparer sa feuille de style CSS - Étape 3 - Poser les fondations du codage du forum - Étape 4 - Mise en forme de la navigation et de la bannière - Étape 5A - Création graphique des catégories - Étape 5B - Installation des catégories - Étape 6 - Élaboration du "Qui est en ligne ?" - Étape 7 - Élaboration du Footer - Étape 8 - Résumé des étapes précédentes - Étape 9 - Structure de l'affichage des sujets Étape 10 - Mise en forme des messages - analyse rapide du template - modification de l'affichage - création graphique des images
- Étape 11 - La Page Accueil, mise en avant d'un élément décisif - Étape 12 - Des petits plus ? - Étape 13 - Zoom sur l'ensemble du tutoriel et Bilan - Étape 14 - Étape mystère

Codage. Cursus

Étape 10 - Mise en forme des messages

Nous voici dans l'étape 10, l'avant dernière étape de construction de notre forum ! Après avoir dressé nos catégories, notre QEEL, notre Footer et traversé les chemins de nos sujets, nous atteignons une grotte sinueuse et étroite que sont les messages. En effet, s'il sont peu modifiés, la plupart du temps, leur affichage est redondant : Profil sur le haut, message sur le bas, profil sur la gauche, message sur la droite. Ceci s'explique par le fait que l'utilisateur est peu habitué aux grands changements et que lui changer son interface pourrait le perturber ! Nous allons rester ici sur les classiques et mettre en forme quelque chose de très simple mais également, très classe ! Si vous avez des questions, n'hésitez pas à me MP : Envoyer un MP

Auteur : Taktiik

Analyse rapide du template

• Direction Affichage> Template> Général> Viewtopic_body.

Considérons le template en trois parties.
La première partie représente l'affichage du profil :

La seconde affiche le message et la signature :

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
              <td valign="top" nowrap="nowrap" class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
              </td>
            </tr>
            <tr>
              <td colspan="2" class="hr">
                  <hr />
              </td>
            </tr>
            <tr>
              <td colspan="2">
                  
                  <div class="vote gensmall">
                    
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>

<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                        
                        <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>

<div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        
                    </div>

<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>

<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                    
                  </div>

<div>{postrow.displayed.MESSAGE}</div>

<dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                          
                          <dl class="file">
                              <dt>
                                <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

<a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}

{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                
                              </dt>

<dd>
                                <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>

<dd>
                                <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>

<dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                          </dl>
                          
                        </dd>
                    </dl>

<div class="clear"></div>
                    
                    <div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                    </div>

</div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
              </td>
            </tr>
        </table>
      </td>

Et tout ce qui gère l'après-message, à savoir la réponse rapide et les droits de modération :

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td class="row2" colspan="2" align="center" style="padding:0px">
        
        <a name="quickreply"></a>
        {QUICK_REPLY_FORM}<br />
        
      </td>
  </tr>
  <tr>
      <td style="margin:0; padding: 0;" colspan="2">
        <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      
      <tr>
        <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
        <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      
      <tr>
        <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                  
              </tr>
            </table>
        </td>
      </tr>
  </tbody>
        </table>
      </td>
  </tr>
  <tr>
      <td style="margin:0; padding: 0;" colspan="2">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
            <tbody>
      <tr>
        <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
              </tr>
            </table>
        </td>
      </tr>
  </tbody>
        </table>
      </td>
  </tr>
</table>

Je "zappe" délibérément certaines lignes parce qu'elles concernent des choses qui peuvent être justement zappées, ce sont par exemple l'affichage des "règles" d'un forum ou encore des scripts.

Modification de l'affichage des messages

• Pour commencer les manipulations, nous allons alterner la partie du message et du profil, nous allons donc inter-changer les places des cellules.

<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
              <td valign="top" nowrap="nowrap" class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
              </td>
            </tr>
            <tr>
              <td colspan="2" class="hr">
                  <hr />
              </td>
            </tr>
            <tr>
              <td colspan="2">
                  
                  <div class="vote gensmall">
                    
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>

<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>

<div>{postrow.displayed.MESSAGE}</div>

</div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
              </td>
            </tr>
        </table>
      </td>
       
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
        <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            
            {postrow.displayed.POSTER_RPG}
        </span><br />
        <img src="https://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>
  </tr>
  <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
        <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
      </td>
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT} {postrow.displayed.ONLINE_IMG}
              </td>
            </tr>
        </table>
      </td>
  </tr>
  
</table>

• Créons un tableau juste après que la ligne soit ouverte qui aura pour class :"Message" :

<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
<table class="Message" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td valign="top" width="100%" height="28" colspan="2">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
           
            <tr>
              <td colspan="2">
                  
                  <div class="vote gensmall">
                    
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>

<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>

<div class="postbody">
  <div class="postdetails" style="float: left">
  <img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT} 
  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}
  </div>
  <div class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
  </div>
      <br />
                    <div class="message">{postrow.displayed.MESSAGE}</div>
      <br />
  <div class="post-options">
  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT} {postrow.displayed.ONLINE_IMG}
  </div>
                    
                    <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                          
                          <dl class="file">
                              <dt>
                                <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

</div>
              </td>
            </tr>
        </table>
      </td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
  <div class="MessageProfil">
        <div class="MessageAuteur"><a name="{postrow.displayed.U_POST_ID}"></a>{postrow.displayed.POSTER_NAME}</div>
       
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            
            {postrow.displayed.POSTER_RPG}
        </span>
  </div>
      </td>
  </tr>
</table>
      </td>
  </tr>
  
</table>

• Concentrons-nous maintenant sur la partie qui gère les messages, à savoir celle-ci :

<table class="Message" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td valign="top" width="100%" height="28" colspan="2">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
              <td valign="top" nowrap="nowrap" class="post-options">
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
              </td>
            </tr>
            <tr>
              <td colspan="2" class="hr">
                  <hr />
              </td>
            </tr>
            <tr>
              <td colspan="2">
                  
                  <div class="vote gensmall">
                    
                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>

<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>

<div>{postrow.displayed.MESSAGE}</div>

</div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
              </td>
            </tr>
        </table>
      </td>

Vous avez une ligne qui affiche des bordures vraiment pas esthétiques :

Supprimez-la dès que vous la voyez x) ! Ensuite, nous allons déplacer les boutons "Editer", "Supprimer" et les boutons "MSN" "Skype" "Profil" etc..., nous allons les mettre près de la div "postbody".
Cela veut dire que ces lignes :

Puis cette ligne :

Vont devenir :

</div>

<div class="postbody">
            <span class="postdetails">
                                  <img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT} 
                                  <img src="{postrow.displayed.MINI_TIME_IMG}" alt="{postrow.displayed.L_MINI_TIME_ALT}" title="{postrow.displayed.L_MINI_TIME_ALT}" border="0" />{postrow.displayed.POST_DATE}
                            </span>
  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                                               
                    <div>{postrow.displayed.MESSAGE}</div>
                                               
  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT} {postrow.displayed.ONLINE_IMG}
                    
                    <dl class="attachbox">

• Maintenant, on va ajouter une div autour des deux images qui aura pour classe "postdetails" et pour style (style="") un flottement sur la gauche. Le style sert à ajouter des propriétés qui seront plus importantes que celles mises dans la class, ainsi elles seront prioritaires dans l'affichage du style de la div.

• Et enfin, une autre div qui aura pour classe "post-options" autour des autres boutons, on ajoute également une classe à la div qui entour le message du nom de "message" :

État du template :

<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>

</div>
              </td>
            </tr>
        </table>
      </td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
        <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            
            {postrow.displayed.POSTER_RPG}
        </span><br />
        <img src="https://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

</tr>
  <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
        <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
      </td>
  </tr>
</table>
      </td>
  </tr>
  
</table>

• Validez le Template. Direction la feuille de style CSS !

• Nous avons créé 2 div : '.Message' et 'message'. Nous allons aller chercher .message grâce à .postbody, ça donne :

EXERCICE :
• "Message" va prendre les propriétés et les valeurs suivantes :
- Un fond de couleur #17344f
- Une bordure de tous les côtés de 1px, solide de couleur #095279
- Une largeur de 925px
- Un centrement automatique
- Une marge extérieure en haut et en bas de 10px
- Une ombre portée avec X= 0, Y= 0, Z= 3 et une couleur #000000

• Nous allons maintenant donner une hauteur minimum de 520px au message et une marge intérieure de 3px :

Validez votre CSS et retournez dans le template !

• Nous allons tout d'abord régler des problèmes d'affichage et retirer les titres "Auteur" et "Message" qui s'affiche avant le message. Ainsi, retirez les l.111 à l.114 :

Retirez également les lignes suivantes :

Avant :

• Passons maintenant à la partie qui nous intéresse :

EXERCICE :
• Introduisez une div ayant pour class: "MessageProfil" qui englobera la totalité de la cellule.

• Enfin,

<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br /></ textarea><br /><br />
• Entourez le titre du posteur d'une div du nom "MessageAuteur" et faites les modifications nécessaires !<br />
<div class="spoiler"><input onclick="showSpoiler(this);" value="Afficher la correction" type="button"><div class="inner" style="display: none;"></a><textarea>        <div class="MessageAuteur"><a name="{postrow.displayed.U_POST_ID}"></a>{postrow.displayed.POSTER_NAME}</div></ textarea></a></div></div><br /><br />
Il fallait donc retirer les span et introduire une div, supprimer le saut de ligne qui est déjà occasionné par la div.
Il était possible de garder la mise en gras mais je l'ai supprimé car je ne veux pas le pseudo en gras ^^ ! Passez finalement dans le CSS !
<br /><br />
• Nous avons crée deux div : <b>"MessageProfil"</b> et <b>"MessageAuteur"</b>.<br />
<textarea>  /* Profil */
.MessageProfil
{
 
}

/* Auteur */
.MessageAuteur
{
 
}

EXERCICE
• Tout d'abord, attribués à "MessageProfil" les propriétés suivantes :
- Une bordure de tous les côtés sauf à droite de 1px, solide de couleur #095279
- Une largeur de 180px
- Une hauteur minimum de 450px
- Un alignement du texte centré
- Une marge intérieure de 5px
- Une marge extérieure à droite de -4px
- Une marge extérieure en haut de -3px
- Une ombre sur la boite avec X= 0, Y= 0, Z= 3 et pour couleur #000000

• Ensuite, "MessageAuteur" prend les propriétés suivantes :
- Un alignement du texte centré
- Une taille de police de 11px
- Une ombre portée sur le texte avec X= 0, Y= 0, Z= 1 et pour couleur #000000

Nous avons positionné le profil de telle façon qu'il soit ancré dans le coin à gauche ^^ !
Nous en avons désormais terminé pour la manipulation HTML/CSS des messages, nous allons passer au graphisme !

Création graphique des images de message

• Nous allons créer les boutons des messages ! Avant tout, je vais vous demander de ré-héberger les boutons, qui sont les même que Sparrow, servant à la modération :

Merci de ré-héberger ces images

Passons à la création des boutons suivants :
- Nouveau
- Répondre
- Verrouillé

- Éditer
- Citer
- Supprimer
- adresse IP

- Rechercher ...
- Profil
- M.Privé
- Site web
- MSN
- Yahoo
- Skype
- En Ligne

• Ouvrez un document de dimensions 59*18

• Sélectionnez l'outil de texte horizontal avec une police de 14px, ayant pour couleur #00a2ff et marquez "Nouveau".
Utilisez la police Xenophone : Download

• Appliquez :
- Une incrustation en dégradé : Angle = 90°

(#15415a -- #277eb0)
- Une ombre portée d'opacité 37%, Distance 2px, Grossi 0%, Taille : 1px.

• Enregistrez le document en .png

• Faites la même chose pour Répondre mais changez le dégradé pour Verrouillé, Partez du noir au bleu foncé.

• Répétez la même manipulation en ajustant la taille de police pour tous les autres boutons excepté pour "En ligne" sur lequel vous partez du bleu foncé au vert foncé et sur Supprimer sur lequel vous partez du bleu foncé au rouge foncé.

Précédent Suivant

Accueil du site | Forum | Signaler | Contribution | ForumActif