Ingredients are the files that make up the design of your LiveWhale Calendar: the HTML templates, stylesheets, scripts, and content layouts that control how your calendar looks and behaves. In LiveWhale 3.0+, the Ingredients Tool lets authorized users browse, edit, preview, and publish those files directly from the browser, without needing a code editor or SFTP access.

This guide is aimed at anyone with Ingredients permission, whether you’re a developer making targeted theme changes, or a calendar admin with some HTML/CSS knowledge who wants to update a color, tweak a layout, or adjust some text in a template.

Who can use Ingredients

Ingredients access is a separate permission that must be granted by a LiveWhale system administrator. On the Edit User page, the checkbox is described as:

Ingredients include the theming styles, scripts, templates, and includes that form the design of your calendar. These HTML, CSS, JS, and XML files can be managed in LiveWhale by authorized users.

If you don’t see the Ingredients section in your admin navigation, contact your LiveWhale administrator to request access.

What you can edit

The Ingredients file browser gives you access to the files inside your _ingredients directory — specifically, the Global Theme folder and everything in it:

• components/ — Reusable calendar UI components (event list items, detail views, calendar headers, etc.)
• includes/ — Site-wide HTML includes like the header and footer
• scripts/ — Custom JavaScript files
• styles/ — CSS/LESS/SCSS stylesheets

You can also create new files and folders within the browser. (File uploads are not currently supported through the Ingredients tool.)

A note on stylesheets (LESS/SCSS)

Many theme stylesheets use LESS or SCSS, which are extensions of CSS that add helpful features like variables and nesting. If you’re comfortable with CSS, you can usually read and edit these files successfully—the syntax is similar enough that adjusting a color value, font size, or padding rule is straightforward even without prior LESS/SCSS experience. The Ingredients tool will check your changes for syntax errors before you publish.

How theming inheritance works

LiveWhale theming is based on a layered inheritance model: files in your Global Theme override the corresponding files in LiveWhale’s core theme. If a file doesn’t exist in your Global Theme, the core version is used as a default.

In the Ingredients file browser, components shown in italics are ones you haven’t edited yet—they’re currently being served from the core theme. When you open and save one of these files, Ingredients automatically copies it into the current version and saves your changes there. This means you only maintain overrides for the files you’ve actually customized, and everything else inherits from core automatically.

This is the same process you’d follow manually over SFTP (copying a file from the core theme folder to your theme folder before editing), but Ingredients handles the copy step for you.

Versions: How Ingredients changes are organized

Rather than editing files directly on your live site, Ingredients organizes your changes into versions. Versions are named batches of edits that can be saved, previewed, and published as a group.

Creating a version

From the main Ingredients page, give your version a title (this will be made lowercase and spaces will become hyphens when saved) and a brief description of what you’re working on, then click Create a new version. Good descriptions help you and your colleagues keep track of what each version is for, for example: “Updated header colors for spring rebrand” or “Fixed sidebar padding on mobile.”

Editing files in a version

Once you’re inside a version, you can:

• Browse files using the folder tree on the left (starting in the Global Theme)
• Search for files using the Code Search box—useful when you know an ID, class name, or snippet of code but not which file it’s in
• Re-open recently edited files from the list of changed files in the version

Clicking a file opens it in the code editor, which has syntax highlighting. Make your changes and click Save to store them in your version. Saving doesn’t affect your live site — changes only go live when you publish.

Each saved file is listed under Files changed in this version, along with the timestamp and the user who edited it. You can remove a file from your version (reverting it to the live version) by clicking the trash icon next to it.

Syntax errors

If a LESS or SCSS file you’ve saved contains syntax errors, the version header will show a Syntax errors badge with a count. You can click it to see which file(s) are affected. It’s worth resolving syntax errors before publishing, as they can cause your stylesheet not to compile correctly.

File conflicts

If someone else publishes changes to a file that you also have edited in your version, Ingredients will flag a File conflict. This means the live version of that file has changed since you started editing — your version doesn’t include those changes, and publishing could overwrite them.

Clicking the File conflicts badge opens a dialog listing the affected files. To resolve a conflict, you’ll need to manually review the live file and incorporate any changes you want to keep into your version before publishing. Alternatively, if you don’t need your changes to that file anymore, you can trash it from your version’s file list to remove it from the batch.

Previewing changes with Live Preview

Before publishing, you can preview your changes on your actual calendar site using Live Preview.

Toggle Enable Live Preview in the version header. When it’s on, the toggle label changes to Live Preview Enabled, and a cookie is set in your browser so that any calendar pages you load will reflect the changes in your current version, without affecting what other visitors see. You can click around your calendar, test different views, and verify that your changes look right in context.

While previewing, a green Ingredients Live Preview banner appears at the top of your calendar. Clicking More… opens a panel that shows the version name being previewed and gives you two options: Share preview link and Turn off preview.

To share the preview with a colleague, click Share preview link to get a link you can send to any logged-in LiveWhale user — they’ll see the calendar with your unpublished changes in their own browser. When you’re done, click Turn off preview in the panel, or toggle Live Preview off from within the version editor.

Publishing your version

When your changes are ready, click Publish. You’ll see a confirmation prompt:

Are you sure you wish to publish these changes? Please be sure to preview them first. This action cannot be undone.

Publishing pushes all changed files in the version to your live site at once. There is no partial publishing or built-in rollback — if you need to undo a published change, you’d create a new version to revert the affected files.

After publishing, the version moves to the Published versions list on the main Ingredients page, where it’s archived with its publish date and a list of the files that were changed.

Managing saved versions

The Saved versions section on the main Ingredients page lists all your in-progress drafts. For each version you can:

• Load and edit — Re-open the version to continue making changes
• Preview — Jump directly into Live Preview for that version
• Delete — Remove the version and discard its changes

Multiple users can have their own versions open and in progress at the same time. File conflicts (described above) are how the tool surfaces cases where parallel edits may overlap.

Tips and best practices

Preview before you publish. Since publishing can’t be undone, it’s worth spending a few minutes in Live Preview — especially for stylesheet changes, which can have broad effects across the calendar.

Use descriptive version names and descriptions. Version titles are short (letters, numbers, hyphens), but the description field lets you explain what you’re doing and why. This is especially helpful if multiple people are working on ingredients around the same time.

Small, focused versions are easier to manage. A version that changes one or two files is easier to preview and debug than one that changes a dozen. For a large redesign, consider breaking work into logical chunks.

Watch for file conflicts before publishing. If your team uses SFTP and the Ingredients tool in parallel, conflicts are more likely. Check the conflict badge before hitting Publish.

For Developers: How versions are stored

Versions are stored on the filesystem at:

/_ingredients/_versions/{username}/{version_name}/

Inside that folder, the structure mirrors _ingredients/ itself — only the files changed in that version are present. This means you can create or update a version via the filesystem directly (for example, if you want to keep _ingredients under version control and push a batch of changes via SFTP). LiveWhale will discover new folders matching the version naming rules and register them automatically the next time the Ingredients tool is loaded.

For the full scope of theming — the file structure, inheritance model, and available theme files — see the LiveWhale Calendar Theming guide.