Kedves mester sminkerek!
Amióta ismerem a drupalt a Zen sminkből indulok ki. Viszont most először gondoltam, hogy alaposabban igénybe veszem az "új" Zen-gridet is, ha már úgyis tartalmazza. Azaz a teljes layoutot ezzel szeretném kialakítani.
Viszont már szinte a legelején buktatóba futottam, amire se google, se drupal.org keresés nem volt segítségemre.
A kezdőlap egy egyedi panels layoutra épülne, ez megvan.
Amit szerettem volna:
- először a fő vázat kialakítani (= panel régiók oszlopokba és sorokba rendezése) (ez is meg van)
- a kisebb egységeket kialakítani a fő vázon belül. (pl. panel régióban elhelyezkedő Views Tartalomtábla és annak mezői. Itt akadtam el.
Példa:
@import "zen";
@import "zen/background";
$zen-column-count: 16; // Set the total number of columns in the grid.
$zen-gutter-width: 24px;
- Két panel régió egy sorban helyezkedik el, egyik 12 oszlopot ível át, a másik 3-at. Közöttük egy oszlop üresen marad.:
.panel-row-6-hirek-top .col-1{ @include zen-grid-item(12,1); } .panel-row-6-hirek-top .col-2{ @include zen-grid-item(3,14); }
Ez eddig tiszta és tökéletesen működik.
- az első régióba (ami 12 oszlopot fed le) szeretnék elhelyezni egy nézetet, és a benne lévő mezőket az alap 16 oszlopos layoutra ráilleszteni:
.view-display-id-panel_pane_hir_1{ .front-node-lead{ @include zen-grid-item(5,1); } .front-node-title{ @include zen-grid-item(5,7); } }
Viszont itt jön a buktató. A nézetet tartalmazó panel már grid-item, a maga 12 oszlopával, a benne lévő következő grid item (pl. front-node-title) pedig akkor fogja lefedni a szülő 12 oszlopát, ha 16(!) oszlop lefedését adom meg. Azaz innentől sehogyan se fog ráilleszkedni az eredeti layoutra. (mert ha pl. 5 oszlop lefedését adom meg az már nem az eredeti 16-os felosztás 5 oszlopának fog megfelelni, hanem (12/16)*5
Gondolom erre találták ki a "zen-nested-container()" -t de semmi hatással nem volt a történésre.
Próbáltam:
.panel-row-6-hirek-top .col-1{
@include zen-grid-item(12,1);
@include zen-nested-container();
}
Google ezt is adta javaslatnak:
.panel-row-6-hirek-top .col-1{
@include zen-grid-item(12,1);
@include zen-nested-container();
$zen-column-count: 12;
}
Próbáltam már több helyre is betenni a nested-container részt, de az oszlopok elosztásán nem változtatott.
Valaki tapasztaltabb biztos használta már komplexebb dolgokra is ezt a gyöngyszemet, kérlek segítsetek, hogy mit nem látok.
Köszönöm.