Custom CSS

​

How to Add Your Custom CSS

1

Open the CSS editor

Go to your Mention Me Dashboard and navigate to Theme > Edit CSS.

2

Add your CSS

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

​

Brand CSS

• 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

​

Onsite Content CSS

​

Where to Add CSS

​

Targeting Elements in CSS

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

​

Labelling Custom CSS

/* 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?

​

How Europium Works

/* 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