Are you considering styling your Micro-Experineces beyond the default options to make it 100% look & feel like your website?
You can easily do that in the Micro-Experience section:
- Login to your account
- Choose the Menu item: Accelerate > Micro-Experiences
- On the Micro-Experience tab click on Design
- In the design section scroll down to Advanced Style Customization
- Here you change the CSS style to your liking with the table below
- You can then preview your Micro-Experiences in the Live Version
Control Design via CSS
Adding the following styles will make the element look & feel like your exact website style.
| 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; } |
Important Consideration
Use the !important tag to ensure to apply your required changes.
Still Having Trouble Styling?
If you have any questions on styling your Micro-Experiences create a support ticket so we can help you.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article