Cet article va essentiellement vous proposer une lecture commentée de la dernière feuille ./css/theme.css pour que vous puissiez plus facilement mettre votre SPIP à vos couleurs : voici l’apparence de départ.
- Voyons les lignes définissant ces colorations
Les liens
Contrairement aux origines du Web, les liens cliquables ne sont plus systématiquement soulignés theme[23] text-decoration:none ; mais leurs colorations sont désormais en rose, qu’il aient été visité theme[21] color: #db1762; ou non theme[25] background-color:#c41558; color:#fff; . Ces mêmes colorations sont reprises dans les sous-menus de navigation latérale...
Dans le cas des liens principaux, marqués en "header", les interlignes sont agrandies theme[18] line-height: 1.2 ; de même les tailles de polices sont agrandies mais cela provient de ./css/typo.css !
Au contraire, dans les rappels d’arborescence (le fil d’ariane theme[32] .arbo ) , on rapporte une taille réduitetheme[32] font-size: .9em, et surtout une couleur uniformément grise theme[32]color: #666, avec le soulignement pour des navigations hiérarchiques ; en cas de sélection theme[37] background: #666; color: white , c’est mis en blanc sur fond gris !
Textes et titres
En-dehors des enrichissements colorés pour les liens décrits ci-dessus, le texte est assez uniformément gris foncé sur blanc theme[15] color:#222222;background:#ffffff ; le fond vient souvent dans un blanc cassé
Mais surtout le choix de polices est fixétheme[15] font-family: "Luxi sans", "Lucida Grande", Lucida, "Lucida Sans Unicode", sans-serif : cette succession générale propose donc une police sans sérif (sans empattements) quasiment toujours disponible et lisible...
Enfin les tailles des titres sont aussi agrandies en correspondance avec les niveaux hiérarchiques de plans, toujours à partir de ./css/typo.css...
Autres styles à personnaliser
Juste une remarque pour vous expliciter les boutons en bords ronds, qui pourraient vous plaire ; c’est directement géré dans le layout d’origine ./css/layout.css
- .nav li a {
- display: inline-block;
- padding: 0.25em 0.5em;
- margin: 0 0.25em 0.5em 0;
- border-radius: 0.25em;
- text-decoration: none;
- background: #f0f0f0;
- color: #db1762;
- }
Quant à la personnalisation du bouton-formulaire de recherche, vous la retrouverez dans ./css/theme.css [103] :
- .formulaire_recherche input.text {
- width: 83%;
- height: 32px;
- padding-left: 20px;
- vertical-align: middle;
- border: solid 1px #aaa;
- background: #fff url(img/recherche.png) no-repeat left center;
- -webkit-border-radius: 0.25em 0 0 0.25em;
- border-radius: 0.25em 0 0 0.25em;
- }
- Extrait plus complet SPIP 3.1 dist
Commencer à modifier
En plus des instructions communes pour MODIFIER la dist / SPIP 3, vous prendrez garde à suivre précisément et tester chaque modification à vos fichiers :
./squelettes/css/theme.css que vous aurez recopié par SkelEditor,
./squelettes/css/perso.css que vous aurez créé...
A vos surcharges de CSS.
La même chose pour SPIP 3.2.x
Pour un autre site, je viens d’avoir à remplacer ces roses flashy de la nouvelle interface, pour coller à l’orange du logo du site client.
Alors, j’ai commencé par récupérer toutes les définitions decolor (ou de background-color ) exprimées dans les squelettes-dist/css/*.css : j’en ai créé la feuille personnalisée de style capable de les écraser, que je vous fournis ci-dessous : vous n’aurez plus qu’à la remodifier à votre sauce, et la recharger sur votre site !
- /* /squelettes/CSS/perso.css */
- /* ------------------------------------------ */
- /* Habillage des COULEURS de SPIP 3.1
- /* ------------------------------------------ */
- a, a:visited { color: #ff5700; } /* themes.css[22] #db1762 */
- a:focus, a:hover, a:active { background-color:#ffa300; } /* themes.css[26] #c41558 */
- .arbo a:visited { color: #666; } /* themes.css[36] #666 */
- .arbo a:focus { background: #666; color: white; } /* themes.css[38] #666 */
- /* LAYOUT.css Entete et barre de navigation */
- ------------------------------------------ */
- .header .spip_logo_site a:hover {color:#ff5700;} /* layout.css[30] #db1762 */
- .nav li a { color: #ff5700; } /* layout.css[39] #db1762 */
- .nav li.on a { background:#ffa300; } /* layout.css[40] #c41558 */
- /* FORM.css [38..48] base formulaires */ /* FORM.css [38..48] */
- .error,
- .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
- .notice { background: #fff6bf; color: #514721; border-color: #ffd324; }
- .success { background: #e6efc2; color: #264409; border-color: #c6d880; }
- .info { background: #d5edf8; color: #205791; border-color: #92cae4; }
- .error a,
- .alert a { color: #8a1f11; }
- .notice a { color: #514721; }
- .success a { color: #264409; }
- .info a { color: #205791; }
- /* SPIP.css Styles associes au code genere par SPIP */
- /* Reponses */
Article publié le 20 août 2018, et actualisé en novembre 2018 .
Répondre à cet article