...du verbe Drupaler (1er groupe)

Configurer le thème Omega sur Drupal 7

16. Mars 2012 - 10:02 -- Jeremy

Après un premier article sur la création simple et rapide d'un sous-thème dans OMEGA, passage en revue de l'intégralité des options de configuration possible d'omega...et il y en a ! En effet, via ce thème en HTML5 / CSS3, vous définissez par exemple le positionnement des régions et leur largeur directement dans les configuration.

Configuration de la zone

Pour chaque zone, les paramètres suivants sont disponibles.

Fournir enveloppe pleine largeur autour de cette zone : L'activation de cette fonctionnalité vous donnera un “wrapper” autour de la zone elle-même, vous permettant de thèmer les éléments qui apparaissent en dehors de la zone de 960 pixels. Idéal donc pour les header et footer, comme sur le site http://www.acquia.com/ qui tourne sous OMEGA.

Forcer cette zone à être rendu : L'activation de cette fonctionalité affichera toujours cette zone, même si elle est vide. Sinon, elle disparaît, au profis de la région primaire (cf. ci-dessous). Remarquons que si l'options de  déboguage pour l'affichage des blocs est activée, la zone s'affichera toujours même si vide.

Région primaire : Définit quelle région au sein de la zone doit apparaître en premier dans le code source et de développer pour remplir l'espace vide si d'autres régions de cette zone sont vides.

Personnaliser le positionnement de la région Cela vous permet de manipuler la mise en place des régions dans cette zone. C’est à dire le poids d’insertion du code source de la région dans la page. Intéressant par exemple pour le référencement afin de mettre en tête de code les contenus pertinents. Cependant, cette option n'est pas à 100% efficace et peut casser le thème (pour l'instant) si l'on décide de mettre la dernière des région en premier dans le code par exemple.

Section : Définit la section dans laquelle la région s’affichera. Pour déplacer une zone vers une autre section, choisissez le nom de la section désirée. Cela évite d'avoir à trop créer de nouvelles régions.

Poids : Définit l'emplacement où sera placée la zone dans la section. Pour déplacer une zone, choisissez un nouveau poids. Les zones sont classés du plus bas vers le plus haut nombre.

Nombre de colonnes : Choisissez le nombre de colonnes pour la zone. Les options par défaut sont 12, 16 et 24. Chaque zone définit son propre nombre de colonnes, ce qui signifie que vous pouvez utiliser un nombre différent de colonnes pour chaque zone de la page. Oméga étant un thème avec grille, la largeur totale est divisée en colonne. Vous définissez donc directement dans les configuration de Oméga la configuration de chacune des zone (largeur de colonnes, gouttières, etc.).

Les classes de zone supplémentaires : Entrez toutes les classes CSS pour être ajouté à la zone de thématisation.

Classes wrapper supplémentaires : Entrez toutes les classes CSS pour être ajouté à l'enveloppe de zone pour la thématisation. Attention :  Ce ne sera utilisée que si l'option de fournir une enveloppe pleine largeur autour de la zone est activée.

Configuration de la région

Les regions sont des zones de votre thème qui recoivent des blocs et du contenu. Les regions disponibles pour un thème sont indiquées dans le fichier .info.
Pour chaque région, les paramètres suivants sont disponibles.

 

Forcer cette région à être rendue : L'activation de cette option affichera toujours cette région, même si elle est vide. Remarquons que si l'options de  déboguage pour l'affichage des blocs est activée, la région s'affichera toujours même si vide.

Zone : Définit la zone où une région sera posée. Pour déplacer une région dans une zone différente, choisissez le nom de la zone désirée.

Préfixe : Choisissez le nombre de colonnes vides qui devraient apparaître devant cette région pour tout décaler.

Largeur : Choisissez le nombre de colonnes que cette région prend au sein de la zone. Le nombre total de colonnes pour les régions dans une zone (plus tout préfixe ou suffixe colonnes) doit être égal au nombre de colonne choisie pour la zone. Vous définissez donc directement dans les configuration de Oméga la largeur de chacune des régions.

Suffixe : Choisissez le nombre de colonnes vides qui doivent apparaître après cette région. Pour décaler également sur la gauche par exemple la colonne de droite.

Poids : Définit l'emplacement de la région  dans la zone. Pour déplacer une région, choisissez un nouveau poids. Les régions sont classés du plus bas vers le plus haut nombre. Vous choisissez donc très facilement pour la zone de contenu si les deux sidebars sont à droite, ou les deux à gauche, etc. Pratique...

Les classes de la région supplémentaires : Entrez toutes les classes CSS pour être ajouté à la région pour la thématisation.

Configurations de débogage

Le système de débogage permet de visualiser la grille et les blocs pour vous aider à visualiser le nombre de colonnes utilisés et le positionnement des zones et des régions.

Il vous est possible d'activer et de désactiver l'affichage des grilles et des blocks directement sur vos pages grace aux outils de debogage placés en haut a droite.



Et voici le résultat : affichage des régions ainsi que des colonnes en arrière-plan : 

Activation des bibliothèques

Dans cet onglet vous pouvez activer et désactiver les bibliothèques javascript sur votre sous-thème. “formalize” et “media queries” sont activées par defaut, Contrairement à “equal heights”.

Les autres bibliothèques personnalisées que vous pourriez ajoutés à votre sous-thème, dans votre fichier .info, apparaîtront également ici.

Voici un aperçu rapide des bibliothèques présentes par défaut dans Omega:

Formalize:

La bibliothèque formalize applique un style sur vos formulaires pour les rendre identique dans tous les navigateurs afin d’éviter le formulaire qui sautent parce que la select list de ie se voulait plus grande! Sont donc chargés deux fichiers: "formalize.css" et "jquery.formalize.js".

Media queries:

Cette bibliothèque fournit des déclencheurs javascript qui permettent à des fonctions personnalisées de s’exécuter en fonction de la taille de l'écran, il ajoute également des classes supplémentaires à la balise body. Il est fortement conseillé de le garder activé.

Equal heights:

Cette bibliothèque donne à chaque bloc à l'intérieur d'une région une hauteur égale au plus grand bloc à l'intérieur de cette région pour les tailles “narrow”, “normal” et ”wide”. Pour utiliser cette fonctionnalité activez «Forcer la hauteur égale pour tous les éléments enfants" en option sur chaque configuration de région où vous en avez besoin. Option qui ne s'affiche que lorsque vous avez activé cette bibliothèque.

Activation des css

Dans le dernier onglet du menu vous avez la possibilité d'activer et de désactiver les fichiers css présents dans le core de Drupal et aussi des fichiers optionnels.

Avec toutes ces indications et en sachant commen créer un sous-thème sous omega, vous êtes prêt à vous lancer !

Cet article est en parti tiré de la documentation officielle Omega sur drupal.org .

3.75
Average: 3.8 (24 votes)
Votre vote: Aucun(e)

Commentaires

Soumis par bruno (non vérifié) le

Bonjour,

Je voudrais savoir svp :
-comment avez-vous fait pour enlever la col du milieu dans tes articles ? et que la col de contenu de gauche s'agrandisse.
-voir cette capture : http://decouvrons-la-france.fr/static/images/miseenpage.jpg
le contenu de la région "sidebar first" pousse la région "contenu" et "sidebar second" vers le bas.
je voudrais mettre la région "contenu" et "sidebar second" juste sous le "header first". Vous pensez que c'est possible et comment ?

Merci

Soumis par Jeremy le
Bonjour, 

Tout ceci se passe dans les configuration du theme au niveau des configuration des zones et des régions et ça concerne le nombre de colonnes que tu applique à celle ci. Si par exemple tu te base sur 12 colonnes et que ton header first fait 12 colonnes, la région sidebar se calera en dessous.

Tu as aussi la possibilité de rajouter un "wrapper" qui englobe ta zone !

Pour désaficher une région il faut aller dans les paramètres "région" de ta zone et appliquer - None - à ta région.

Soumis par slah (non vérifié) le

Juste une question concernant le ruban qui forment l’entête des blocs
Y a t'il un module drupal

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