FE Rahmen für Inhaltselemente erzeugen mit FLUID

Einen Rahmen um mehrer Inhaltselemente nebeneinander zu positionieren

Rasterelemente sind auch mit FLUID, wenn nicht sogar komfortabler als mit TemplatVoila zu erstellen.Zuerst installieren wir die TYPO3 Erweiterung "gridelements" nach Anleitung, das TS Template zu inkludieren nicht vergessen:

Mit dieser TYPO3 Extension kann man Rasterelemente im BE erzeugen wie man es mit BE Layouts machen kann.

Ist die Erweiterung korrekt installiert so kann man nun im BE einen neuen Datensatz erzeugen dieser heisst "CE Backend Layout".
Wir geben dem Datensatz einen Namen und gehen dann auf "Raster-Konfiguration", dort klicken wir uns den Rahmen den wir brauchen zusammen.
In unserem Fall einen einfachen 50/50 Rahmen also einer mit nur 2 Bereichen die nebeneinander sind. Die Bereiche können übrigens auch übereinander sein.
Danach sieht die Konfiguration so aus:

backend_layout {
  colCount = 2
  rowCount = 1
  rows {
    1 {
      columns {
        1 {
          name = links
          colPos = 1
        }
        2 {
          name = rechts
          colPos = 2
        }
      }
    }
  }
}
Raster mit der TYPO3 Extension CE Backend Layout

Als nächstes müssen wir den Rahmen mit Typoscript konfigurieren, das habe ich so gemacht:

# Gridlayout
tt_content.gridelements_pi1.20.10.setup {
  # ID of gridelement
  #1 < lib.gridelements.defaultGridSetup
  1 {
    columns {
      # colPos ID
      1.renderObj = < tt_content
      1.wrap = <div class="colone col">|</div>
      
      # colPos ID
      2.renderObj = < tt_content
      2.wrap = <div class="coltwo col">|</div>            
    }
    wrap = <div class="contentRow">|</div>
  }
}
Typoscript für den Rahmen

jetzt noch ein kleines Stück CSS und schon steht unser Rahmen und kann unter den Inhaltselementen ausgewählt werden.

Nun ist es natülich ein leichtes die restlichen notwendigen Rahmen zu erzeugen wie zB den 33/33/33, den 30/70 und natürlich 25/25/25/25, etc

.col {
    padding:0px;
    margin:0px;
    float: left;
    width: 50%;
}
CSS für denn Rahmen