Read the statement by Michael Teeuw here.
My custom mirror
-
@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; }
-
@MMRIZE nice, I like that; thank you
-
-
@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) |
-
@greedyvegan
newsfeed item could have a container with selectorwithImage
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. -
@greedyvegan Thanks!
-
@MMRIZE
thank you very much, what’s the hierarchy levels as far as region, container, module in css? -
@greedyvegan use the developers window elements view to see it
-
-
@greedyvegan absolutely does.
unless overridden, they are element ordered, outer to inner. some styles can be inherited from parent, never from grandparent
the text above the console box shows the stack for the selected element.
the right window shows the exact inheritance and override, and sources for styles
the most specific style setting wins unless overridden ( !important)