CSS Token Reference

WP LinkCanvas uses a system of CSS custom properties (variables) prefixed with --nlb- to style every part of the bio page. All tokens are declared on body.nlb-page and cascade into the page, card, links, social icons, and player.

Tokens are set by the theme system — choosing a preset or using the Custom Theme Builder writes these values. You can override individual tokens with Custom CSS on the bio page or with a global stylesheet.

Page tokens#

These tokens control the overall page and outer card appearance.

Token	What it controls
--nlb-page-bg	Full-page background colour or gradient
--nlb-card-bg	Outer card background (computed from bg-1 and bg-2)
--nlb-card-bg-2	Second colour stop for the card gradient
--nlb-card-bg-fallback	Solid fallback when gradient is not supported
--nlb-card-radius	Corner radius of the outer card (px)
--nlb-card-border-color	Border colour of the outer card (rgba)
--nlb-card-border-width	Border thickness of the outer card (px)
--nlb-card-shadow	Computed drop shadow on the outer card
--nlb-card-max	Maximum width of the outer card
--nlb-card-padding-x	Horizontal padding inside the outer card
--nlb-card-padding-y	Vertical padding inside the outer card
--nlb-bg-image	Optional full-page background image URL
--nlb-text	Default text colour
--nlb-text-muted	Muted / secondary text colour
--nlb-accent	Accent colour for interactive elements and featured states
--nlb-selection-bg	Background colour when text is selected
--nlb-selection-color	Text colour when text is selected
--nlb-font-family	Body font stack
--nlb-heading-font-family	Heading font stack

Profile tokens#

These tokens control the avatar, title, subtitle, and bio text.

Token	What it controls
--nlb-avatar-size	Avatar circle diameter
--nlb-avatar-ring-color	Avatar ring/border colour
--nlb-avatar-ring-width	Avatar ring/border width
--nlb-avatar-shadow	Avatar drop shadow
--nlb-title-color	Display name colour
--nlb-title-size	Display name font size
--nlb-title-weight	Display name font weight
--nlb-title-spacing	Display name letter spacing
--nlb-subtitle-color	Subtitle/tagline colour
--nlb-subtitle-size	Subtitle font size
--nlb-subtitle-weight	Subtitle font weight
--nlb-bio-color	Bio text colour
--nlb-bio-size	Bio text font size

Link button tokens#

These tokens control the individual link button rows.

Token	What it controls
--nlb-link-bg	Link button background (rgba)
--nlb-link-bg-hover	Link button background on hover
--nlb-link-text	Link label text colour
--nlb-link-text-hover	Link label text colour on hover
--nlb-link-border-color	Link button border colour (rgba)
--nlb-link-border-color-hover	Link button border colour on hover
--nlb-link-border-width	Link button border thickness (px)
--nlb-link-border-style	Link button border style (solid, dashed, etc.)
--nlb-link-radius	Link button corner radius (px)
--nlb-link-font-size	Link label font size
--nlb-link-font-weight	Link label font weight
--nlb-link-padding-x	Horizontal padding inside link buttons
--nlb-link-padding-y	Vertical padding inside link buttons
--nlb-link-shadow	Link button resting shadow
--nlb-link-shadow-hover	Link button shadow on hover
--nlb-link-transform-hover	CSS transform applied on hover (e.g. translateY(-2px))
--nlb-link-transition	Transition timing for link hover effects

Enhanced / Media link tokens#

Token	What it controls
--nlb-card-link-radius	Corner radius on image card links
--nlb-card-link-overlay	Overlay band colour on Enhanced Link cards
--nlb-card-link-overlay-color	Alias for the overlay band colour
--nlb-card-link-title-color	Title text colour on Enhanced Link cards
--nlb-card-link-badge-bg	Icon badge background colour
--nlb-card-link-badge-color	Icon badge icon colour
--nlb-media-thumb-size	Square thumbnail width in Media links

Social icon tokens#

Token	What it controls
--nlb-social-color	Social icon glyph colour
--nlb-social-color-hover	Social icon glyph colour on hover
--nlb-social-bg	Social icon button background
--nlb-social-bg-hover	Social icon button background on hover
--nlb-social-border-color	Social icon button border colour
--nlb-social-border-width	Social icon button border width
--nlb-social-radius	Social icon button corner radius
--nlb-social-size	Social icon button diameter
--nlb-social-icon-size	Social icon glyph size within the button
--nlb-social-transform-hover	CSS transform on hover

Language switcher tokens#

Token	What it controls
--nlb-lang-bg	Language switcher tab background
--nlb-lang-bg-active	Active language tab background
--nlb-lang-text-active	Active language tab text colour
--nlb-lang-border	Language switcher border colour
--nlb-lang-radius	Language switcher corner radius

Player tokens#

These tokens theme the Vidstack player when Vidstack links are on the bio page.

Token	What it controls
--nlb-player-accent	Play button, scrubber, and progress fill colour
--nlb-player-bg	Player control bar background
--nlb-player-btn-color	Player control icon colour
--nlb-player-text-color	Player time code and title text colour
--nlb-player-radius	Player wrapper corner radius

Overriding tokens with Custom CSS#

To override a token on a specific bio page, use the Custom CSS field in the editor:

css

body.nlb-page {
    --nlb-link-radius: 0px;
    --nlb-accent: #e91e8c;
}

To override globally across all bio pages, add CSS to your theme’s stylesheet or a plugin like Simple Custom CSS:

css

body.nlb-page {
    --nlb-card-max: 520px;
}

All overrides placed on body.nlb-page cascade into every element on the page automatically.