Custom CSS Guide

WP LinkCanvas provides two places to add custom CSS — a per-page field in the bio page editor, and any global stylesheet. Both are standard CSS targeting the bio page’s class structure.

Where to add CSS#

Per-page Custom CSS — in the bio page editor, scroll to the bottom and expand Custom CSS. CSS entered here applies only to that bio page. It is scoped automatically — you can write selectors without worrying about affecting the rest of your site.

Global CSS — add CSS to your theme’s stylesheet, a child theme, or a plugin like Simple Custom CSS. Use body.nlb-page as the top-level scope to target all bio pages.

Page structure#

Every bio page has body.nlb-page as the root class. The layout inside is:

body.nlb-page
  .nlb-card                  ← outer card
    .nlb-avatar              ← profile photo circle
    .nlb-title               ← display name
    .nlb-subtitle            ← tagline
    .nlb-bio                 ← bio paragraph
    .nlb-lang-switcher       ← language tabs (if multilanguage)
    .nlb-showcase            ← product rail (if enabled, above links)
    .nlb-links               ← links list
      .nlb-link              ← individual link row
    .nlb-socials             ← social icon row
      .nlb-social            ← individual social icon
    .nlb-showcase            ← product rail (if enabled, below links)

Link style classes#

Each link gets a modifier class based on its type:

Class	Link style
.nlb-link	All links (base)
.nlb-link--card	Enhanced Link (image card)
.nlb-link--media	Media (square thumbnail)
.nlb-link--embed	Embed (iframe)
.nlb-link--shortcode	Shortcode
.nlb-link--vidstack	Vidstack player
.nlb-link--vidstack-video	Vidstack video player
.nlb-link--vidstack-audio	Vidstack audio player
.nlb-link--featured	Any link with Featured toggle on
.nlb-link--embed-youtube	YouTube embed specifically
.nlb-link--embed-spotify	Spotify embed specifically

Other embed providers follow the same pattern — .nlb-link--embed-{provider} where provider is the lowercase platform key (vimeo, soundcloud, twitch, etc.).

Common customisations#

Change link button corner radius#

css

body.nlb-page {
    --nlb-link-radius: 8px;
}

Make links fully square#

css

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

Change the accent colour#

css

body.nlb-page {
    --nlb-accent: #e91e8c;
}

Increase bio page maximum width#

css

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

Hide the avatar#

css

body.nlb-page .nlb-avatar {
    display: none;
}

Style a specific link differently#

Each link has a data-nlb-slot attribute containing a unique ID. Use this to target one link:

css

body.nlb-page .nlb-link[data-nlb-slot="link_abc123"] {
    background: #ff6a00;
}

Find the slot ID by inspecting the link element in your browser’s developer tools.

Change social icon size#

css

body.nlb-page {
    --nlb-social-size: 48px;
    --nlb-social-icon-size: 22px;
}

Style Vidstack player controls for a specific theme#

css

body.nlb-page {
    --nlb-player-accent: #ff6a00;
    --nlb-player-radius: 12px;
}

Make the Enhanced Link card taller#

css

body.nlb-page .nlb-link--card {
    min-height: 220px;
}

Hide the embed caption link#

css

body.nlb-page .nlb-link__embed-caption {
    display: none;
}

RTL support#

Bio pages for Arabic, Hebrew, and other RTL languages get body.nlb-page.nlb-rtl and dir="rtl" on the HTML element. The plugin uses logical CSS properties (padding-inline-start, margin-inline-end etc.) throughout so most RTL layout works automatically. Use the .nlb-rtl class to add RTL-specific overrides:

css

body.nlb-page.nlb-rtl .nlb-title {
    font-family: "Cairo", sans-serif;
}

Using CSS tokens in custom rules#

Tokens are available in any CSS rule targeting body.nlb-page:

css

body.nlb-page .my-custom-element {
    color: var(--nlb-accent);
    background: var(--nlb-link-bg);
    border-radius: var(--nlb-link-radius);
}

See the CSS Token Reference for the full list of available tokens.