MOST POPULAR L&R CSS Requests of All Time 💯

  • 5 April 2022
  • 0 replies
  • 267 views

Userlevel 4
Badge +3

 Beautify Your Loyalty Modules!

 

  • ​​​​​​* General
  • * Changing the background color of the modules
    * Banner Module
    * Add background color to banner text (desktop)
    * Add background color to text on mobile
    * Overlay the banner text onto the banner image for mobile
    * Change the color of the text for mobile only
    * Change the height of the background
    * Referral Module
    * Remove white space in between module on mobile
    * Change the color of the sample emails of Step 2 of the Refer a Friend module
    * Referral Post Purchase Popup Code (Shopify only)
    * Changing height of module on desktop
    * Adjust the color of the tab text on the referral history section
    * Change font family of button
    * My Activity Module
    * Changing the step icons to text
    * Changing the size of the step icons
    * Edit the color of sub-headers on the rewards history section
    * VIP Tiers
    * Hide the header of the VIP module
    * Limit the width of tier threshold to create line-break
    * Hide the VIP tiers (leave only the progress bar)
    * Change background color for current tier
    * Earning Points Module
    * Fixing CSS leakage to the birthday campaign form
    * Changing the size of campaign icons
    * Redemption Module - Read only
    * Add spend minimum to redemption section
    * Redemption Module - Interactive
    * Hiding Redemption Button for Logged Out Customers
    * Updating the text color of the modal after redeeming points
    * Not Possible with CSS
    ​​​​​

General

Changing the background color of the modules

All modules except for redemption:

.yotpo-widget-override-css {
background-color: white;
display: block;
}

Redemption module:

.yotpo-background.yotpo-align-text {
background-color: white !important;
}

mobile only

.yotpo-widget-override-css .yotpo-is-mobile {
background-color: white !important;
}

Add background color to banner text (desktop)

.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background:not(.yotpo-is-mobile) .yotpo-text-container {
background-color: rgb(255 255 255 / 80%);
padding: 20px;
}

Add background color to text on mobile

.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background.yotpo-is-mobile { background-color: black; }

Change the color of the text for mobile only

 

NFTKSngyrSNjgwx6ZzOl4Xz-45lsj5VAaPVrA_MYkr_wYt1uUwUCAWw_y9J-8mZdPEX3NbF9ydKr8fKwbCK7oHN6DyIdLwNQDxHDfgSeqbU1QhJDHzHnSsR4tFtR5Tg-8KFcGM94

q2DJaUyjFMXACj4un-gLL-dbcZ04CSYCpNmZ3vnbV9acBJyoFhVuiJdFl9WnVQmBpitElorZ_2zilPuabRPR0GLm7Lp1Nd0xvVq4o3OfoPEOQ9akaH983pyaIJy-vj7yyK8hfb6w

.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-is-mobile .yotpo-title, .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-is-mobile .yotpo-description { color: black !important; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-is-mobile .yotpo-login-link .yotpo-button-style.yotpo-button-standard-size { color: black !important; border-color: black !important; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-is-mobile .yotpo-register-link .yotpo-button-style.yotpo-button-standard-size { background-color: black !important; color: white !important; }

Change the height of the background

The default minimum height of the banner is 600px. It can be decreased, but if it is notice that the text and buttons are not "leaking" out of the banner.

.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background { min-height: 600px; }

Referral Module

Remove white space in between module on mobile

e7_C2i8AtYQ-oC4Xj2cxjjD2kM6v2YBNrhC_9XfZ5AVl6lI2JofIF7efFnLwPX3_h6cmzWGvdAp-Pw1oj-MEO82M_Jkc1z6lcestsW5zYUQekk9nKvhv-8E1ceJlKfmvXmWCbJqU

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-is-mobile .yotpo-tile {
min-height: unset !important;
}

Change the color of the sample emails of Step 2 of the Refer a Friend module

12bbfa34-2d94-491d-abfc-969c5427f946.png

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-input-container .yotpo-input-example {
color: white !important;
}

Referral Post Purchase Popup Code (Shopify only)

In checkout.liquid, at the end of the file add this code. Make sure to update the widget repo and instance id

Changing height of module on desktop

5VQ0WGuK-md_yvUEOd1lbBW_s7a7fPEL0lV8uWzTTLMxsg_DOfB3nIQfJglfIGrPY1AII52yoLXN43SN3S-JBQBWA3zUTYnTTAUKp8V8G7m-A8Ov8NROdgzMU0tfxoun-_3ucmWF

 

Right-aligned image:

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background:not(.yotpo-is-mobile) .yotpo-right-align-image,
.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background.yotpo-right-align-background:not(.yotpo-is-mobile) {
height: 500px !important;
}

 

Left-aligned image: 

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background:not(.yotpo-is-mobile) .yotpo-left-align-image,
.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background.yotpo-left-align-background:not(.yotpo-is-mobile) {
height: 500px !important;
}

Center image:

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background.yotpo-center-background {
height: 500px !important;
}

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-tile {
min-height: 90%;
}

Adjust the color of the tab text on the referral history section

By default, the color is inherited from the background color of the CTA. 

 

b83ce190-deb0-436a-a3af-e55567ae344f.png

Changing the color of both tabs:

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-tabs-text {
color: black;
}

Changing the color of the active tab only

​.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-lower-line-tab.yotpo-tab-active { color: black !important; border-color: black !important; }


Change font family of button

By default the font is inherited from the primary font. 

 

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-button-style span.yopto-widget-button-text { font-family: serif !important; }

 

My Activity Module

Changing the step icons to text

hwvq_EsMVuxCStvXvSwXXx1D6Yyv-jtA1wNayJPtNSHOO1JhQANkFwGW-JqEc88V5MhEQL91x1peKGHuv7vW40wABT2fRax_ZZLQS0YlrHLPtq7ay8jmN3f4V4r-RPRtPKaOKPIo

Remove the icons and add the following CSS:

.yotpo-reward-steps-item:before { display: block; text-align: center; margin: 20px auto; } .yotpo-reward-steps-item.yotpo-reward-steps-item-1:before { content: "1"; } .yotpo-reward-steps-item.yotpo-reward-steps-item-2:before { content: "2"; } .yotpo-reward-steps-item.yotpo-reward-steps-item-3:before { content: "3"; }

Changing the size of the step icons

By default the height of the icon is 60px and the width is adjusted automatically to scale. We can make the icons either larger or smaller. Note the 2 CSS snippets below, depending on whether the module uses the default icons or uploaded images. 

bf1434fe-fa8b-407b-b435-6c17982345b6.png

default icons:

.yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-step-icon svg { height: 30px; }

73e09292-8475-4bf8-86aa-44ea98171733.png

image icons:

.yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-step-icon { height: 30px; }

Edit the color of sub-headers on the rewards history section

FzG8l4pjzwLeGH0eZ_7wbLar7CgQ-lmQT3xbDrTRxR1-lhZ3yvGzf9WVLRx3lL2L-lyuwH3EQQmHGUGiJRulhQ5SjtIZWtFtntJYLKEajICYUdFR5UahIs2lpCHGP7aoDUSFawZe

.yotpo-grid-row-headers .yotpo-inner-text { color: black !important; }

 

VIP Tiers

Hide the header of the VIP module

.yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-headline {
display: none;
}

Limit the width of tier threshold to create line-break

ffb6360d-5abc-44e8-84d4-65d56acfe079.png

.yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tier-threshold { max-width: 200px; margin: 0 auto; }

Hide the VIP tiers (leave only the progress bar)

.yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-container {
display: none;
}

Change background color for current tier

.yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tier-container.yotpo-active.yotpo-has-status-tag .yotpo-vip-tier.yotpo-desktop.yotpo-expanded {
background-color: #color !important;
}

Earning Points Module

Fixing CSS leakage to the birthday campaign form

-pjcWj4DIDJdnyApXEl09k2itEcgWAqK_YgLQC5oyCdrxZdhuauuHQSFKGkTERLrb_bKqdQw916wRG9sF3ZJ_YEydxbT2eXsI05uv9RvA7RIpge68-emMIiqvUMlzBizMQ23zDLX

.yotpo-widget-date-picker .vs__search {
min-height: unset;
background-color: transparent;
border: none;
margin: 10px 0 0 10px;
}

Changing the size of campaign icons

By default the height of the icons is 58px with the width adjusting automatically to scale. Use the snippet below to increase or decrease the icon size - whether it's the default icon or an uploaded image.

995468a1-7458-4060-85d8-dc9372ae3f5d.png

.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-widget-campaign-widget-icon-container {
height: 20px;
}

Redemption Module - Read only

Add spend minimum to redemption section

ipNOapLYM_nPMmznv0fmp1MrT6WHgezQZ6ORuZegbocWGarEPL-gVB1fEsbIAr__eR_P4VNpwhKlbZsACKJNCbBFJMHuZ2lpR1Zs98JbT8Zknwvn6IRk2WeFRmb3YNtMvOnxZgeW

 

The number in the brackets represents the order of the redemption options.

.yotpo-widget-visual-redemption-widget.yotpo-widget-override-css .yotpo-redemption-item .yotpo-redemption-reward:after {
display: block;
}
.yotpo-redemption-item:nth-child(1) .yotpo-redemption-reward:after {
content: "*on purchases of $50";
}

.yotpo-redemption-item:nth-child(2) .yotpo-redemption-reward:after {
content: "*on purchases of $75";
}

.yotpo-redemption-item:nth-child(3) .yotpo-redemption-reward:after {
content: "*on purchases of $100";
}

Redemption Module - Interactive

Hiding Redemption Button for Logged Out Customers

.yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-login-button {
display: none;
}

Updating the text color of the modal after redeeming points

nplGSjl8VJ1zzIjTpYsyHuyU6EM34BWs3NRMKQ7ayTDTu_D7mdL_Sh1ZfAwweaPi0yccczMiwrH9A_5ebRp6FTUDqcTA7B07UW6F3QXj9f2rBPP1V5Lzf6QqKgQbFD2C1pKmqEIi

.yotpo-message-toast-container .yotpo-message-toast-title-text, .yotpo-message-toast-container svg, .yotpo-message-toast-text { color: black !important; }

 

Not Possible with CSS

  • Can’t change the VIP Tier checkmarks into copy (i.e., one line item that says “Point multiplier” and then instead of a checkmark for each tier, it shows 1, 1.5x, and 2x under each tier
  • display point balance on the banner section of the rewards page builder

0 replies

Be the first to reply!

Reply