Custom CSS

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

Video Guide for Visual Learners

How to Set Up Custom CSS

Step 1: Enable Custom CSS

Go to Style & Embed
Navigate to Style → Custom CSS
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:

In the Custom CSS settings section, click Download Default Template
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

Return to Style & Embed → Style → Custom CSS
Click Upload Custom CSS File
Select your modified CSS file
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:

Element	Selector	What 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:

Missing URL parameter: Ensure ?customCss=true is in your embed URL
Custom CSS not enabled: Verify it’s toggled on in Project Settings → Style
Wrong selectors: Make sure you’re using [class*="className"] pattern for nested elements, not plain class names or non-existent data attributes
Missing !important: Many styles require !important to override defaults
Cache issues: Try clearing your browser cache or testing in an incognito window
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.

Creation

Editing and Management

Advanced Features

Before You Begin

Requirements

Important Note

Video Guide for Visual Learners

How to Set Up Custom CSS

Step 1: Enable Custom CSS

Step 2: Download the Default Template

Step 3: Customize Your CSS

Step 4: Upload Your Custom CSS

Step 5: Add the URL Parameter

Understanding CSS Selectors

Use the Right Selectors

Common Elements You Can Style

CSS Custom Properties (Variables)

Example: Styling Status Badges

Troubleshooting

My custom CSS isn’t showing up

Some elements aren’t styling correctly

Styles work in dev tools but not in my CSS file

How do I reset to the default theme?

​Before You Begin

​Requirements

​Important Note

​Video Guide for Visual Learners

​How to Set Up Custom CSS

​Step 1: Enable Custom CSS

​Step 2: Download the Default Template

​Step 3: Customize Your CSS

​Step 4: Upload Your Custom CSS

​Step 5: Add the URL Parameter

​Understanding CSS Selectors

​Use the Right Selectors

​Common Elements You Can Style

​CSS Custom Properties (Variables)

​Example: Styling Status Badges

​Troubleshooting

​My custom CSS isn’t showing up

​Some elements aren’t styling correctly

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

​How do I reset to the default theme?

Before You Begin

Requirements

Important Note

Video Guide for Visual Learners

How to Set Up Custom CSS

Step 1: Enable Custom CSS

Step 2: Download the Default Template

Step 3: Customize Your CSS

Step 4: Upload Your Custom CSS

Step 5: Add the URL Parameter

Understanding CSS Selectors

Use the Right Selectors

Common Elements You Can Style

CSS Custom Properties (Variables)

Example: Styling Status Badges

Troubleshooting

My custom CSS isn’t showing up

Some elements aren’t styling correctly

Styles work in dev tools but not in my CSS file

How do I reset to the default theme?