Switching to the new design

Installing the new theme

On the Appearance overview page (/admin/appearance) you will notice that you cannot enable OpenCulturas Next unless you install some required modules. No need for searching, they are already at hand and simple need to be enabled.

1. Go to Extend (/admin/modules) and enable Block Group, Layout Builder Component Attributes, Layout Options. Click Install and confirm (Layout Builder is automatically added to the list).
2. Go to the Appearance overview page, spot OpenCulturas Next and click Install. Please note: on a live website like in Managed OpenCulturas, do not choose “Install and set as default”. 

Default comes a little later.

Design decisions: configure OpenCulturas Next

Assuming, you have already uploaded your logo in the legacy base theme OpenCulturas Base, you can copy the file path from there.

Logo image

Disable the toggle “Use the logo supplied by the theme” and paste your copied logo path/name. Alternatively, you can upload a new logo here.

Favicon

Likewise with the favicon (that symbol you see in your browser tab next to the title). Disable the toggle, paste file name or upload.

Background image

Like in the legacy theme, an image can be appended behind the content to cover the viewport background. You still have the option to use an image globally (the same for all pages), use the header image of each page individually or none at all.

Hero section layout

New in OpenCulturas Next: decide the header layout yourself. See the examples in the article about the new design.

Layout builder

This is an important step: Enable layout builder output for all of the listed (node and taxonomy_term) entities! Otherwise you will not benefit from the enhanced layouts that come with the design.

It is still possible to Restore classic display for certain entities after saving, if you prefer.

Now save configuration.

A few more steps to take before we set the new design as default. Thank you for your patience.

Handle text-heavy pages

For sure there are some basic pages with only text and not much layout on your website, typically the Privacy policy or legal stuff like Terms and conditions. Those will not look balanced in the new theme but there’s a simple setting to the rescue.

Go to the Content overview page (/admin/content) and filter it to show only Basic pages. Focus on pages that likely contain information. (There’s no need to handle landing pages like Calendar or Locations.) 

1. Click Edit. In multilingual setups, make sure to edit the original language version. 
2. Open the Administrative section in the sidebar. 
3. Set the field Layout switch to text-heavy page.
4. Save.

This will set the whole content block optically centered in wider browser windows. You can do this in advance of switching the theme. “Text-heavy page” has no effect in the OpenCulturas Base theme.

Customize colors

1. Go to CSS Injectors (/admin/config/development/asset-injector/css)
2. Spot OpCulturas Next CSS overrides, use the drop button to duplicate it, give it an individual name, ideally using your site name
3. Enable and edit your duplicated (now custom) CSS injector

Yes, there are a lot of options. Focus on finding the following because these two variables contribute a lot to your individual look:

• --oc-color-link
• --oc-color-interaction

Enter colors from your brand design and please make sure to pick colors with enough contrast on light backgrounds. This keeps up the good accessibility rating that comes with using OpenCulturas.

The primary color in line 32 is used sparsely, mainly to colorize the map markers. Enter your main brand color here. The secondary color is a variable for your convenience. You may or may not enter a value for re-use; for the time being it is not in use with the base design.

The accent colors (--oc-color-accent-*) are used in color gradients that reveal when you pick a “Vivid” background. There are two optional gradients both using these accent colors. You can modify the gradients around line 85. In line 95 you may change the Vivid style to use --oc-color-gradient-smooth instead of --oc-color-gradient-blocks.

Dark mode: colors + logo

In your CSS injector near line 170 starts the dark mode colors section. Focus on the colors you have already changed and change them here accordingly, with enough contrast to dark backgrounds.

For the dark mode logo, you'll find a step-by-step instruction around line 219. Edit and uncomment this part (by removing /* before and */ after the respective steps). Otherwise your site will show an OpenCulturas logo when the color scheme is changed to dark by your visitors.

Optional: Customize further design elements

Here are some examples. 

Teaser styles

In case you do not like the default teaser style for example, you'll find a bunch of options to change these around line 318. Please note that it is not recommended to set the border to 0 (some automatic calculations will fail). Set the border to at least 1px and the border color to transparent instead.

Teaser styles apply to all teasers except profile and location teasers. There is a separate set of styles those two.

Profile images

• Don't like round profile images? Set --oc-profile-image-border-radius to 0 in line 300.
• Prefer to not make a visual difference between locations and profiles? There's a dedicated --oc-location-image-border-radius right in the next line.

Background colors

Around line 86 you can change some more characteristic colors:

• --oc-color-bg-page: the background of your content
• --oc-color-bg-neutral-canvas is the color of the complete viewport (visible when you decided to not use a background image). It is also used by --oc-color-bg-page-backdrop to mix in some transparency for the background image overlay.

Feel free to explore other options. 

It is recommended to place comment marks (/* */) around blocks that you do not want to change to avoid doubling up what is already delivered by OpenCulturas Next.

Headline styles

You may have have noticed the headline examples in the paragraph about the font in the new design.

There are predefined font weight variables you can use:

// Generic font weights
--oc-font-weight-light: 300;
--oc-font-weight-normal: 400;
--oc-font-weight-medium: 500;
--oc-font-weight-semi-bold: 600;
--oc-font-weight-bold: 700;
--oc-font-weight-extra-bold: 820;
--oc-font-weight-black: 900;

// Font weights globally set
--oc-font-weight-teaser-subtitle: var(--oc-font-weight-semi-bold);
--oc-font-weight-label: var(--oc-font-weight-semi-bold);

You can use these for example set a thin main headline or extra-bold teaser titles:

h1 {
  font-weight: var(--oc-font-weight-light);
}

h3.teaser--title {
  font-weight: var(--oc-font-weight-black);
}

Map markers

With OpenCulturas 2.6 came the option to use a single source image for all map markers. Depending on your decision, there are three ways to adjust the look. 

In any case, please note the the marker clusters use the primary color by default. You can change that color in line 165: --oc-color-bg-cluster-icon. 

Option 1: Using the default marker icon

The legacy marker in the module might change in a future version. It is still purple. You may experiment with CSS filter settings to adjust it to the intended color (see option 2).

Option 2: Using the theme’s marker icon

1. Go to OpenCulturas Map settings (/admin/config/content/openculturas_map)
2. Disable the toggle “Use the marker icon supplied by the module” and enter the path /profiles/contrib/openculturas-distribution/profile/themes/opcult/images/map_marker.svg This icon’s base color is black which is much easier to colorize.
3. Have your desired color code at hand and use a tool like posstack.com/css-color-filter-generator/ for your target color filter
4. Go to your CSS injector and paste the value (brightness, saturate, hue-rotate etc.) as a whole in line 164. Make sure to not include filter: in that value!
5. In a new CSS injector (“Custom overrides”) or at the very bottom of the given one add the following lines:

img.leaflet-marker-icon {
  mask-position-y: 0;
}

Option 3: Using your custom marker icon 

1. Go to OpenCulturas Map settings (/admin/config/content/openculturas_map)
2. Disable the toggle “Use the marker icon supplied by the module” and upload your custom icon. In order to detect the uploaded image’s dimensions, save the settings and visit the settings page again. Make sure the width and height are not much more than 32 pixels. If so, reduce the dimensions proportionally.

In case your uploaded image already has the desired color, unset the colorizer CSS as follows (see step 5 above):

img.leaflet-marker-icon {
  filter: unset;
  mask-image: none;
}

In case you have uploaded a custom black icon and want to colorize it see step 2 of option 2. And simply unset the mask image:

img.leaflet-marker-icon {
  mask-image: none;
}