Library looks wrong or unstyled Free & Pro

If your document library renders but looks broken, the cause is almost always either your theme’s CSS overriding FileDeck’s, or an optimization plugin stripping FileDeck’s stylesheet from the page. FileDeck works with any theme and keeps all of its styles on fdk- prefixed classes, so conflicts are fixable with a small, targeted CSS override rather than plugin edits.

The library is completely unstyled

If the library shows as a plain, unformatted list or table with no colors, spacing, or buttons, FileDeck’s stylesheet is not loading. The usual cause is an optimization plugin with a "remove unused CSS," "critical CSS," or "combine/minify CSS" feature that is stripping or deferring FileDeck’s styles.

1. Temporarily disable your optimization plugin’s CSS features and reload the page. If the library looks right, you have found the cause.
2. Re-enable the features, but add filedeck to the plugin’s CSS exclusion list so FileDeck’s stylesheet is left alone.
3. If the plugin generates critical CSS, regenerate it after excluding FileDeck, then clear all caches and retest.

Theme CSS conflicts

Themes often ship broad rules for table, button, and link elements that bleed into the library. Two common cases:

The table is stretched or squashed. Some themes force fixed table layouts or widths on every table. Use your browser’s inspector to confirm the exact class name on FileDeck’s table wrapper (all FileDeck classes start with fdk-), then override the theme’s rule. For example:

/* Let the FileDeck table size its own columns */
.fdk-table {
    width: 100%;
    table-layout: auto;
}

If columns still feel cramped, showing fewer columns is often a better fix than fighting the theme for horizontal space.

Download buttons inherit odd theme styles. Themes commonly style every button or .button element with their own gradients, shadows, or padding. Inspect the download button, note its fdk- class, and override the theme with a more specific selector:

/* Reset theme button styling on FileDeck download buttons */
.fdk-download-button {
    background-image: none;
    box-shadow: none;
    text-transform: none;
}

Adjust the property list to whatever the inspector shows the theme is injecting. Because you are targeting FileDeck’s own classes, these overrides affect nothing else on the site.

The layout broke after switching themes

Different themes use different content widths, fonts, and base styles, so the library can look off after a theme change even though nothing in FileDeck changed.

1. Go to Documents → Settings and re-check your display settings — adjust the accent color to match the new theme and re-save.
2. If the library feels too wide or too narrow, that is usually the new theme’s content container, not FileDeck; check the page template or container width the new theme applies.
3. Re-apply any custom CSS overrides you had written for the old theme’s conflicts — they may no longer be needed, or may need different values.

Adding custom CSS safely

Never edit the plugin’s files — changes are lost on update. Instead:

1. Go to Appearance → Customize → Additional CSS.
2. Target fdk- prefixed classes only, keeping selectors as narrow as possible.
3. Publish. CSS added here survives both FileDeck updates and WordPress updates, and travels with your theme.

For the built-in options — accent color and the four download link styles (Button, Button with icon, Icon only, Text link) — see the styling guide before writing custom CSS; many looks are achievable without any code.

FAQ

Will my custom CSS survive FileDeck updates?

Yes, as long as it lives in Appearance → Customize → Additional CSS (or your child theme) and targets fdk- classes. Only edits made inside the plugin’s own files are lost on update.

Why does my library look different from the FileDeck demo?

Your theme’s fonts, colors, and container widths apply to the library too. Adjust the accent color under Documents → Settings to bring the library closer to your site’s look.

Which CSS classes should I target?

All FileDeck classes start with the fdk- prefix. Use your browser’s inspector on the element you want to change to confirm the exact class name before writing an override.