1. Home
  2. Account & User Settings
  3. Developer Portal
  4. Developer Guide: Creating Custom Widget Themes
  1. Home
  2. Plugin, Widgets and Website Settings
  3. Styling Widgets
  4. Developer Guide: Creating Custom Widget Themes
Searching...

Developer Guide: Creating Custom Widget Themes

Contents

This guide explains how developers can create and manage custom widget themes that can be deployed across multiple client websites. Custom themes allow you to maintain consistent branding and styling across all your client accounts.

Quick Overview

As a developer, you can now create custom widget themes in your developer account that will be available to all your client accounts. These themes appear in client accounts labeled as "Custom by Developer: {theme name}" and provide a powerful way to:

  • Maintain brand consistency across multiple client websites
  • Create reusable design templates
  • Streamline the setup process for new clients
  • Implement advanced styling that clients cannot accidentally modify

Getting Started

Accessing Your Developer Portal

  1. Log in to your developer account
  2. Navigate to your dashboard where you can see all your client accounts
  3. Access the Widget Themes section from the top menu: Widgets > Widget Themes

For more information about the developer portal, see our Developer Portal Guide.

Creating Your First Custom Theme

Step 1: Navigate to Widget Themes

  1. In your developer account, go to Widgets > Widget Themes page
  2. You'll see existing library themes and any custom themes you've already created
  3. Your Custom themes are organized in the "Custom Themes" tab

Step 2: Copy an Existing Theme

To create a custom theme, the easiest way to start is by copying an existing theme:

  1. Browse available themes (both Library and existing Custom themes)
  2. Find a theme that closely matches your desired starting point
  3. Click the copy option for that theme
  4. Give your new theme a descriptive name

Important: Choose theme names carefully as the same theme name will appear across all your client accounts. Use descriptive names that help differentiate themes in selection lists.

Step 3: Edit Your Custom Theme

  1. Once copied, your theme appears in the "Custom Themes" tab
  2. Click the Edit icon next to your theme
  3. Modify the theme settings and styling options
  4. Use the preview function to test your changes

Managing Common CSS

Understanding Common CSS

Common CSS is a powerful feature that applies the same custom styles to ALL of your custom themes. This is ideal for:

  • Brand-wide styling standards
  • Consistent typography across all themes
  • Universal layout adjustments
  • Shared utility classes

Adding Common CSS

  1. On the Widget Themes page, click the "Add Common CSS" button
  2. In the Common CSS modal, add your CSS rules
  3. Do not include <style> tags - only the CSS rules themselves
  4. Click Save

Important: When you save Common CSS, all your existing custom themes will be updated immediately. Any client websites using these themes will reflect the changes automatically.

Common CSS Example

/* Brand typography */
.widget-container {
    font-family: 'Your Brand Font', Arial, sans-serif;
}

/* Consistent button styling */
.btn-primary {
    background-color: #your-brand-color;
    border-radius: 4px;
    padding: 10px 20px;
}

/* Universal responsive adjustments */
@media (max-width: 768px) {
    .widget-container {
        padding: 15px;
    }
}

Theme-Specific Customization

Adding Custom CSS to Individual Themes

Each custom theme can have its own specific CSS in addition to (or instead of) the Common CSS:

  1. Edit the desired custom theme
  2. Navigate to the "Custom CSS" tab
  3. Add theme-specific CSS rules
  4. Save your changes

CSS Loading Order

CSS is loaded in this order:

  1. Base theme styles
  2. Common CSS (applied to all your custom themes)
  3. Theme-specific custom CSS

Standard CSS cascading rules apply, so later styles override earlier ones when specificity is equal.

Theme-Specific CSS Example

/* Theme-specific color overrides */
.property-card {
    border-left: 4px solid #theme-specific-color;
}

/* Theme-specific layout adjustments */
.search-form {
    background: linear-gradient(45deg, #color1, #color2);
}

/* Override Common CSS for this theme only */
.btn-primary {
    background-color: #different-color-for-this-theme;
}

Deploying Themes to Client Websites

How Themes Appear to Clients

  1. When you create custom themes, they automatically become available for selection in all your client accounts
  2. Clients only see these themes in their Website Options > Widget Theme > Theme selection list
  3. Your custom themes are labeled as "Custom by Developer: {theme name}"
  4. Clients cannot modify your custom themes - they are read-only and only appear in the Theme selection list

Implementation Process

To apply your custom theme:

  1. Login to your client's Buying Buddy account (or client logs in)
  2. Go to Widgets > Website Settings
  3. Select the "Widget Theme" tab
  4. Choose your custom theme from the Select Theme dropdown
  5. Save the settings

Platform-Specific Considerations

WordPress Sites:

  • The new theme should display when you refresh the page
  • If you don't see the theme, then in the WordPress admin, go to the Buying Buddy WordPress plugin > Settings tab
  • Click the "Update" button to reload widgets with the new theme
  • This ensures the theme is properly applied

All Platforms:

  • If theme changes don't appear immediately, advise clients to clear their website cache
  • Page refreshes may be needed to see theme updates

Best Practices for Developers

Theme Naming Strategy

Use clear, descriptive names that help you and your clients identify themes:

Good Examples:

  • "Corporate Blue - Property Search"
  • "Luxury Gold - Agent Profiles"
  • "Modern Minimal - Contact Forms"

Avoid:

  • Generic names like "Theme 1" or "Blue Theme"
  • Names that don't indicate the theme's purpose or style

CSS Architecture

Structure your Common CSS for scalability:

/* Base brand variables (use CSS custom properties) */
:root {
    --brand-primary: #your-color;
    --brand-secondary: #your-secondary;
    --brand-font: 'Your Font', sans-serif;
}

/* Universal brand elements */
.widget-container {
    font-family: var(--brand-font);
}

/* Utility classes for consistency */
.brand-button {
    background-color: var(--brand-primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
}

Performance Considerations

  • Keep CSS concise and efficient
  • Use CSS custom properties for repeated values
  • Avoid overly complex selectors
  • Test themes on mobile devices
  • Consider loading time impact of custom fonts

Advanced Widget Customization

Example: Custom styling for property search widgets:

/* Theme-specific property search styling */
.property-search-form {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.search-input {
    border: 2px solid transparent;
    background: white;
    border-radius: 8px;
    padding: 12px 16px;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: #your-brand-color;
    box-shadow: 0 0 0 3px rgba(your-rgb-values, 0.1);
}

Troubleshooting

Theme Not Appearing in Client Account

Check these items:

  1. Verify the theme was saved successfully in your developer account
  2. Ensure the client account is properly linked to your developer account
  3. Have the client refresh their browser and navigate back to the theme selection area
  4. Confirm you're looking in the correct client account

CSS Not Loading Correctly

Common solutions:

  1. Clear website cache - Most important first step
  2. WordPress users: Update the Buying Buddy plugin settings
  3. Check CSS syntax - Invalid CSS can break the entire stylesheet
  4. Verify CSS specificity - Your custom CSS may need more specific selectors

CSS Debugging Example:

/* Too general - may not override theme defaults */
.button { color: red; }

/* More specific - more likely to work */
.widget-container .property-card .button { color: red; }

/* Use !important as last resort */
.button { color: red !important; }

Theme Updates Not Reflecting

If changes to your custom themes aren't appearing on client sites:

  1. Save your changes and wait a few minutes
  2. Have clients clear their website cache
  3. For WordPress sites, update plugin settings
  4. Check browser developer tools to verify CSS is loading

Performance Issues

If themes are causing slow loading:

  1. Review CSS for overly complex selectors
  2. Minimize use of web fonts
  3. Optimize image references in CSS
  4. Consider splitting large CSS into theme-specific sections rather than Common CSS

Managing Theme Versions

Since there's no built-in versioning system, follow these practices:

Creating New Versions

When you need to make significant changes to an existing theme:

  1. Create a copy of the current theme with a version identifier
    • Original: "Corporate Blue - Property Search"
    • New version: "Corporate Blue - Property Search v2"
  2. Test the new version thoroughly before recommending to clients
  3. Communicate changes to affected clients before they switch themes

Theme Maintenance

Important: You cannot delete a theme that's currently being used by any client websites. To remove a theme:

  1. Identify which clients are using the theme
  2. Help clients migrate to a different theme
  3. Once no sites are using the theme, you can delete it

Advanced Topics

CSS Custom Properties for Dynamic Theming

Use CSS custom properties to create more flexible themes:

/* Common CSS with custom properties */
:root {
    --primary-color: #2c5282;
    --secondary-color: #ed8936;
    --border-radius: 8px;
    --spacing-unit: 1rem;
}

.widget-card {
    background: white;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: calc(var(--spacing-unit) * 2);
}

Responsive Design Best Practices

Ensure your themes work well on all devices:

/* Mobile-first responsive design */
.property-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .property-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .property-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

Reference and Additional Resources

CSS Resources

Getting Help

If you encounter issues or have questions about custom theme development, please contact our developer support team with:

  • Your developer account information
  • Specific theme names you're working with
  • Detailed description of the issue
  • Screenshots or code examples when relevant
Updated on June 20, 2025
Was this article helpful?
Yes No

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support
Buying Buddy Support