My custom mirror

[BerkSmash1984]

@greedyvegan very cool! Which module are you using for the word clock?

[MMRIZE]

@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; 
}

[greedyvegan]

@MMRIZE nice, I like that; thank you

[greedyvegan]

@BerkSmash1984 https://github.com/ngnijland/MMM-text-clock

[greedyvegan]

@MMRIZE
how do I get the news article image to have a permanent position, whether it appears/loads or not?? just like in your image.

is that float or margin?

|(image) (text text text text) |

[MMRIZE]

@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.

[BerkSmash1984]

@greedyvegan Thanks!

[greedyvegan]

@MMRIZE
thank you very much, what’s the hierarchy levels as far as region, container, module in css?

[sdetweil]

@greedyvegan use the developers window elements view to see it

[greedyvegan]

@sdetweil I understood you here but I’m asking about priority overall, the developer window doesn’t display that.