Dark mode, icons in header, text slider... small but fine new features are coming with OpenCulturas version 2.5. As usual, here is a human-readable overview of new features and improvements.
The Barrierefreiheitsstärkungsgesetz (Accessibility Enhancement Act) is now in force, which naturally prompted us to review whether we needed to do anything else in terms of accessibility. However, because OpenCulturas already put great emphasis on accessibility during development, we did not find any real issues.
However, we believe that dark mode is also a great help in terms of potential barriers. It is currently unclear whether this will become a requirement for web applications, but we are more concerned with creating a better world for everyone than with meeting requirements.
Allow to switch to dark mode
Many people find it easier on the eyes to view pages on a screen with a dark background. Experts refer to this as “dark mode”. OpenCulturas now allows you to reverse the color scheme. To prevent this from simply sneaking into your existing platform, the new feature is not there automatically. If requires only a few settings (administrator role):
- Enable module Dark Mode Toggle
- Place the likewise named block in the region Utilities links: URL /admin/structure/block or via menu: Strukture > Block layout. Make sure that the toggle "Display title" is on.
Your platform visitors and users can now choose between these color schemes:
- Light (like you have known it)
- Auto (following the user preference set in the browser or operating system)
- Dark (enforces dark mode)
This setting effects the back-end as well so that you won't be flashed when switching to an edit form.
Managed OpenCulturas
You will find a new "CSS injector" in the back-end. Feel free to adjust the colors to fit your design.
Alles was ihr braucht, stellen wir in einem CSS-Injector bereit. Die Farben könnt ihr dann selbst anpassen. Please contact us if you require assistance!
Plattforms with a custom design (theme)
Pretty sure you'll want to adjust the colors to your design. Since you have worked with the CSS custom properties as the OpenCulturas base theme has always provided and suggested, this will be a fast and easy job. You'll find the variables to copy in the variables file starting around line 260: profile/themes/openculturas_base/scss_config/_variables.scss. Paste them in your theme and adjust the colors.
After that you might want to recognize these files:
- profile/themes/openculturas_base/templates/page/header.scss (line 95)
- profile/themes/openculturas_base/scss_config/dark-mode/_index.scss
- profile/themes/openculturas_base/scss_config/style.scss (and cke5-wysiwyg.scss) for integration of dark mode-related scss files
Utility icons in header
We have fulfilled a wish of our own and modernized the function links in the page header. As you know from other platforms, all functions (and function-like menus) are now accessible via compact icon buttons, which are of course barrier-free:
- Switch language
- Color scheme (see above)
- User menu (Log in, Register, Log out etc.)
If you have already hidden the language switcher or would prefer to keep the languages as links next to each other and keep everything as it is, you don't need to do anything else.
To modernize your platform header, have your administrator go to the block administration page: URL /admin/structure/block or via menu: Strukcture > Block layout and follow these steps:
Language toggle
- Enable/place the available block Language (machine name: language_toggle) in Utilities region and make sure that the title is displayed. The icon display depends on the title.
- Disable the legacy block Language switcher.
With a custom theme, these steps are almost the same. Just remove the corresponding block from the OpenCulturas block layout and make sure to place the new block with the exact machine name. CSS adjustments should not be required but you are a better judge in that matter.
User menu
Enable the block Account (machine name: utility_menu_account) in Utilities region and make sure that the title is displayed. The icon display depends on the title.
With a custom theme: see language toggle.
Slightly changed header layout
We have started base theme refactoring. Along with styling the new header icons we have slightly changed the header layout grid to better align the elements within. Ideally you will not notice any major difference. Just have a look an make sure your custom logo is aligned well.
Text slider
We have been asked on several occasions what we recommend to place testimonials on the platform, preferrably in a slider. The Company for the Development of Things (Gesellschaft zur Entwicklung von Dingen) has taken action and sponsored a new paragraph bundle, intentionally very basic in a first step: The content of text fields is rendered in a slider, comparable to the media gallery. Every text field produces a new slide. You can choose whether to display a single slide or two at once.
The Company for the Development of Things will use the text format "Full HTML" with in source code mode to build a blockquote with quotee in each slide. It will be something along these lines:
<figure lang="de">
<blockquote>
Das neue System ist superschnell und die Nutzer*innen sind total zufrieden.
Auch die Entwicklung lief mit so einer Leichtigkeit, das kenne ich von anderen
Entwicklungsteams ganz anders. Bei euch fühlt man sich wirklich als Teil des Teams.
</blockquote>
<figcaption>Begeisterte Kundin</figcaption>
</figure>We are excited to see what ideas you come up with—let us know!
Handouts in code
There are some more text documents in .md format in the code base.
Es gibt jetzt ein paar mehr Textdokumente im .md-Format in der Code-Basis. It covers development principles, contributions to the software, and any security notices. Do us the favor and have a look.
And if you have any suggestions for improvement, that would also be a valuable contribution to improving the software. And you don't need any programming skills to do so, just a good feel for the English language.
Important module changes
This information should only be relevant to you if you have created your own patches for the following modules:
The Tour module is integrated into the new main version. This eliminates the need for additional modules, whose functionality is now included in the main version:
- Tour enhancements
- Tour UI
Linkit and Image widget crop have received new major versions.
