Custom CSS

When the built-in display options don't go far enough, you can write Custom CSS to style your FlipBooks. Use it for fine-tuning your brand, adjusting spacing, hiding elements you can't toggle, or overriding any visual element. This article covers where to add CSS, useful selectors, and common recipes.

Two scopes: global vs. per-FlipBook

Global Custom CSS

Location: FlipBooks → Settings → Advanced → Custom CSS.

Applies to every FlipBook on your site. Use this for site-wide brand customizations.

Per-FlipBook Custom CSS

Location: Open a FlipBook → Advanced tab → Custom CSS section.

Applies to only this FlipBook. Use for one-off overrides.

Per-FlipBook CSS is loaded after global CSS, so its rules win when both target the same element.

The CSS editor

The Custom CSS field uses CodeMirror, a code editor that provides:

  • Syntax highlighting (colors for selectors, properties, values).
  • Line numbers.
  • Bracket matching.
  • Auto-indentation.

It's a real code editor, so write CSS as you would in any text editor.

After making changes, click Save Changes at the bottom of the settings page (or the FlipBook update button for per-FlipBook CSS).

How custom CSS is loaded

Custom CSS is rendered as a <style> tag inside the <head> of pages that contain a FlipBook. It loads after the plugin's own stylesheets, so your rules override the defaults.

Custom CSS only loads on pages with a FlipBook on them, so it doesn't slow down the rest of your site.

Useful CSS selectors

The FlipBook viewer is wrapped in a parent element with the class tnc-flipbook-3d. All viewer elements live inside it. Here are common selectors:

Selector

Targets

.tnc-flipbook-3d

The entire FlipBook wrapper

.tnc-flipbook-3d .tncfb-toolbar

The toolbar

.tnc-flipbook-3d .tncfb-toolbar button

Every toolbar button

.tnc-flipbook-3d .tncfb-sidebar

Sidebars (search, thumbnails, bookmarks, notes)

.tnc-flipbook-3d .tncfb-popup

Any popup (link, image, note, hotspot popup)

.tnc-flipbook-3d .tncfb-page-indicator

The "5 / 24" page indicator

.tnc-flipbook-3d canvas

The 3D canvas where pages render

To find the right selector for an element, inspect with browser dev tools:

  1. Right-click the FlipBook on the front end.
  2. Click Inspect.
  3. Find the element you want to style in the DOM tree.
  4. Look at its class names — those are your selectors.

Common recipes

Change a toolbar button color

.tnc-flipbook-3d .tncfb-toolbar button.tncfb-btn-fullscreen {
  background-color: #ff0000;
  color: white;
}

Round all toolbar corners

.tnc-flipbook-3d .tncfb-toolbar {
  border-radius: 16px;
}

Hide a specific toolbar button

.tnc-flipbook-3d .tncfb-btn-share {
  display: none !important;
}

(Or use the Toolbar settings — that's the proper way. Custom CSS is a fallback.)

Make the FlipBook take the full viewport

.tnc-flipbook-3d {
  width: 100vw !important;
  height: 100vh !important;
}

Customize the loading screen background

.tnc-flipbook-3d .tncfb-loading {
  background: linear-gradient(135deg, #000 0%, #333 100%);
}

Style hotspot popups

.tnc-flipbook-3d .tncfb-hotspot-popup {
  border: 2px solid #c8a04a;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.95);
  color: white;
}

Boost focus rings (accessibility)

.tnc-flipbook-3d *:focus {
  outline: 3px solid #4a9eff !important;
  outline-offset: 2px;
}

Change shadow under the book

.tnc-flipbook-3d .tncfb-shadow {
  filter: blur(20px) brightness(0.6);
}

Hide the "Powered by" attribution

.tnc-flipbook-3d .tncfb-attribution {
  display: none;
}

(Note: there's also a global toggle for this in Settings → General → Attribution Badge.)

Tips for writing custom CSS

1. Prefix selectors with .tnc-flipbook-3d

This scopes your CSS to the FlipBook only — your rules don't affect the rest of your site.

2. Use specificity, not !important, where possible

!important is a sledgehammer. Prefer adding more specific selectors:

  • ❌ .tncfb-toolbar { background: red !important; }
  • ✅ .tnc-flipbook-3d .tncfb-toolbar { background: red; }

3. Test in multiple themes

If you switch themes later, custom CSS may not carry over the same way. Test in a default theme to confirm your CSS is self-contained.

4. Avoid styling internal classes that may change

Class names starting with __ or tncfb-internal-* are subject to change between releases. Style only the public-named classes you find documented or in the source.

5. Use CSS variables for consistency

The plugin uses CSS custom properties for theming. You can override them:

.tnc-flipbook-3d {
  --color-primary: #c8a04a;
  --color-toolbar-bg: #1a1a1a;
}

This is often cleaner than overriding individual properties.

CSS variables you can override

Variable

Default

What it affects

--color-primary

Brand color

Buttons, focus rings, active icons

--color-text

Theme text

Body text in the toolbar/sidebar

--color-bg-toolbar

Chrome

Toolbar background

--color-bg-sidebar

Chrome

Sidebar background

--color-bg-popup

Chrome

Popup background

--color-border

Theme

Border color

These are the public variables. Internal variables may exist but aren't guaranteed to stay stable across releases.

Common problems

My CSS isn't applying

Check in order:

  1. Save and reload: confirm you clicked Save in the admin.
  2. Cache: clear page cache, CDN, server cache.
  3. Specificity: your selector might not be specific enough. Try adding the wrapper class .tnc-flipbook-3d.
  4. Override: per-FlipBook CSS overrides global. If you wrote it globally but the FlipBook has its own custom CSS, the per-FlipBook version wins.
  5. !important: if other CSS is using !important, you may need to use it too.

My CSS works on desktop but not mobile

Test with mobile dev tools (Chrome's responsive mode). Common causes:

  • Mobile-only styles override your CSS — add a media query.
  • Touch-related elements have different classes — inspect to find them.

My CSS breaks the layout

CSS is unforgiving. Common mistakes:

  • Forgetting ; at end of a property.
  • Mismatched braces { }.
  • Mistyping a property name.

CodeMirror highlights syntax issues — look for red underlines.

When NOT to use Custom CSS

  • For brand colors — use the Brand Color picker on the Display tab. Custom CSS for this is fragile.
  • To hide a button — use the Toolbar tab. Hiding via CSS still loads the button code; toolbar settings actually disable it.
  • To change text labels — translate via Loco Translate (see Internationalization), not CSS.
  • To override behavior — CSS only changes appearance. For behavior, use the Developer API hooks and filters.

Per-FlipBook vs. global CSS — when to pick which

Use global when:

  • The CSS reflects site-wide branding.
  • You want a single source of truth.
  • The change applies to most or all FlipBooks.

Use per-FlipBook when:

  • The CSS applies to only one specific FlipBook.
  • You're customizing a one-off look.
  • You want to test changes without affecting other FlipBooks first.

Backing up your CSS

The Custom CSS field doesn't have a built-in revision history. Before making large changes:

  1. Copy the current CSS to a text file on your computer.
  2. Save the FlipBook's JSON export (FlipBooks → Toolkit → Export) — it includes per-FlipBook CSS.
  3. Make your changes.

If something breaks, you can paste the old CSS back.

Next steps

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us