Introduction
In this article, we're diving into premade CSS themes tailor-made for your review widget. Think of it as your shortcut to boosting user engagement and giving your platform that extra spark. Elevate the aesthetic and functionality of your review experience effortlessly!
To use the custom CSS snippets listed below
Copy the CSS code to your clipboard.
Go to the Advanced Settings of your Onsite Display in the Reviews app.
Paste your CSS in Display Custom CSS box.
Make sure to hit Save to apply your changes.
💡 Pro Tip: The !important rule in CSS is used to add more importance to a property/value than normal. If you use this rule, it will override all previous styling rules for that specific property on that element.
Retro Pixels Theme
/* Retro Pixels - Tydal Reviews CSS Theme */
/* import Jersey 10 google font */
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');
*, .review-body {
font-family: "Jersey 10", sans-serif !important;
font-weight: 400 !important;
color: white !important;
}
/* style for #panel-nav */
.review-summary-title {
display: ruby-text !important;
}
div.tydal-star-wrapper svg:not(:first-child) {
margin-left: 5px !important;
color: #ff9b00 !important;
}
.summary-rating {
color: #fff900 !important;
font-size: 30px !important;
}
.review-summary-total-reviews {
color: #fff900 !important;
font-size: 25px !important;
}
.review-summary-total-reviews {
margin-top: 0px !important;
margin-bottom: 10px !important;
text-align: center !important;
}
#panel-nav {
align-items: center !important;
flex-direction: column !important;
padding: 25px 0px 20px 0px !important;
border-bottom: 0px solid #4044ff !important;
border-radius: 10px !important;
margin: 20px 0px 15px 0px !important;
background-color: none !important;
background-image: url('https://cdn.shopify.com/s/files/1/0640/8372/2494/files/Retro_pixel_background.jpg?v=1713518048') !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
/* style for button */
#panel-nav #write-review {
border-radius: 10px !important;
padding: 10px 12px !important;
margin: 0px !important;
font-size: 25px !important;
border: solid 4px #FF0000 !important;
color: white !important;
background: #ff9b00 !important;
}
#panel-nav #write-review:hover {
color: #fff900 !important;
}
/* style for review cards */
.review-card .review-details {
background-color: #77B6E9 !important;
}
.author-name {
color: #fff900 !important;
font-size: 20px !important;
}
.review-card .date {
font-size: 15px !important;
color: white !important;
}
.review-card .review-text, .review-card .review-reply-text {
font-size: 16px !important;
color: white !important;
}
#quickview-modal .quickview-modal-contents {
background: #77B6E9 !important;
}
/* style for modal - write a review */
.wizard-slide {
background: #77B6E9 !important;
border: solid 5px #ff9b00 !important;
border-radius: 5px !important;
}
.review-star-container span {
font-size: 20px !important;
}
.wizard-footer {
background: #ff9b00 !important;
}
.skip, .back {
font-size: 20px !important;
}
h4.upload-incentive-text {
font-size: 20px !important;
}
.rev-button {
background-color: #ff9b00 !important;
border-color: white !important;
}
.rev-textarea {
background: black !important;
}
.field-container input {
background-color: black !important;
}
.rev-code-size {
background-color: black !important;
}
}
Curve Smoothing Theme
/* Curve Smoothing - Tydal Reviews CSS Theme */
/* import Encode Sans Expanded google font */
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@100;200;300;400;500;600;700;800;900&display=swap');
*, .review-body {
font-family: "Encode Sans Expanded", sans-serif !important;
font-weight: 700 !important;
color: black !important;
}
/* style for #panel-nav */
.review-summary-title {
display: ruby-text !important;
}
div.tydal-star-wrapper svg:not(:first-child) {
margin-left: 10px !important;
color: black !important;
}
.summary-rating {
color: black !important;
font-size: 24px !important;
font-weight: 800 !important;
}
.review-summary-total-reviews {
color: black !important;
font-size: 16px !important;
font-weight: 650 !important;
margin-top: 4px !important;
margin-bottom: 18px !important;
text-align: center !important;
border-bottom: 1px solid black !important;
}
#panel-nav {
align-items: center !important;
flex-direction: column !important;
padding: 25px 0px 25px 0px !important;
border: 2px solid black !important;
border-bottom: 5px solid black !important;
border-right: 5px solid black !important;
border-radius: 20px !important;
margin: 20px 0px 15px 0px !important;
background-color: #6FD2C0 !important;
}
/* style for button */
#panel-nav #write-review {
padding: 10px 12px !important;
font-size: 18px !important;
font-weight: 700 !important;
color: white !important;
background: #FE8C12 !important;
border: solid 1px black !important;
border-radius: 10px !important;
border-right: solid 3px black !important;
border-bottom: solid 3px black !important;
}
#panel-nav #write-review:hover {
color: white !important;
background-color: #FE8C12 !important;
border: solid 3px black !important;
}
/* style for review cards */
.review-card .review-details {
background-color: #FFECE5 !important;
border: 2px solid #FE8C12 !important;
border-right: 5px solid #FE8C12 !important;
border-bottom: 5px solid #FE8C12 !important;
border-radius: 20px !important;
}
.author-name {
color: black !important;
font-size: 14px !important;
font-weight: 700 !important;
border-bottom: 1px solid black !important;
margin-bottom: 1px !important;
}
.review-card .date {
font-size: 11px !important;
color: black !important;
font-weight: 600 !important;
}
.review-card .review-text, .review-card .review-reply-text {
font-size: 13px !important;
color: black !important;
font-weight: 600 !important;
}
#quickview-modal .quickview-modal-contents {
background: #FFECE5 !important;
border: 2px solid #FE8C12 !important;
border-right: 5px solid #FE8C12 !important;
border-bottom: 5px solid #FE8C12 !important;
border-radius: 20px !important;
}
/* style for modal - write a review */
.wizard-slide {
background: #6FD2C0 !important;
border: solid 2px black !important;
border-bottom: 5px solid black !important;
border-right: 5px solid black !important;
border-radius: 20px !important;
}
.review-star-container span {
font-size: 20px !important;
}
.rev-button {
color: white !important;
background: #FE8C12 !important;
border: solid 1px black !important;
border-radius: 10px !important;
border-right: solid 3px black !important;
border-bottom: solid 3px black !important;
}
.rev-button:hover {
color: white !important;
background-color: #FE8C12 !important;
border: solid 3px black !important;
}
.wizard-footer {
background: #6FD2C0 !important;
}
.skip, .back {
font-size: 20px !important;
}
h4.upload-incentive-text {
font-size: 20px !important;
}
.rev-textarea {
background: white !important;
}
.field-container input {
background-color: white !important;
}
.rev-code-size {
background-color: white !important;
}
}
Matrix Theme
/* Matrix - Tydal Reviews CSS Theme */
/* import Encode Sans SC google font */
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+SC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
*, .review-body {
font-family: "Encode Sans SC", sans-serif !important;
color: #39FF14 !important;
}
/* style for #panel-nav */
.review-summary-title {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
div.tydal-star-wrapper svg:not(:first-child) {
margin-left: 8px !important;
}
.summary-rating {
color: #39FF14 !important;
font-size: 40px !important;
font-weight: 600 !important;
padding-left: 7% !important;
}
.review-summary-total-reviews {
color: black !important;
font-size: 19px !important;
margin-top: 0px !important;
margin-bottom: 10px !important;
text-align: center !important;
padding-left: 3%;
background-color: #39FF14;
font-weight: 600;
font-style: italic;
}
#panel-nav {
align-items: center !important;
padding: -5px 0px 8px 0px !important;
border: 2px solid #39FF14 !important;
border-top-width: 28px !important;
border-radius: 0px !important;
margin: 20px 0px 15px 0px !important;
background-color: black !important;
}
/* style for button */
#panel-nav #write-review {
border-radius: 30px !important;
padding: 10px 12px !important;
margin-right: 19px !important;
font-size: 20px !important;
font-weight: 600 !important;
border: solid 2px #39FF14 !important;
color: #39FF14 !important;
background: black !important;
}
#panel-nav #write-review:hover {
color: black !important;
background-color: #39FF14 !important;
}
/* style for review cards */
.review-card .review-details {
background-color: black !important;
border: 2px solid #39FF14 !important;
border-bottom-width: 20px !important;
border-radius: 0px !important;
}
.author-name {
color: #39FF14 !important;
font-size: 18px !important;
}
.review-card .date {
font-size: 12px !important;
color: #39FF14 !important;
}
.review-card .review-text, .review-card .review-reply-text {
font-size: 15px !important;
color: #39FF14 !important;
}
#quickview-modal .quickview-modal-contents {
background: black !important;
}
/* style for modal - write a review */
.wizard-slide {
background: black !important;
border: solid 2px #39FF14 !important;
border-radius: 0px !important;
}
.review-star-container span {
font-size: 20px !important;
}
.rev-button {
border-radius: 30px;
}
.rev-button:hover {
color: black !important;
background-color: #39FF14 !important;
}
.wizard-footer {
background: black !important;
}
.skip, .back {
font-size: 20px !important;
}
h4.upload-incentive-text {
font-size: 20px !important;
}
.rev-button {
background-color: black !important;
border-color: #39FF14 !important;
}
.rev-textarea {
background: black !important;
}
.field-container input {
background-color: black !important;
}
.rev-code-size {
background-color: black !important;
}
.rev-btn-text:hover {
color: black !important;
background-color: #39FF14 !important;
}
}
Dark Mode Theme
/* Dark Mode - Tydal Reviews CSS Theme */
/* style for #panel-nav */
.review-summary-title {
display: ruby-text !important;
}
div.tydal-star-wrapper svg:not(:first-child) {
margin-left: 10px !important;
color: white !important;
}
.summary-rating {
color: white !important;
font-size: 24px !important;
margin-right: 10px !important;
}
.review-summary-total-reviews {
color: white !important;
text-align: center !important;
}
p.first-review-text, p.first-review-text a {
color: white !important;
}
#panel-nav {
align-items: center !important;
flex-direction: column !important;
padding: 20px 0px 20px 0px !important;
border: 5px solid #353935 !important;
background-color: black !important;
}
/* style for button */
#panel-nav #write-review {
padding: 10px 12px !important;
background: black !important;
border: solid 1px white !important;
}
#panel-nav #write-review:hover {
color: black !important;
background-color: white !important;
border: solid 1px black !important;
}
/* style for review cards */
.review-card .review-details {
background-color: black !important;
border: 5px solid #353935 !important;
}
img {
border-top: 5px solid #353935 !important;
border-left: 5px solid #353935 !important;
border-right: 5px solid #353935 !important;
}
.author-name {
color: white !important;
font-weight: 500 !important;
border-bottom: 1px solid white !important;
margin-bottom: 1px !important;
}
.review-card .date {
font-size: 10px !important;
color: white !important;
}
.review-card .review-text, .review-card .review-reply-text {
color: white !important;
}
#quickview-modal .quickview-modal-contents {
background: black !important;
border-bottom: 5px solid gray !important;
}
/* style for modal - write a review */
.wizard-slide {
background: black !important;
border: solid 1px white !important;
border-bottom: 1px solid white !important;
}
.tydal-reviews-iframe-panel-wrapper.page-width.wrapper {
background-color: black !important;
}
.review-title, .review-body, .wizard-body, .wizard-slide h3, .wizard-slide h3 {
color: white !important;
}
.review-star-container span {
font-size: 20px !important;
}
.rev-button {
color: black !important;
background: white !important;
border: solid 1px black !important;
border-radius: 10px !important;
}
.rev-button:hover {
color: black !important;
background-color: white !important;
}
.wizard-footer {
background: #e0e0e0 !important;
}
.skip, .back {
font-size: 20px !important;
}
h4.upload-incentive-text {
font-size: 20px !important;
}
.rev-textarea {
background: white !important;
}
.field-container input {
background-color: white !important;
}
.rev-code-size {
background-color: white !important;
}
body.wizard .rev-close-modal {
color: white !important;
}
}
Common questions
Can someone help me customize the design?
Yes! Email our technical team at help@tydal.app and we'll be happy to assist
Will this custom CSS interfere with the rest of my website?
No, this CSS will only apply to the styles of the review widget.
Are there other themes to choose with?
Stay tuned as we're about to release more upcoming themes soon!