Thegraphic charter workshop lets you customize a graphic charter based on a template.
Tool opening
Click on the button Graphic design workshop button in the Developer to open the tool.
The different opening modes
When opening the tool, several cases may arise:
- The charter is not based on a template
If the current site charter is not based on a template, the graphic charter workshop cannot be used. You will be warned by a pop-up window:
- First use of the tool
If the graphic charter has never been edited using the graphic charter tool, there is no saved working version of this charter.
A working version is created from a copy of the production chart (skins directory), and the tool is opened directly.
- The charter has already been modified and a working version has been saved.
In this case, you have the choice of starting from this last working version or from the charter in production.
Depending on your choice, a new working version is created from a copy of the saved working version or from a copy of the production chart.
- The last time you used the workshop, you left the tool without saving your work.
In this case, you are offered the choice of either resuming your unsaved changes, or abandoning your changes and working from the last backup or production charter.
- The charter is being used by another user
Two people can't use the tool at the same time, as this will overwrite each other's modifications.
If the graphic charter appears to be locked by another user, you are warned by a pop-up window.
You have the option of recovering write access to the chart and opening the tool anyway.
The charter can be locked by another user if the latter has left the tool without saving during its last use. Refer to the date of the last modification to judge whether this user is actually using the tool.
If you choose to recover write rights, while the other user is using the tool at the same time, all his modification attempts will now be refused:
Using the tool
The number of buttons available in the ribbon, and their organization, depends on the template from which the graphic design is derived.
In fact, each template defines the charter elements that can be modified in the workshop: images, colors, font size, text, etc., as well as their organization in the ribbon (tabs, groups, menus, submenus). See page Creating and setting up a template
Above is an example of the Ametys demo chart. Customizable elements are organized in 5 tabs according to their region in the graphic charter: header, menu, vertical menu, content, page and footer.
The center of the tool is a direct preview of the site with the modifications made to the graphic charter. You can navigate through your site to view changes on all pages.
Joint actions
The"Actions" tab is common to all charters.
Go to production / Go to production and close
This action applies all the changes made to the production version.
Make sure you have checked all your new graphics before taking this action. All sites using this graphic charter will be affected.
A backup of the current charter is always made before changes are applied in production.
Backups are stored in the WEB-INF/data/skins/backup/[nom_skin]. Contact your system administrator to recover a backup.
Up to 5 backups can be stored for each graphic chart (beyond that, the oldest backups are deleted).
Save changes / Save and close
This action saves your current changes. You can choose to close the tool to resume your modifications later.
No changes are made to the version of the charter in production as a result of this action.
Cancel changes
This action allows you to undo the changes you've made, either by going back to the last saved working version, or by going back to the production version.
Changing languages
This menu is used to select the default language from among those available for the site.
The language selected here is the default language proposed in the text type parameters with a translation for each language (see Text type parameters i18n).
This is also the language used to preview the site in the tool.
Change color theme
Depending on the template used, 0 to n color themes are available.
Select the color theme you wish to apply to your chart from the"Color themes" menu.
So, for any color setting, you can choose from the colors of the current theme or from other defined colors.
The list of available themes and their colors, as well as the available colors, are those in the file model/colors.xml of the model defined by the integrator.
When a theme is changed, all color settings with a theme color are affected.
Example 1: you choose the 3rd color of theme A for the title of your items. If you then choose theme B, the color of the item title corresponds to the 3rd color of theme B.
Example 2: You choose a color #B54FA6 from "Other colors" for the title of your articles. If you then choose theme B, the title color will still be #B54FA6.
Example 3: You choose a custom color #C5D4B1 for the title of your articles, neither in the theme nor in the other available colors. If you then choose theme B, the title color will still be #C5D4B1.
Design ideas
Depending on the charter model used, 0 to n design ideas are proposed.
The design ideas are variations on the template used. A variation might involve a different color theme and banner, for example.
Select a variation to apply to your charter from the"Design ideas" menu.
The example below illustrates the transition from the "Blackboard" to the "Red" declination of the model in the Ametys demo application:
Changing the model
The "Template" menu allows you to use another template for your chart. Simply select another template from the existing ones.
When switching from one model to another, the parameter values common to both models are retained.
| Illustration with the transition from the "Ametys" model to the "Natural" model: color, size and font information are preserved. |
|---|
 |
As the 2 models potentially have very different parameters, a complete reload of the CMS application is required to rebuild the ribbon. Here's how.
Reset to default values
Open the "Template" menu and click on"Reset to default values" to reset your working version to the template's default values.
| Illustration of resetting a chart using the template Ametys |
|---|
 |
Customize your charter
Parameters represent all customizable charter elements (logo, text color, etc.).
The parameters and the level of modification they authorize depend on the charter template: one template may, for example, only allow modification of the logo and site title, while another will allow modification right down to the character spacing.
A charter template can have several types of parameters, detailed in the rest of this chapter:
- style parameters (color, size, font, alignment, etc.)
- image settings (banner, logo, background image, etc.)
- text parameters (footer text, etc.)
- internationalized text parameters (site title, slogan, etc.)
- variant parameters
Type parameters CSS
These parameters can affect all style elements: font, font size, color, character styles (bold, italic, underlined), margins, background color, alignment, etc.
| Illustration with the modification of the size, color, font and style of the site title and slogan. | |
|---|---|
 |  |
Image parameters
These parameters concern the images in the chart that can be modified.
Images are chosen from a predefined image gallery or can be downloaded from your hard drive. Downloaded images appear in the "Custom" group.
| Illustration with the modification of the site banner | |
|---|---|
 |  |
Text parameters i18n
These parameters concern internationalized charter texts, i.e. texts translated into different languages (for example: the site title).
In the ribbon, they are presented with a text field, followed by a button to select the language.
| Illustration with the modification of the site title and slogan | |
|---|---|
 |  |
Variant parameters
Variant parameters are used to modify a set of files (css, images, xsl, js, ...). They are used in slightly more complex cases, when the HTML code needs to be modified, or when a single image or css parameter is no longer sufficient.
Variants are selected from a gallery.
| Illustration with side menu style modification | |
|---|---|
 |  |
Text parameters
Text parameters are used to modify the text elements of a XSL file.
They can be used, for example, to modify a variable XSL or untranslated text contained in a XSL.
| Illustration with footer text modification | |
|---|---|
 |  |
Back to top