Arcweave CSS basics guide

The Style Editor of Arcweave's Play Mode uses CSS and gives you full control over how your prototype looks in regard to text styling, layout, and color palette.

This how-to guide teaches you how to customize your Arcweave game with the Style Editor. It iterates the available CSS selectors, show how they affect your Play Mode interface, and demonstrate simple, efficient examples of changes you can apply with ease.

Access the Style Editor

To open the Style Editor:

1. Click the Play icon to enter Play Mode.
2. Select the Style Editor (🎨 palette icon) on the top bar.
3. Write your CSS directly in the panel; changes appear instantly.
4. Press Save changes to save the CSS in your project.

⚠️ If the "Save changes" button is disabled, fix any syntax issues!

Arcweave applies your styles live, and you can always reset or export them later.

Containers

Prototype wrapper

Every Arcweave prototype runs inside the prototype wrapper; think of it as the body part of your Play Mode, the outer container of it all.

You can target it with the prototype__wrapper class.

🔍 Notice the double underscore __ used in the class names.

For example, you can use it to perform the following changes:

• Change the background color
• Add some padding at the top
• Change font
• Set the font as bold

The code snippet for these changes is the following:

@import url('https://fonts.googleapis.com/css2?family=Schoolbell&display=swap');

.prototype__wrapper {
  background-color: #143340;
  padding-top: 100px;
  font-family: 'Schoolbell', cursive;
  font-weight: 600;
}

💡 Remember to include an @import directive when importing fonts.

Prototype content

Your story's elements don't just float freely inside the prototype wrapper; they're organized within their own container called prototype content.

You can target the prototype__content class to control the display of the following parts of the rendered element:

• Header (cover image or video)
• Text content
• Option buttons

Use this class to make layout and style adjustments like the following:

• Make the prototype content narrower
• Change the color of just the content area
• Change font
• Add some margin around the content
• Add border radius (soft corners) to the content area

@import url('https://fonts.googleapis.com/css2?family=Schoolbell&display=swap');

.prototype__content {
  max-width: 50%;
  background-color: #143340;
  font-family: 'Schoolbell';
  border-radius: 25px;
  margin: 50px;
}

✅ As you've probably noticed, you can change the font using either class: prototype__wrapper or prototype__content. However, it's best practice to target the text content in the editor, as described in Styling text below.

Prototype header

The prototype header is the area that holds the elements' following items:

• Image or video cover
• Attached components

Target it by using the prototype__header class.

For example, to make the header area narrower than the text content, use the following snippet:

.prototype__header {
  max-width: 50%;
  margin: auto;
}

ℹ️ The margin: auto; line centers the image.

You can also color this area (and make corners rounded) with the following snippet:

.prototype__header {
  max-width: 60%;
  margin: auto;
  padding: 20px;
  background-color: darkgreen;
  border-radius: 25px;
}

If an element has attached components and no image or video cover, the components will take the cover's place in the prototype header area.

Prototype body

The prototype body contains the text content and the option buttons. Target it using the class prototype__body. See prototype text, below, for its usage.

Prototype text

The prototype text is a sub-container and contains only the text content. Target it using the class prototype__text.

The following example uses a combination of prototype body and prototype text to:

• Narrow the text / buttons area setting the max-width of prototype__body to 95%.
• Narrow the text content width setting the max-width of prototype__text to an extra 90%.
• Center both prototype__header and prototype__body with margin: auto.
• Set the text content as center-aligned, setting margin: auto for prototype__text.
• Change all background colors.
• Give them some padding.
• Detach them from each other using margin and margin-top.

🔍 Notice that centering the prototype__body is not the same as setting the text to be center-aligned. Feel free to experiment with the code snippets, to better understand exactly what each property does.

This is the code snippet that produces this result:

@import url('https://fonts.googleapis.com/css2?family=Schoolbell&display=swap');

.prototype__content {
  background-color: #09181f;
  border-radius: 25px;
  margin: 30px auto;
}

.prototype__header {
  max-width: 60%;
  margin: auto;
  padding: 20px;
  background-color: #004347;
  border-radius: 25px;
}

.prototype__body {
  max-width: 95%;
  margin: auto;
  background-color: #14403e;
  padding: 20px;
  margin-top: 20px;
  border-radius: 25px;
}

.prototype__text {
  font-family: 'Schoolbell', cursive;
  max-width: 90%;
  margin: auto;
  text-align: center;
}

Prototype options

Prototype options (notice the plural options) is the container of the option buttons. You can target it by calling the prototype__options class.

✅ One way to style specific option buttons is by targeting the respective children of the .prototype__options (see further below, under Style specific options).

Styling text

Although you can perform some text styling by targetting the containers described above, you need to target the text itself to go even deeper.

Editor

The editor is a sub-container of prototype text containing the rich text of your elements. It can be targeted using the editor class. This article contains a couple of cases where the editor comes in handy, the first one following right below.

Editor content

To target the text content of your elements, you need to call .prototype__text .editor .editor-content all together. The following snippet increases the font size of the text content and changes its color:

.prototype__text .editor .editor-content {
  font-size: 28px;
  color: darkseagreen;
}

Prototype media

To control the cover image or attached video display, target the prototype__media class as in the following snippet:

.prototype__media img {
  border-radius: 25px;
}

.prototype__media video {
  border-radius: 25px;
}

Prototype components

Components are contained in the prototype components container, which you can target with the prototype__components class. To target the components themselves, use the selector .prototype__components .comp.

Here's an example of targeting components and their container to manipulate their size and remove their default border radius.

.prototype__components {
  height: 120px;
  padding: 10px;
  background: #123a54;
  grid-gap: 5px;
}

.prototype__components .comp {
  height: 100px;
  background: darkred;
  border-radius: 0px;
}

If you wish to completely omit components from the Play Mode experience, use display: none:

.prototype__components {
  display: none;
}

Prototype option

Option buttons use the prototype__option class. (Don't confuse with the parent container prototype__options, in plural, mentioned further above.)

This example goes for a high-contrast, no-transition, rounded and centered buttons.

.prototype__option {
  max-width: 80%;
  margin: 10px auto;
  text-align: center;
  border-radius: 30px;
  border: 1px solid #292d2d;
  background: none;
  color: #eaeaea;
  transition: none;
}

.prototype__option:hover {
  color: black;
  background: white;
}

Advanced styling

Style specific elements

The Style Editor allows you not only to globally style every element, but also style specific elements differently from the others.

Each element in your prototype has its own unique element ID. Including an element ID as a CSS selector allows you to target the specific element for CSS styling.

To do this, follow the next steps:

1. Copy the element ID

An element's ID looks like this: 81a30674-aa09-4eb8-8484-59298d37f984. There are two ways to locate an element's ID and copy it to your clipboard:

Debugger (Play Mode environment):

1. Play the story until you reach the desired element.
2. Open the Debugger.
3. Locate the element and its ID, near the Debugger's top part.
4. Select the ID by dragging and press Ctrl/Cmd+C to copy it to your clipboard.

Element Properties (Project environment):

1. Locate and right-click the desired element in its board.
2. Select Properties.
3. Go to the Details tab.
4. Next to Element ID, press the clipboard button.

2. Add the element ID to the CSS selectors

After copying the element's ID, prepend it to your CSS selector using the format #el-[element-id]. This ensures that your styles apply only to that specific element when rendered in Play Mode.

Here's an example showing how to target both the editor content and the prototype content of a single element:

@import url('https://fonts.googleapis.com/css2?family=Schoolbell&display=swap');

#el-81a30674-aa09-4eb8-8484-59298d37f984
  .prototype__text
  .editor
  .editor-content {
  color: darkseagreen;
}

#el-81a30674-aa09-4eb8-8484-59298d37f984 .prototype__content {
  max-width: 50%;
  background-color: #143340;
  font-family: 'Schoolbell';
  border-radius: 25px;
  margin: 50px;
}

Style specific options

Style specific options in either of the two following ways:

• Target the n-th child of the prototype options container (prototype__options class)
• Target connections of specific color.

Style nth child of prototype options

The option buttons are children of the prototype options container (prototype__options class). This means you can target them using CSS pseudo-classes like :first-child, :nth-child(), or :nth-last-child().

To target the first option of any element, use the code snippet below:

.prototype__options:first-child {
  ...
}

To target the second option of a specific element, add the element's ID as a selector, as shown in the previous example:

#el-81a30674-aa09-4eb8-8484-59298d37f984 .prototype__options:nth-child(2) {
  ...
}

Style connections of specific color

In Arcweave, you can change the color theme of connections.

In the Style Editor, you can then target connections of specific colors, to style their respective option buttons. For example, to target the option corresponsing to the pink connection of any element, add the following code:

.prototype__option.pink {
  ...
}

The colors used as connection themes are:

Color	Selector
██████████	.prototype__option.pink
██████████	.prototype__option.red
██████████	.prototype__option.purple
██████████	.prototype__option.lightBlue
██████████	.prototype__option.cyan
██████████	.prototype__option.moss
██████████	.prototype__option.green
██████████	.prototype__option.yellow
██████████	.prototype__option.brown
██████████	.prototype__option.default
██████████	.prototype__option.orange
██████████	.prototype__option.blue