...du verbe Drupaler (1er groupe)

Tutoriel : créer une grille custom dans Omega pour Drupal 7

19. Mars 2012 - 17:29 -- Jeremy

Dans cet article, nous allons créer une grille custom dans votre sous thème Omega après avoir appris à créer un sous-thème et à configurer le thème HTML5 / CSS3 OMEGA. En effet, vous n'êtes pas obligé de choisir une grille par dégaut à 960 pixels de large : vous pouvez tout à fait définir la grille que vous désirez, en nombre de colonne, en largeur des colonnes ou des gouttières.

Prérequis:

- Travailler sur un sous thème Omega 3.x.

- Le thème ne doit pas posséder d'underscore "_omega".

- Dans l'exemple suivant le sous-thème est appelé “monTheme”


Ce que nous avons à faire:

1) Regarder dans le fichier alpha.info

2) Editer le fichier .info de notre sous thème

3) Placer et renommer les fichiers css correspondant dans : sites/all/themes/monTheme/css/grid/monTheme_default/wide

4) Changer les paramètres de la grille dans : /admin/appearance/settings/monTheme

5) renommer les fichiers alpha-default-*.css


Note : Comme pour celui de Drupal, on ne modifie pas le core du thème
 

Etape 1 : coup d’oeil dans alpha.info

Le fichier alpha.info se situe dans le dossier : /sites/all/themes/omega/alpha/

Localisez la partie CSS Grids dont les paramètres sont:

Puisque dans cet article nous allons créer seulement la version "wide" nous avons seulement besoins de la partie suivante:

; CSS GRID SYSTEMS
grids[alpha_default][name] = Default (960px)
grids[alpha_default][layouts][wide] = Wide
grids[alpha_default][columns][24] = 24 Columns

 

Etape 2 : éditer votre .info

Insérer ces 3 lignes dans votre fichier monTheme.info et modifier en conséquence le nom de sous thème.

Dans cet exemple, mon fichier monTheme.info est localisé dans : /sites/all/themes/monTheme/

Les modifications apportées sont:


; CSS GRID SYSTEMS
grids[monTheme_default][name] = monTheme 18 Cols Grid!
grids[monTheme_default][layouts][wide] = Wide
grids[monTheme_default][columns][18] = 18 Columns

Important : Notez que pour la partie [monTheme_default], il doit bien y avoir votre nom de thème suivi de “_default”.

Etape 3 : créer vos dossiers et fichiers css

Aller dans le dossier de sous thème et créer la structure grid/monTheme_default/wide dans le dossier : sites/all/monTheme/css

Notez que la syntaxe ../monTheme_default/.. reflète [monTheme_default] que nous avons mis dans notre fichier monTheme.info à l’étape précédente!

Copier les 2 fichiers : alpha-default-wide-24.css et alpha-default-wide-24.png

Depuis : /sites/all/themes/omega/alpha/css/grid/alpha_default/wide/

et coller les dans votre sous thème : /sites/all/themes/monTheme/css/grid/monTheme_default/wide/

Renommer ces 2 fichiers en prenant en compte votre nom de fichier monTheme.info.

Dans notre exemple ils sont renommés :

/sites/all/themes/monTheme/css/grid/monTheme_default/wide/monTheme-default-wide-18.css

/sites/all/themes/monTheme/css/grid/monTheme_default/wide/monTheme-default-wide-18.png

Il est préférable d’utiliser un générateur de grilles custom comme le générateur de grille 960gs officiel ou un générateur de grille avec plus de paramètres pour générer votre fichier monTheme-default-wide-18.css.

Noter aussi que 18 représente le nombre de colonnes du fichier monTheme.info. Vous devez aussi retailler votre fichier .png, de sorte qu'il s'intègre visuellement à vos colonnes. Ouvrez en un présent par défaut pour vous aider à créer le votre. Sachez toutefois qu’il est égale à largeur d’une colonne plus la largeur d’une marge.

Etape 4 : Changer les paramètres de la grille

Effacer le cache, puis allez dans : /admin/appearance/settings/monTheme

Les paramètres du sous-theme devraient être accessibles si tout s’est bien passé.

Une fois sur cette page, changer la disposition et les media queries pour prendre en compte les nouvelles valeures, puis sauvegarder.

Vider le cache.

Etape 5 : renommer le fichier alpha-default*.css

Il faut ensuite renommer le fichier :

monTheme/css/monTheme-alpha-default.css

et le ou les fichiers :

monTheme/css/monTheme-alpha-default-{narrow,normal,wide}.css

pour : monTheme/css/ksno-alpha-default*.css

Ceci parce que vous avez changez le nom de la grille alpha_default par ksno_default. Dans le cas contraire, elle ne sera pas inclus.

Cet article est en partie une traduction de l’article en anglais que vous trouverez en cliquant sur le lien.

3.875
Average: 3.9 (8 votes)
Votre vote: Aucun(e)

Ajouter un commentaire

Texte simple

  • Aucune balise HTML autorisée.
  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Les lignes et les paragraphes vont à la ligne automatiquement.
CAPTCHA
Image CAPTCHA