How to edit a CSS class

In TeleportHQ, you edit a CSS class in the Edit class panel. Open it by clicking the class in the Classes tab of the Design Language panel, or by clicking Edit class on the class's row in the right panel. Change the styles in Properties, add hover and other states in States, and set smaller-screen styles in Media Query Properties. Every element that uses the class updates.

Before you start#

• You need a role that can change CSS classes. Without it, the Edit class panel doesn't open, and Edit class shows "Your current role does not have permission to add or update classes".
• Class styles are written as CSS properties and values, for example background-color and #FFFFFF. The list suggests property names as you type.

Open the Edit class panel#

Choose one of these ways:

• From the Classes tab: press Esc so no element is selected. In the right panel, click the Classes tab, open the class's category, then click the class, for example .product-card.
• From an element: select an element that uses the class. In the Classes section of the right panel, click Edit class (the arrow icon) on the class's row.
• By name: press Ctrl+P (Cmd+P on a Mac), type part of the class name and pick the result labelled Class.

The panel opens to the left of the right panel. At the top are the class name and a Category list.

1. Extract new styles moves the selected element's own changes into the class. It only shows when you open the panel from an element.
2. Category sorts the class in the Classes tab.
3. States holds hover, focus and other state styles.
4. Properties holds the class's styles.

Change the class styles#

1. In Properties, find the empty row at the bottom, with the boxes property and value.
2. In property, type a CSS property, for example border-radius. Pick it from the suggestions.
3. In value, type a value, for example 12px, or pick a saved value from the list.
4. Press Enter, or click +.

To change an existing style, click its value and type a new one. To delete a style, clear its value, or point at the row and click the × that appears at its end.

Add a hover or focus style to the class#

1. In States, click +.
2. Pick a state, for example hover. The canvas previews that state on every element using the class.
3. In the state's properties, add a row, for example transform with the value translateY(-4px).

To stop previewing the state, click its chip again. To delete it, right-click the chip and choose Delete, or point at the chip and click its delete button.

Change the class on smaller screens#

Media Query Properties has one group per smaller screen size that's turned on in your project, for example <= 767 px. Groups that already hold styles open by themselves.

1. In Media Query Properties, click a group to open it, for example <= 767 px.
2. Add a row, for example padding with the value 16px.

That style applies at that screen width and smaller. See How to change styles for mobile only.

Move an element's changes into the class#

Use this when you've adjusted one element and want every element with the class to match.

1. Select the element you changed.
2. In the Classes section, click Edit class on the class's row.
3. At the top of the panel, click Extract new styles.

The element's own styles move into the class. The button is greyed out when the element has no styles of its own.

Rename the class or change its category#

• Name: click the name field at the top, type a new name, then press Enter. Every element keeps the class under its new name.
• Category: pick a category in the Category list, or Uncategorized. Categories only organize classes in the editor and don't change your code.

Check that it worked#

Every element that uses the class shows the change on the canvas. To find them, right-click the class in the Classes tab and choose Highlight linked nodes. Check hover styles in Preview, because the canvas doesn't react to your mouse.

Troubleshooting#

"Class name already defined" Another class, or a text style, has that name. Choose a different name.

"Class name is invalid" / "Please enter a valid value" Use letters, numbers, hyphens and underscores, starting with a letter. The name can't be empty.

One element doesn't change when I edit the class That element has its own value for the same style, and the element's own styles win. Clear the value on the element in the right panel.

A Media Query Properties group has a warning color Its styles were saved for a screen width that's no longer in your project. The styles still apply, but can be overwritten when you change screen sizes. Move them into an existing screen size group. See How to turn screen sizes on or off and change their widths.

I can't rename a class Default classes like button or thq-heading-1 can't be renamed. You can still edit their styles.

Good to know#

• Each property row has a checkbox that turns the style off on the canvas, to compare. It isn't saved: the style is back when you reload the project, and your exported code and published site always include it.
• To duplicate the class, press Ctrl+D (Cmd+D on a Mac) while the Edit class panel is open from the Classes tab, or right-click the class there and choose Duplicate.
• To close the panel, click outside it. When you opened it from the Classes tab, you can also click ×.
• The line You can use CSS Combinators… under the class name opens a short explanation of combinators. See How to style elements inside a class (combinators).