Styling Conflicts #

Sometimes your WordPress theme’s CSS can override PetMatchPro styles, causing layout issues, wrong colors, or broken formatting. This guide helps you identify and fix these conflicts.

How to Identify a CSS Conflict #

Step 1: Inspect the Element #

1. Right-click on the element that looks wrong.
2. Select Inspect (or press F12).
3. The browser developer tools will open, highlighting the element’s HTML and CSS.

Step 2: Check for Overridden Styles #

In the Styles panel, look for PetMatchPro styles that are crossed out. Crossed-out styles mean another CSS rule is overriding them. The overriding rule will be listed above it.

Step 3: Identify the Source #

The Styles panel shows where each CSS rule comes from (file name and line number). Look for rules coming from your theme’s CSS files that override rules from pet-match-pro-styles.css.

PetMatchPro CSS Conventions #

All PetMatchPro CSS classes use the pmp- prefix. This makes it easy to identify PetMatchPro elements:

• pmp-search-results — Search results container
• pmp-search-result-container — Individual animal card wrapper
• pmp-details-container — Detail page container
• pmp-error — Error messages

If your theme targets generic selectors (like table, img, a, h2) with aggressive styles, those may conflict with PetMatchPro elements.

Fixing Conflicts #

Method 1: Use WordPress Additional CSS #

Custom CSS for PetMatchPro lives in the WordPress Customizer (the in-plugin Custom CSS field was retired and any existing rules are auto-migrated to this location):

1. Go to Appearance > Customize > Additional CSS.
2. Add your CSS rules targeting pmp- prefixed selectors.
3. Click Publish.

Rules added here apply site-wide and survive plugin updates. If you previously had rules in the PetMatchPro Custom CSS field, look for a /* Pet Match Pro Custom CSS - Migrated */ block at the bottom of Additional CSS — that’s your old content.

Method 2: Increase CSS Specificity #

Instead of using !important (which PetMatchPro avoids), increase the specificity of your selector:

/* Less specific — may be overridden by theme */
.pmp-search-result-container { padding: 10px; }
/* More specific — will override theme styles */
.pmp-search-results .pmp-search-result-container { padding: 10px; }
/* Even more specific */
div.pmp-search-results div.pmp-search-result-container { padding: 10px; }

Method 3: Target the Theme CSS #

If the theme is applying unwanted styles to PetMatchPro elements, add a more specific rule in Appearance > Customize > Additional CSS (or your theme’s own custom CSS area) to reset the style:

/* Reset theme's table styling inside PetMatchPro */
.pmp-search-results table {
  border: none;
  margin: 0;
  background: transparent;
}

Common Conflicts #

Tip: Avoid !important #

PetMatchPro intentionally avoids !important declarations. We recommend you do the same — it leads to an “escalation war” of competing !important rules that becomes impossible to maintain. Use specificity instead.

Next Steps #

• Color Customization — Set colors properly through PetMatchPro
• Theme Template Overrides — Full template customization control