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:
Other
ma-load-more-button
ma-preview-layout
ma-widget
NAVIGATION
ma-posts-layout-masonry
ma-posts-layout-grid
ma-posts-layout-carousel
ma-posts-layout-carousel-navigation
ma-posts-layout-carousel-next-button
ma-posts-layout-carousel-prev-button
ma-posts-layout-carousel-pagination
LAYOUT
Here is a list of common classes that you can use for all apps:
CSS Classes
Layout
Type of posts
ma-posts-layout-list
ma-posts-layout-vertical
ma-posts-layout-masonry
ma-posts-layout-grid
ma-posts-layout-carousel
ma-posts-layout-carousel-navigation
ma-posts-layout-carousel-next-button
ma-posts-layout-carousel-prev-button
ma-posts-layout-carousel-pagination
Popup
ma-posts
ma-photos
ma-albums
ma-videos
Post
ma-pagination
ma-pagination-button
ma-pagination-next-button
ma-pagination-pages
ma-popup
ma-popup-close-button
ma-popup-overlay
ma-popup-author
ma-popup-text
ma-popup-like
ma-popup-share
Header
NAVIGATION
LAYOUT
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
Popup
ma-header
ma-header-title
ma-header-picture
ma-header-name
ma-header-username
ma-header-follow-button
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
Post
Header
ma-posts
ma-posts-layout-collage
ma-posts-layout-collage-item
ma-posts-layout-showcase
ma-posts-layout-slider
ma-posts-layout-carousel-button
Facebook Feed
Instagram Feed
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
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
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
© 2024 “REFLEKT” LLC. All rights reserved
Soon
Social Feed
