Content management - Themes

From Cyclos4 Wiki
Jump to: navigation, search

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:

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.