How the style panel works (and where values come from)
In TeleportHQ, you style an element in the right panel, which appears when you select an element on the canvas. The Visual tab lists sections such as Text Style, Size, Background and Border, always in the same order; the Advanced tab lets you type CSS directly. A value in normal text is set on this element. A grey value comes from somewhere else, such as a CSS class, and pointing at it tells you where.
The tabs of the style panel
When you select one or more elements in the TeleportHQ editor, the right panel shows these tabs:
- Visual: controls for the most common styles, grouped in sections.
- Advanced: a list of CSS properties per screen size, for anything the Visual tab doesn't have. See How to write CSS directly (Advanced tab).
- Events: what happens when a visitor interacts with the element, for example a click that changes a state. It works in every project, websites included. It doesn't show for an element inside a copy of a component placed on a page: open the component to add one. See How to use states in a component.
Press Ctrl+Shift+I (Cmd+Shift+I on Mac) to switch between Visual and Advanced. While you're editing text on the canvas, only Visual shows.
- The Visual, Advanced and Events tabs.
- Classes: the CSS classes on the element.
- States: hover, focus and other interaction states.
- Text Style: the first of the element's own sections, here for a heading.
The sections of the Visual tab
The TeleportHQ Visual tab lists its sections in one fixed order, whatever you select, so the panel always reads the same way. Each element only shows the sections that fit it: text has no Background section, and containers have no Text Style section.
| Section | What it does | Learn how |
|---|---|---|
| Workflows | Runs an action when visitors click or see the element | Run a workflow when a button is clicked |
| Conditional Rendering | Shows the element only when a condition is true | Show or hide elements based on a condition |
| Attributes | The HTML tag (for example h1 or h2) and the ID | Add and format text |
| Classes | Apply shared CSS classes | Apply or remove a CSS class |
| States | Hover, focus, click and link styles | Add hover and click effects |
| The element's own settings | For example Text Content and Text Style for text, Video for a video, List Style for a list | Change font, size and text color |
| Motion | Animates the element ("Add motion…") | Animate any element |
| Size | Width, height, limits, overflow, ratio | Set an element's width and height |
| Position | Auto, Relative, Freestyle, Fixed, Sticky, and Z-index | Position elements |
| Inner Layout | Flex, grid or block layout for the element's children | Create a grid layout |
| Margin and Padding | Space around and inside | Add space around and inside elements |
| Background | Color, gradient or image | Change the background, Add a video background |
| Border, Radius, Shadow | Outlines, rounded corners, shadows | Add borders, rounded corners and shadows |
| Transition | How smoothly a change, such as a hover, plays | Add a transition to an element |
| Backdrop Filter | Blur or tint what's behind the element | Blur what's behind an element |
| Transforms | Move, rotate, skew, scale, 3D | Rotate, scale and move elements |
| Visibility | Hide the element or change its opacity | Hide an element |
Some elements show a few extra sections, for example Scroll behavior for containers and Play Sound On for buttons, text and containers. An element that still uses an old entrance animation also shows Animation (legacy) next to Motion. See What happened to the Animation section?
Sections with no values start closed. Click + in a section's title row to add a value. Transforms opens with the arrow at the right of its title.
Real values and grey values
The TeleportHQ style panel shows two kinds of values:
- Normal text: the value is set on this element, at the screen size and state you're editing now.
- Grey text: the value comes from somewhere else. The element uses it, but it isn't set here.
A grey value from a CSS class shows the class's own value. That can be the name of a saved value, for example font-family-heading in Font Family, or the CSS name of an option, for example absolute in Position (which is Freestyle).
Point at a grey value to see where it comes from:
- "Inherited from CSS class" and the class name: set by a class on the element.
- "Inherited from inline style" and a width such as "@1200px": set on this element at a larger screen size.
- "Inherited from" and a parent's name: passed down from a parent element, for example a font.
- "From component": set inside the component.
- "From state": set in an interaction state.
- "Browser default": the web browser's built-in value. Inside a scroll story, this can read "Scroll Scene default" instead.
When TeleportHQ looks for a value, the element's own value at this or a larger screen size wins, then a class, then the parent, then the default.
Colored section titles
- Blue section title: the section has values set for the screen size you're on (not the default one). See How to change styles for mobile only.
- Purple section title: the section has values for the active interaction state, such as hover.
Reset a section
- Click a blue or purple section title.
- Click Reset Values.
The section's values are removed for the current screen size or state. You can also hold Alt (Option on Mac) and click the title to reset right away. At the default screen size, titles aren't colored, so clear the fields one by one instead.
Entering values
- Type a number without a unit and TeleportHQ adds the last unit used, or px. For example,
24becomes24px. - You can type any of these units: px, %, em, rem, vh, vw, vmin, vmax, ch, lh, fr, deg, s, ms.
- In fields without a dropdown list, press the Up or Down arrow to change a value by 1, with Shift by 10, and with Alt by 0.1.
- In color fields, click the swatch for a color picker with transparency and an eyedropper. You can type a hex value without "#".
- A value saves when you leave the field or pick an option from the list.
- When you select several elements with different values, the field shows "mixed".
Troubleshooting
I cleared a field, but it shows 0px or transparent instead of the inherited value When a value is inherited, clearing the field once sets an explicit override, such as 0px or transparent. Clear it again to go back to the inherited value.
The + and − buttons in a section are greyed out That section has values set at a larger screen size. Switch to the larger screen size to change them, or override single fields at this size.
"Your current role does not have enough permissions to edit the selected node" Your role can't edit this page or component. See What can each role do?.
"This node has no editable options" / "These nodes have no editable options in common." The selected element can't be styled, or the selected elements share no sections. Select a single element, or elements of the same type.
I can't find a section where it used to be The TeleportHQ style panel now lists sections in one fixed order: what the element is first (Attributes, Classes, States, the element's own settings, Motion), then how its box is drawn (Size down to Visibility). Scroll down the Visual tab: Background comes after Padding, and Transforms and Visibility are near the end.
My change applied to all screen sizes / only to mobile Style changes apply to the screen size selected at the top of the canvas and all smaller ones. See How to change styles for mobile only.
Clicking the Shadow section title doesn't open Reset Values Hold Alt (Option on Mac) and click the title instead.