Zum Inhalt springen

Grid Elements

Erstellt am 28. Oktober 2018 · 2 Antworten · letzte Antwort am 1. November 2018

Tags: Gridelements, Frage

supporthautnahkosmetikch ·

Bin Anfänger und versuche mich mit der Extension "Grid Elements". Zwei Spalten zeigt es tipptopp an, aber bei den 3 Spalten stellt es diese untereinander dar. Irgend etwas stimmt wohl mit der Zuweisung nicht ganz. Kann jemand helfen? Muss ich die "col" anders benennen?
CSS:
.element2cols { overflow:hidden;}
.col1, .col2 { width: 48%; float:left; }
.col1 { margin-right: 2%; }
.col2 { margin-left: 2%; }
.element3cols { overflow:hidden;}
.col3, .col4, .col5 { width:20%; float:left; }
.col3 { margin-right: 2%; }
.col4 { margin-left: 2%; }
.col5 { margin-left: 2%; }
TSCONFIG:
# 2 Spalten
tt_content.gridelements_pi1.20.10.setup {
# ID des gridelements
1 < lib.gridelements.defaultGridSetup
1 {
columns {
# colPos ID
20 < .default
20.wrap = <div class="col1">|</div>
# colPos ID
21 < .default
21.wrap = <div class="col2">|</div>
}
# Optional kann das gesamte Element noch einen wrap bekommen
wrap = <div class="element2cols">|</div>
}
}
# 3 Spalten
tt_content.gridelements_pi1.20.10.setup {
# ID des gridelements
2 < lib.gridelements.defaultGridSetup
2 {
columns {
# colPos ID
30 < .default
30.wrap = <div class="col3">|</div>
# colPos ID
31 < .default
31.wrap = <div class="col4">|</div>
# colPos ID
32 < .default
32.wrap = <div class="col5">|</div>
}
# Optional kann das gesamte Element noch einen wrap bekommen
wrap = <div class="element3cols">|</div>
}
}
SeitenTSconfig
mod.web_layout.BackendLayouts {
exampleKey {
title = Example
icon = EXT:example_extension/Resources/Public/Images/BackendLayouts/default.gif
config {
backend_layout {
colCount = 3
rowCount = 1
rows {
1 {
columns {
1 {
name = Linke Spalte
colPos = 30
allowed {
CType = header,text,textpic,image,textmedia,bullets,table,uploads,menu_abstract,menu_categorized_content,menu_categorized_pages,menu_pages,menu_subpages,menu_recently_updated,menu_related_pages,menu_section,menu_section_pages,menu_sitemap,menu_sitemap_pages,shortcut,list,div,html,login,form_formframework,gridelements_pi1,mask_akkordeon,mask_bildeffekt,mask_tabelle,mask_trenner1,mask_v-card-hautnah
list_type = indexedsearch_pi2,news_pi1,mindshapecookiehint_main,wsflexslider_pi1
tx_gridelements_backend_layout = 3spalten
}
}
2 {
name = Mittlere Spalte
colPos = 31
allowed {
CType = header,text,textpic,image,textmedia,bullets,table,uploads,menu_abstract,menu_categorized_content,menu_categorized_pages,menu_pages,menu_subpages,menu_recently_updated,menu_related_pages,menu_section,menu_section_pages,menu_sitemap,menu_sitemap_pages,shortcut,list,div,html,login,form_formframework,gridelements_pi1,mask_akkordeon,mask_bildeffekt,mask_tabelle,mask_trenner1,mask_v-card-hautnah
list_type = indexedsearch_pi2,news_pi1,mindshapecookiehint_main,wsflexslider_pi1
tx_gridelements_backend_layout = 3spalten
}
}
3 {
name = Rechte Spalte
colPos = 32
allowed {
CType = header,text,textpic,image,textmedia,bullets,table,uploads,menu_abstract,menu_categorized_content,menu_categorized_pages,menu_pages,menu_subpages,menu_recently_updated,menu_related_pages,menu_section,menu_section_pages,menu_sitemap,menu_sitemap_pages,shortcut,list,div,html,login,form_formframework,gridelements_pi1,mask_akkordeon,mask_bildeffekt,mask_tabelle,mask_trenner1,mask_v-card-hautnah
list_type = indexedsearch_pi2,news_pi1,mindshapecookiehint_main,wsflexslider_pi1
}
}
}
}
}
}
}
}
}

Teisinger ·

Da du ja schreibst du bist Anfänger, kann ich das denke ich erwähnen:
also wenn du min. TYPO3 7 und FLUID im Einsatz hast, schreibt man das so eigentlich nicht mehr - HTML gehört in die FLUID Templates. Orientieren wie es etwas besser gemacht werden kann, kannst du dich an meinem Skeleton: https://github.com/groundstack-org/typo3themeskeleton

z. B. für BE PageTS:
https://github.com/groundstack-org/typo3themeskeleton/blob/master/Configuration/PageTS/PageTsFiles/0200_GridelementsLayout.typoscript

z. B. das TypoScript (ganz unten):
https://github.com/groundstack-org/typo3themeskeleton/blob/master/Configuration/TypoScript/Template/00120_Extensions.typoscript

z. B. dann die Templates:
https://github.com/groundstack-org/typo3themeskeleton/tree/master/Resources/Private/Extensions/gridelements/Html