Take full control of the viewer styling when the style editor is not enough.
If your brand needs something the style editor cannot express, you can inject your own CSS into the viewer.Go to Settings → Customization and click Use your own CSS. The button turns dark and reads Custom CSS enabled; a code editor opens underneath.
Settings → Customization → Use your own CSS
Custom CSS is the one part of the editor that does not autosave. Click Save CSS — the indicator next to the button shows Unsaved changes, Saving… or Saved.
Overriding the variables keeps light mode, dark mode and every component consistent. Reach for element selectors only when a variable cannot do the job.
Open your published Visit, right-click an element and choose Inspect to find the exact class you need. Every class the viewer uses starts with iv_ or pp_.
Custom CSS is powerful and unsupported by definition — a future viewer update can change an internal class name. Stick to the variables where you can, keep your overrides short, and re-check them after a release.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Planpoint Visit Docs","description":"Everything you need to build, style and share a Planpoint Visit — the interactive property tour for single homes and small portfolios.","colors":{"primary":"#2563eb","light":"#60a5fa","dark":"#1d4ed8"},"logo":{"light":"https://mintcdn.com/planpoint-visit/0E3RRUq_T5nIh8kn/images/logo-light.svg?fit=max\u0026auto=format\u0026n=0E3RRUq_T5nIh8kn\u0026q=85\u0026s=cd8cb1f3e139d61a13b162f81e0af3dc","dark":"https://mintcdn.com/planpoint-visit/0E3RRUq_T5nIh8kn/images/logo-dark.svg?fit=max\u0026auto=format\u0026n=0E3RRUq_T5nIh8kn\u0026q=85\u0026s=8e95c18435e91c18962fd504b8067903","href":"https://www.planpoint.io"},"favicon":"https://mintcdn.com/planpoint-visit/0E3RRUq_T5nIh8kn/images/favicon.png?fit=max\u0026auto=format\u0026n=0E3RRUq_T5nIh8kn\u0026q=85\u0026s=31daa50af841048da17000babcab2a37","navbar":{"links":[{"href":"mailto:support@planpoint.io","label":"Support"}],"primary":{"type":"button","label":"Open dashboard","href":"https://visit.planpoint.io/auth/login"}},"footer":{"socials":{"website":"https://www.planpoint.io","linkedin":"https://www.linkedin.com/company/planpoint"}},"styling":{"latex":false},"navigation":{"global":{"anchors":[{"anchor":"New releases","icon":"sparkles","href":"https://www.planpoint.io/new-releases/updates"},{"anchor":"Main website","icon":"globe","href":"https://www.planpoint.io/"},{"anchor":"Support","icon":"envelope","href":"mailto:support@planpoint.io"}]},"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"planpoint-visit","hasAudioNarration":false,"actualSubdomain":"planpoint-visit","customDomains":["visitdocs.planpoint.io"],"gitSource":{"type":"github","owner":"planpoint-io","repo":"planpoint-visit-docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"latestBuiltDeploymentHistoryId":"6ac9809bfabca7b8901881a8","collectionId":"add7b553-70bf-4807-b627-9c739d910603","liveDeploymentHistoryId":"6ac9809bfabca7b8901881a8","schemaVersion":"v3"},"entitlements":{},"buildId":"6ac9809bfabca7b8901881a8","clientVersion":"0.0.4044","searchFilterCounts":[{"language":"default","tag":"Documentation","count":35},{"language":"default","tag":"Build your Visit","count":8},{"language":"default","tag":"Advanced features","count":7},{"language":"default","tag":"Customize","count":6},{"language":"default","tag":"Get started","count":5},{"language":"default","tag":"Account","count":3},{"language":"default","tag":"Help","count":3},{"language":"default","tag":"Share \u0026 embed","count":3}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":false,"enableAskAiSearchBar":true},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"customize/custom-css","slug":"/customize/custom-css","pageMetadata":{"title":"Custom CSS","description":"Take full control of the viewer styling when the style editor is not enough.","href":"/customize/custom-css"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Take full control of the viewer styling when the style editor is not enough.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,em:`em`,p:`p`,pre:`pre`,span:`span`,strong:`strong`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,..._provideComponents(),...props.components},{CodeBlock,Frame,Heading,OptimizedImage,Table,Tip,Warning}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!Table)_missingMdxReference(`Table`,true);if(!Tip)_missingMdxReference(`Tip`,true);if(!Warning)_missingMdxReference(`Warning`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`If your brand needs something the `,_jsx(_components.a,{href:`/customize/style-editor`,children:`style editor`}),` cannot express, you can inject your own CSS into the viewer.`]}),`\n`,_jsxs(_components.p,{children:[`Go to `,_jsx(_components.strong,{children:`Settings → Customization`}),` and click `,_jsx(_components.strong,{children:`Use your own CSS`}),`. The button turns dark and reads `,_jsx(_components.strong,{children:`Custom CSS enabled`}),`; a code editor opens underneath.`]}),`\n`,_jsx(Frame,{caption:`Settings → Customization → Use your own CSS`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/planpoint-visit/0E3RRUq_T5nIh8kn/images/customize/custom-css.png?fit=max\u0026auto=format\u0026n=0E3RRUq_T5nIh8kn\u0026q=85\u0026s=4941e627711221c6cc7d01c311b106d9`,alt:`Custom CSS editor with rules typed in and the Save CSS button`,\"data-og-width\":`1600`,width:`1600`,\"data-og-height\":`838`,height:`838`,\"data-path\":`images/customize/custom-css.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/planpoint-visit/0E3RRUq_T5nIh8kn/images/customize/custom-css.png?w=280\u0026fit=max\u0026auto=format\u0026n=0E3RRUq_T5nIh8kn\u0026q=85\u0026s=13de73cfed3bd49fa55bce9b08836768 280w, https://mintcdn.com/planpoint-visit/0E3RRUq_T5nIh8kn/images/customize/custom-css.png?w=560\u0026fit=max\u0026auto=format\u0026n=0E3RRUq_T5nIh8kn\u0026q=85\u0026s=7fad3958c7e7f669822c19460d14f5ca 560w, https://mintcdn.com/planpoint-visit/0E3RRUq_T5nIh8kn/images/customize/custom-css.png?w=840\u0026fit=max\u0026auto=format\u0026n=0E3RRUq_T5nIh8kn\u0026q=85\u0026s=2c853f6313e3ce560a6ea88b106a8bc6 840w, https://mintcdn.com/planpoint-visit/0E3RRUq_T5nIh8kn/images/customize/custom-css.png?w=1100\u0026fit=max\u0026auto=format\u0026n=0E3RRUq_T5nIh8kn\u0026q=85\u0026s=20aa825c8934080f230b8381119bb420 1100w, https://mintcdn.com/planpoint-visit/0E3RRUq_T5nIh8kn/images/customize/custom-css.png?w=1650\u0026fit=max\u0026auto=format\u0026n=0E3RRUq_T5nIh8kn\u0026q=85\u0026s=4d5240d699df5ab798d8727ccc9de36a 1650w, https://mintcdn.com/planpoint-visit/0E3RRUq_T5nIh8kn/images/customize/custom-css.png?w=2500\u0026fit=max\u0026auto=format\u0026n=0E3RRUq_T5nIh8kn\u0026q=85\u0026s=5db2396d80abd6bd13d34989a6be13db 2500w`})}),`\n`,_jsx(Warning,{children:_jsxs(_components.p,{children:[`Custom CSS is the one part of the editor that does `,_jsx(_components.strong,{children:`not`}),` autosave. Click `,_jsx(_components.strong,{children:`Save CSS`}),` — the indicator next to the button shows `,_jsx(_components.em,{children:`Unsaved changes`}),`, `,_jsx(_components.em,{children:`Saving…`}),` or `,_jsx(_components.em,{children:`Saved`}),`.`]})}),`\n`,_jsx(Heading,{level:`2`,id:`where-to-start`,children:`Where to start`}),`\n`,_jsxs(_components.p,{children:[`Everything in the viewer is namespaced. The root element is `,_jsx(_components.code,{children:`.iv_root`}),`, and the CSS custom properties it exposes are the cleanest way to restyle:`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`8`,language:`css`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`css`,children:_jsxs(_components.code,{language:`css`,numberOfLines:`8`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#D7BA7D`},children:`.iv_root`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#9CDCFE`},children:` --iv-bg`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#CE9178`},children:`#faf7f2`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#9CDCFE`},children:` --iv-surface`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#CE9178`},children:`#ffffff`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#9CDCFE`},children:` --iv-border`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#CE9178`},children:`#e7e0d6`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#9CDCFE`},children:` --iv-text`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#CE9178`},children:`#1c1917`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#9CDCFE`},children:` --iv-text-muted`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#CE9178`},children:`#78716c`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#9CDCFE`},children:` --iv-accent`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#CE9178`},children:`#b45309`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`}`})}),`\n`]})})}),`\n`,_jsx(_components.p,{children:`Overriding the variables keeps light mode, dark mode and every component consistent. Reach for element selectors only when a variable cannot do the job.`}),`\n`,_jsx(Heading,{level:`2`,id:`useful-class-names`,children:`Useful class names`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Class`}),_jsx(_components.th,{children:`Element`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`.iv_root`})}),_jsx(_components.td,{children:`The whole viewer`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`.iv_split`})}),_jsx(_components.td,{children:`The two-pane grid`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`.iv_canvas`})}),_jsx(_components.td,{children:`The media pane`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`.iv_panel-controls`})}),_jsx(_components.td,{children:`The filter row`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`.pp_unitTile`})}),_jsx(_components.td,{children:`A room card`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`.iv_polygon`})}),_jsx(_components.td,{children:`A floor or room shape`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`.iv_room-vp`})}),_jsx(_components.td,{children:`A viewpoint marker`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`.iv_hotspot`})}),_jsx(_components.td,{children:`A feature hotspot pin`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`.iv_btn--detail`})}),_jsx(_components.td,{children:`The room action buttons`})]})]})]}),`\n`,_jsx(Tip,{children:_jsxs(_components.p,{children:[`Open your published Visit, right-click an element and choose `,_jsx(_components.strong,{children:`Inspect`}),` to find the exact class you need. Every class the viewer uses starts with `,_jsx(_components.code,{children:`iv_`}),` or `,_jsx(_components.code,{children:`pp_`}),`.`]})}),`\n`,_jsx(Heading,{level:`2`,id:`loading-a-custom-font`,children:`Loading a custom font`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`5`,language:`css`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`css`,children:_jsxs(_components.code,{language:`css`,numberOfLines:`5`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`@import`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#DCDCAA`},children:` url`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700\u0026display=swap\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#D7BA7D`},children:`.iv_root`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#9CDCFE`},children:` font-family`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"Cormorant Garamond\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#CE9178`},children:`serif`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`}`})}),`\n`]})})}),`\n`,_jsx(Heading,{level:`2`,id:`turning-it-off`,children:`Turning it off`}),`\n`,_jsxs(_components.p,{children:[`Click `,_jsx(_components.strong,{children:`Custom CSS enabled`}),` again to disable it. Your CSS is kept, so you can toggle it back on without retyping.`]}),`\n`,_jsx(Heading,{level:`2`,id:`support`,children:`Support`}),`\n`,_jsx(_components.p,{children:`Custom CSS is powerful and unsupported by definition — a future viewer update can change an internal class name. Stick to the variables where you can, keep your overrides short, and re-check them after a release.`})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Custom CSS","description":"Take full control of the viewer styling when the style editor is not enough.","href":"/customize/custom-css"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Where to start","slug":"where-to-start","depth":2,"children":[]},{"title":"Useful class names","slug":"useful-class-names","depth":2,"children":[]},{"title":"Loading a custom font","slug":"loading-a-custom-font","depth":2,"children":[]},{"title":"Turning it off","slug":"turning-it-off","depth":2,"children":[]},{"title":"Support","slug":"support","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"planpoint-visit","siteName":"Planpoint Visit Docs","title":"Custom CSS - Planpoint Visit Docs","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-08-05T16:07:45.373Z","originalFileLocation":"customize/custom-css.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Take full control of the viewer styling when the style editor is not enough.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Planpoint Visit Docs\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/planpoint-visit/kAfA30kbx8WFXQR1/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/planpoint-visit/kAfA30kbx8WFXQR1/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/planpoint-visit/kAfA30kbx8WFXQR1/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/planpoint-visit/kAfA30kbx8WFXQR1/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/planpoint-visit/kAfA30kbx8WFXQR1/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/planpoint-visit/kAfA30kbx8WFXQR1/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/planpoint-visit/kAfA30kbx8WFXQR1/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/planpoint-visit/kAfA30kbx8WFXQR1/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/planpoint-visit/kAfA30kbx8WFXQR1/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Custom CSS - Planpoint Visit Docs\">\u003cmeta data-mint-head property=\"og:description\" content=\"Take full control of the viewer styling when the style editor is not enough.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Planpoint Visit Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://visitdocs.planpoint.io/customize/custom-css\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://planpoint-visit.mintlify.app/_mintlify/api/og/v2?division=Customize\u0026amp;title=Custom+CSS\u0026amp;description=Take+full+control+of+the+viewer+styling+when+the+style+editor+is+not+enough.\u0026amp;theme=b1a7dedd26284dabd50f86f2\u0026amp;signature=f3e7400bf88413e871128e6cc86150d0e3e0cef13e1246caae6a0e7df32f092d\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Custom CSS - Planpoint Visit Docs\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Take full control of the viewer styling when the style editor is not enough.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://planpoint-visit.mintlify.app/_mintlify/api/og/v2?division=Customize\u0026amp;title=Custom+CSS\u0026amp;description=Take+full+control+of+the+viewer+styling+when+the+style+editor+is+not+enough.\u0026amp;theme=b1a7dedd26284dabd50f86f2\u0026amp;signature=f3e7400bf88413e871128e6cc86150d0e3e0cef13e1246caae6a0e7df32f092d\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/planpoint-visit/kAfA30kbx8WFXQR1/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Planpoint Visit Docs\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#2563eb\">\u003clink data-mint-head rel=\"canonical\" href=\"https://visitdocs.planpoint.io/customize/custom-css\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/customize/custom-css.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://visitdocs.planpoint.io/#organization\",\"name\":\"Planpoint Visit Docs\",\"url\":\"https://visitdocs.planpoint.io\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/planpoint-visit/0E3RRUq_T5nIh8kn/images/logo-light.svg?fit=max\u0026auto=format\u0026n=0E3RRUq_T5nIh8kn\u0026q=85\u0026s=cd8cb1f3e139d61a13b162f81e0af3dc\"}},{\"@type\":\"WebSite\",\"@id\":\"https://visitdocs.planpoint.io#website\",\"name\":\"Planpoint Visit Docs\",\"url\":\"https://visitdocs.planpoint.io\",\"publisher\":{\"@id\":\"https://visitdocs.planpoint.io/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://visitdocs.planpoint.io/customize/custom-css#webpage\",\"url\":\"https://visitdocs.planpoint.io/customize/custom-css\",\"name\":\"Custom CSS\",\"description\":\"Take full control of the viewer styling when the style editor is not enough.\",\"dateModified\":\"2026-08-05T16:07:45.373Z\",\"isPartOf\":{\"@id\":\"https://visitdocs.planpoint.io#website\"},\"breadcrumb\":{\"@id\":\"https://visitdocs.planpoint.io/customize/custom-css#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://visitdocs.planpoint.io/customize/custom-css#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Customize\",\"item\":\"https://visitdocs.planpoint.io/customize/style-editor\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom CSS\",\"item\":\"https://visitdocs.planpoint.io/customize/custom-css\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://visitdocs.planpoint.io/customize/custom-css#article\",\"headline\":\"Custom CSS\",\"name\":\"Custom CSS\",\"description\":\"Take full control of the viewer styling when the style editor is not enough.\",\"url\":\"https://visitdocs.planpoint.io/customize/custom-css\",\"mainEntityOfPage\":{\"@id\":\"https://visitdocs.planpoint.io/customize/custom-css#webpage\"},\"dateModified\":\"2026-08-05T16:07:45.373Z\",\"publisher\":{\"@id\":\"https://visitdocs.planpoint.io/#organization\"},\"isPartOf\":{\"@id\":\"https://visitdocs.planpoint.io#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Planpoint Visit Docs\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Planpoint Visit Docs","nav":{"global":{"anchors":[{"anchor":"New releases","icon":"sparkles","href":"https://www.planpoint.io/new-releases/updates"},{"anchor":"Main website","icon":"globe","href":"https://www.planpoint.io/"},{"anchor":"Support","icon":"envelope","href":"mailto:support@planpoint.io"}]},"tabs":[{"tab":"Documentation","groups":[{"group":"Get started","pages":[{"title":"Welcome","href":""},{"title":"Quickstart","href":"/quickstart"},{"title":"Dashboard tour","href":"/dashboard"},{"title":"Archive and restore Visits","href":"/archive-visits"},{"title":"What buyers see","href":"/viewer-tour"}]},{"group":"Build your Visit","pages":[{"title":"Property details","href":"/build/details"},{"title":"Exterior","href":"/build/exterior"},{"title":"Floors","href":"/build/floors"},{"title":"Creating a floor plan","href":"/build/floor-plans"},{"title":"Rooms","href":"/build/rooms"},{"title":"Viewpoints","href":"/build/viewpoints"},{"title":"Feature hotspots","href":"/build/hotspots"},{"title":"Images \u0026 media","href":"/build/media"}]},{"group":"Customize","pages":[{"title":"Style editor","href":"/customize/style-editor"},{"title":"Colors","href":"/customize/colors"},{"title":"Fonts","href":"/customize/fonts"},{"title":"Terminology","href":"/customize/terminology"},{"title":"Dark mode","description":"Let visitors flip the Visit to a dark theme, and choose the dark background colour.","href":"/customize/dark-mode"},{"title":"Custom CSS","href":"/customize/custom-css"}]},{"group":"Share \u0026 embed","pages":[{"title":"Public URL","description":"Every Visit gets its own link — and on Pro you can brand it.","href":"/share/public-url"},{"title":"Embed on your website","href":"/share/embed"},{"title":"Social previews","href":"/share/social-previews"}]},{"group":"Advanced features","pages":[{"title":"Languages","href":"/features/languages"},{"title":"Property Maps","href":"/features/property-maps"},{"title":"AI Reimagine","href":"/features/reimagine"},{"title":"Floor plan editor for buyers","href":"/features/floorplan-editor"},{"title":"Panorama mode","href":"/features/panorama"},{"title":"Contact form \u0026 leads","href":"/features/forms"},{"title":"Analytics","href":"/features/analytics"}]},{"group":"Account","pages":[{"title":"Account settings","href":"/account/account-settings"},{"title":"Members \u0026 access","href":"/account/members"},{"title":"Plans","href":"/account/plans"}]},{"group":"Help","pages":[{"title":"Pre-launch checklist","href":"/help/checklist"},{"title":"FAQ","href":"/help/faq"},{"title":"Troubleshooting","href":"/help/troubleshooting"}]}]}]},"basePath":"","title":"Custom CSS - Planpoint Visit Docs","buildId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","deploymentId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","dynamics":["07c022d89b","a74be98ba7"],"chunks":["Frame-DXXFP6nH.js","DynamicMarkdown-B54_zNBF.js","zoom-image-lightbox-BG6oD64b.js","lightbox-handle-r17bVUz3.js"]}
