Skip to main content

​
Before You Begin

​
Requirements

  • Custom CSS must be enabled in your project settings (see “Enabling Custom CSS” below)
  • The custom CSS file must use the correct selectors to work properly (more on this below)

​
Important Note

Even after enabling Custom CSS in your settings, you must add ?customCss=true to your embed URLs for the custom styles to load. Without this parameter, the viewer will use the default theme. Example: 
https://viewer.planpoint.io/embed/your-project?customCss=true

​
How to Set Up Custom CSS

​
Step 1: Enable Custom CSS

  1. Go to Style & Embed
  2. Navigate to Style → Custom CSS
  3. Toggle the Custom CSS feature to Enabled

​
Step 2: Download the Default Template

Before creating your custom CSS, download our default theme template as your starting point:
  1. In the Custom CSS settings section, click Download Default Template
  2. Save the planpoint-theme.css file to your computer
Why start with the template? Our template includes all the correct selectors that work with Planpoint’s system. Modifying it ensures your custom CSS will work properly.

​
Step 3: Customize Your CSS

Open the downloaded CSS file in any text editor and make your changes. Here’s what you can customize: Brand Colors
  • Primary and accent colors
  • Status indicators (Available, Sold, Reserved)
  • Background and text colors
Typography
  • Font families
  • Font sizes for different elements
  • Font weights and styles
Layout & Spacing
  • Padding and margins
  • Border radius values
  • Grid gaps and alignment
Visual Effects
  • Box shadows
  • Hover effects
  • Transitions and animations

​
Step 4: Upload Your Custom CSS

  1. Return to Style & Embed → Style → Custom CSS
  2. Click Upload Custom CSS File
  3. Select your modified CSS file
  4. Click Save

​
Step 5: Add the URL Parameter

Update your embed code to include the customCss=true parameter: Before: 
<iframe src="https://viewer.planpoint.io/embed/your-project"></iframe>
After: 
<iframe src="https://viewer.planpoint.io/embed/your-project?customCss=true"></iframe>

​
Understanding CSS Selectors

​
Use the Right Selectors

Our system uses CSS Modules, which means you need to target elements using specific attribute selectors and class wildcards. The default template already includes these, but here’s what to know if you’re adding new styles: ✅ Correct selectors that work: 
/* Data attribute selectors for main containers */
[data-pp-embed]              /* Main embed wrapper */
[data-pp-container]          /* Inner container */
[data-pp-layout]             /* Layout container */
[data-pp-header]             /* Portal header bar */
[data-pp-cta-desktop]        /* Header CTA button (desktop) */
[data-pp-cta-mobile]         /* Header CTA button (mobile) */
[data-pp-filters]            /* Filters container */
[data-pp-filters-wrapper]    /* Filters wrapper with background */
[data-pp-glass-filters]      /* Glass-style filter variant */
[data-pp-unit-grid]          /* Unit grid */
[data-pp-unit-list]          /* Unit list table */
[data-pp-unit-view]          /* Unit view container */
[data-pp-amenity-view]       /* Amenity view container */
[data-pp-commerce-view]      /* Commerce view container */
[data-pp-canvas]             /* Canvas/floor plan area */
[data-pp-modal]              /* Modal containers */

/* Scope-specific selectors */
[data-pp-scope="project"]    /* Project view */
[data-pp-scope="floor"]      /* Floor view */
[data-pp-scope="unit"]       /* Unit detail view */

/* Class wildcard selectors for nested elements */
[data-pp-embed] [class*="unitTile"]           /* Unit cards */
[data-pp-embed] [class*="unitTileBody"]       /* Card body */
[data-pp-embed] [class*="unitTilePrice"]      /* Price display */
[data-pp-embed] [class*="unitTileAttrs"]      /* Attributes container */
[data-pp-embed] [class*="badge"]              /* Status badges */
[data-pp-embed] [class*="dropdownToggle"]     /* Filter dropdowns */
[data-pp-embed] [class*="dropdownMenu"]       /* Dropdown menus */
[data-pp-embed] [class*="unitCardAction"]     /* Action buttons */
[data-pp-embed] [class*="shortlistAction"]    /* Favorite button */

/* Scope-specific selectors */
[data-pp-scope="project"] [data-pp-layout]    /* Project view layout */
[data-pp-scope="floor"] [data-pp-layout]      /* Floor view layout */
[data-pp-scope="unit"] [class*="unitCard"]    /* Unit detail card */
❌ Incorrect selectors that won’t work: 
/* These data attribute selectors are NOT implemented */
[data-pp-button]         /* Use [class*="button"] or [class*="unitCardAction"] */
[data-pp-unit-tile]      /* Use [class*="unitTile"] instead */
[data-pp-badge]          /* Use [class*="badge"] instead */
[data-pp-dropdown]       /* Use [class*="dropdown"] instead */
[data-pp-list]           /* Use [data-pp-unit-list] or [data-pp-unit-grid] */
[data-pp-floor]          /* Use [data-pp-scope="floor"] instead */

/* Plain class names won't work due to CSS Modules */
.header
.unitTile
.badge

/* This attribute doesn't exist */
[data-theme="showcase"]

​
Common Elements You Can Style

Here are some frequently customized elements:
ElementSelectorWhat it controls
Main container[data-pp-embed]Overall viewer wrapper, CSS variables
Inner container[data-pp-container]Inner container element
Layout[data-pp-layout]Grid layout container
Portal header[data-pp-header]Header bar with logo and CTAs
Header CTA (desktop)[data-pp-cta-desktop]Desktop call-to-action button
Header CTA (mobile)[data-pp-cta-mobile]Mobile call-to-action button
Filters wrapper[data-pp-filters-wrapper]Filter bar background/styling
Filters[data-pp-filters]Filter controls section
Glass filters[data-pp-glass-filters]Glass-style filter variant
Unit grid[data-pp-unit-grid]Grid of unit cards
Unit list[data-pp-unit-list]Table view of units
Unit cards[class*="unitTile"]Individual unit listings
Card body[class*="unitTileBody"]Card content area
Card price[class*="unitTilePrice"]Price display
Status badges[class*="badge"]Available/Sold/Reserved labels
Dropdowns[class*="dropdownToggle"]Filter dropdown buttons
Dropdown menus[class*="dropdownMenu"]Filter dropdown options
Action buttons[class*="unitCardAction"]CTA buttons
Modals[data-pp-modal]Popup windows
Canvas area[data-pp-canvas]Floor plan display area
Unit view[data-pp-unit-view]Unit view container
Amenity view[data-pp-amenity-view]Amenity view container
Commerce view[data-pp-commerce-view]Commerce view container
Gallery[class*="embla"]Image carousel
Shortlist button[class*="shortlistAction"]Favorite/save button

​
CSS Custom Properties (Variables)

The template uses CSS custom properties for easy theme-wide changes. Modify these at the top of your CSS file for consistent styling: 
[data-pp-embed] {
  /* Brand Colors */
  --pp-brand-primary: #5b4cdb;
  --pp-brand-secondary: #7c3aed;
  --pp-brand-accent: #8b5cf6;
  --pp-brand-light: #ede9fe;

  /* Status Colors */
  --pp-success: #059669;
  --pp-success-bg: #d1fae5;
  --pp-danger: #dc2626;
  --pp-danger-bg: #fee2e2;
  --pp-warning: #d97706;
  --pp-warning-bg: #fef3c7;

  /* Neutral Palette */
  --pp-white: #ffffff;
  --pp-gray-50: #f9fafb;
  --pp-gray-100: #f3f4f6;
  --pp-gray-200: #e5e7eb;
  --pp-gray-500: #6b7280;
  --pp-gray-700: #374151;
  --pp-gray-900: #111827;

  /* Shadows */
  --pp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --pp-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --pp-shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.1), 0 4px 8px -2px rgba(0, 0, 0, 0.05);

  /* Border Radius */
  --pp-radius-sm: 8px;
  --pp-radius-md: 12px;
  --pp-radius-lg: 16px;
  --pp-radius-xl: 20px;
  --pp-radius-full: 9999px;
}
Changing these values will update styling throughout your viewer automatically.

​
Example: Styling Status Badges

Here’s an example of how to style the availability badges: 
/* Available badge - green gradient */
[data-pp-embed] [class*="badge"][data-style="available"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
}

/* Sold badge - red gradient */
[data-pp-embed] [class*="badge"][data-style="sold"] {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
}

/* Reserved/On Hold badge - gray gradient */
[data-pp-embed] [class*="badge"][data-style="reserved"],
[data-pp-embed] [class*="badge"][data-style="onhold"] {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
}

​
Troubleshooting

​
My custom CSS isn’t showing up

Check these common issues:
  1. Missing URL parameter: Ensure ?customCss=true is in your embed URL
  2. Custom CSS not enabled: Verify it’s toggled on in Project Settings → Style
  3. Wrong selectors: Make sure you’re using [class*="className"] pattern for nested elements, not plain class names or non-existent data attributes
  4. Missing !important: Many styles require !important to override defaults
  5. Cache issues: Try clearing your browser cache or testing in an incognito window
  6. File upload failed: Re-upload your CSS file and confirm the save was successful

​
Some elements aren’t styling correctly

This usually means you’re using selectors that don’t match our system:
  • ❌ Don’t use: [data-pp-button], [data-pp-unit-tile], .unitTile
  • ✅ Do use: [class*="button"], [class*="unitTile"]
Download a fresh copy of the default template and compare your selectors to the working examples included.

​
Styles work in dev tools but not in my CSS file

Make sure you’re adding !important to your declarations. CSS Modules generate high-specificity selectors, so you need !important to override them.

​
How do I reset to the default theme?

In Style & Embed → Style → Custom CSS, click Remove Custom CSS or simply remove the ?customCss=true parameter from your embed URL.