web-dev-qa-db-fra.com

Dispositions de grille de portique

Je crée un site Joomla 3 avec le dernier framework Gantry. Actuellement, le site est toujours sur mon serveur de développement local, mais je ne pense pas que le lien de site sera nécessaire pour cette question.

Donc, j'utilise les positions d'en-tête a, b et c pour le logo, le menu et les icônes sociales (dans cet ordre). Lorsque je modifie les positions d'en-tête dans l'onglet Layouts du gestionnaire de modèles, le plus petit me permet de faire la position c (où sont mes icônes sociales) ou n'importe quelle position d'ailleurs est 2. Donc, c'est rt-grid-2. J'ai besoin que la largeur du bloc de mes icônes sociales ne soit qu'une seule taille de grille, (rt-grid-1).

Comment puis-je forcer ce dimensionnement dans le modèle?

Je crée des sites Web Joomla depuis quelques années maintenant, mais j'ai toujours utilisé un autre cadre pour créer les modèles conçus sur mesure. Je suis récemment passé à Gantry car je le trouve meilleur à plusieurs égards, mais j'apprends toujours tout ce qu'il y a à faire.

gantry
3
adadeacon

Pas exactement une réponse à votre question sur la façon de forcer rt-grid-1 au travail, mais voici une approche différente:

Vous pouvez publier vos icônes de médias sociaux sur le header-b position (identique à celle de votre menu principal) et positionnez-la à l'aide de position:absolute. Ciblez votre module en utilisant un suffixe de classe de module (par exemple, socialmedia) et procédez comme suit:

#rt-header .socialmedia {
    position: absolute;
    top: 0;
    right: 0;
}

(Modifiez top & right en fonction de votre position).

Vous devrez peut-être aussi ajouter des CSS à votre menu principal si les boutons de médias sociaux interfèrent, car le header-b _ La position s'étendra jusqu'au bord droit de votre page. Vous devriez pouvoir cibler la div contenant votre menu en utilisant #rt-header .menu-block.

1
johanpw

Je crois que cela est défini dans le template-options.xml fichier dans le répertoire racine de votre modèle (donc JOOMLA-ROOT/templates/TEMPLATE-NAME/template-options.xml).

Pour chaque position, vous verrez un champ défini dans ce fichier. Dans cette définition de champ se trouvent deux éléments: schemas et words. Schémas définit le nombre de colonnes possibles (donc, si vous ne souhaitez autoriser que 3 colonnes au maximum, la valeur sera 1,2,3). Les mots définissent les largeurs de colonne autorisées (généralement 2,3,4,5,6,7,8,9,10, d’où la raison pour laquelle vous ne pouvez pas avoir 1 largeur de colonne).

Vous devriez pouvoir ajouter 1 et 11 à la liste pour autoriser ces valeurs. Vous pouvez également modifier la valeur par défaut si vous prévoyez d'utiliser ce modèle sur plusieurs sites Web.

4
David Fritsch

Le moyen le plus rapide d'implémenter une largeur de colonne non standard dans Gantry consiste à remplacer le CSS.

Dans l'exemple ci-dessous, deux colonnes ont été définies dans # rt-top et définies selon un rapport 4: 8 dans les paramètres du modèle.

Il en résulte une largeur de colonne de 33,3333% pour "rt-grid-4" et une largeur de colonne de 66,6667% pour "rt-grid-8" dans le CSS:

firebug

Conseil: Utilisez Firebug ou similaire pour définir les sélecteurs CSS appropriés.

Les largeurs de colonne peuvent être remplacées dans le fichier CSS personnalisé. Créez ou éditez le fichier à /templates/rt_[template-name]/css/rt_[template-name]-custom.css et ajoutez le code suivant ou similaire, en spécifiant le pourcentage de largeur souhaité. Selon l'exemple ci-dessous, vous pouvez inclure des requêtes de support pour limiter le remplacement à certaines largeurs d'écran ou faire varier les pourcentages sur différentes largeurs d'écran:

@media (min-width: 768px) {
  #rt-top .rt-grid-4 {
    flex-basis: 10%
  }
  #rt-top .rt-grid-8 {
    flex-basis: 90%
  }
}
0
Neil Robertson