Content management - Themes

Related modules

System - Configurations

Description

Themes can be used to change the appearance of the main web interface in Cyclos. A theme has a set of basic definitions (mostly colors) which can be customized in an easy way in a form, but also allows customizing any CSS declarations. To allow deriving the final style sheet from those basic definitions, as well as having easier and more maintainable CSS, themes use LESS CSS, which allows defining variables, mix-ins (which are like functions) and using color arithimetics (lighten / darken, saturate / desaturate, etc).

The final LESS text to be compiled into CSS is composed of several parts:

• The LESS Elements library is included. It contains several useful mix-ins.
• Then cyclos.less file is included, which contains, for example, a mix-in to generate a glass effect.
• Each basic definition is written as a variable.
• The variables.less is included, containing a lot of fine-grained variables, many of them derived from the basic variables.
• The theme's advanced definitions are included. This allows customizing those fine-grained variables, giving more control, but still without requiring to write specific CSS.
• The style.less file is included, containing all actual style definitions, using the variables defined in the variables.less file.
• Finally, the theme's custom style is included, allowing to override any style definition.

Themes also holds images. Images can be of 2 types:

• Custom: Custom images are freely added / removed, and can be referenced on the theme by using: background-image: url(fileName).
• Theme: There are several images which are always present in Cyclos, but can be customized on themes. There are some categories for those:
  • Icon: General icons within the application.
  • Style icon: A special icon category which is not a raster image, but vectorial (SVG). Those images can be colorized according to theme variables. By definition, any fill or stroke colors which are absolute black are changed into a given color, and the final image is generated.
  • Toolbar icon: Icons displayed on the rich text toolbar.
  • Dashboard action: Icons for dashboard actions on the home page.
  • Dashboard status: Icons for the dashboard status links on the home page.

Business rules

Themes can be:

• Global: requires the globalThemes.view / globalThemes.manage permissions.
• In content category: when the theme is created inside a content category. Admins require the localThemes.view / localThemes.manage permissions, and access to the specific content categories through products (see Products).

Admins can apply themes to configurations, either directly on the configuration details (hence, requiring the systemConfiguration.manage permission) or through themes. For the latter, in products it is possible to specify which configurations an admin can apply themes (see Products).

Built-in themes are special themes which are always present in Cyclos. They cannot be removed or edited, and don't define any image.

Whenever a theme is created, it can be based on an existing one or started from scratch.

Notifications

• N/a.

Page: Themes list

Shows a list of all visible themes. If the logged admin can only see global themes, no local themes are shown. The same for local / global.

Security

Roles:

• Admin.

View permission

• globalThemes.view
• localThemes.view

Other permissions:

• globalThemes.manage
• localThemes.manage

Page sections

Actions

Fields	Type	Rules
New based on...	Multi action button	Allows the admin to create a new theme. The new theme can be based on a global theme or can be a empty theme. Show the option "Empty theme" and shows all global themes.
Import	Action button	Allows the admin to import a new theme by uploading a theme file. Shows a form within a popup, with radio buttons to select whether the imported theme will be global or within a content category, and an upload button to select a file.

Search result (list)

Fields	Type	Rules
Name	Text (read only)	The theme name.
Scope	Text (read only)	Shows either 'Global' or the content category name.
Export icon	Icon	Icon to export a theme When clicking an icon, will present the user with a browser download dialog, for the file containing the theme
Remove icon	Icon	Icon to remove the theme. Themes which are in use won't be deleted, presenting an error Built-in themes cannot be removed

Page: Theme details

Tabs:

• Details
• Custom images
• Theme images

Security

Roles:

• Admin.

View permissions:

• globalThemes.view (if the theme is global)
• localThemes.view (if the theme belongs to a content category)

Other permissions:

• globalThemes.manage (if the theme is global)
• localThemes.manage (if the theme belongs to a content category)

Details tab

Shows a form with the theme fields.

Details page

Fields	Type	Rules
Details
Scope	Radio buttons	Only visible when creating a new theme with permission to manage both global and local themes. Options: 'Global', 'In content category' Controls the visibility of the 'Content category' field
Content category	Single selection or label	Only visible if "In content category" is selected under scope. Only editable on when theme is being created, in this case it shows all content categories the admin is allowed to manage.
Used in configurations	Text (read only)	A comma separated list of configurations where this theme is used in. Only the configurations visible to the user are shown. If the admin has the userConfiguration.view permission all configurations can be shown. If the admin has the specificConfiguration.manage permission, only the configurations are shown that he is allowed to view. The items on the list are linking to the configurations.
Name	Text	Required. Max length: 50.
Author	Text	Optional. The theme's author. Max length: 100.
Description	Text area	The description of the theme.
Configurations	Multi selection	Lists the configurations the admin is allowed to apply themes, according to the product. It is not possible to unselect the system default configuration.
Horizontal menu background	Color	Color picker for the main color of the horizontal menu. When cleared, will be reset to the default color.
Selected horizontal menu background	Color	Color picker for the main color of the selected horizontal menu item. When cleared, will be reset to the default color.
Horizontal menu icons	Color	Color picker for the color of icons in the horizontal menu. When cleared, will be reset to the default color.
Horizontal menu gradient style	Radio buttons	Gradient style for the horizontal menu. May be glass or linear.
Heading	Color	Color picker for headings. When cleared, will be reset to the default color.
Selection	Color	Color picker for selected items. When cleared, will be reset to the default color.
Status menu	Color	Color picker for icons and text on the status menu (upper right menu). When cleared, will be reset to the default color.
Button background	Color	Color picker for the main color of buttons. When cleared, will be reset to the default color.
Focused button background	Color	Color picker for the main color of focused or clicked buttons. When cleared, will be reset to the default color.
Box background	Color	Color picker for background color of box elements in the page (like the left menu, bread crumb, etc). When cleared, will be reset to the default color.
Box border	Color	Color picker for border color of box elements in the page (like the left menu, bread crumb, etc). When cleared, will be reset to the default color.
Results table header	Color	Color picker for the main color of the header row on result tables. When cleared, will be reset to the default color.
Advanced definitions	Wrapped text area	When the wrapper checkbox is selected, shows a readonly text area containing the actual contents of the variables.less file, so the user knows what can be overridden, and another textarea for entering the actual advanced definitions. Optional.
Custom style	Text area	Additional chunk of LESS (or plain CSS) to be added on the style sheet. Optional.

Custom images tab

Lists all custom images on the theme. Only visible if editing a theme (not on new themes)

Search page (filters)

Fields	Type	Rules
Upload new	Upload	Opens a dialog to choose an image file to be uploaded. Only displayed if the admin has management permission.

Search result (list)

Fields	Type	Rules
Thumbnail	Image	Shows a image thumbnail
Name	Text (read only)	The image file name
Remove icon	Icon	Removes the image. Only displayed if the admin has management permission.

Theme images tab

Lists all images which can be customized on the theme. Only visible if editing a theme (not on new themes)

Search page (filters)

Fields	Type	Rules
Type	Single selection	Indicates which image type will be displayed. The possible options are: All Icon Toolbar icon Style icon Dashboard action Dashboard status link
Customized only	Checkbox	When checked, will only display images which where customized

Search result (list)

Fields	Type	Rules
Thumbnail	Image	Shows a image thumbnail
Type	Text	The image type
Name	Text	The image name
Customized	Icon	Shows a tick icon if the image was customized
Revert icon	Icon	Reverts a customized image to the default Only displayed for customized images, and if the logged admin has management permission
Upload new icon	Icon	Shows a popup to upload a new image, which will replace the selected image Only displayed if the logged admin has management permission

OLD

Themes

Themes can be customized for each configuration, based on an existing one or started from scratch.

Search page (filters)

* Shows a list with all themes associated to the current configuration. Built-in themes are special themes which are always present in Cyclos. They cannot be removed or edited, and don't define any image.

Actions

Fields	Type	Rules
Applied theme for users	Single selection	Allows to select the theme to be shown to users of the related configuration among a list of the available themes of this configutation.
Applied theme for guests	Single selection	Allows to select the theme to be shown to guests of the related configuration among a list of the available themes of this configutation.
New based on...	Multi action button	Allows the admin to create a new theme. The new theme can be based on an existing theme or on an empty theme template. Shows the option "Empty theme" and shows all existing themes in this configuration tree.
Import	Action button	Allows the admin to import a new theme by uploading a theme file. Shows a form within a popup, and an upload button to select a file.
Apply the selected themes	Action button	Allows the admin to apply the selected themes for users / guests.

Search result (list)

Fields	Type	Rules
Name	Text (read only)	The theme name.
Export icon	Icon	Icon to export a theme When clicking an icon, will present the user with a browser download dialog, for the file containing the theme
Remove icon	Icon	Icon to remove the theme. Themes which are in use won't be deleted, presenting an error Built-in themes cannot be removed

Details page

Fields	Type	Rules
Name	Text	Required. Max length: 50.
Author	Text	Optional. The theme's author. Max length: 100.
Description	Text area	The description of the theme.
Horizontal menu background	Color	Color picker for the main color of the horizontal menu. When cleared, will be reset to the default color.
Selected horizontal menu background	Color	Color picker for the main color of the selected horizontal menu item. When cleared, will be reset to the default color.
Horizontal menu icons	Color	Color picker for the color of icons in the horizontal menu. When cleared, will be reset to the default color.
Horizontal menu gradient style	Radio buttons	Gradient style for the horizontal menu. May be glass or linear.
Heading	Color	Color picker for headings. When cleared, will be reset to the default color.
Selection	Color	Color picker for selected items. When cleared, will be reset to the default color.
Status menu	Color	Color picker for icons and text on the status menu (upper right menu). When cleared, will be reset to the default color.
Button background	Color	Color picker for the main color of buttons. When cleared, will be reset to the default color.
Focused button background	Color	Color picker for the main color of focused or clicked buttons. When cleared, will be reset to the default color.
Box background	Color	Color picker for background color of box elements in the page (like the left menu, bread crumb, etc). When cleared, will be reset to the default color.
Box border	Color	Color picker for border color of box elements in the page (like the left menu, bread crumb, etc). When cleared, will be reset to the default color.
Results table header	Color	Color picker for the main color of the header row on result tables. When cleared, will be reset to the default color.
Advanced definitions	Wrapped text area	When the wrapper checkbox is selected, shows a readonly text area containing the actual contents of the variables.less file, so the user knows what can be overridden, and another textarea for entering the actual advanced definitions. Optional.
Custom style	Text area	Additional chunk of LESS (or plain CSS) to be added on the style sheet. Optional.