• Personnalisation Forum (sélecteurs)

    Personnalisation Forum

    Bonjour, dans cet article, quelques sélecteurs et exemples pour modifier l'apparence de vos messages dans vos forums. En gros, ça.

    En mettant mes paramètres à 0, les messages sur le forum ressemblent à ça:

    Personnalisation Forum

    C'est moche et pas très clair.

    Commençons par le commencement.

    1- L'en-tête (Avec date)

    .post_table_head {height30px; /*hauteur*/
        line-height30px;
        background#B55F98;
        colorwhite;
        font-size11px;
        font-familycalibri;
        text-alignright;
        padding-right5px;       }

     

    J'ai mis un fond, définit sa hauteur, mis le texte en blanc à droite... ce qui me donne:

    Personnalisation Forum

     

    *

    2- Zone message ;

    .post_table_msg {background: #F5F5F5;
        margin: 5px;
        border-right: 1px solid #B55F98;
        border-bottom: 2px solid #B55F98;}

    Pour mon exemple, j'ai mis un fond gris clair, une bordure en bas et à droite, et comme je trouvais que le texte était un peu trop collé à l'en-tête j'ai mis une marge interne de 5px.

    Personnalisation Forum

    *

    3- Zone profil ;

    .post_table_profile {propriété: valeur;}

    Je précise bien qu'il s'agit de la "zone" profile (que j'ai encadré en rouge), pour modifier l'avatar et le pseudo on verra après.

    Personnalisation Forum

     

     

    *

    4- Le pseudo ;

    .post_table_profile {color: white;}

    Là, rien de compliqué, vous n'avez qu'à personnaliser votre pseudo, moi je l'ai mis en blanc.

    Personnalisation Forum

    *

    5- L'avatar (image de profil)

    .post_table_profile img {border-radius4px;
    border1px solid #fff;}

    Et là, c'est tout aussi simple, il suffit de personnaliser son avatar, taille, ombre, bordures ...

    Personnalisation Forum

    Et voilà. Pour mon exemple, j'ai fait très simple, après, vous pouvez faire ce que vous voulez. 

     


    Tags Tags :
  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires

    Vous devez être connecté pour commenter