Advanced Custom Widget CSS

To customise the appearance of your membership widget, navigate to:

Clubs & Subscriptions > Membership Widget > Custom CSS

The Custom CSS section allows you to target specific CSS classes within the widget to change the design of its frontend display. This is particularly useful for ensuring the widget matches your website’s overall aesthetic. By default, the widget will automatically adapt to your website’s design, which includes fonts, colours and sizing.

Please Note: This is an advanced feature and may cause design issues if used incorrectly. If you’re not familiar with HTML or CSS, we recommend reaching out to our support team at [email protected] for assistance.

Finding CSS Classes to Target 

To identify the correct CSS classes, we recommend using your browser’s Developer Tools (e.g. right-click the widget and choose “Inspect”).

This will let you see the HTML structure and CSS class names used in the widget.

Look for classes starting with .moi-, as these are specific to the Members One widget and safe to target.

Once You Know the CSS Classes 

Once you’ve identified the class you want to customise, return to the Custom CSS section and enter your CSS code in the editor.

Make sure to:

• Use valid CSS syntax

• Use !important if needed to override default styles

• Click Submit to apply your changes to the widget

Your styles will be immediately reflected in the live frontend widget after saving.

Most Common CSS Classes