Skip to main content

Custom CSS

Add custom styles beyond TheDock's design system.

Overview​

While TheDock's design system handles most styling needs, sometimes you need custom CSS for:

  • Third-party plugin styling
  • Specific design tweaks
  • Advanced effects
  • Overriding default styles

Accessing Custom CSS​

  1. Click C. Build in navigation
  2. Click Custom CSS in sidebar

You'll see a code editor for writing CSS.

The CSS Editor​

Features​

  • Syntax highlighting - CSS is color-coded
  • Line numbers - Easy reference
  • Auto-complete - Suggestions as you type
  • Error detection - Invalid CSS is flagged

Writing CSS​

Enter your CSS rules directly:

/* Custom button style */
.my-custom-button {
  background: linear-gradient(45deg, #0074ff, #4d9eff);
  border-radius: 50px;
  padding: 15px 30px;
}

/* Adjust header on scroll */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

CSS Variables​

TheDock generates CSS variables from your design system. You can use these in custom CSS:

Color Variables​

.my-element {
  color: var(--color-primary);
  background: var(--color-base);
  border-color: var(--color-contrast);
}

Spacing Variables​

.my-section {
  padding: var(--spacing-large);
  margin-bottom: var(--spacing-normal);
}

Typography Variables​

.my-heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-large);
}

Common Use Cases​

Styling Third-Party Plugins​

/* WooCommerce button override */
.woocommerce .button {
  background: var(--color-primary);
  color: var(--color-base);
}

/* Contact Form 7 */
.wpcf7-form input[type="submit"] {
  background: var(--color-accent);
}

Animation Effects​

/* Fade in on scroll */
.fade-in-element {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.fade-in-element.is-visible {
  opacity: 1;
  transform: translateY(0);
}

Responsive Adjustments​

/* Mobile-specific styles */
@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }

  .mobile-padding {
    padding: 10px;
  }
}
@media print {
  .no-print {
    display: none;
  }

  body {
    font-size: 12pt;
  }
}

CSS Specificity​

How It Works​

Custom CSS is loaded after TheDock's generated CSS, so:

  • Same specificity = custom CSS wins
  • Lower specificity = TheDock wins
  • Use more specific selectors when needed

Increasing Specificity​

/* May not override */
.button { background: red; }

/* More specific */
.site-content .button { background: red; }

/* Even more specific */
body .site-content .button { background: red; }

/* Last resort (avoid if possible) */
.button { background: red !important; }

Avoid !important​

Use it sparingly. It makes future overrides difficult.

Organization Tips​

Use Comments​

/* ==========================================================================
   Header Styles
   ========================================================================== */

/* Logo sizing */
.site-logo {
  max-width: 150px;
}

/* Navigation tweaks */
.main-nav a {
  text-transform: uppercase;
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--color-contrast);
}

Keep related rules together:

  • All header styles in one section
  • All form styles together
  • Plugin overrides in their own section

Testing Custom CSS​

In TheDock​

Changes appear immediately in the preview pane.

On Live Site​

  1. Export your theme
  2. Visit the live site
  3. Test across browsers
  4. Check responsive behavior

Browser DevTools​

Use browser developer tools to:

  • Test CSS before adding to TheDock
  • Debug specificity issues
  • Inspect computed styles

Best Practices​

1. Use Design System First​

Only use custom CSS when the design system can't achieve what you need.

2. Keep It Minimal​

Less custom CSS = easier maintenance.

3. Use CSS Variables​

Reference TheDock's variables to stay consistent with design changes.

4. Test Responsively​

Always check mobile, tablet, and desktop.

5. Comment Your Code​

Explain why custom CSS is needed, not just what it does.

6. Version Control​

Keep backups of your custom CSS outside TheDock.

Troubleshooting​

CSS not applying​

  • Check selector specificity
  • Verify syntax is correct
  • Look for typos
  • Ensure export completed

Styles work in preview but not on site​

  • Clear caching plugins
  • Hard refresh browser
  • Check for conflicting plugins

CSS breaks on update​

  • Review changelog for breaking changes
  • Check if class names changed
  • Update selectors as needed

Mobile styles not working​

  • Verify media query syntax
  • Check breakpoint values
  • Test with actual devices

← Back to Documentation