Changements dans les designs

Suite à quelques modifications dans les designs officiels l'idée nous est venue de créer un topic rassemblant les modifications à faire pour mettre vos designs persos à jour.

Pour la première édition, nous allons parler des boutons "cette réponse m'a aidé" sur le forum. Ces boutons servant à mettre en évidence une réponse particulièrement efficace pour répondre au problème posé par l'auteur du sujet, il nous faut quelques classes CSS pour mettre en évidence ces "bonnes réponses".

forum.css

.info_bonne_reponse

Définit le cadre présent au début d'un message ayant aidé qui précise haut et clair que si le message est vert c'est parce qu'il a aidé l'auteur du sujet.

Code : CSS - info_bonne_reponse dans Bluzaz

tableaux_messages.css

.message.bonne_reponse et .infos_membre.bonne_reponse

Représentent respectivement les informations sur l'auteur du message que le message lui-même d'une réponse ayant aidé. Ces classes ont été utilisées notamment pour colorer le fond des messages en vert.

Code : CSS - .message.bonne_reponse et .infos_membre.bonne_reponse dans Bluzaz

.header_message.bonne_reponse

Représente l'entête des messages ayant aidé (là où on peut trouver le nom de l'auteur, la date à laquelle le sujet a été posté et les commandes telles qu'éditer, supprimer le message.

Il est a noter toute fois que les designs officiels n'utilisent pas cette classe.

Code : CSS - Déclaration type de .header_message.bonne_reponse

.commandes_textuelles

On sépare maintenant, dans les titres de messages postés les commandes par icône (telles que éditer, supprimer,...) qui sont présentent sous la forme d'une icône des commandes textuelles ("Cette réponse m'a aidé" pour l'instant ) qui ne peuvent se passer d'un texte visible puisque ce sont des fonctionnalités propres au site du zéro que l'on n'est pas encore habitués à voir partout. Ces commandes textuelles ont donc leur classe :

Code : CSS - .commandes_textuelles dans Bluzaz

.icone_commande

Permet de redéfinir la taille d'une image devant se trouver dans l'entête de message pour servir d'icône. Ainsi nous pouvons réutiliser l'icône de sujet résolu pour imager "cette réponse m'a aidé".

Code : CSS - .icone_commande dans Bluzaz

Petit détail :
Les adresses e-mail sur la page des membres utilisant maintenant un fond transparent ne sont pas lisibles sur les thèmes les plus sombres. On a donc ajouter la classe .mail_field au fichier membres.css qui permet notemment de redéfinir le fond de ces adresses.

Code : CSS - .mail_field sous Ghost

Du nouveau pour le module de concours et celui des équipes !

cadres.css

Tout d'abord, voyez ces magnifiques petits cadres qui entourent les avatars et les blasons dans les équipes ? Eh bien, c'est un nouveau fichier qui gère ça, à terme il contiendra toutes les bordures de ce styles.

Il y a donc 3 classes dans ce fichier :

btn150

Encadre une image d'au maximum 150x150 pixels (dimmension max d'un blason d'équipe) + une ligne de texte

Code : CSS - btn150 sur bluzaz

btn100

Idem que btn150 mais pour des images d'un maximum 100x100 (les avatars en l'occurence)

Code : CSS - btn100 sur bluzaz

cadre_btn

Englobe les listes de boutons, si vous voulez donner un joli fond commun aux boutons sur votre design c'est ici que ça se passe.

Code : CSS - cadre_btn sur bluzaz

global.css

Dans le global, un classe est apparue permettant d'englober le corps de la page qui se trouve a coté de "cadre_auteur", comme c'est le cas maintenant pour certaines pages de vos études, les concours et les équipes. Ainsi on peux définir une largeur maximum à ce corps pour qu'il n'y est pas de problème avec des éléments comme les citations du zCode qui, voulant prendre 85% de largeur, passent en dessous des cadres_auteur flotant. Note, ça n'est pas util tout le temps.

corps_cote_cadre_auteur_date

Englobe le texte devant se situer à côté de "cadre_auteur"

Code : CSS - corps_cote_cadre_auteur_date sur bluzaz