Style micro-experiences with CSS

Modified on Fri, 19 Dec at 11:56 AM

For teams with strict brand guidelines or very specific requirements, Pathmonk supports custom CSS. This allows full control over the look and layout of the cards. You can access this feature via Accelerate Growth > Micro-Experiences > Design > scroll down to 'Advanced Style Customization'.

You can use custom CSS to:

Adjust spacing (padding, margins, card height/width)
Override default typography
Add subtle hover effects
Modify borders, shadows, or other UI details
Hide certain elements if they aren’t relevant for your design

CSS Styling Guide
Element	Class/ID	Class/ID Name	Example
Button	Class	.btn	.btn { border-radius: 10px !important; font-weight: 400; height: 40px !important; text-transform: none; font-weight: 600; font-size: 15px; box-shadow: none !important; }
Button Hover	Class	.btn:hover	.btn:hover { background-color: #5F9EA0 !important; border-color: #5F9EA0 !important; }
Micro-Experience Headline Fonts	ID	#spotMessageWidget	#spotMessageWidget{ color: #1A1D20 !important; font-weight: 600; font-size: 20px; font-weight: 600; font-family: "Roboto"; font-weight: 700 !important; line-height: 1.2 !important; font-size: 20px !important; }
Micro-Experience Body Fonts	HTML	html	html{ font-weight: 400 !important; font-style: normal !important; font-stretch: normal !important; line-height: normal !important; letter-spacing: normal!important; font-size: 16px !important; }
Icon Color	ID	#cardFramePathmonk	#cardFramePathmonk i.material-icons { color: #626262 !important; }
Minimize Icon Color	ID	#minimizerWidget	#minimizerWidget{ color:#25EEFD !important; }
Micro-Experience Shape Top	ID	#textBoxFramePathmonkTabStyle	#textBoxFramePathmonkTabStyle { border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; }
Micro-Experience Shape Bottom	Class	.bottomBorderCard	.bottomBorderCard { border-bottom-left-radius: 10px !important; border-bottom-right-radius: 10px !important; }

Below is an example from one of our customers with CSS overwriting our system defaults:

Use the !important tag to ensure to apply your required changes.

To see the final version exactly as it will appear to visitors:

Go to the preview page:
https://crm.pathmonk.com/dashboard/assistant/smartcards_preview
Select the microexperience you want to test.
Click See live to display the full, styled version.

This preview simulates the real visitor experience, including any custom CSS applied.

Not seeing your updates?

If your updates don't appear when previewing, it’s most likely due to browser caching. Browsers sometimes store older assets, which prevents new uploads from showing immediately.

Fix: Clear your browser’s cache. Once it's cleared, refresh the preview and your changes should display correctly.

If you still need help with your microexperiences, get in touch with our team at support@pathmonk.com and we'll get you ready for success.