Skip to main content

Custom CSS

Updated over a week ago

For complete control over your widget's appearance, Loloyal provides a custom CSS field where you can add any additional styling.


Using Custom CSS

  1. Navigate to Brand Style > Widget launcher/ Widget panel > CSS

  2. Add your custom CSS rules to override default styling or add new visual elements

  3. Save your changes and use the Preview function to test your customizations


Loloyal CSS code snippets for widget launcher

We've prepared a set of ready-to-use code snippets that you can simply copy and paste into your CSS or code injection box—no coding skills required.

  • Change the style of the Launcher

.loloyal-launcher { border: solid 2px red; }
  • Add a Google font to the Launcher

/** * @import Must be on the first line! */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap'); .loloyal-launcher-text { font-family: 'IBM Plex Sans' !important; }
  • Change the size of the pattern in the Launcher

.loloyal-launcher-icon { width: 64px !important; height: 64px !important; }
  • Modify the font of the Launcher

.loloyal-launcher-text { font-family: fantasy; }
  • Changing the size of the Launcher

.loloyal-launcher-box { height: 128px; width: 128px; }


Loloyal CSS code snippets for widget panel

  • Change the breadcrumb arrow, back, and close button colors

.loloyal-close svg { fill: #1246FF !important; color: #1246FF !important; } .loloyal-navbar-back svg { fill: #1246FF !important; color: #1246FF !important; }
  • Add a Google font to the Widget

/** * @import Must be on the first line! */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap'); .loloyal-primary-font { font-family: 'IBM Plex Sans' !important; } .loloyal-secondary-font { font-family: 'IBM Plex Sans' !important; }
  • Add a browser safe font to the Widget

.loloyal-primary-font { font-family: Arial !important; } .loloyal-secondary-font { font-family: Arial !important; }
  • Changing the size of the Join now Button

.loloyal-join-btn { width: 240px; height: 32px; }
  • Adjusting the size of the Panel

.loloyal-iframe-page { width: 500px; }
  • Hiding specific areas of the Widget

.loloyal-limited-time-offers { display: none; }
  • Changing colors and styles of elements

.loloyal-card { box-shadow: none; border: 2px solid black; }


Loloyal CSS elements

These CSS classes can be overridden with custom CSS.

  • Launcher: .loloyal-launcher
    Controls the overall launcher container.

  • Launcher Icon: .loloyal-launcher-icon
    Targets the icon within the launcher.

  • Launcher Size Box: .loloyal-launcher-box
    Use this class to adjust the width and height of the launcher only.

  • Launcher Text: .loloyal-launcher-text
    Customizes the text shown inside the launcher.

  • App Banner: .loloyal-banner
    Styles the banner section at the top of the widget.

  • Navbar:

.loloyal-navbar – Styles the entire navbar.

.loloyal-navbar-text – Targets text within the navbar.

.loloyal-navbar-back – Styles the back button in the navbar.

  • Card Block:

.loloyal-card – Controls the overall card style.

.loloyal-card-item – Targets individual items inside a card.

.loloyal-list-item – Styles list items within card sections.

  • Close Button: .loloyal-close
    Targets the close (X) button on the widget.


CSS Best Practices

  • Use specific selectors to target widget elements without affecting your main site

  • Test your CSS across different devices and screen sizes

  • Keep custom CSS minimal and focused on specific adjustments

  • Document your custom CSS for future reference and maintenance

💡 Pro Tip: If you're not comfortable with CSS, start with the built-in customization options first. They cover most common styling needs without requiring code knowledge.
Did this answer your question?