Looking for a unique and personalized look for your feed? Our Advanced Feed Customization feature is just the tool you need. It allows you to change various User Interface (UI) elements that make up the default Wisepops feed using CSS.
Wisepops uses its own style sheet to display the iframe. But with Advanced Feed Customization, you can tweak the existing classes to match your website's design. You can change, reduce, or expand the styles of any declared CSS class to get the look you want.
How to Use Advanced Feed Customization
Remember, Wisepops uses its own stylesheet, so your customization options are limited to the existing declared classes. To find these, use the website inspection tools on your browser. This will give you access to the entire stylesheet or allow you to focus on specific elements.
It's also helpful to understand the HTML structure of the feed. This will help you know what effect your changes will have. Keep in mind that some classes are used more than once, so changing them might affect other areas as well.
Once you've decided what changes to make, enter the CSS in the field under Settings > Custom CSS. Here's an example to get you started:
.Teaser {background: blue;}Access the Settings: Start from your Wisepops settings and go to the 'Notifications' tab.
Expand the Look & Feel Section
Find the CSS toggle and activate it
Enter Your CSS Code: This is where you write your custom CSS code.
We'd love to see how you've customized your feed! Share your designs with us to inspire our community.
Limitations of Advanced Feed Customization
The Advanced Feed Customization feature only allows you to modify existing CSS classes. You can't create new ones. But as long as you work within the existing classes, you can customize your feed to match your vision!
If you have any questions, please get in touch.