it-swarm.com.de

Gantry-Rasterlayouts

Ich erstelle eine Joomla 3-Site mit dem neuesten Gantry-Framework. Derzeit befindet sich die Site noch auf meinem lokalen Entwickler-Server, aber ich glaube nicht, dass der Site-Link für diese Frage erforderlich sein wird.

Ich verwende also die Kopfzeilenpositionen a, b und c für das Logo, das Menü und die sozialen Symbole (in dieser Reihenfolge). Wenn ich die Kopfzeilenpositionen auf der Registerkarte Layouts des Vorlagen-Managers bearbeite, ist die kleinste Position, die es mir ermöglicht, Position c (an der sich meine sozialen Symbole befinden) oder eine beliebige Position in diesem Fall festzulegen, 2. Es handelt sich also um RT-Grid-2. Ich brauche nur eine Rastergröße für die Breite des Blocks meiner sozialen Symbole (rt-grid-1).

Wie kann ich diese Größenänderung in der Vorlage erzwingen?

Ich erstelle seit einigen Jahren Joomla-Websites, habe aber immer ein anderes Framework zum Erstellen der benutzerdefinierten Vorlagen verwendet. Ich bin kürzlich zu Gantry gewechselt, da ich in einigen Punkten ein besseres Framework finde, aber ich lerne immer noch alles, was damit zu tun hat.

3
adadeacon

Nicht genau die Antwort auf Ihre Frage, wie man rt-grid-1 Zum Arbeiten zwingt, aber hier ist ein anderer Ansatz:

Sie können Ihre Social-Media-Symbole an der Position header-b (Wie im Hauptmenü) veröffentlichen und mit position:absolute Positionieren. Richten Sie Ihr Modul mit einem Modulklassen-Suffix (z. B. socialmedia) aus und gehen Sie folgendermaßen vor:

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

(Ändern Sie top & right in die gewünschte Position).

Möglicherweise müssen Sie Ihrem Hauptmenü auch CSS hinzufügen, wenn die Schaltflächen für soziale Medien stören, da sich die Position header-b Bis zum rechten Rand Ihrer Seite erstreckt. Sie sollten in der Lage sein, das Div, das Ihr Menü enthält, mit #rt-header .menu-block Anzuvisieren.

1
johanpw

Ich glaube, dies ist in der Datei template-options.xml Im Stammverzeichnis Ihrer Vorlage definiert (also JOOMLA-ROOT/templates/TEMPLATE-NAME/template-options.xml).

Für jede Position sehen Sie ein Feld, das in dieser Datei definiert ist. Innerhalb dieser Felddefinition gibt es zwei Elemente: schemas und words. Schemas definiert die Anzahl der möglichen Spalten (wenn Sie also nur bis zu 3 Spalten zulassen möchten, lautet der Wert 1,2,3). Words definiert die zulässigen Spaltenbreiten (normalerweise 2,3,4,5,6,7,8,9,10, Daher kann nicht 1 Spaltenbreite angegeben werden).

Sie sollten in der Lage sein, 1 Und 11 Zur Liste hinzuzufügen, um diese Werte zuzulassen. Sie können die Standardeinstellung auch ändern, wenn Sie diese Vorlage auf mehreren Websites verwenden möchten.

4
David Fritsch

Die schnellste Möglichkeit, eine nicht standardmäßige Spaltenbreite in Gantry zu implementieren, besteht darin, das CSS zu überschreiben.

Im folgenden Beispiel wurden zwei Spalten in # rt-top definiert und in den Vorlageneinstellungen auf ein Verhältnis von 4: 8 festgelegt.

Dies ergibt eine Spaltenbreite von 33,3333% für "rt-grid-4" und eine Spaltenbreite von 66,6667% für "rt-grid-8" in der CSS:

firebug

Tipp: Verwenden Sie Firebug oder ähnliches, um die entsprechenden CSS-Selektoren zu ermitteln.

Spaltenbreiten können in der benutzerdefinierten CSS-Datei überschrieben werden. Erstellen oder bearbeiten Sie die Datei unter /templates/rt_[template-name]/css/rt_[template-name]-custom.css und fügen Sie Code wie den folgenden oder einen ähnlichen hinzu. Geben Sie dabei an, welche prozentualen Breiten Sie möchten. Gemäß dem folgenden Beispiel können Sie Medienabfragen einschließen, um das Überschreiben auf bestimmte Bildschirmbreiten zu beschränken oder die Prozentsätze auf verschiedenen Bildschirmbreiten zu variieren:

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