Junip seamlessly adopts your websites branding by using smart style inherits, but sometimes you want to take things a step further and we're totally cool with that. Junip doesn't obfuscate it's CSS class names giving you full control over the look and feel.
In this example we'll show you how you can utilize this CSS control and use your own stars with Junip's on-site displays.
As a TL;DR here's the code. Be sure to replace the background-image URLs with the appropriate assets:
.junip-product-summary-star svg,
.junip-star svg {
display: none !important;
}
.junip-product-summary-star,
.junip-star {
background-size: cover;
}
.junip-star-filled {
background-image: url(filled.svg);
}
.junip-star-outline {
background-image: url(outline.svg);
}
.junip-star-half {
background-image: url(half.svg);
}
Step by step breakdown:
For this example you will need a filled, outline, and half-filled version of the custom star asset you wish to use.
Step 1: Hide the original Junip stars
.junip-product-summary-star svg,
.junip-star svg {
display: none !important;
}
Step 2: Apply a generic background sizing attribute for your custom stars
Background size cover will handle most cases, however, feel free to use whatever values work best for your assets.
.junip-product-summary-star,
.junip-star {
background-size: cover;
}
Step 3: Set your new star assets as background images
Replace the URL values for each background-image with the appropriate value.
.junip-star-filled {
background-image: url(filled.svg);
}
.junip-star-outline {
background-image: url(outline.svg);
}
.junip-star-half {
background-image: url(half.svg);
}
*Optional* Customize the stars in the Junip on-site review modal
If you wish to customize the stars in the review modal as well the code is very similar to what's above:
/* Hide the review modal stars */
.junip-rating-icon-star svg {
display: none !important;
}
/* Set a background sizing property */
.junip-rating-icon-star {
background-size: cover;
}
/* Set the custom stars */
.junip-rating-icon-star-filled {
background-image: url(filled.svg);
}
.junip-rating-icon-star-outline {
background-image: url(outline.svg);
}
That's it! You now have your own stars shining on your pages powered by Junip reviews 🌟