Adaptive un thème Drupal 7 - HTML 5 et CSS 3

Soumis par Jenny le 8 mai 2014 - 12:41

Vers mes notes "sous theme adaptive 7.x-3.2" qui regroupe: sky3 et sous-thèmes, des ex de modifs CSS, configurer Sky 3.0 (install, chemins vers fichiers générés...)...
Vers tout ce qui est tagué: CSS omega adaptive PHP

http://adaptivethemes.com/documentation/using-template-overrides

Adaptivetheme est HTML 5 et CSS 3, inclu des overrides du thème du core. Quand on recherche quel template overrider, chercher d'abord dans le thème du core (pour voir si déja overridé), et si c'est le cas, le copier dans son dossier de sous-thème.
Voici une liste de templates que Adaptative override par défaut (voir dans adaptivetheme/adaptivetheme/templates/):

	aggregator-feed-source.tpl.php   aggregator-item.tpl.php   aggregator-summary-items.tpl.php
block--menu-bar.tpl.php   block--menu.tpl.php       block--search.tpl.php   block.tpl.php

	book-navigation.tpl.php   comment-wrapper.tpl.php   comment.tpl.php

	field--taxonomy-term-reference.tpl.php

	html.tpl.php    et bien sur:  maintenance-page.tpl.php     node.tpl.php  et  page.tpl.php
region--content-aside.tpl.php   region--menu-bar.tpl.php

	search-result.tpl.php

	user-profile-category.tpl.php

Overrider un Template dans son sous-thème

1. créer un nouveau dossier dans son sous-thème. 2. copier coller son template dans ce dossier, qu'il vienne du core Adaptivetheme ou d'un module (search, views...).
3. effacer le cache du theme (via admin_menu: Flush all cache / Theme registry), sinon drupal ne verra pas le nouveau .tpl.php.

Templates de Adaptivetheme

field.tpl.php.txt
Non utilisé par défaut - nommé field.tpl.php.txt, donc à renommer en field.tpl.php (et vider le cache). Attention, car d'autres modules se basent sur la sortie de ce template.

page--full-width-header-footer-example.tpl.php
Override la page de base page.tpl.php et comporte des balise supplémentaires pour supporter les mise en forme de type "largeur de header et footer à 100%". A copier dans son sous-theme, et le renommer page.tpl.php (et vider le cache).

block--menu-bar.tpl.php
Ajoute des balises pour les menus placés dans la région "Menu Bar" - attention danger, car les CSS des sous thèmes sont basées sur les balises et classes de ce template... ne pas y toucher :)

Suggestions de Template

Adaptivetheme permet d'avoir des types de suggestions "block--[region]--[module].tpl.php" de facon à overrider les block pour un module donné selon la région où il apparait. Le code est à adaptivetheme_preprocess_block(&$vars):

	<?php

	  // Provide template suggestions such as block--header--search, or block--menu-bar--menu

	  $vars['theme_hook_suggestions'][] = 'block__' . $vars['block']->region . '__' . $vars['block']->module;
?>

.info et css 3 (avec ou sans sass?)

Le .info par défaut d'un sous theme renseigne
Theme Settings	Regions
Standard layout et Tablet	regions[content_aside] = Aside regions[leaderboard] = Leaderboard
Tablet portrait
Smalltouch landscape
Smalltouch portrait
... SEO

Plus sur les CSS adaptive (avec ou sans sass?), avec en PJ les 2 css globales ie pour toute taille de device (non "responsive"):

global.styles.css a bp de selecteurs vides donc soit en effacer soit utiliser SASS et
global.base.css inclus normalize.css ainsi que d'autres classes et styles de base (alignement des containeur par défaut, images flexibles..).

Official documentation page: http://drupal.org/node/1089656

Image (file bookimg):