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 Sass, which allows defining variables, mix-ins (which are like functions) and using color arithimetics (lighten / darken, saturate / desaturate, etc).

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

• A set of SASS mixins is included, such as the ones to include the "glass" effect.
• Each basic theme definition (color pickers in the theme form) is written as a variable.
• All fine-grained variables are included. They can be seen in the theme details form, when enabling "Advanced (SASS variables) and then clicking on the link to show the variables.
• The main styles are added.
• Finally, the theme's custom style is included, allowing to override any style definition.

Themes can also define custom images. To use them, just reference them as url(fileName.extension).

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