Newsfeed module behaves differently than Compliments with custom.css?

valid8r

@strawberry-3.141 Thank you very much. This has helped me learn a bit more about css. This now points me in the direction of trying to find out where the compliments module definition is for the .xlarge class. Very helpful again.

valid8r

@strawberry-3.141
can you please confirm (for my css education), if the "wrapper.className = “thin xlarge bright” statement is where the font definitions are being set for the Compliments module as shown below? and if so, could I replace those strings with any of the css settings available?

getDom: function() {
var complimentText = this.randomCompliment();

	var compliment = document.createTextNode(complimentText);
	var wrapper = document.createElement("div");
	wrapper.className = "thin xlarge bright";
	wrapper.appendChild(compliment);

	return wrapper;

yawns

Yes and yes.
You could of course modify the classname line and apply other classes. But I would recommend defining own css styles to override existing styles instead.
If you modify the JavaScript file you could lose your changes if the module receives an update via github

valid8r

@yawns To do so would be to update custom.css right? Would you be able to show an example of how that would work for a module such as compliments.

zkab

I get the bigger fonts in newsfeed but still white color … hmmm
My custom.css looks like this

body {
}
.newsfeed .medium {
font-size: 60px;
font-color: #e6e600;
line-height: 60px;
}
.brightb {
color: #a2d2f6;
}
.wi-sunrise {
color: #ff0;
}
…

strawberry 3.141

@zkab did you try?

.newsfeed .medium {
  font-size: 60px;
  color: #e6e600;
  line-height: 60px;
}

zkab

Thanks - it works …

zkab

Still struggling with fonts & colors …
When I insert following in custom.css I don’t get the color for calendar …

.calendar .small {
color: #a2d2f6;
}

The message Loading … is in right color but when the calendar shows it it still in white … same thing with

.calendar .dimmed {
color: #a2d2f6;
}

Where have I missed ?

yawns

If you look into the calendar.js file you see the wrapper showing actual calendar entries is using

timeWrapper.className = "time light";
So I would try .calendar .time instead.

zkab

It works great - I am learning more and more thanks to this forum …
But if I want to change color for the calendar entries (Christmas Day, Boxing Day …)
Didn’t find it calendar.js …

.calendar .??? {
color: #a2d2f6;
}