Ich möchte auf unserer Webseite auf der Startseite vier Felder mit Kurzinfos aus weiteren Menüpunkten einbinden.
Dazu möchte ich das Template protostar um vier Positionen erweitern.
In Position 9 soll das Modul "Beiträge - Newsflash"
In Position 10, 11 und 12 wahrscheinlich nur Texte oder Hinweis auf eine Bildergalerie.
Kann mir jemand helfen wie ich das umsetzen kann?
Bisher habe ich noch nie an der Grundstrukter eines Templates gebastelt.
Indem du bei den erweiterten Einstellungen des Moduls die passende Bootstrap-Grösse wählst:
Aber das funktioniert nur, wenn die neuen Positionen richtig eingefügt wurden. Wie sieht denn dein Code für die zwei Positionen genau aus?
Kann man die größen der vier Positionen vorab/fest vorgeben. Ähnlich wie bei einer Tabelle, so dass die beiden Positionen nebeneinder die gleiche Höhe und gleiche breite haben.
Das hätte den Nachteil, dass du, wenn du mal nur ein Modul veröffentlichen willst, nicht die ganze Breite ausgenutzt wird. D.h. in so einem Fall hättest rechts vom veröffentlichten Modul eine leere Fläche.
,
Versuche es mal mit diesem Code:
Füge anschliessend das hier ins user.css ein:
@media (min-width: 768px) {
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}So bleibst du flexibel. Jetzt kannst du z.B, auf der Position "position-9" zwei (oder auch 3 oder 4) Module nebeneinander setzten, indem du eine passende Bootstrap-Grösse wählst. Wenn du dort nur ein Modul haben willst, dann musst du die Bootstrap-Grösse einfach wieder auf 0 setzten.
Das Schönste dabei: diese Lösung ist responsive 
.
Es ist zwar noch so, dass die beiden Felder nebeneinander eine unterschiedliche Höhe haben, aber die Höhe der Modulfelder kann man wohl nicht begrenzen, bzw vorbestimmen.
Hmmm... Bei mir haben sie die gleiche Höhe:
Gibt es einen Link zu deiner Seite, wo man es sich mal ansehen kann?
Bei dir hat sich im user.css ein kleiner Fehler eingeschlichen .
Im Moment sieht es so aus:
.navigation .nav-pills > li > a {
font-size:15px;
font-weight:700;
margin:auto;
@media (min-width: 768px) {
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
}Richtig wäre aber das hier:
(Achte auf die schliessenden Klammern)
.navigation .nav-pills > li > a {
font-size:15px;
font-weight:700;
margin:auto;
}
@media (min-width: 768px) {
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}Bitte, gerne 