PapyClic - Design

PapyClic - Design

Personnalisation de la messagerie privée

 

La page "Messagerie privée" s'affiche selon le design de votre blog. Mais si vous voulez la personnaliser un peu plus, il faut le faire en CSS.
Dans cet article je vais vous montrer quelques modifications possibles, avec le code CSS que vous pourrez copier et le modifier selon votre design.

Pour chaque bloc composant cette page, par un exemple je vous indique la ou les règles qui gère son style.

 

Exemple de présentation :

Sur mon ordinateur Sur l'ordinateur du membre
messagerie-1.jpg messagerie-1b.jpg

 

► Le bloc général a comme identifiant private-messages pour modifier son aspect, il faut créer une règle en CSS, par exemple :

 

#private-messages {
  padding: 5px;
  border : 1px solid #000000;
 
  /* coins arrondis */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
 
  /* bordures ombrées  */
  -webkit-box-shadow: 2px 4px 12px #666;
  -moz-box-shadow: 2px 4px 12px #666;
  box-shadow: 2px 4px 12px #666;
  filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
}

 

 

 

 

► Le titre en haut de cette page, pourra être modifié avec la règle ci-dessous.

messagerie-0.jpg

 

#private-messages h2 {
  text-align: center;
}

 

 

 ► Le bloc de gauche affiche la liste des conversations non terminées et j'ai appliqué un style différent (couleur de fond) à la conversation active. Vous pouvez également modifier le style de la date.

 

messagerie-2.jpg
 

/* Liste des conversations */
#private-messages .pm-conversation-list {
  background-color:#C4D0DC;
  margin-left: 5px;
  padding: 10px 0;
  /* coins arrondis */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
}
#private-messages div.pm-conversation.active {
  background-color: #8CA7C2;
}
#private-messages .pm-conversation-list .username .date{
 font-size: 12px;
 }

Au passage je vous signale que vous pouvez supprimer une conversation, vous survolez le lien, une petite croix s'affiche que vous cliquez.

messagerie-2survol.jpg

 

 

► Titre de la conversation et bouton pour lancer une nouvelle conversation dans un même bloc. Vous pouvez modifier le style du titre et éventuellement la couleur de fond du bouton.

 

messagerie-3.jpg

 

/* Titre de la conversation */
#private-messages div.conversation-title h4 {
  font-style: italic;
}

/* bouton nouveau messsage privé */
#private-messages div.conversation-title button.new-pm-conversation {
 background-color: #505984 !important;
}

 

► Pour le bloc où défile les messages de la conversation en cours, j'ai mis une bordure.

Les messages sont dans un tableau, à chaque ligne j'ai mis une bordure basse en tirets, pour bien délimiter.

Pour l'exemple j'ai mis également un style différent au survol de la ligne message.

La quatrième règle permet de rendre plus lisible le texte indiquant depuis quand le message est arrivé. Mais ce n'est pas très utile car en survolant le texte, ja date et l'heure s'affichent.

 

messagerie-4.jpg

 

/* zone de la conversation active */
#private-messages .conversation-messages {
  border : 3px inset #505984;
  margin-left: 10px;
}
#private-messages .conversation-messages tr {
  border-bottom: 1px Dashed #000099;
}
#private-messages .conversation-messages tr:hover {
  border: 2px solid #505984 !important;
  background-color: #8CA7C2 !important;
 }
#private-messages .conversation-messages .message-date {
  color: #8CA7C2 !important;
}

 

► Le bloc réponse est composé d'une zone pour insérer le texte du message et d'un button pour l'envoyer.

 

messagerie-5.jpg

 

 

/* Zone saisie réponse */
#private-messages form#conversation-reply textarea{
border: 2px solid #000000;
/* coins arrondis */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

/* bouton envoyer */
#private-messages form#conversation-reply  button {
background-color: #505984;
}

 

Vous pouvez donc copier et compléter ou modifier les diverses règles citées ci-dessus, pour personnaliser la page de "Messagerie privée".  Il y a bien sûr d'autres styles possibles mais ces exemples vous permettront de placer les propriétés de style dans les bonnes règles.

Ne faites pas trop de modifications, le but de la messagerie est surtout de communiquer rapidement entre membres du blog, d'être rapide et simple.

 

 Les codes ci-dessus sont à coller dans la zone de personnalisation du CSS de l'assistant du RapidDesign.

 

Espace de gestion → VOTRE BLOG → Design du blog → CSS/HTML → CSS personnalisé.

 

Exemple de code collé dans la zone :

 

Si votre espace de gestion est ouvert, cliquez sur : lien

 

N'oubliez pas, après visualisation dans l'assistant de cliquer sur "Appliquer" en bas de la colonne.

 


Si cet article vous a été utile, un petit J'aime me fera plaisir.

N'hésitez pas un mettre un commentaire, si vous avez apprécié cet article, mais également si vous n'êtes pas pleinement satisfait. 
Pour plus d'explications poster sur le forum

 

 

HautPrécédente

 



20/12/2013
8 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 153 autres membres