CSS Custom Properties & Selectors

Each logo scroller instance renders its settings as CSS custom properties (variables) on the container element. This makes it straightforward to override values from your theme stylesheet without modifying plugin files.

Custom Properties

Property	Default	Description
--scroll-duration	25s	Total animation duration for one complete scroll cycle.
--logo-height	60px	Height of each logo image.
--logo-gap	60px	Horizontal spacing between logos.

Example Override

To make all logo scrollers on your site use a 50px height with tighter spacing:

.id-logo-scroller {
  --logo-height: 50px;
  --logo-gap: 30px;
}

To target a specific instance, use the unique ID generated on each scroller:

#id-logo-scroller-abc123 {
  --scroll-duration: 10s;
}

CSS Class Reference

Selector	Description
.id-logo-scroller	Outer container. Has overflow: hidden and holds the custom properties.
.id-logo-scroller__track	Flex container holding both logo groups. Animated with translateX().
.id-logo-scroller__group	A single set of logos. Rendered twice for the seamless loop.
.id-logo-scroller__item	Individual logo wrapper. Contains either an <img> or an <a> wrapping an <img>.