Différents codes CSS pour Invision

[Hagel]

Différents codes CSS pour Invision

Ce sujet regroupe différents code pour modifier l'apparence de votre forum, en version Invision.
Si vous n'avez pas un tant soit peu de connaissances, il est déconseillé de toucher au CSS.

Ces codes sont à insérer dans : Panneau d'administration, Affichage, Couleurs, Feuille de style CSS.

Sommaire : - La chatbox - Les messages - Le profil - La messagerie privée - La FAQ - La liste des membres - Fonction "Rechercher" - Les sondages - Les smileys - Rédaction d'un message - Barre de navigation - Bannière, module et portail - Divers

[Hagel]

La ChatBox

• Permet de modifier les couleurs de fond des messages :

- Couleur de fond des lignes impaires (lignes 1, 3, 5, 7...)


.chatbox_row_1 {
background-color: #ecf3f7;
}


- Couleur de fond des lignes paires (lignes 2, 4, 6, 8...)


.chatbox_row_2 {
background-color: #e1ebf2;
}

• Permet de modifier la couleur de la liste des membres connectés à la chatbox :

.memberlist_row_1 {
background-color: #ecf3f7;
}

• Permet de modifier la couleur du titre de la Chatbox :

.chatbox-title,.chatbox-title a.chat-title {
color: #ffffff !important;
}

• Permet de modifier l'alignement du titre de la chatbox :

.chatbox-title {
float: left;
margin: 0;
padding: 6px 5px 0 5px;
width: 15em;
}

• Permet de modifier la taille d'écriture des messages dans la ChatBox

.chatbox {
font-size: 15px;
}

[Hagel]

Les messages :

• Permet de modifier la couleur de fond des messages :

.post-container {
background-color: #EE0030;
}

• Permet de modifier la couleur d'écriture des messages ainsi que celle des profils de message :

.post-container {
color: #EE0030;
}

• Permet de modifier la couleur de fond d'un message :

.postbody {
background-color: #EE0030;
}

• Permet de modifier la couleur de fond des profils dans les messages :

.post {
background-color: #EE0030;
}

• Change l'apparence de la séparation entre deux messages dans un sujet :

.post {
border-bottom: 10px solid #EE0030;
}

• Change la couleur du menu déroulant contenant le pseudo du posteur :

.popmenubutton-new-out a {
background-color: #EE0030;
}

•Change la couleur du fond du menu déroulant (une fois ouvert):

.popupmenu li {
background-color: #F73100;
}

•Change le contour du menu déroulant (une fois ouvert):

.popupmenu {
background-color: #FFFFFF;
}

• Permet de modifier la couleur de fond de la barre contenant les liens « Voir le sujet précédent · Voir le sujet suivant » :

.topic-footer {
background-color: #EE0030;
}

• Permet de modifier la couleur de fond de la barre contenant les boutons de modérations, et les permissions

.bar {
background-color: #EE0030;
}

• Permet de modifier la couleur du texte dans la barre contenant les boutons de modération et les permissions :

.bar {
color: #EE0030;
}

Bien à vous[quote]

[Hagel]

Le Profil :

• Permet de modifier la couleur de fond du profil :

.box-content.profile {
background-color: #EE0030;
}

• Permet de modifier la couleur de la barre contenant le pseudo de l'auteur d'un message de visiteur.

#profile-advanced-details .message-header {
background: #EE0030;}

• Permet de déterminer la position du pseudo de l'auteur, date et heure, dans cette même barre.

#profile-advanced-details .message-date {
float: left;
}

• Permet de déterminer la position des liens "Cacher" et "Supprimer" dans un message de visiteur.

#profile-advanced-details .message-footer {
text-align: left;
}

• Détermine la taille de la deuxième colonne du profil avancé (colonne contenant avatar, rang, amis...) :

#profile-advanced-right {
width: 120px;
}

• Permet de modifier l'apparence des titres de l'onglet Statistiques, du profil avancé (Sujets, messages, informations...)

#profile-advanced-details .stats-field legend {
font-weight: bold; color: #EE0030;
}

• Permet de modifier l'apparence du texte, surtout dans l'onglet Statistique :

#profile-advanced-details .stats-field ul {
text-indent: 10px;
padding: 0;
color: #EE0030;
}

• Pareil que le précédent:

#profile-advanced-details .stats-field li {
color: #EE0030;
}

Bien à vous

[Hagel]

Messagerie Privée :

• Permet de modifier la couleur de l'onglet ouvert (Boite de réception, Messages envoyés, etc..)

ul.privmsg li {
background-color: #EE0030;
color: #fff;
}

• A contrario ce code modifie la couleur des autres onglets, non-ouvert:

ul.privmsg li a {
background-color: #EE0030;
}

Bien à vous

[Hagel]

La FAQ

• Permet de modifier le cadre contenant la réponse à une question:

dl.faq dd p {
border: 1px solid #EE0030;
}

• Permet de modifier la barre entre deux questions :

dl.faq .question {
border-bottom: 1px solid #EE0030;
}

Bien à vous

[Hagel]

Liste des membres

• Modifie le cadre autour de la présentation d'un profil:

.member {
background-color: #fff;
border: 1px solid #EE0030;
}

• Modifie le fond et la bordure de l'avatar dans la liste membre :

.member-list .popmenubutton .mini-avatar {
border: 1px solid #EE0030;
background-color: #EE0030;
}

• Modifie la couleur du texte dans l'encart profil (dernières visites, messages, divers options du profil):

.member p {
color: #EE0030;
}

• Modifie le fond de la catégorie membre (attention pas le fond d'un cadre profil, mais celui derrière)

div.borderwrap .member-list {
background-color: #EE0030;
}

Bien à vous

[Hagel]

Recherche :
(pop-up de recherche, + recherche avancée + widget "Rechercher")

• Permet de modifier la couleur de fond :

#search_menu {
background-color: #EE0030;
border: 1px solid #ffffff;
}

• Permet de modifier a couleur de la bordure de recherche :

#search_menu input.post {
border: 1px solid #EE0030;
}

• Modifie le widget "Rechercher" et la page "Recherche avancée" :

.advanced-search .search-footer {
background-color: #EE0030;
border-top: 1px solid #ffffff;
}

Bien à vous

[Hagel]

Sondage :

• Change le fond du sondage, une fois voté :

.polls {
background-color: #EE0030;
}

• Change la couleur des options du sondage :

.polls dl {
color: #EE0030;
}

Bien à vous

[Hagel]

Smileys :

• Modifie la bordure du cadre contenant les smileys lors de la rédaction d'un message

.smiley-container {
border: 1px solid;
color: #EE0030;
}

• Change la couleur de fond du menu déroulant "Voir plus de Smileys"

.smiley-selector {
background-color: #EE0030;
}

• Change la couleur du contour de la box (où est écrit HTML activé, BBcode activé, etc.)

#smiley-box {
background-color: #EE0030;
border: 1px solid #;
}

Bien à vous

[Hagel]

Envoi d'un message :

• Permet de modifier la couleur du contour de la zone de texte (cadre contenant les boutons de mise en forme)

.messaging-box {
background-color: #EE0030;
border: 1px solid #;
}

• Change la bordure de la zone de texte, donc par extension le fond de la zone de texte, voir la mise en forme du texte lors de l'écriture d'une réponse:

.messaging-box textarea {
border: 2px inset #105289;
}

Bien à vous

[Hagel]

Barre de navigation :

• Couleur du texte, par extension mise en forme de celui-ci:

#submenu ul li a {
color: #EE0030;
}

• Modifie le fond au survol du curseur sur un élément de la barre de navigation:

#submenu ul li a:hover {
background-color: #EE0030;
}

• Modifie la barre sous la barre de navigation : (contenant "Connecté sous Invité, etc..)

#userlinks {
background-color: #EE0030;
border-bottom: 1px solid #cadceb;
}

• Même chose pour les invités :

#userlinks.not-connected {
background-color: #EE0030;
border-bottom: 1px solid #cadceb;
}

• Modifie la couleur de l'intitulé dans le récapitulatif de page :

#navstrip {
color: #EE0030;
}

Bien à vous

[Hagel]

Bannière :

• Permet de modifier la couleur de fond derrière la bannière :

div#logostrip {
background-color: #EE0030;
}

Modules et portail :

• Changer l'encart contenant le titre d'un widget:

.module .maintitle {
padding: 100px;
}

• Modifie l'écriture du titre des widgets (donc mise en forme)

.module .maintitle h3 {
float: none;
font-size: 1em;
color: #EE0030;
}

• Modifie le texte des widgets (mais pas les liens ) :

.module .box-content {
color: #EE0030;
}

• Change la nature de la police des modules centraux du portail:

.module .postbody {
padding: 0;
color: #EE0030;
}

• Change la mise en forme du pied de page des widgets (Par exemple, "Commentaires : 0")

.module .postbody .post-footer {
color: #EE0030;
}

Divers ID que je n'ai pas pu tester:
.module table.mod-top-posters -> pour le widget meilleurs posteurs

Pour le module stat/ sondage:
.module .box-content.poll
.module .box-content.poll dl
.module .box-content.poll dt
.module .box-content.poll dd
.module .box-content.poll dd.pstats

.module .social-bookmark -> pour le widget contact social (facebook et liens utiles)

Bien à vous

[Hagel]

Divers :

• Changer la mise en forme de "anniversaire" "chatbox" "statistiques"...

.formsubtitle {
padding: 5px;
color: #EE0030;
}

• Changer la mise en forme du titre description du forum (en dessous ou à coté de la bannière)

div#logostrip {
min-height: 70px;
color: #EE0030;
}

• Change la mise en forme de la description sous la bannière

#site-desc {
margin: 8px;
color: #EE0030;
}

• Change la mise en forme du titre du forum (à coté ou dessous bannière)

div#logostrip #main-title h1 {
padding-top: 0;
color: #EE0030;
}

•Agrandissement de la zone de saisie email pour le formulaire:

textarea {
width:650px;
}