Back to Community
Home / Community / Theme → Sydney

How to Fix Sydney Theme Color and Styling Issues with Custom CSS

31 threads Sep 9, 2025 Theme → Sydney

Content

Many Sydney theme users encounter situations where the built-in Customizer options don't fully control their site's appearance. This is a common point of confusion, especially after theme updates that can introduce new CSS selectors or change existing ones. Based on community discussions, this guide covers the most frequent color-related issues and their solutions.

Common Sydney Theme Color Problems

Users frequently report that color settings for the following elements don't work as expected:

  • Menu text color on desktop or mobile views
  • Button text, background, and hover states
  • Footer widget text and link colors
  • Header contact info hover colors
  • Specialized widget styles (e.g., Call-to-Action buttons, Skills bars)
  • Pagination button colors

Why This Happens

These issues typically occur for a few key reasons:

  1. Theme Updates: New Sydney versions sometimes change CSS class names or specificity, overriding previous Customizer settings.
  2. CSS Specificity: The theme's default styles may have higher specificity than the Customizer-generated CSS.
  3. Plugin Conflicts: Third-party plugins can inject CSS that conflicts with theme styles.
  4. Browser Caching: Old CSS files might be cached in your browser, preventing new styles from appearing.

Most Effective Solution: Custom CSS

The most reliable way to overcome these styling limitations is by adding custom CSS. Nearly all resolved threads in the Sydney community involved adding targeted CSS code to the Additional CSS section.

How to Add Custom CSS

  1. Go to your WordPress Dashboard
  2. Navigate to Appearance → Customize
  3. Open the Additional CSS section
  4. Paste your custom CSS code
  5. Publish your changes

Proven CSS Solutions from the Community

1. Changing Menu Colors

For menu items that revert color or don't respond to Customizer settings:

.main-header #mainnav ul li a {
    color: #your-color-here !important;
}

2. Fixing Mobile Menu Colors

When mobile menu colors differ from desktop:

.mainnav.toggled ul > li > a, 
#mainnav-mobi ul > li > a {
    color: #f76500;
}

3. Customizing Button Styles

For button background, text, and hover states:

.header-elements .roll-button {
    border-color: #ff0000;
    background-color: #ff0000;
    color: #ccc;
}

.header-elements .roll-button:hover {
    border-color: #fff000;
    background-color: #fff000;
    color: #000;
}

4. Adjusting Footer Widget Colors

For footer text and link colors:

#sidebar-footer a {
    color: #ffffff;
}

5. Modifying Header Contact Info Hover Color

.header-contact a:hover {
    color: pink;
}

Important Considerations

  • Always use a child theme when adding custom code to prevent changes from being overwritten by theme updates.
  • After adding CSS, clear your browser cache and any caching plugins to see changes immediately.
  • Use browser developer tools (F12) to inspect elements and identify the correct CSS selectors for your specific situation.
  • Test changes on different screen sizes to ensure mobile and desktop views work correctly.

When to Seek Additional Help

If these solutions don't resolve your issue, consider that:

  • Your specific Sydney theme version might have unique selectors
  • You may have plugin conflicts that require deactivation testing
  • Your header layout choice might affect which CSS selectors work

For persistent issues, the Sydney user community can often provide targeted solutions when you share your site URL and specific problem description.

Related Support Threads Support