@greedyvegan
It will look better to arrange newsfeed module more harmonized.

/* css/custom.css */
/* This is just and example. Adjust to your color and dimensions */

.MMM-anotherNewsFeed .newsfeed-image {
  min-width: 150px;
  min-height: 150px;
  max-width: 150px;
  max-height: 150px;
  margin: 10px 20px 10px 10px;
  border-radius: 15px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.region .module.MMM-anotherNewsFeed {
  width: 600px;
  height: 300px;
  border-radius: 15px;
  margin-top: 0;
  background-color: #333; 
}

MMM-AlertExt

Alternative alert module for MagicMirror

Demo

Click to Youtube

Why?

• I need a more decorated alert feature than the current default alert module.
• Not only SHOW_ALERT, I want to see more various notifications and messages on the screen. (e.g. Log.log(), UnhandledExceptionError, CALENDAR_UPDATED notifications…)
• I made this module for a kind of shared programmable output-presenter of some modules.

https://github.com/MMRIZE/MMM-AlertExt

@ZiggidyZ
Good job. CX3 and CX3A use heavy CSS juggling, so it is not so easy for those who have not experienced this kind of work.
The only thing I am worried about is that it seems you may modify the CSS file of each module directly.
All custom CSS things should be performed in /css/custom.css by overriding for future-update-proof.

@mumblebaj
You can use “import()”, but need some tricks.

• wait enough time to finish importing
• or use promise to confirm loading finishes.

I used that trick in my MMM-Scenes module to import modular mjs instead of global injections.

@greedyvegan
newsfeed item could have a container with selector withImage or not.

        <div class="container {% if config.showImage and image %} withImage {% endif %}">
            {% if config.showImage and image %}
                <div class="newsfeed-image" style="background-image: url({{image}})"></div>
            {% endif %}

So you can specify your style for each case, withImage or not.

.MMM-anotherNewsFeed .module-content .container {
  text-align: right;
  ...
}

.MMM-anotherNewsFeed .module-content .container.withImage {
  text-align: left;
  ...
}

Image and contents are arranged by container’s display:flex so you can reorder or justify with flex-related attributes.

@mumblebaj
Usually, implementing the suspend and resume methods of the MM module is useful when your module depends on expensive resources. When your module is inactivated, it would be better to stop consuming resource.
But that mechanism is somehow annoying for me, so I ignore those methods. :D

@greedyvegan
Like this?

/* css/custom.css */
.region .container .module {
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(255 255 255 / 10%);
  min-width: 300px;
  position: relative;
}

.module-header {
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: darkslateblue;
  color: white;
  font-weight: bold;
  border: none;
  padding: 5px;
  border-radius: 5px;
}

@Lusbueb
Usually, No.
Only the magic mirror module which use “native node module” needs it. but it would be hard to distinguish by a normal user.

@Egnos
See how usage looks like.
https://youtu.be/BcpZvkcrfHU

@pillaresci
Exactly what do you want to do? Let’s break one by one.