You can change the look of your widget with CSS codes. With CSS, you can make all the elements of your widget look how you want
Remember that you must follow the rules when you write CSS, or it can cause problems with your widget
note
Customizing Widget With the Help of CSS
In this guide
Other Articles
This is the list of classes you can use to change the elements of a specific apps:
ma-preview-layout
ma-widget
Other
ma-load-more-button
ma-pagination
ma-pagination-button
ma-pagination-next-button
ma-pagination-prev-button
ma-pagination-pages
NAVIGATION
ma-posts-layout-collage
ma-posts-layout-collage-item
Collage LAYOUT
ma-posts-layout-small-widget
ma-posts-layout-small-widget-buttons
ma-posts-layout-small-widget-next-button
ma-posts-layout-small-widget-prev-button
ma-posts-layout-small-widget-navigation
ma-posts-layout-small-widget-pagination
Small Widget LAYOUT
ma-posts-layout-slider
ma-posts-layout-slider-buttons
ma-posts-layout-slider-next-button
ma-posts-layout-slider-prev-button
ma-posts-layout-slider-navigation
ma-posts-layout-slider-pagination
Slider LAYOUT
ma-posts-layout-round-carousel
ma-posts-layout-round-carousel-buttons
ma-posts-layout-round-carousel-navigation
ma-posts-layout-round-carousel-next-button
ma-posts-layout-round-carousel-prev-button
ma-posts-layout-round-carousel-pagination
Round Carousel LAYOUT
ma-posts-layout-carousel
ma-posts-layout-carousel-buttons
ma-posts-layout-carousel-navigation
ma-posts-layout-carousel-next-button
ma-posts-layout-carousel-prev-button
ma-posts-layout-carousel-pagination
Carousel LAYOUT
ma-posts-layout-masonry
ma-posts-layout-grid
ma-posts-layout-square-grid
ma-posts-layout-showcase
ma-posts-layout-list
ma-posts-layout-vertical
LAYOUT
Here is a list of common classes that you can use for all apps:
CSS Classes
HEADER
- ma-header
- ma-header-title
- ma-header-picture
- ma-header-name
- ma-header-username
- ma-header-follow-button
- ma-post-template
- ma-post-type
- ma-post-picture
- ma-post-media-image
- ma-post-user-name
- ma-post-date
- ma-post-text
- ma-post-read-more-button
- ma-post-likes-count
- ma-post-comments-count
- ma-post-share-button
- ma-popup
- ma-popup-close-button
- ma-popup-overlay
- ma-popup-header
- ma-popup-media-image
- ma-popup-text
- ma-popup-follow-link
- ma-popup-media-video
- ma-popup-media-carousel
- ma-popup-media-carousel-button
- ma-popup-media-carousel-image
- ma-popup-media-carousel-navigation
- ma-popup-media-carousel-prev-button
- ma-popup-media-carousel-next-button
- ma-popup-media-carousel-video
HEADER
- ma-header
- ma-header-title
- ma-header-name
- ma-header-likes
- ma-header-description
- ma-header-like-button
- ma-header-share-button
- ma-header-menu
- ma-post-author
- ma-post-text
- ma-post-read-more-button
- ma-post-read-less-button
- ma-post-likes-count
- ma-post-comments-count
- ma-post-shares-count
- ma-post-share-button
- ma-popup
- ma-popup-close-button
- ma-popup-overlay
- ma-popup-author
- ma-popup-text
- ma-popup-like
- ma-popup-share
- ma-posts
- ma-photos
- ma-albums
- ma-videos
Paste the code to the field
Go to
CSS
tab in the sidebar
How to Add a CSS Code
For example, you want to change the header’s font, border-radius, border and background color. Here’s how:
Was This Article Helpful?
Do you still have questions? Contact us
Products
Resources
© 2025 Mirror App. All rights reserved
Soon
Social Feed
