Knowledge Base | Webpages | Style
Mition allows you to control the look and feel of your website using Custom Styles.
Custom Styles make it easy to apply consistent branding across:
Instead of styling every component manually, you create reusable style presets once, then apply them anywhere.
A Custom Style is a saved design preset that can include:
Once created, the style can be reused across multiple components.
To create or edit styles, go to:
Admin Settings → Style → Custom Styles
This page is your central style library.
Your style is now available across the platform.
When editing a style, Mition shows a live preview including:
This lets you confirm your branding instantly before applying it to components.
Custom Styles allow you to override typography.
Used for titles and headings.
Used for paragraphs and standard text.
To use a Google Font:
Roboto)Styles can also include optional images:
These can be useful for hero sections or branded blocks.
Every web component includes a Custom Style Override option.
To apply a style:
Custom Style Override
That component will immediately adopt the chosen colours, fonts, and button styling.
Depending on the component type, styles can apply to:
Style ElementControlsBackgroundOuter section colour/imageForegroundInner panel or card colourHeader TextHeading colour + fontBody TextParagraph colour + fontLinksAnchor/link colourButtonsButton background + textCustom ClassAdds extra CSS rules
Each style supports an optional Custom Class field.
Example:
style-rounded-shadowWhen applied, this class is automatically added to the component wrapper.
This allows advanced designers to create effects like:
Some style settings (especially fonts and colours) are cached for performance.
Changes may take time to appear for all users.
If needed, users can click:
Clear My Cache
inside the style preview panel.
✅ Use a small set of reusable styles
✅ Create one “Main Theme” style first
✅ Use overrides only for special sections
✅ Keep fonts consistent across the site
✅ Use Custom Classes only when needed
Custom Styles in Mition allow you to:
This is the same style system used across both:
🌐 Web Components
✉️ Email Templates
Styles for Emails
Please note that most email viewers do not support images with RGBA (which has built in opacity / transparency), we recommend you only use HEX colours such as #ffff in email styles.
When someone shares your website link on platforms like Facebook, LinkedIn, or Twitter/X, those platforms automatically look for a preview image to display in the post.
This image is called the Open Graph Image (og:image).
Mition provides a default social share banner, but each client can customise their own.
For best results across all social platforms, your Open Graph image should be:
This ensures your site displays a large, high-quality preview when shared.
Mition clients can set their own custom Open Graph Image by going to:
Admin Settings → Style → Open Graph Image
Upload your preferred banner image, and it will become the default preview image used when your site is shared online.