Layout customization

From Cyclos4 Wiki
Jump to: navigation, search

Themes
Cyclos works with 'themes' for layout customization. It can be found logging in as admin and going to: Content - Content management - Themes.
A theme defines the layout (e.g. colors, menu bar size, font style) and system images (e.g. quick access and remove icons). There are two types of themes; Web theme and Mobile (app) theme. When saving a theme it will be directly applied. Any network in the system has a theme applied. This can be a theme inherited from a higher level, or a theme managed directly at network level. Cyclos comes with various 'built-in' themes and it is possible to create new themes as well.

There are three levels of customizing a theme. The first (easiest) level is done with a color picker. This allows to create a new theme in a few minutes. The second level is done by changing common theme elements by predefined LESS variables. Normally variables are used to group layout items that logically share the same value (e.g. all window borders). The third customization allows to customize the entire CSS file. When creating a new theme you have to option to create an empty one, or extend an existing theme. It is also possible to import and export a theme.

CSS customization
In order to customize CSS you need to enter a theme. You only can customize themes for which you have write permissions (the themes to which you don't have write access will show up in italic and grey color in the theme list). At the bottom of the page there is a select box 'custom style´. Selecting this will show a link called 'show the original style' and a input text box. If you click on the link you can see the entire CSS. You can copy & past this to work on it. Any CSS you put in the box will be added to the CSS, meaning it will overwrite existing CSS tags. In order to apply you have to click on save. Make sure your refresh the browser window.


Font customization
To change the font to some font in Google Font directory, you will have to do the following:

  • Go to https://fonts.google.com/ and choose the desired font, clicking the plus icon next to its name. A black box at the bottom will appear.
  • Click that black box. Click EMBED, then @IMPORT. Take note of both the @import line and the code in "Specify in CSS" section.
  • Edit the theme in Cyclos. Check "Use custom style" and paste the following, replacing the entire @import line and the font family name (as in the "Specify in CSS" section).


Here is an example for the Roboto font:

@import url('https://fonts.googleapis.com/css?family=Roboto');

body, td, th, input, textarea, select, button, .gm-field, .statusMenuCountBadge, .leftMenu, body.help {
    font-family: 'Roboto', sans-serif;
}

After saving the theme and refreshing the browser window the new fonts should be applied.