New Generic Content Style

1 Initial Problem

The default content style comes with the ILIAS page editor and is used at category, course or group pages, as well as in ILIAS learning modules, wikis or blogs. It looks rather dated. 

ILIAS LEARNING MODULE (Current Content Sytle)

SCROM LEarning Module (Current Content Sytle)

2 Conceptual Summary

Colors

If users create a new Style from the current Content Style, they have to recreate all colors. With the new Default Content Style a color scheme is introduced, so that users can easily adapt the content style to their coprporate identity.

The color scheme used is the already existing ILIAS color scheme of the less variables.

Text (Block)

General Improvements

• Layout of Blocks and Sections is standardized, for example, in size, font weight, margin and padding. Individual adjustments can be made via the page editor using the Text (Character).
• Coloring of Blocks and Sections is given a didactic background. In the Page Editor, each user has access to a Block / Section with a positive (Confirmation), negative (Attention) and neutral (Mnemonic) connotation.

Modifications to existing blocks

The new style keeps style classes which already exist. They were modified. This ensures that existing content that was prepared with the former style sheet will still "work". 

• Icons were added to Blocks and Sections to make them more beautiful and to specify their meanings. All Icons are taken from the icon set "Font Awesome".
• Style classes are prepared in a fashion that supports adapting the style sheet to the corporate identity of an organisation.

New Blocks

In addition to this modifications some new style classes were added to drum home the possibility of editing the style.

Newly introduced Blocks:

1. Attention
2. Citation
3. Confirmation
4. Information
5. Literature
6. HorSeparator
7. VertSeparator
8. Link
9. StandardCenter

To better highlight links, a link block has been introduced. Using the StandardCenter and StandardRight blocks, it is now possible to change the text alignment using the ILIAS page editor. This was previously only possible for media containers.

Text (Character)

According to the main colors of the Less Variables (brandprimary, brandsecondary, brandwarning), three color variants (colorprimary, colorsecondary, colorwarning) are introduced in addition to the already existing color Accent.

Section

The sections are adapted to the blocks.

Newly introduced Section:

1. Attention
2. Confirmation
3. Information
4. Interaction
5. Link
6. Literature
7. HorSeparator
8. VertSeparator

Since users can link entire sections, the additional Interaction sections are added. This section can be used to create kind of "button" that motivates users to "click on it".

Media

In addition to the existing media containers, containers with offset shadow are added.

Table

According to the color scheme, all table templates have been revised.

Accordions

The accordion has been redesigned. The layout is based on the item group, which can also be configured as a kind of accordion.

Questions

The question elements "FeedbackRight" and "FeedbackWrong" are provided with an icon and revised.

In addition, the layout of a standard question is adjusted. With the offset shadow, the question is highlighted and clearly recognizable.

Page

The page navigation will be revised and adjusted in color to the ILIAS corporate identity.

The navigation elements are displayed larger.

The page title is adapted to question titles and heading 3 so that the New Default Content Style follows a consistent title concept.

SCORM RTE

The menu of Scorm Learning Modules will be completely redesigned. The layout of the menu entries is adapted to ILIAS Buttons. In this way it becomes clear that they are clickable navigation elements.

3 User Interface Modifications

none

4 Technical Information

{The maintainer has to provide necessary technical information, e.g. dependencies on other ILIAS components, necessary modifications in general services/architecture, potential security or performance issues.}

5 Contact

6 Funding

7 Discussion

Fabian Kruse, 03.06.2015: Just reporting from my simple user perspective, I feel that some of the text styles are superfluous. I don’t really see any use cases (in my own ILIAS usage) for styles like mnemonic, remark or accent, but find they do clutter the editor and invite misusage in contexts that aren’t properly regulated. If people don’t use these styles consistently, they should probably be simplified, i.e. by combining several of them into one more generic style.

To reiterate, these are just my 2 cents. I'd be interested to see use cases where all these styles are put into use consistently and coherently.

JourFixe, ILIAS [jourfixe], 15 OCT 2018 : We highly appreciate this suggestion and schedule the new content style for 5.4. This style will replace the existing style. We would like to have just one Separator style (now HorSeparator) and do not need a vertical separator. Media styles should use semantic labels as well: standard, separated (with padding) and highlighted (shadow). The code style for characters should be supported by the style editor as well (currently not suppoted). Auto-margin should be enabled by default (please change option from Disbale to Enable).

8 Implementation

There has no new functionality been added to ILIAS. Only the style classes have been modified and extended.

If you have any content based on the default standard style sheet, this will automatically be modified, if you do not create a new standard style in the administration before migrating to ILIAS 5.4. Any content style that can be edited in the administration or in local contexts will not be modified by this change.

Test Cases

Approval

Approved at 29 OCT 2018 by Zenzen, Enrico [ezenzen].