For a sampling of CSS rules, visit our CSS example library.
While we offer a range of templated designs for your landing page, some users want to explore customizing those designs further.
For example, you might want to replace our default star or heart images with something of a different size or content, such as these flowers:
Such customization can be achieved by adding custom Cascading Stylesheet (CSS) rules under Dashboard > Funnel > Setup > Custom CSS. The above effect was achieved with the following custom CSS:
#stars ul li {
background-image: url("https://static.grade.us/custom/stock/spritemap-flowers-01.png?v=2016-01-14");
background-position: 0 0;
}
#stars ul:hover .star:hover,#stars ul.hover .star:hover,#stars ul:hover .star:hover~.star,#stars ul.hover .star:hover~.star {
background-position:-120px 0;
}
@media (max-width:767px){
#super-container #stars ul li,.modal-scrollable #stars ul li {
background-position:-240px 0;
}
#super-container #stars ul:hover .star:hover,.modal-scrollable #stars ul:hover .star:hover,#super-container #stars ul.hover .star:hover,.modal-scrollable #stars ul.hover .star:hover,#super-container #stars ul:hover .star:hover~.star,.modal-scrollable #stars ul:hover .star:hover~.star,#super-container #stars ul.hover star:hover~.star,.modal-scrollable #stars ul.hover .star:hover~.star {
background-position:-300px 0;
}
}
Note that this is an advanced feature: You must know how to construct valid CSS rules by looking at the landing page markup and overriding existing styles. You can use your own assets such as offsite CSS files and images, provided you host them somewhere yourself.