How to Add Custom CSS

You can customise the appearance of various parts of your referral program by adding CSS styles. This includes adjusting text, images, buttons, and other elements to match your brand across different journeys and components.

How to Add Your Custom CSS

1. Go to your Mention Me Dashboard
2. Navigate to Theme > Edit CSS
3. Choose the appropriate CSS section based on what you're styling
4. Add your labeled, commented CSS in the appropriate section

Brand CSS

Brand CSS is used to style the frontend of Mention Me journeys, ensuring that the design aligns with your brand’s visual identity. It applies across multiple touchpoints, including the Referrer Journey, Referee Journey, Dashboards, and more.

With Brand CSS, you can:

• Customise styles across all brand themes
• Use media queries for responsive design
• Implement specific requirements, such as right-to-left text alignment for certain locales

Brand CSS is considered advanced CSS because it can affect every journey and theme. It is a powerful tool, but should be used with caution. Where possible, avoid creating fully custom designs, as these may impact maintainability or future updates.

Maintaining consistency through Brand CSS is essential for delivering an on-brand experience across different platforms and devices. 

Onsite Content CSS

On-site content refers to the content that is directly integrated into a website or platform, often used for customization and enhancing user experience. This can include elements like text, images, CSS styles, and scripts that are embedded within the site to provide specific functionalities or visual enhancements.

Where to Add CSS

Different parts of the platform require CSS to be added in specific locations. Here's where each component's styling should be managed:

Targeting Elements in CSS

When writing CSS for any journey, you'll notice that all elements are wrapped in a class called .mm-body. However, when targeting elements with your CSS, you should always remove .mm-body from your selectors and start with the next class in the hierarchy.

Example:

• Correct: .mm-section .mm-button { ... }
• Incorrect: .mm-body .mm-section .mm-button { ... }

This ensures your styles work properly within our platform structure.

Labelling Custom CSS

To keep your CSS organised and make it easier to maintain, always add comments to label any additional CSS you've added. This helps you and others understand what each section does.

Example:

/* Custom button styling for referrer form */
.mm-button--primary {
    background-colour: #ff6b35;
    border-radius: 8px;
}

/* Hide specific section on mobile */
@media (max-width: 768px) {
    .mm-promotional-banner {
        display: none;
    }
}

Referrer Journey Styling with Europium

What is Europium?

Europium is a behind-the-scenes tool built by Mention Me that helps you customize how your referrer journey looks while keeping the structure and layout consistent. It allows you to make visual changes without affecting the rest of your referral program or causing layout issues.

Europium is only required for the referrer journey, and does not apply to the referrer fulfil page.

How Europium works

When you add styling changes using Europium, they must be wrapped in a block like this:

/* Custom referrer journey styling */
&-europium {
    /* Your styles go here */
    /* Remember: don't include mm-body in your selectors */
    .mm-section {
        padding: 20px;
    }

    .mm-button--primary {
        background-colour: #your-brand-colour;
    }
}

Best Practices

• Always label your CSS with comments explaining what each section does
• Remove .mm-body from your CSS selectors when targeting elements
• Use browser developer tools to inspect elements and test styles before adding to the platform

What Not to Do

• Don't use Europium outside of the referrer journey (it won't work)
• Don't include Europium for the referrer fulfil page
• Don't add new HTML or JavaScript - this is for CSS styling only
• Don't include .mm-body in your CSS selectors when targeting elements
• Don't add CSS without proper comments and labels
• Don't put CSS in the wrong section - each component has its designated place