Use and customize backend layouts

Use backend layouts

The sample project comes with two different layouts. In the page properties, you can use the fields for the backend layouts to control which layout is used.

Sample project 6.2 - Part 10: Using backend layouts
We take care about your privacy. Only when you click here, data from third party servers will be loaded.

You determine which layout is used in the properties of a page. In the "Appearance" tab, you will find two selection fields for the backend layouts. Here you can select the layout used for the current page and for subordinate pages.

If the selection field is empty, the layout of a parent page is inherited.

1) Edit page properties
1) Edit page properties
2) Backend layouts in the "Appearance" tab
2) Backend layouts in the "Appearance" tab
3) if the selection box is empty, it is inherited from the higher-level page
3) if the selection box is empty, it is inherited from the higher-level page

If you select a different backend layout on a page with existing content, the content elements may no longer be visible in the frontend and also in the backend.

In this case, you must correct the assignment to the "Columns" via the list module.

To do this, switch to the "List" backend module.

You will then see all existing content elements in the "Page content" table. Click on the pencil icon to edit a content element.

In the "General" tab, you can select in the "Column" selection box in which area of the layout the content element should appear.

1) Switch to the list module
1) Switch to the list module
2) Select the "Column" in the "General" area
2) Select the "Column" in the "General" area
2) Select the "Column" in the "General" area
2) Select the "Column" in the "General" area

Customize backend layouts

The existing layouts can of course also be customized. In this example, a fourth column is added to the 3 content columns of the start page layout.

Sample project 6.2 - Part 11: Editing backend layouts
We take care about your privacy. Only when you click here, data from third party servers will be loaded.

Switch to the list module and select the "Backend layouts" folder. Here you can see all the backend layouts available in the sample project.

Click on the pencil icon next to the "Start page" layout.

Next to the "Configuration" field, you can start the "Wizard" by clicking on the icon.

A new window opens with the so-called "Grid Wizard".

You can add another column by clicking on the arrow symbol on the right-hand side.

Then click on the right arrow under "Top content" to reconnect the columns in the upper area.

The newly added column must now be edited. To do this, click on the pencil icon in the column.

Then assign a name and a column number. This column number must be unique. Make a note of this number as it will be needed again in a later step.

Next, the Typoscript for the output of the pages must be adapted.

To do this, go to the file list module and edit the file page.10.ts (in version 6.2.2: page.10.setup.ts) in the directory fileadmin/jweilandnet_musterprojekt/Resources/Typoscript/

Add the code for the new column here. Here you have to choose a unique name for this content area, in this example we use contentBox4.

For the value for colPos, add the column number that you assigned in the previous step.

contentBox4 < .contentBox1 
contentBox4 { 
 select.where = colPos = 13 
}

The variable contentBox4 must now also be output in the HTML template.

To do this, edit the homeTemplate.html file in the fileadmin/jweilandnet_musterprojekt/Resources/Fluidtemplates/templates/directory.

You can use a fluid view helper to output the variable at the corresponding position in the template.

<f:format.raw>{contentBox4}</f:format.raw>

To ensure that all four columns are now displayed correctly next to each other, you must change the CSS class used in line 23 of the same Typoscript file.

Change col-md-4 to col-md-3.

Details on these CSS classes can be found in the Bootstrap framework documentation.

This page contains automatically translated content.

Updated: 17.07.2024