Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.mention-me.com/llms.txt

Use this file to discover all available pages before exploring further.

​
How to Add Your Custom CSS

1

Open the CSS editor

Go to your Mention Me Dashboard and navigate to Theme > Edit CSS.Navigating to the CSS editor in the theme settings
2

Add your CSS

Choose the appropriate CSS section based on what you’re styling, and add your labelled, commented CSS.

​
Brand CSS

Brand CSS styles the frontend of Mention Me journeys, ensuring 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 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.

​
Onsite Content CSS

On-site content refers to content directly integrated into a website or platform, often used for customisation and enhancing user experience. This can include elements like text, images, CSS styles, and scripts embedded within the site.

​
Where to Add CSS

Different parts of the platform require CSS to be added in specific locations:
ComponentCSS LocationRequires Europium?
Referrer JourneyTheme > Edit CSS > Referrer CSSYes (except fulfil page)
Referrer Fulfil PageTheme > Edit CSS > Referrer CSSNo
Referee JourneyTheme > Edit CSS > Referee CSSNo
DashboardTheme > Edit CSS > Dashboard CSSNo
Corner PeelTheme > Edit CSS > Corner Peel CSSNo
Brand CSSContent > Brand CSSNo
Onsite ContentSettings & Tools > Onsite ContentNo

​
Targeting Elements in CSS

All elements are wrapped in a class called .mm-body. When targeting elements, remove .mm-body from your selectors and start with the next class in the hierarchy.
  • Correct: .mm-section .mm-button { ... }
  • Incorrect: .mm-body .mm-section .mm-button { ... }

​
Labelling Custom CSS

Always add comments to label any additional CSS you’ve added: 
/* Custom button styling for referrer form */
.mm-button--primary {
    background-color: #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 customise 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

Styling changes using Europium must be wrapped in a block: 
/* 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-color: #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
Last modified on March 31, 2026