Newsfeed module behaves differently than Compliments with custom.css?

[strawberry 3.141]

@valid8r the compliments module is not using the medium class

.compliments .xlarge {
    font-size: 60px;
    font-color: #99F;
    line-height: 60px;
}

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