Usage Omeka S module

Customizing Your Site

Changing settings

Open a section (Colors, Typography, Header…) and change a setting. The preview follows:

  • Instantly for colors, fonts and type, spacing, page width, corners and buttons, shadows, header layout and color, announcement bar and footer colors, card styles, logo size and custom CSS. Text fields update once you pause typing.
  • By reloading the page for everything that changes what a page contains: logos, site title and tagline, the announcement, footer columns and links, partner logos, menus, browse and item page layouts, dark mode, and sticky header. The preview comes back at the same scroll position.
The Typography section with the heading font set to Archivo, marked as changed, and the preview showing the site title and headings in the bold sans-serif
A new heading font, applied to the preview at once

Instant and reload settings lists every setting.

Settings left blank, or set to Use preset, follow the style preset. A color field left blank shows the preset's color in its swatch and as a hint (for example Preset: #2d5f8b).

Picking colors

Type a hex color (#2d5f8b or #28b) in a color field, or click the swatch next to it to use your browser's color picker. With Guarantee readable contrast on (the default), the theme adjusts colors where needed so text stays readable; the preview shows the adjusted result.

The Colors section in Vitrine with a yellow primary color typed in, preset colors shown as hints in the other fields and Guarantee readable contrast ticked; the preview has a yellow header with dark text and a dark Visit button
A light primary color: the theme keeps the header text and buttons readable

Values that are not accepted

A value the theme does not accept, such as #12345 in a color field, is marked in red with the reason under the field, and the status line says so. The preview keeps the last accepted value until you correct it.

The Secondary color field outlined in red with #12345 typed in and the message Invalid color format below it; the status line reads Some values were not accepted. The preview keeps the last valid ones.
A value the theme does not accept

Browsing the preview

Links in the preview work: open an item, a browse page or a search, and the draft follows you. Links to other websites open in a new tab. Open in new tab shows the current page full size, still with your draft; a label at the bottom of the page reminds you it is a preview.

Widths and color schemes

  • Desktop, Tablet (768 px) and Phone (390 px) set the preview's width.
  • Light and Dark switch the preview's color scheme without changing your settings. When the theme's Dark mode setting is Off, only Light is available; when it is Always dark, only Dark.
The preview at phone width in the dark color scheme, with Phone and Dark selected in the toolbar
Phone width and the dark color scheme

Seeing what you changed

Changed settings are marked with a red bar in the panel, and each section shows how many of its settings changed. The bottom of the panel shows the total, for example 3 unpublished changes.

The settings panel with 1 changed badges on the Style preset and Typography sections, a red bar beside the changed Heading font, and 3 unpublished changes above Discard changes and Publish
Changed settings, per section and in total
Log in for Support