How to Place a Ticker with a CSS Selector

Applies to: TickerPress Free and Pro 0.1.0.

Insert an automatic ticker next to a specific element in your page layout.

Before you start

Activate compatible Free and Pro. Identify a valid CSS selector for an element present on the rendered page. Use an existing stable ID or class; confirm it with browser inspection. You need permission to edit tickers. Open TickerPress → Tickers, then Edit the ticker. For public output, the ticker must be published, enabled, and contain enabled content that resolves to at least one item.

Steps

  1. Open Placement and turn on Enable automatic placement.
  2. Set Location → CSS selector. Enter the selector in CSS selector. For example, .site-header is usable only if your page actually contains that class.
  3. Set Insert ticker to Before the element, After the element, At the start of the element, or At the end of the element.
  4. Configure matching Display conditions and any schedule/device restrictions. Select Update.
  5. Open a matching public page. Confirm that only the intended first matching element receives the ticker and that layout remains usable at narrow widths.

Expected result

TickerPress inserts the ticker relative to the first element matched by the selector. Missing or invalid selectors produce no insertion.

Troubleshooting and limits

An element inserted later by another script may not exist when TickerPress runs its insertion script. The implementation does not keep retrying that selector. Choose a stable element present at insertion time. Selector placement is automatic and follows its conditions. Multiple eligible selector tickers compete for one selector-placement winner, even if they target different selectors; do not promise one bar per selector.

Back to TickerPress documentation