CorporateDesigner en 20231116

Security information
(Unified) 1
General Data Protection
Regulations (GDPR) 2
SIMATIC HMI Notes on use 3

SIMATIC WinCC Unified
Corporate Designer 4
WinCC Unified (TIA Portal)
SIMATIC WinCC Unified Corporate
Designer Configuring the HMI style 5
Operating Manual
Online documentation
11/2023
Online documentation
Legal information
Warning notice system
This manual contains notices you have to observe in order to ensure your personal safety, as well as to prevent
damage to property. The notices referring to your personal safety are highlighted in the manual by a safety alert
symbol, notices referring only to property damage have no safety alert symbol. These notices shown below are
graded according to the degree of danger.
DANGER
indicates that death or severe personal injury will result if proper precautions are not taken.
WARNING
indicates that death or severe personal injury may result if proper precautions are not taken.
CAUTION
indicates that minor personal injury can result if proper precautions are not taken.
NOTICE
indicates that property damage can result if proper precautions are not taken.
If more than one degree of danger is present, the warning notice representing the highest degree of danger will
be used. A notice warning of injury to persons with a safety alert symbol may also include a warning relating to
property damage.
Qualified Personnel
The product/system described in this documentation may be operated only by personnel qualified for the specific
task in accordance with the relevant documentation, in particular its warning notices and safety instructions.
Qualified personnel are those who, based on their training and experience, are capable of identifying risks and
avoiding potential hazards when working with these products/systems.
Proper use of Siemens products
Note the following:
WARNING
Siemens products may only be used for the applications described in the catalog and in the relevant technical
documentation. If products and components from other manufacturers are used, these must be recommended or
approved by Siemens. Proper transport, storage, installation, assembly, commissioning, operation and maintenance
are required to ensure that the products operate safely and without any problems. The permissible ambient
conditions must be complied with. The information in the relevant documentation must be observed.
Trademarks
All names identified by ® are registered trademarks of Siemens Aktiengesellschaft. The remaining trademarks in
this publication may be trademarks whose use by third parties for their own purposes could violate the rights of
the owner.
Disclaimer of Liability
We have reviewed the contents of this publication to ensure consistency with the hardware and software
described. Since variance cannot be precluded entirely, we cannot guarantee full consistency. However, the
information in this publication is reviewed regularly and any necessary corrections are included in subsequent
editions.
Siemens Aktiengesellschaft Document order number: Online documentation Copyright © Siemens 2023.
Digital Industries Ⓟ 11/2023 Subject to change All rights reserved
Postfach 48 48
90026 NÜRNBERG
GERMANY
Table of contents
1 Security information (Unified) ............................................................................................................... 5

2 General Data Protection Regulations (GDPR) ........................................................................................ 7
3 Notes on use .......................................................................................................................................... 9
4 SIMATIC WinCC Unified Corporate Designer........................................................................................ 11
5 Configuring the HMI style.................................................................................................................... 13
5.1 Managing a project ............................................................................................................ 13
5.1.1 Opening the Corporate Designer ........................................................................................ 13
5.1.2 Creating a project .............................................................................................................. 14
5.1.3 Managing a project via the project card .............................................................................. 16
5.1.4 Opening a project .............................................................................................................. 17
5.1.5 Saving a project ................................................................................................................. 18
5.1.6 Exporting a project ............................................................................................................ 19
5.2 Managing styles................................................................................................................. 19
5.2.1 Creating a style .................................................................................................................. 19
5.2.2 Managing a style via the style card ..................................................................................... 22
5.2.3 Importing a style into the Corporate Designer..................................................................... 23
5.2.4 Exporting a style from the Corporate Designer.................................................................... 25
5.3 Managing a font group ...................................................................................................... 26
5.3.1 Creating a font group ......................................................................................................... 26
5.3.2 Managing a font group via the font group card ................................................................... 27
5.3.3 Adding fonts to a font group .............................................................................................. 28
5.4 Managing color palettes..................................................................................................... 30
5.4.1 Creating a color palette ...................................................................................................... 30
5.4.2 Managing a color palette via the color palette card ............................................................. 32
5.4.3 Adding colors to the color palette....................................................................................... 32
5.4.4 Comparing color palettes ................................................................................................... 35
5.5 Configure style items.......................................................................................................... 36
5.5.1 Editor - Overview ............................................................................................................... 36
5.5.2 Assigning a font group and color palette to the style........................................................... 39
5.5.3 Use style item .................................................................................................................... 41
5.5.4 Configuring properties ....................................................................................................... 44
5.5.5 Assigning a color to the property........................................................................................ 45
5.5.6 Assigning a font to the property ......................................................................................... 50
5.5.7 Assigning a different font group and color palette to the style ............................................. 54
5.5.8 Use rendering template...................................................................................................... 57
5.6 Importing a style into the TIA Portal ................................................................................... 59
SIMATIC WinCC Unified Corporate Designer

Operating Manual, 11/2023, Online documentation 3
Table of contents

4 Operating Manual, 11/2023, Online documentation
Security information (Unified) 1
Cybersecurity information
Siemens provides products and solutions with industrial cybersecurity functions that support
the secure operation of plants, systems, machines, and networks.
In order to protect plants, systems, machines, and networks against cyber threats, it is
necessary to implement – and continuously maintain – a holistic, state-of-the-art industrial
cybersecurity concept. Siemens' products and solutions constitute one element of such a
concept.
Customers are responsible for preventing unauthorized access to their plants, systems,
machines and networks. Such systems, machines and components should only be connected
to an enterprise network or the internet if and to the extent such a connection is necessary
and only when appropriate security measures (e.g. firewalls and/or network segmentation)
are in place.
For more information on possible protective measures with regard to industrial cybersecurity,
visit:
Industrial cybersecurity (https://www.siemens.com/global/en/products/automation/topic-
areas/industrial-cybersecurity.html)
Siemens' products and solutions undergo continuous development to make them more
secure. Siemens strongly recommends applying product updates as soon as they are
available and always using only the latest product versions. Use of product versions that
are obsolete or no longer supported may increase exposure to cyber threats.
To stay informed about product updates at all times, subscribe to the Siemens Industrial
Cybersecurity RSS Feed under:
Siemens ProductCERT (https://www.siemens.com/global/en/products/services/cert.html)

Security information (Unified)

General Data Protection Regulations (GDPR) 2
Privacy Policy
Siemens complies with the data protection guidelines, in particular the principle of data
minimization (privacy by design). For this SIMATIC product, this means that the product does not
process/store any personal data.

General Data Protection Regulations (GDPR)

Notes on use 3
Contents
Information that could not be included in the current documentation and important information
about product features.
IO field
The IO field does not use a rendering template from the user-defined style in TIA Portal and
Unified Panel. The user-defined rendering template is used properly during display in the Unified
PC Runtime and simulation.
Font settings
Font settings "Italic", "Underlined", "Strikethrough", which are configured in a user-defined style,
are lost both when importing to TIA Portal and when importing back to the Corporate Designer.
Saving, closing and reopening the project

It is recommended to save the project in the Corporate Designer, then close and reopen it before
changing the assigned color palette or font group for one of the styles in the project.

Notes on use

SIMATIC WinCC Unified Corporate Designer 4
SIMATIC WinCC Unified Corporate Designer is a stand-alone application that is aligned to TIA
Portal. You can design your user interface in the TIA Portal projects using an individual style.
The SIMATIC WinCC Unified Corporate Designer provides you with a graphical editor for
displaying and interacting with the designed style items. You create the projects in which
you design and reuse the WinCC Unified screen objects, such as buttons, sliders or trend
control, according to your own graphical requirements.
Delivery and installation

SIMATIC WinCC Unified Corporate Designer is delivered standalone as a zip file.
You unzip the file on your computer and start the installation of the application by clicking
"WinCC Unified Corporate Designer Setup.exe".
Note
When you uninstall the application, the unsaved Corporate Designer projects are lost. Save your
projects by exporting them before uninstalling the application or installing a higher version. You
can import the saved files in the higher version.
Using your own style in the TIA Portal

SIMATIC WinCC Unified Corporate Designer generates a Corporate Design file with your style in
the ".cd19" format for the TIA Portal V19.
You import the corporate design file into the WinCC Unified Engineering System. You
download the defined style items to Unified PC, Unified Comfort Panel and Unified Basic
Panel and use them in the screens of your TIA Portal project.
In the Engineering System and in Runtime, the screen objects are displayed according to the
style you created with the Corporate Designer.
Note
Currently, the .cd19 files are not protected against manipulation. Please ensure the integrity of
these files yourself.
Style, its contents and relations

A style contains a collection of style items, each of which is bound to an screen object type.
Therefore, you can define several style items for a screen object type. There is a default style item
for each screen object type.

A style item contains:

• Configured property values, e.g. background color, line thickness, font.
• Reference to a rendering template
A rendering template is a file that details the appearance of the element based on .svghmi
technology. Rendering templates are also bound to screen object types. Therefore, a style
item of the "Button" type can contain a reference to a rendering template of the "Button"
type. Different style items can use the same rendering template and differ only in property
values.
Basic objects do not have rendering templates.
In addition, a style contains:
• System property values, for example, height of the title area from the screen window.
• System style items, e.g. scroll bar
• System rendering templates, e.g. tooltip
Currently, you can use the Corporate Designer to define and edit the style items. You can
change the reference to a rendering template by selecting that rendering template from the
existing rendering templates. You cannot change the rendering templates.
Corporate Designer does not currently provide the ability to modify system objects or system
properties.

Configuring the HMI style 5
5.1 Managing a project
5.1.1 Opening the Corporate Designer

You have installed the SIMATIC WinCC Unified Corporate Designer application. After the
installation, there is a shortcut on the desktop with which you can start the application.
Opening the Corporate Designer application

Start the application. After starting the application, the home page is displayed:
The project page displays all the projects that you have saved to the local storage location.
After installation, the start page is displayed empty.
Creating a project
You have the following options to create a project in the application:
• Importing a project as a ".cdp" file
• Creating a new project

Configuring the HMI style
Note
Ensure that you import projects from trusted sources. Projects and the rendering templates they
contain can transfer content to the runtime system that can cause undesirable behavior.
5.1.2 Creating a project

You have opened the home page of the Corporate Designer application. The project page is
displayed. In this step, you create the first project.

Creating a project
To create a project, follow these steps:
1. Click "Create New Project".
The "Create New Project" dialog opens.

2. Give the project a unique name.

3. You can add a project description.

4. Click "OK".
The project is created.
The project card displays the following data:

• User name
• Date of creation
• Last update
• Description of the project
5.1.3 Managing a project via the project card

You can manage the project via the project card.
Managing a project
Using the shortcut menu under the three dots on the project card, you can:
• Editing a card
• Deleting a project

Editing a project card

If you select the "Edit" option on the project card, you can change the name or description of the
project.
Deleting a project
If you select the "Delete" option on the project card, the project is irretrievably deleted.
5.1.4 Opening a project

In this step, you open the project.

Opening a project
To open a project, click the project name in the project card.
The page with the following tabs is displayed:

• Styles
• Fonts
• Color palettes
Using the icons on the left side of the interface you can:
• Save project to the application
• Export project
• Return to the project overview
• Close project
After you open the project, you create or import a style.
5.1.5 Saving a project

In this step, you will save the project.

5.2 Managing styles
Saving a project
To save the project, proceed as follows:
1. Click the icon for saving.
The project is saved in the application.
If you do not save the project manually, the unsaved files are lost when you close the project.
A warning message is displayed when you switch projects.
5.1.6 Exporting a project

In this step, you export the project.
Exporting a project
To export the project, do the following:
1. Click the icon for exporting.
A ".cdp" file is created.
2. Save the file to a local storage location.
You can import the project into another instance or version of the Corporate Designer
application. If you have deleted the project in the current version of the application, you can
re-import the project into the same version.
5.2 Managing styles
5.2.1 Creating a style

In the application "Corporate Designer", the pre-defined Siemens styles are installed by default.
You know these styles from TIA Portal: Bright, Enhanced and Dark style.
In this step, you create your own style based on the available styles.

5.2 Managing styles
For the custom style, you can create one or more color palettes and one or more font groups.
A description of how to create the color palettes and font groups is provided in the following
sections.
System-defined rendering templates

The application contains a number of system-defined rendering templates for each screen object
type. This gives you the ability to efficiently create variants of the default style items.
Adding styles from external sources

You can also import existing styles into your project. You can further edit the imported style or
create your own styles based on the style. If the imported style contains additional rendering
templates, you can use the rendering templates in your own styles.
A "SiemensStyleLibrary" is offered for download at Siemens Industry Online Support. The
library contains a wide selection of the additional rendering templates.
"Styles" tab
In the "Styles" tab you can:
• Create new style - based on the existing styles in the application.
• Import styles - "SiemensStyleLibrary" or an exported style
In the "Styles" tab, you can see all the styles you have created in the application or imported
into the application. If you are creating a new project, there are no styles available yet.

5.2 Managing styles
Creating a style
To create a style, follow these steps:
1. Click the plus at "Create New Style".
The "Create New Style" dialog opens.
2. Give the style a unique name. The style is loaded into the TIA Portal with this name.
3. You can add a description.

5.2 Managing styles
4. Select a TIA Portal default style:

– Extended style
– Bright style
– Dark style
If there are already other styles in the project, the styles will also be displayed in the list. You
can also use a user-defined style as the basis for the new style.
5. Click "OK".
The style is created.
The style card displays the following data:

• Name of the style
• Object version (currently not used)
• Runtime version
• Description of the style
5.2.2 Managing a style via the style card

You can manage the style via its card.
Managing styles
Using the shortcut menu under the three dots on the style card, you can:
• Editing a card
• Deleting a style
• Exporting a style

5.2 Managing styles
Editing a style card

If you select "Edit", you can change the name or description of the style.
Deleting a style
If you select "Delete", the style is deleted from the "Styles" tab.
Exporting a style
If you select "Export", a ".cd19" file is created. You save the file to a local storage location.
You can find more information in the section Exporting a style from the Corporate Designer
(Page 25).
5.2.3 Importing a style into the Corporate Designer

In this step, you import an existing style. You can select a .cd19 file from the local storage
location and integrate it into Corporate Designer. Once the style is imported, the style behaves
like any other style in the editor.

5.2 Managing styles
Importing a style
To import a style, follow these steps:
1. Click the "Import style" icon.
2. Your storage location opens. Select a .cd19 file.
3. A card with the name of the imported style, e.g. "SiemensStyles", is displayed.

5.2 Managing styles
Note
Rendering templates referenced by the imported style are imported into the Corporate Designer
project.
If a rendering template in an imported style has the same name as another rendering template
in the Corporate Designer project, the rendering template is not imported. You can configure the
style items in the imported style using the existing rendering template.
Note
Ensure that you import the styles from trusted sources. Styles and the rendering templates they
contain can transfer content to the runtime system that can cause undesirable behavior.
5.2.4 Exporting a style from the Corporate Designer

You have created your style. In this step; you export the style. You can integrate the exported
style in the TIA Portal project and use it for screen objects.
In the Engineering System and in Runtime, the objects are displayed according to the style
you have created with the Corporate Designer.
Exporting a style
To export the configured style, proceed as follows:
1. Click the three dots in the style card.
The menu opens.
2. Click "Export".
A ".cd19" file is created for TIA Portal V19. Select a local storage location for the style file.
3. You can save the style directly to the corresponding target directory in the TIA Portal project
(e.g. "C:\Documents\Automation\Project_1\UserFiles\Styles") to simplify the import.
You can find more information in the section Importing a style into the TIA Portal (Page 59).

5.3 Managing a font group
Note
• TIA Portal works with hexadecimal values for colors. All color definitions from color palettes
are converted to hexadecimal values during an export.
• Font groups are converted to direct font references during an export.
• Only the rendering templates used by the generated style are exported.
5.3.1 Creating a font group

A font group represents a collection that can contain multiple font definitions. A Corporate
Designer project can contain multiple font groups. You can find all font groups in the "Fonts" tab.
You can pre-define the fonts in the font groups. You can use any fonts that are installed in
your Windows settings.
Within a project, you can switch font groups and thus globally change all affected properties
for configured objects. The font definitions in individual font groups are retained.
You can use the font definitions from the font groups repeatedly in your own styles or
customize the style items in the editor.
"Fonts" tab
The "Fonts" tab displays all the font groups you have created in the project. If you are creating a
new project, there are no font groups available yet.
Creating a font group

To create a font group, follow these steps:
1. Click the plus sign next to "Create New Font Group List".
The "Create New Font Group" dialog opens.

2. Give the font group a unique name.

3. Select whether the font group is based on another existing font group.
If you select an existing font group, all font definitions in the selected font group are
transferred to the newly created font group.
4. Click "OK".
The font group is created.
The card displays the following data:

• Name of the font group
• Number of font definitions contained
You can create multiple font groups with differently defined fonts.
5.3.2 Managing a font group via the font group card

You can manage the font group via its card.
Managing a font group

In the shortcut menu under the three dots on the card, you can use these commands for the font
group:
• Rename
• Delete

Renaming a font group

When you rename a font group that is used in a style, all references within the style are
automatically updated.
Deleting a font group

If you delete a font group that is used in a style, a warning message is displayed. You can delete
only the font group that is not used in any style in the project.
5.3.3 Adding fonts to a font group

In this step, you add fonts to the font group. You can create multiple font groups with differently
defined fonts.

Adding fonts to a font group

To add fonts to the font group, do the following:
1. Click the font group name in the Font Group card.
The "Font Group Editor" opens

2. Click the plus.
The "Add Font" dialog opens.

5.4 Managing color palettes
3. Select a font and its properties.

4. Click "Save" to save the settings.
The editor with the added fonts is displayed.
In the editor, you obtain an overview of the settings you have made. You can edit or delete
the fonts again.
5.4.1 Creating a color palette

A color palette represents a collection that can contain multiple color definitions. A Corporate
Designer project can contain several color palettes. All color palettes can be found in the "Color
Palettes" tab.
You can pre-define the colors in the color palettes. Within a project, you can switch color
palettes and thus globally change all affected properties for configured objects. The color
definitions are retained in individual color palettes.
You can use the color definitions from the color palettes repeatedly in your own styles to
customize the screen objects.
"Color Palettes" tab

The "Color Palettes" tab shows you all the color palettes you have created in the application. If
you are creating a new project, there are no color palettes available yet.

Creating a color palette

To create a color palette, follow these steps:
1. Click the plus sign next to "Create New Color Palette".
The "Create New Color Palette" dialog opens.

2. Give the color palette a unique name.
3. Select whether the color palette is based on another existing color palette.
If you select a color palette, all colors in the selected palette will be transferred to the newly
created palette.
4. Click "OK".
The color palette is created.

The card displays the following data:

• Name of the color palette
• Number of color definitions contained
You can create multiple color palettes with multiple differently defined colors in each case.
5.4.2 Managing a color palette via the color palette card

You can manage the color palette via its card.
Managing a color palette

In the shortcut menu under the three dots on the card, you can use these commands for the
color palette:
• Rename
• Delete
Renaming a palette
When you rename a color palette used in a style, all references within the style are automatically
updated.
Deleting a palette
If you delete a color palette that is used in a style, a warning message is displayed. You can only
delete the color palette that is not used in any style in the project.
5.4.3 Adding colors to the color palette

In this step, you add colors to the color palette. You can create multiple color palettes with
differently defined colors.

Adding colors to the palette

To add colors to the color palette, do the following:
1. Click the color palette name in the color palette card.
The "Color Palette Editor" opens.
2. Click the plus. The "Add Color" dialog opens.

3. Select a color.
If you click the toggle icon, you can switch between displaying the color values in RGB, HSL
and hexadecimal values. You can also enter the values manually.

4. To save your color selection, click in the "Add color" dialog and click "Save".
5. Add more colors to the palette.
The editor with the added colors is displayed.
In the editor, you can edit or delete the colors.
5.4.4 Comparing color palettes

You can create multiple color palettes and assign the colors the same names but different values
in the color palettes. By comparing the color palettes, you can see the differences and compare
the existing color palettes.
For the comparison, it is useful to assign the same name to the colors in the different color
palettes, in this example "c1", "c2", etc.
Comparing color palettes

To see the differences and compare the existing palettes, click the icon to the left of "Compare
Color Palettes".
An overview page opens.

5.5 Configure style items
The columns show the color palettes and the rows show the color definitions. The colors in
the color palettes have the same name but a different value.
For each color definition, the specific color code and preview are displayed in each of the
color palettes. If a color is not present in a palette, the color is displayed as "undefined".
Note
If you configure multiple color palettes with the same named color definitions but different color
values, you can change the appearance of your style in one step by centrally switching the color
palette used. You can find more information in the section Assigning a different font group and
color palette to the style (Page 54).
5.5.1 Editor - Overview

You have created your project in which you have defined your style, font groups, and color
palettes. In this step, you design the style items in the editor.

Opening the editor

To open the editor, follow these steps:
1. Open the project.
2. In the "Styles" tab, click on the name of the selected style.
The editor opens.

Structure of the editor

The figure below shows the structure of the editor:

① Search field
② "Assign Color Palette and Font Group" button
③ Name of the style item to be edited.
④ Rendering templates
⑤ Properties
⑥ Display area
⑦ Style items
Search field
You can find a style item using the search field. For example, type "button" into the search field.
All hits that contain the term "button" are displayed.
Style items
In the "Style items" area, all basic objects, elements and controls in the selected style are listed.
You can select one style item in each case and edit it in the editor.
A style item always belongs to an screen object type, e.g. the "HmiRoundButton" style item
belongs to the "Button" screen object type. The style items are also grouped according to the
symbol of the screen object type.

"Assign Color Palette and Font Group" button

With the "Color Palette & Font Group" button, you assign color palettes and font groups to the
style.
You can find more information in the section Assigning a font group and color palette to the
style (Page 39).
Name of the style item to be edited.

The style, the classification to the screen object type and the name of the style item are displayed
to you, e.g. "SiemensStyles > Widget > HmiButton".
Rendering templates
All existing rendering templates for the selected style item are displayed in the "Rendering
Template" area.
Properties
In the "Properties" area in the right section of the editor, you can configure the properties of the
selected style item.
Display area
The changes to the properties are shown in the display area. In the display area, you can change
the size or the position of the style item. You can find more information in the section Use style
item (Page 41).
5.5.2 Assigning a font group and color palette to the style

You can assign a color palette and a font group to a given style. This requires for there to be at
least one color palette or font group in the project already.
You can find more information in the sections Creating a font group (Page 26) and Creating a
color palette (Page 30).
You use the colors from the assigned color palettes or the fonts from the font group to
format a style item in the editor. If you no longer want to use the colors or the fonts, you can
remove the assigned color palettes or font groups.

Assigning a color palette and font group to a style

To assign a color palette or font group to a style, follow these steps:
1. In the "Styles" tab, click on the name of the selected style.
The style editor opens.

2. Click "Color Palette & Font Group" in the editor.
The "Assign Color Palette and Font Group to Style" dialog opens.

3. You can select one of the existing color palettes.

4. You can select one of the existing font groups.
You can use the selected color palette and font group when configuring the properties of
individual style items.
If you do not want to assign a color palette or font group, you can leave the selection box
empty.
See also
Configuring properties (Page 44)
5.5.3 Use style item

All style items in the selected style are listed in the "Style items" area in the left part of the editor
(Page 36).

The style items are distributed into the following categories:

• Basic objects
• Elements
• Controls
Editing style items

You can select one style item in each case and edit it in the editor.

To edit a style item, proceed as follows:

1. Click the desired style item in the "Style items" area.
The style item is displayed in the display area.
2. In the display area you can change the size or the position of the style item:
– To resize, drag a handle of the style item to a new position. The changed size is saved.
– To change the position, click the style item and hold down the left mouse button. Move
the style item to a new position with the mouse pointer. The changed position is not saved
and is used for the current display in the editor.
3. You configure the additional properties in the right part of the editor. You can find more
information in the section Configuring properties (Page 44).
Changing a style item in the display area

To change a style item in the display area, click on another style item in the "Style items" area. The
selected style item is displayed in the display area.
Managing style items

Using the shortcut menu under the three dots in the upper corner of the style item, you can:
• Rename
• Create a variant

• Delete (not for default style item)

• Set as default (not for default style item)
You can create several variants of a style item. When you create a variant, a copy of the style
item is created. You can use multiple variants of a style item within a style.
You set one variant of the style item as the default variant.
5.5.4 Configuring properties

You can configure the object properties of the selected object in the editor.

Configure properties
All configurable properties of the selected object are displayed in the "Object properties" area in
the right part of the editor.
Using the color palettes and font palettes that you have created and assigned to the style,
you can assign the colors and font to the various properties.
In the "Properties" area, you also configure all the other properties of the object.
5.5.5 Assigning a color to the property

Using the color palettes you have created and assigned to the style, you can assign the colors to
the different properties. You can also assign colors outside of the color palettes to the properties.

Assigning a color to the property

To assign the color to an property, proceed as follows:
1. Click on the color preview, e.g. "AlternateBackColor", in the Properties area.
The dialog for selecting the color value with two tabs opens:
– The color palette assigned to the style, e.g. "ColorPalette_1".
– "All colors"
2. Assign the colors to the properties.

If you have not assigned a palette to the style, this tab is empty.

Assigning a color from the color palette

To assign a color, proceed as follows:
1. Select the color from the color palette assigned to the style.
2. Click "OK" to confirm the selection.

3. In the property row, the name of the color is displayed instead of the hexadecimal value, e.g.
"c1".
4. Assign the colors also to the other properties that contain a color as a value.
You have assigned the colors from the color palette, e.g. "ColorPalette_1", to the properties of
the "HmiButton" button.
Select color from "All colors"

If you do not want to assign a color from one of the color palettes, switch to "All colors".

To select a color, proceed as follows:

1. Select a color.
2. You can set the transparency of the color using the alpha value "A" next to the hexadecimal
values.

3. The colored square and the hexadecimal value of the color are displayed in the row of the
property.
5.5.6 Assigning a font to the property

Using the font groups you created and assigned to the style, you can assign the fonts to the
different properties. You can also assign fonts outside of the font groups to the properties.

Assign a font to the property

To assign the font to a property, follow these steps:
1. In the "Properties" area, click on the font name in the "Description" line.
The font selection dialog with two tabs opens:

– The font group assigned to the style, e.g. "FontGroup_1"
– "All fonts"

2. Assign the font to the "Font" property.

If you have not assigned a font group to the style, this tab is empty.

Assigning a font from the font group

To assign a font, proceed as follows:
1. Select the font from the font group assigned to the style.
2. Click "OK" to confirm the selection.
3. The name of the font is displayed in the property line, for example, "f1".
You have assigned the font "f1" from the font group "FontGroup_1" to the "Font" property of
the "HmiButton" button.
Selecting a font from "All fonts"

If you do not want to assign a font from one of the font groups, switch to "All fonts".

To select a font, proceed as follows:

1. Select a font and its attributes.
2. In the "Description" line of the property, the attributes of the font are displayed: Font
(Century), Size (16), Italic (1), Underline (1), Strikethrough (0) and Font weight (600).
5.5.7 Assigning a different font group and color palette to the style
You can assign a different color palette or font group to a style.
The following example shows how to change the color palettes. To switch between color
palettes, create two or more color palettes in your project. Follow the same procedure when
changing font groups.

Using colors in properties

In this example, you have created two color palettes in the project. The color palettes are visible
on the comparison page with the names "ColorPalette_1" and "ColorPalette_2".
You have defined the colors "c1", "c2" and "c3" in the "ColorPalette_1" color palette.
In the "ColorPalette_2" color palette, you have defined the colors "c1" and "c2" with values
that differ from "ColorPalette_1".
You have assigned the color palette "ColorPalette_1" to the style.
The following figure shows that the "HmiButton" style item uses the "c1", "c2" and "c3" colors
from the "ColorPalette_1" color palette for various properties.

Assigning another color palette to the style

To assign "ColorPalette_2" to the style, follow these steps:
1. Click "Assign Color Palette and Font Group" in the editor.
The "Assign Color palette and Font Group to Style" dialog opens.
2. Select "ColorPalette_2".
The color palette "ColorPalette_2" does not contain a definition for the color "c3". A warning
message appears indicating that the references will be lost.
Instead of the color "c3", the value of the color "c3" from the "ColorPalette_1" is used.
Result
The properties with the colors "c1" and "c2" obtain the values of the color "c1" and "c2" from the
"ColorPalette_2" palette.
The property with the color "c3" keeps the value from the "ColorPalette_1" and is marked with
the hexadecimal value.

5.5.8 Use rendering template

You can associate a style item with a rendering template. In the project, rendering templates are
always provided by all styles that you have imported into your project.
Selecting a system-defined rendering template

In the "Rendering Template" section, you can select from the system-defined rendering
templates. All rendering templates for the selected screen object type are displayed.

To select a rendering template, proceed as follows:

1. Click in the "Rendering Template" area.
2. Select one of the displayed templates, for example, "style.extended.button.round".
The style item retains the set properties, but is rendered according to the newly selected
rendering template.
Selecting rendering templates from another style in the project

If you have imported a style into your project that contains additional rendering templates (e.g.
the "SiemensStyleLibrary"), the additional rendering templates are also offered for selection.
Rendering templates from the "SiemensStyleLibrary" are displayed with the name "style.sslrt...".

5.6 Importing a style into the TIA Portal
To select a rendering template, proceed as follows:

1. Click in the "Rendering Template" area.
2. Select one of the displayed templates, e.g. "style.sslrt.button.navigation.forward".
The style item retains the configured properties but is rendered according to the newly
selected rendering template.

You have saved the file with your style, e.g. "SiemensStyleLibrary.cd19", in the project in the
Corporate Designer application. You import the file into the TIA Portal in this step.
You can use the style items in the screens in your TIA Portal project. In the Engineering
System and in Runtime, the screen objects are displayed according to the style items in the
style that you have created with the Corporate Designer.

Importing a file into TIA Portal

To import the file into TIA Portal, proceed as follows:
1. In your TIA Portal project, create a "Styles" subfolder in the "UserFiles" folder, e.g.
"C:\Documents\Automation\Project_1\UserFiles\Styles".
2. Paste the file into the folder.
3. In the project tree, click "Runtime settings" of the device in which you want to use the new
style. The device version must be the same or higher than the Corporate Designer version.
4. Under "General > Screen", click the refresh icon for the "Selected style".
The custom style is imported into your project in TIA Portal.
The style is integrated in the TIA Portal for the selected device.
Selecting style items

The style items that you have configured in your style in the Corporate Designer application are
available when you create new screen objects in TIA Portal.
You can find the style items in the "Toolbox" task card in each case under the corresponding
screen object type.
The existing style items are adapted to the imported style.

For existing screen object types, you can also change a style item in the Inspector window
under "Properties > Appearance > Appearance - Style item".
In the Engineering System and in Runtime, you can use several styles in a project and switch
between the styles.

You can find more information about styles in the "SIMATIC HMI WinCC Unified Engineering
V19" manual, "Using styles" section.
See also
Exporting a style from the Corporate Designer (Page 25)


CorporateDesigner en 20231116

Uploaded by

Copyright:

Available Formats

CorporateDesigner en 20231116

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CorporateDesigner en 20231116

Uploaded by

Copyright:

Available Formats

Security information

SIMATIC HMI Notes on use 3

1 Security information (Unified) ............................................................................................................... 5

SIMATIC WinCC Unified Corporate Designer

SIMATIC WinCC Unified Corporate Designer

SIMATIC WinCC Unified Corporate Designer

SIMATIC WinCC Unified Corporate Designer

SIMATIC WinCC Unified Corporate Designer

SIMATIC WinCC Unified Corporate Designer

Saving, closing and reopening the project

SIMATIC WinCC Unified Corporate Designer

SIMATIC WinCC Unified Corporate Designer

Delivery and installation

Using your own style in the TIA Portal

Style, its contents and relations

SIMATIC WinCC Unified Corporate Designer

A style item contains:

SIMATIC WinCC Unified Corporate Designer

5.1.1 Opening the Corporate Designer

Opening the Corporate Designer application

SIMATIC WinCC Unified Corporate Designer

5.1.2 Creating a project

SIMATIC WinCC Unified Corporate Designer

The "Create New Project" dialog opens.

SIMATIC WinCC Unified Corporate Designer

3. You can add a project description.

The project card displays the following data:

5.1.3 Managing a project via the project card

SIMATIC WinCC Unified Corporate Designer

Editing a project card

5.1.4 Opening a project

SIMATIC WinCC Unified Corporate Designer

The page with the following tabs is displayed:

5.1.5 Saving a project

SIMATIC WinCC Unified Corporate Designer

5.1.6 Exporting a project

5.2 Managing styles

5.2.1 Creating a style

SIMATIC WinCC Unified Corporate Designer

System-defined rendering templates

Adding styles from external sources

SIMATIC WinCC Unified Corporate Designer

3. You can add a description.

SIMATIC WinCC Unified Corporate Designer

4. Select a TIA Portal default style:

The style card displays the following data:

5.2.2 Managing a style via the style card

SIMATIC WinCC Unified Corporate Designer

Editing a style card

5.2.3 Importing a style into the Corporate Designer

SIMATIC WinCC Unified Corporate Designer

2. Your storage location opens. Select a .cd19 file.

SIMATIC WinCC Unified Corporate Designer

5.2.4 Exporting a style from the Corporate Designer

SIMATIC WinCC Unified Corporate Designer

5.3 Managing a font group

5.3.1 Creating a font group

Creating a font group

The "Create New Font Group" dialog opens.

SIMATIC WinCC Unified Corporate Designer