Newsfeed module behaves differently than Compliments with custom.css?

valid8r

I wanted to play around with font size and colors so I modified custom.css with the following code below my body statements:

.newsfeed .medium {
font-size: 60px;
font-color: #99F;
line-height: 60px;
}
This worked nicely and my newsfeed now has a larger blue font.
… but when I apply the same idea to the compliments module as below:

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

I don’t get any change for the compliments module… what gives?

Thanks

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 ?