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);
}

That's it! You now have your own stars shining on your pages powered by Junip reviews 🌟

Did this answer your question?