How to write CSS directly (Advanced tab)
In TeleportHQ, the Advanced tab of the right panel lets you type CSS properties for the selected element, like in a browser's developer tools. Select the element, open Advanced, type a property and a value in the empty row, and click +. Use it for styles the Visual tab doesn't have, such as a pointer cursor, a grayscale filter or an inner shadow.
Before you start
- The Advanced tab is available on every plan.
- You need to know the CSS property you want, for example
cursor. The fields suggest property names and values as you type. - Styles apply to one element. To reuse styles on many elements, use a CSS class. See How to edit a CSS class.
Steps
- On the canvas, click the element, for example a clickable card.
- At the top of the right panel, click Advanced. You can also press Ctrl+Shift+I (Cmd+Shift+I on Mac).
- Under Properties, click the empty row's property field and type
cursor. Pick it from the suggestions. - In the value field, type
pointer. - Click +, or press Enter.
The new row appears in the list. Press Esc to clear an unfinished row.
Check that it worked
The row shows in Properties, and the Visual tab shows the same value where it has a matching field. Some properties, like cursor and transition, only show their effect in Preview and on the published site.
What the Advanced tab shows
The Advanced tab in TeleportHQ lists the element's styles in sections, from top to bottom:
- Attributes, Classes and States: the same as in the Visual tab. Click a state chip, for example hover, to type CSS for that state.
- Properties: the element's own base styles, used at your default screen size and every smaller one. Styles that come from a CSS class aren't listed here.
- Screen ≤ 991px, Screen ≤ 767px and so on: one section for each smaller screen size you have turned on. Styles here only apply at that width and smaller.
Edit, turn off or remove a style
Each row has:
- a checkbox to turn the style off on the canvas for a moment, to compare (the row shows crossed out). The tick isn't saved: when you reload the editor, the row is ticked again and the style is back. Preview, your published site and downloaded code always use the style.
- the property and value, which you can click to edit
- × to remove it
To remove a style for good, click ×.
Move styles between screen sizes
A section that has styles shows three buttons next to its title:
- Move all properties to larger breakpoint
- Move all properties to smaller breakpoint
- Remove all style properties for this breakpoint
For example, if you added styles under Properties that should only apply on phones, move them to a smaller screen size section.
Useful properties the Visual tab doesn't have
| Property | Example value | What it does |
|---|---|---|
cursor | pointer | Shows a hand when visitors point at the element |
filter | grayscale(100%) | Makes an image black and white |
mix-blend-mode | multiply | Blends the element with what's behind it |
box-shadow | inset 0 2px 6px rgba(0,0,0,0.2) | An inner shadow |
animation | myFade 1s | Plays a keyframe animation you added in custom code |
For animation, the keyframes must exist first. See How to add CSS keyframes or animation libraries with custom code.
The transition property (how long hover and other state changes take) also has its own Transition section in the Visual tab, where you pick the property, easing, duration and delay without typing CSS. When you add the first hover or other state to an element, TeleportHQ adds transition: 0.3s to it, unless it already has a transition of its own. See How to add a transition to an element.
Troubleshooting
"Editing or removing some properties of interactive nodes is not allowed." Interactive elements, such as sliders or dropdowns, control their own display property. Change their appearance with other properties, or hide them from the Visibility section.
A Screen ≤ px section has a warning color and an info icon "This breakpoint is not defined in your project. These styles still apply, but are at risk of being overwritten if you make changes to your breakpoint setup. Consider moving them to an existing breakpoint." Use the move buttons to put the styles in a screen size you use.
"This is a non-standard property. It is not recommended to use it on production sites, as it will not work for every user." The zoom property doesn't work in every browser. Use Scale in Transforms instead. See How to rotate, scale and move elements.
My change doesn't show on the canvas Effects like transition and cursor only work in Preview and on the published site. Also check the row isn't turned off with its checkbox.
The Transition section says "This transition uses a value this section cannot edit — change it in the Advanced tab." The transition holds something the Transition section can't show, such as a CSS variable. Edit the transition row here instead.
Good to know
- The Properties section always shows a laptop icon, even if your default screen size is Desktop or Wide.
- For bullets on lists, the Visual tab has a List Style section with Type (for example disc, square or decimal) and Position (outside or inside).
- To add CSS that affects the whole site, for example a rule for many elements, use custom code instead. See How to add code to every page (head and body).
- Value fields also offer your saved colors, sizes and CSS variables.