The LaunchNotes embed can be fully customized to match your website's design using CSS. This section outlines the key elements that can be targeted for styling.
🔍 The CSS you apply will only affect the embedded widget and won't impact any other elements on your page. This means you can safely use broad selectors (like p or h2) without affecting your main website's styling.
Main Container
The entire embed is wrapped in a container that can be targeted using:
cssmain#embed { /* Your styles here */ }
Header Elements
The header section contains the title and subtitle that you configured in the LaunchNotes Management Portal:
css#embed-header { /* Target the entire header */ } #embed-title { /* Target just the title */ } #embed-subtitle { /* Target just the subtitle */ }
Navigation Menu
The navigation menu contains links to different sections of your LaunchNotes content:
css#announcements-nav-link { /* Target the Announcements tab */ } #roadmap-nav-link { /* Target the Roadmap tab */ } #ideas-nav-link { /* Target the Ideas tab */ }You can also target the active navigation item with:
css.nav-active { /* Styles for the currently selected tab */ }
Content Lists
Each section's content is contained within a list element:
cssdiv#list { /* Target the container for content items */ } .embed-list-card { /* Target individual content cards */ }
Feedback Banner
The feedback functionality can be styled using:
css.feedback-banner { /* Target the entire feedback section */ } #form-feedbacks-create { /* Target just the feedback form */ }
Footer
The footer contains "powered by" information and can be styled with:
cssdiv.powered-by { /* Target the entire footer */ } div.powered-by-visit { /* Target the left side (visit) portion */ } div.powered-by-logo { /* Target the right side (powered by) portion */ }
Example: Basic Style Customization
Here's a simple example of how you might customize the embed to match your brand:
css/* Add your custom styles after the embed code */ <style> /* Main container */ main#embed { font-family: 'Your Brand Font', sans-serif; background-color: #f5f5f7; border-radius: 8px; } /* Header */ #embed-title { color: #0047AB; /* Brand blue */ } /* Navigation */ .nav-active { background-color: #0047AB; color: white; } /* Cards */ .embed-list-card { border-left: 4px solid #0047AB; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* Footer */ div.powered-by { background-color: #f0f0f2; } </style>Remember to add your custom styles after the embed code in your HTML to ensure they override the default styles.