Custom Layout & CSS

tip

A basic introduction to the topic can be found in the Benutzer-Dokumentation

tip

Under "Design > Layout" you can select a theme for the configurator:

Here you can create a custom theme under

Loading...

. This possibility of having the HTML and CSS of the entire configurator in your hands as an end user opens up free design options. The combination of customizable layout and the upload of CSS documents is crucial here.

Custom layout

Our layout for the "Standard-Right" theme looks like this, for example:

<div style="
display:grid;
grid:
'header header header header' min-content
'top-left top-center top-right sidebar' 1fr
'mid-left mid-center mid-right sidebar' 1fr
'bot-left bot-center bot-right sidebar' 1fr
/ 1fr 1fr 1fr 400px;
height: 100%;"
>
  <header style="gridArea: header;">
    <Header/>
  </header>
  <section style="gridArea: 2 / 1 / span 3 / span 3">
      <Content/>
  </section>
  <div style="gridArea: top-left; padding: 16px;">
    <Logo/>
  </div>
  <div style="gridArea: top-right; justifySelf: end;">
    <SceneButtons/>
  </div>
  <div style="gridArea: bot-right; padding: 16px; placeSelf: end; display: flex; flexDirection: row; zIndex: 1;">
    <Price/>
    <ExitButtons/>
  </div>
  <div style="gridArea: sidebar; overflow: auto; zIndex:1; box-shadow: 6px 0 4px -4px #999, -6px 0 4px -4px #999; height: calc(100vh - 38px - 64px ); display: grid; alignContent: space-between;">
      <Sidebar design="topmenu"></Sidebar>
      <footer style="position: sticky; bottom: 0; background: white">
          <LabelActionsDisplay></LabelActionsDisplay>
          <NavigationButtons></NavigationButtons>
      </footer>
  </div>
</div>

Any HTML-compliant adjustments can be made here.
We provide the actual application blocks in K3.
These can be used easily and provide responsive functionality:

• Header: This is our header element. All tabs of the configurator are displayed here.
• Content: This is the visualization of the configurator. Depending on the configurator type, either an image-based 360-degree view or a 3D scene is displayed here as standard.
• Sidebar: This is the sidebar of the configurator. The variables are displayed here with their values (depending on the tab).
• SceneButtons: This contains the AR button and, in the admin panel, the button for creating screenshot cameras.
• Price: The price according to the price calculation for the current state.
• ExitButtons: A group with the defined actions for configuration completion.
• Logo: The logo of the configurator
• NavigationButtons: "Back" and "Next" buttons for the tab navigation.
• LabelActionsDisplay: The area in which label actions (see configurator rules) are displayed.

Demo

<div class="oc">Hello from OC!</div>

This layout represents an extreme case and replaces the entire content of the frontend with a "Hello from OC". The surrounding div is given a class "oc":

The admin panel is of course still visible and functional.

This is now perfect for using these class names in the CSS:

.oc {
  color: red;
}

General CSS

Under "Design > CSS" you can upload or link your own CSS file. This CSS can be based on the following structure:

Split component classes

Throughout the configurator, recurring components share their CSS classes.
For example, it is possible to style all buttons in the configurator using the MuiButton-root class.

It is best to take a look at the shared component classes in the developer console of the browser.

Global classes

In K3 there are global systems which are also classified in a structured way:

• OrderDialog: Provided with OrderDialog classes.
• InfoSelectionDialog: Provided with InfoSelection classes.
• InvalidSelectionIcon: Provided with InvalidSelection classes.

Variables

Keys

• If developer mode is active in the profile, a key can be given to a variable.
• If a variable has a key, it automatically has a surrounding div element with this key as the class name

Checked-State

• All variables (if several selections are visible in the UI) have a class name that is only assigned to the selected element: MuiChecked.
• Variables with dropdown functionality have a aria-label=true attribute in the dropdown to mark the currently active element.

Groups

• If developer mode is active in the profile, a group can be given a "key".
• If a group has a key, this key is added to the 'configurator' when this group is active.

tip

It is generally recommended to select via the class configurator in the CSS, as otherwise the admin panel will also be styled.