Back to Community
Home / Community / Theme → Twenty seventeen

How to Fix Common Color and Background Issues in the Twenty Seventeen Theme

36 threads Sep 9, 2025 Theme → Twenty seventeen

Content

Many users of the Twenty Seventeen theme encounter challenges when trying to customize colors, backgrounds, and other visual elements. These issues often stem from the theme's specific CSS structure and the interaction between its built-in color schemes and custom CSS. This guide compiles the most common problems and their solutions, based on community discussions.

Common Problems and Their Solutions

1. White Band or Footer Background Not Changing

Problem: After changing the main background color, a white band remains in the footer or content area.

Solution: This is often controlled by the theme's "Transparent Content Background" option. Navigate to Appearance → Customize → Colors and check the 'Transparent Content Background' checkbox. If you need more control, the following CSS can be added to Appearance → Customize → Additional CSS:

.site-footer, .site-content-contain { background-color: your-color-here; }

2. Custom CSS Not Working with Dark Color Scheme

Problem: Custom CSS rules work in the Light scheme but have no effect when the Dark color scheme is active.

Solution: The Dark scheme adds a .colors-dark class to the body, which can override your custom CSS. To ensure your styles apply, you must include this class in your selectors. For example, to change the menu background in the dark scheme:

.colors-dark .navigation-top { background-color: #548138; }

3. Changing Global Text and Link Colors

Problem: Text or link colors are too light, especially in dark mode, or don't change with global CSS.

Solution: Use the following CSS examples in the Additional CSS panel, making sure to target the correct elements. For dark mode, remember to prefix with .colors-dark.

/* Global text color */
body, p { color: #000; }

/* Global link color */
a { color: #eaae3d; }

/* Link hover color */
a:hover { color: #ccc !important; }

/* Footer link color */
.site-footer a, .site-info a { color: #ccc; }

/* Caption text color */
.wp-caption-text { color: #fff; }

4. Styling Third-Party Elements in Dark Mode

Problem: Forms or elements from plugins (e.g., WooCommerce, Business Directory) have unreadable text (light on white) when the Dark theme is active.

Solution: You need to specifically target these elements and override their styles. For instance, to fix WooCommerce radio buttons or form dropdowns:

.colors-dark input, .colors-dark select { color: #000; background: #fff; }

5. Removing or Changing Unwanted Lines and Borders

Problem: Unwanted lines appear at the bottom of pages or around elements.

Solution: These are often borders or box-shadows. Inspect the element with your browser's developer tools to identify the exact CSS property, then use code like this to remove or change it:

.entry-content, .hentry, .page-content { box-shadow: none; border: none; }

Best Practices for Adding Custom CSS

  • Use Additional CSS: Always add custom code to Appearance → Customize → Additional CSS. This is safer than editing theme files directly.
  • Use a Child Theme: For extensive modifications, consider using a child theme to prevent your changes from being overwritten by theme updates.
  • Specificity is Key: If a rule isn't working, your CSS selector may not be specific enough. Use your browser's inspector tool to find the exact classes being used by the theme and mimic or override them.
  • Use !important Sparingly: While !important can force a style to apply, it can make future CSS changes difficult. Try using more specific selectors first.

By understanding how the Twenty Seventeen theme structures its color classes and using targeted CSS, you can overcome most common styling hurdles and achieve the look you want for your site.

Related Support Threads Support