Customize layout

Table of contents

Customize images in the header area

Images that are read from the page properties of the respective pages can be displayed in the header area of the sample project. These images are also inherited by subpages.

Sample project 6.2 - Part 06: Images in the header area
We take care about your privacy. Only when you click here, data from third party servers will be loaded.

To add an image, edit the properties of a page. To do this, click on the icon in front of the page name in the page tree and select "Edit from" in the context menu.

In the "Resources" tab, create a "New relation" and select an image in the element browser.

Then save the page again.

1) Edit page properties
1) Edit page properties
2) Create a "New relation" in the "Resources" tab
2) Create a "New relation" in the "Resources" tab
3) Select an image in the element browser
3) Select an image in the element browser
4) The image has been added. Then save!
4) The image has been added. Then save!

Change fonts and colors

The fonts and colors used are defined by CSS in the bootstrap.css file and can also be changed here.

Sample project 6.2 - Part 07: Changing fonts and colors
We take care about your privacy. Only when you click here, data from third party servers will be loaded.

Open the file bootstrap.css in the directory fileadmin/jweilandnet_musterprojekt/Resources/Css/

The font used and the font color are defined from line 302.

body { 
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 font-size: 1em; 
 line-height: 1.428571429; 
 color: #333333; 
 background-color: #ffffff; 
}

To change the font and the color of the headings, you will find the corresponding definitions in bootstrap.css from line 453.

Highlight content elements in color

Content elements can be highlighted in color in two different ways. The settings are made in the respective content element in the "Appearance" tab via the "Indentation and frame" selection box.

Sample project 6.2 - Part 08: Highlight content blocks in color
We take care about your privacy. Only when you click here, data from third party servers will be loaded.

Edit the desired content element and switch to the "Appearance" tab.

In the "Indentation and frame" selection box, you can choose between "Frame 1" and "Frame 2".

Frame 1 = light grey background
Frame 2 = dark grey background, light font color

1) Edit element
1) Edit element
2) Select frame 1 or 2
2) Select frame 1 or 2

The colors of the two boxes can be changed using CSS. In the file musterprojekt_styles.css you will find the corresponding definitions for the classes .csc-frame-frame1 and.csc-frame-frame2from line 285 onwards

.csc-frame-frame1 { 
 background-color: #f5f5f5; 
 padding: 1.5em; 
 margin-bottom: 1.5em; } 
.layout2 .csc-frame-frame1 {min-height: 20em;} 
.csc-frame-frame2 { 
 background-color: #414141; 
 padding: 1.5em; 
 margin-bottom: 1.5em; 
 color: #fff; 
}

Note on image sizes in content elements

In order to standardize the display of images in the layout and to facilitate the correct display in a responsive layout, the fields for specifying the width and height of the images have been deactivated in the "Text & image" and "Images" content elements.

You can reactivate these fields by setting the values to 0 in the following lines in the file fileadmin/jweilandnet_musterprojekt/Resources/TSConfig/page.tsconfig.ts:

 ## Content Elements: remove width and height fields for images 
TCEFORM.tt_content { 
 imagewidth.disabled = 1 
 imageheight.disabled = 1 
}

However, this change may require adjustments to the CSS files.

This page contains automatically translated content.

Updated: 17.07.2024