Introduction
Adding Custom CSS can be a handy way to add a unique look and feel to your Loyalty widget. In this article, we'll walk through the basics of using custom CSS and recommend some ways to get started.
If you're not familiar with using CSS yet, we recommend diving into some fundamentals - Google offers a free resource on learning CSS as well as W3 Schools. In these courses, you'll learn specific modules associated with each topic. You definitely don't need to be an expert to get going with it, but we recommend these websites if you did want to delve into some of the basics and you're not already familiar with CSS.
In this article:
What Can I Do with the Custom CSS Feature?
Whatever your CSS dreams desire! In this article, we'll walk through some basic CSS edits to customize the look and feel of your Loyalty program.
Change the size of the button ✨
Adjust the size of the widget 🤏
Hide certain areas of the widget 🙈
Change colors of specific elements 🎨
How to Use Custom CSS?
To edit the CSS, we recommend going to your browser, opening the browser inspector, and making changes. After that, you can copy the changes you made and paste them into the CSS editor. To use the Custom CSS on your widget:
From your dashboard, click On-Site Displays > Floating Widget on the left sidebar.
Click the Custom CSS option.
Add your CSS styles to override the Widget defaults.
Click Save.
📝 When you paste your CSS into the box, the preview image will not update with the changes. To see the new changes, you'll need to view your website.
Design Customization Examples
Change the breadcrumb arrow, back, and close button colors
In this example, we use a simple filter (invert) to invert the theme's colors. To change the color to something else to match your brand, use a CSS filter generator and enter your target color to use your desired color.
.ba-loy-banner .section-top-wrapper .arrow-loy-button {
filter: invert(100%) !important;
}
.section-top-bar {
color: #000000 !important;
}
.loy-close-widget {
filter: invert(100%) !important;
}💡 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
Add a browser safe font to the Widget
#baLoySectionWrapper .main-default, #baLoySectionWrapper div.panel-section .head-title, #baLoySectionWrapper body {
font-family: monospace;
}
Changing the size of the Widget Button
#launcher-wrapper {
height: 50px;
}
Adjusting the size of the Widget
.ba-loy-namespace .ba-loy-messenger-frame {
width: 500px;
}
Hiding specific areas of the Widget
.member-signup-card-container {
display: none;
}
Changing colors and styles of elements
#baLoySectionWrapper .section-panel-wrapper {
box-shadow: none;
border: 2px solid black;
}
Whatever your CSS dreams desire! 🌈✨
Open the CSS editor to play around and get creative!
Common Questions
Will this custom CSS interfere with the rest of my website?
No, this CSS will only apply to the styles of the Loyalty widget.
Can I get help customizing my widget?
If you have any questions or are hung up on a style change, our team is here to help! Send us an email at [email protected] and we'll do our best to adjust any CSS for you!
Because CSS changes require time, patience, and some technical prowess, our team is unable to assist with any changes over live chat. If you have any small custom style changes to request, please reach out to our Support Engineers at [email protected] and we'll do our best to give you a hand!