@sdetweil

ok, so since this isn’t working, do I change the item “classes” or “type” ?

let’s say I change it to “weatherDAY” and “weatherWEEK”
in the css do I change it to

.weatherDAY .weathericon {
.weatherWEEK .weathericon {

so on and so forth?

(currently reading)
https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works?_=1602611995137

I have this issue too, the dev window says they’re the same class

but the classes are already different/labeled as forecast and weather in config

when I open everything in the developer window,
this is the one that highlights the icon I want to move “</span> == $0”

the current weather “sun” icon in the top module is the one I want to move,
but its labeled as the current weather condition, NOT the icon I want to move
when I uncheck the one I need, both icons from current weather and “today” from forecast both change

it’s labeled as “weather weather” , when I change that, they both change (current weather and forecast)

what am I doing wrong?

@skyzuma

check out this site
https://www.npmjs.com/package/dateformat
then play around with these settings

I have a joke:

After HOURS of reading, research and testing,
I FINALLY got the weather icons to change,
THEN I spent hours trying to find out why I am missing an icon

the cloud icon is white.
the background is white.
so it’s “invisible”

I changed the size of the icon in the developer window and saw six icons and fixed my problem.
I bring this up to share a lesson, spend a little more time trying to figure it out.

@imdickie said

The title seems to ignore the forced maxWidth. Is there any way to force the title to align to the body?!

I’ve had this issue before
try the developer view in a browser to see your options
the default settings doesn’t prohibit you

.MMM-OnThisDayWikiApi 
{max-width:100vh;height:auto;max-height:auto;line-height:1em;}
.MMM-OnThisDayWikiApi .title 
{text-align:justify;margin-bottom:0.5em;text-transform:uppercase;}
.MMM-OnThisDayWikiApi-single .title 
{text-align: center; text-transform: capitalize;}
.MMM-OnThisDayWikiApi ul 
{padding: 0; margin-top: 0.5em;}
.MMM-OnThisDayWikiApi-list
{list-style: none; padding: 0;}
.MMM-OnThisDayWikiApi-list li
{ text-align: justify; margin-bottom: 0.5em;}

post your custom.css to assist you further

@sdetweil ok, thanks. I need to look up web developers for dummies now.

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

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

can I add a flash drive and use that as a source of images?

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

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

@MMRIZE nice, I like that; thank you

Raspberry Pi 4 connected to a 40" tv, mounted on a wall, vertically.
I built a box around the tv and used paint stirrers for the front of the frame

Modules:
MMM-anotherNewsFeed (default newsfeed with image of article)
MMM-Breathwork (a reminder to inhale and exhale)
MMM-CalendarExt3Agenda (mini month view and agenda)
MMM-Chuck-Norris (silly Chuck Norris ‘jokes’)
MMM-Chess-Daily (visibly hidden until you play a game)
MMM-Dad-Jokes
MMM-GooglePhotos (slideshow of google photos folder)
MMM-iHaveBeenThere (the places that my wife &. I have visited
MMM-OnSpotify (displays the currently playing song)
MMM-OnThisDayWikiApi (things that happened on today’s date)
MMM-Snake (play vintage snake game in full screen)
MMM-text-clock (the current time written in words)

Here’s what gives each module its own “floating” background.
(you have to modify the positions & regions in custom.css)

/* css/custom.css */

html {
  cursor: default;
  overflow: hidden;
  background: #c4c4c4;
}


body {
  margin: 10px;
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-bottom: -10px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: black;
  background: transparent;
}

header {
  background: transparent;
  padding: 0.5rem;
  text-align: center;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
  color: black;
  font-size: 20px;
}
.dimmed {
  color: black;
}

.normal {
  color: black;
}

.bright {
  color: black;
}

/**
 * module.color_border_shadow
 */ 
 .module.clock,
 .module.calendar,
 .module.newsfeed,
 .module.weatherforecast,
 .module.currentweather,
 .module.compliments {
  padding:8px;
  border-radius: 10px;
  box-shadow: 0 15px 20px -15px rgba(0, 0, 0, 0.3), 0 55px 50px -35px rgba(0, 0, 0, 0.3), 0 85px 60px -25px rgba(0, 0, 0, 0.1);
  background: white;
}

.clock .time {
 font-size: 80px;
 text-align: center;
 margin-top: 25px;
 color: black;
 padding: 15px;
}
.clock .date {
  background: transparent;
  padding: 5px;
  text-align: center;
  border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
  color: black;
  font-size: 20px;
}


/**
 * module.width_height
 */
.module.calendar {
  width:450px;
  height: 320px;
}
.module.weatherforecast {
  width:400px;
  height: 220px;
}
.module.currentweather {
  height: 180px;
  width:400px;
  text-align: center;
}

thank you @MMRIZE & @sdetweil for your assistance.

even though the module loads, I see this error all the time; even after a refresh.
Should I ignore it?

@greedyvegan said in MMM-NewsFeedTicker.:

@sdetweil

thank you, I’m going to try it now

I tried it and didn’t like it, so I removed it.
thank you.

@sdetweil

agreed. I’ve scrapped the newsfeedticker, I like his module better

@MichMich

even though I’ve only been exposed to your project in the last year I thank you for all you’ve done. IF I’ve spent hours/days/weeks on my mirror I can only imagine what you’ve gone through. Again, thank you.

I always want to give a special acknowledgement to @MMRIZE & @sdetweil (and the others)
for their assistance and contributions to the community and myself.

@sdetweil said newsfeedticker designed to be bottom bar ,
full width . takes a lot of space to display all that and make it readable

I totally understand what you’re saying, but:

• some news articles only have seven words in their event
• every newsfeed does not display an image

is there a way that I can force the module to remain and not animate/blink, so the background is always visible?
And can I force the article to be on the right side of the article image whether it is displayed or not?

forgive me, I’m still learning, is that the display: block/flex/inline or margin:left/right % px?

@MMRIZE said

thank you, copied and pasted your code and it’s working.
the screensho