Zen 7.x-5.1- modifier sous theme HTML 5

Tags:

Zen 7.x-5.1. https://www.drupal.org/node/1864582

structure sous themes de la version 5.5

Plus de  pages.css, navigation.css, nodes.css, blocks.css, fields.css... reste : style.css, print.css, normalize.css, layouts/fixed.css, layouts/responsive.css et components/misc.css

Voir cette présentation des 11 css de la v 5.5 et aussi "Useful CSS selectors to add to your stylesheets"

structure sous-theme version 5.1

dossier css (avec normalize.css, pages.css, navigation.css, nodes.css, blocks.css, fields.css, print.css...) et css/layouts
layouts: par défaut c'est mon-theme/css/layouts/responsive.css (et non fixed.css)

ou sass et sass-extensions (zen-grids)

structure de page

page.tpl.php affiche le contenu de la page (à étudier avec Firebug) et  layout/responsive-sidebars.css (css/layouts/responsive.css) détermine par CSS la position, taille et propriétés de structure.

images, polices et couleurs (image, font, color)

Ecrire ces styles dans des fichiers séparés de ceux qui positionnent (layout), suivre une structure hiérarchique.
Etre le plus spécifique possible. Par ex, pour modifier li dans un menu, ne pas définir une nouvelle propriété pour li mais utiliser #menu li

Deux ensembles de buts: layout d'une part et un appellé colors, fonts et images. On peux mettre couleurs/font/images dans:

  • pages.css pour conf prop des régions (mais ne pas mettre ici "float height ou position" mais dans layout/responsive-sidebars.css).
    Ex: font du slogan avec #site-slogan { margin: 0; font-size: 1em; }
  • navigation.css styles de font/couleur des menus
  • nodes.css par ex couleurs de title, promoted, sticky et comments
  • blocks.css il y a des classes pour blocs perso ou system (ex: block-user-login)
  • forms.css label, text input...
  • normalize.css à modifier une fois qu'on a fait les autres fichiers.