Projet:Charte graphique/Articles/Infoboxes

Veuillez lire avant le guide de design de wikimedia pour avoir une idée : https://design.wikimedia.org/style-guide/visual-style.html

Afin de tester le nouveau style d'infobox proposé pour le style Timeless et Vector (celui utilisé par défaut), Suivez les instructions en dessous. Vous pourrez ensuite tester le nouveau style sur des articles comme Victor Hugo ou Canada. N'hésitez pas à tester pendant plusieurs jours pour vous faire une vraie idée du nouveau rendu.

Cette proposition ne vise que les Infobox v3. Les Infobox v2 sont à mettre à jour vers la v3, qui structure d'avantage les éléments, pour bénéficier des changements.

Conservez cette page dans votre liste de suivi afin d'être au courant des dernières nouveautés. Dernière mise à jour du code : 22 octobre 2018.

Méthode rapide

Pour tester rapidement le code, insérez le code suivant dans votre vector.js ou timeless.js

(méthode non recommandé pour des questions du temps de chargement de la page) :

/* Design pour les infobox v3 */

importStylesheet('User:Tomybrz/infobox.css'); 

/* Crédits d'auteurs: [[Wikipédia:Atelier graphique/Projet de nouvelle charte graphique/Articles/Infoboxes]] */

Code complet

Si vous voulez avoir un rendu du code immédiatement, insérez ce code sur vector.css ou timeless.css

/* Nouveau style des infobox */

div.infobox_v3 {
	padding: 10px;
	width: 25em;
	background: #ffffff;
	clear: right;
	float: right;
	font-size: 0.9em;
	line-height: 1.4;
	margin: 1em 1em 0.5em 1em;
	max-width: 325px;
	word-wrap: break-word;
	box-shadow: 0 0 .2rem #999;
    border: 0px;
}

.infobox_v3 table {
    padding: 0;
    margin: 0 0 15px;
}

.infobox_v3 .entete {
    padding: 10px;
    margin-top:-10px;
    margin-bottom:5px;
    margin-right:-10px;
    margin-left:-10px;
}

.infobox_v3 th[scope="row"], .infobox_v3 td {
    padding-left: 2px;
    padding-right: 2px;
}

.infobox_v3 .images  {
    padding:0 !important;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.infobox_v3 .images img {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    height: auto;
    max-width: 320px;
    width: 100%;
}
.infobox_v3 p.legend {
    background: #FFF;
    color: #54525d;
    font-size: 0.9em;
    margin: 0;
    padding: 3px 6px 12px;
    text-align: left;
}
.infobox_v3 p.legend {
    background: #FFF;
    color:#54525d; 
}
.infobox_v3 p.legend a {color:#54525d; text-align: center;}

.infobox_v3 .navbar  {display:none;}
.infobox_v3 p.bloc,
.infobox_v3 table caption {background-color:#eaecf0 !important; color: #222 !important;}

/* Crédits d'auteurs: [[Projet:Charte graphique/Articles/Infoboxes]] */

Versions

22 octobre 2018

Mise à jour, réorganisation du code.
Maintenances diverses

20 juin 2018

ajout de border:1.5px solid #aaa;
Mise à jour de la page de présentation
Ajout du code rapide

15 septembre 2017

Réintégration du titre de l'infobox, très demandé par la communauté
Mise en avant de l'image et de sa légende
Reprise de la marge interne entre le bord et les titres
Reprise des intertitres de sections et des mises en couleur de ceux-ci pour plus de sobriété
Correction des bugs et des faux positifs
Maintenances diverses

23 mai 2017

Prise en charge uniquement sur les infobox v3

Accentuation de la marge entre le texte et l'infobox
Atténuation de la bordure de l'infobox et création d'un arrondi aux coins
Suppression du titre de l'infobox, redondant avec le texte, afin de mettre en avant l'image
Mise en avant de l'image et de sa légende
Reprise de la marge interne entre le bord et les titres
Reprise des intertitres de sections et des mises en couleur de ceux-ci pour plus de sobriété
Suppression des liens de pied de page (modification, documentation), redondants