costum.css modified but font color still the same

Wurzelxquadrat · Dec 22, 2017, 9:36 PM

Hi everybody

i have installed mi MagicMirror since a few weeks and i try to change the font color of the compliments module.
As far i know i have to write it in the custom.css and i did , but the color is still the same.
Not sure what is the problem and thought somebody can help me.

My config.js:


var config = {
	address: "localhost", // Address to listen on, can be:
	                      // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
	                      // - another specific IPv4/6 to listen on a specific interface
	                      // - "", "0.0.0.0", "::" to listen on any interface
	                      // Default, when address config is left out, is "localhost"
	port: 8080,
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
	                                                       // or add a specific IPv4 of 192.168.1.5 :
	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
	                                                       // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

	language: "de",
	timeFormat: 24,
	units: "metric",

	modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left",
			config: {
			displaySeconds: false,
			showWeek: true
			}
		},
		{
			module: "calendar",
			header: "Private ",
			position: "top_left",
			config: {
				calendars: [
					{
						symbol: "calendar-check-o ",
						url: "xxx"
					}
				]
			}
		},
		{
			module: "calendar",
			header: "Geburtstage",
			position: "top_left",
			config: {
				calendars: [
					{
						symbol: "calendar-check-0 ",
						url: "xxx"
					}
				]
			}
		},
               	{
			module: "currentweather",
			position: "top_right",
			config: {
				location: "xxx",
				locationID: xxxx
			}
		},
		{
			module: "weatherforecast",
			position: "top_right",
			header: "Wetter   ",
			config: {
				location: "xxx",
				locationID: "xxx",  //ID from http://www.openweathermap.org/help/city_list.txt
				appid: "xx"
			}
		},

		 {
                        module: "compliments",
                        position: "lower_third"
		},
		{
			module: "newsfeed",
			position: "bottom_bar",
			config: {
				feeds: [
					{
						title: "xxx",
						url: "xxxl"
					}
				],
				showSourceTitle: true,
				showPublishDate: true,
				reloadInterval: "30000",
				updateIntervall: "400000"
			}
		},
	]

};

#################################################################################

My main.css

html {
  cursor: none;
  overflow: hidden;
  background: #000;
}

::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0px;
  position: absolute;
  height: calc(100% - 0px);
  width: calc(100% - 0px);
  background: #000;
  color: #aaa;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
}

/**
 * Default styles.
 */



.dimmed {
  color: #fff;
}

.normal {
  color: #fff;
}

.bright {
  color: #fff;
}

.xsmall {
  font-size: 20px;
  line-height: 20px;
}

.small {
  font-size: 25px;
  line-height: 25px;
}

.medium {
  font-size: 35px;
  line-height: 35px;
}

.large {
  font-size: 65px;
  line-height: 65px;
}

.xlarge {
  font-size: 70px;
  line-height: 75px;
  letter-spacing: -3px;
}

.thin {
  font-family: Roboto, sans-serif;
  font-weight: 100;
}

.light {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
}

.regular {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
}

.bold {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
}

.align-right {
  text-align: right;
}

.align-left {
  text-align: left;
}

header {
  text-transform: uppercase;
  font-size: 20px;
  font-family: "Roboto Condensed";
  font-weight: 400;
  border-bottom: 1px solid #666;
  line-height: 15px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  color: #fff;
}

sup {
  font-size: 50%;
  line-height: 50%;
}

/**
 * Module styles.
 */

.module {
  margin-bottom: 30px;
}

.region.bottom .module {
  margin-top: 35px;
  margin-bottom: 0;
}

.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**
 * Region Definitions.
 */

.region {
  position: absolute;
}

.region.fullscreen {
  position: absolute;
  top: -0px;
  left: -0px;
  right: -0px;
  bottom: -0px;
  pointer-events: none;
}

.region.fullscreen * {
  pointer-events: auto;
}

.region.right {
  right: 0;
}

.region.top {
  top: 0;
}

.region.top .container {
  margin-bottom: 10px;
}

.region.top .container:empty {
  margin-bottom: 0;
}

.region.top.center,
.region.bottom.center {
  left: 50%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.region.top.right,
.region.top.left,
.region.top.center {
  top: 100%;
}

.region.bottom {
  bottom: 0;
}

.region.bottom .container {
  background : #000;
  margin-top: 20px;
  margin-bottom: 0px;
}

.region.bottom .container:empty {
  margin-top: 0;
}

.region.bottom.right,
.region.bottom.center,
.region.bottom.left {
  bottom: 100%;
}

.region.bar {
  width: 100%;
  text-align: center;
}

.region.third,
.region.middle.center {
   width: 100%;
  text-align: center;
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.region.upper.third {
  top: 33%;
}

.region.middle.center {
  top: 66%;
}

.region.lower.third {
  top: 85%;
}

.region.left {
  text-align: left;
}

.region.right {
  text-align: right;
}

.region table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
}

####################################################################

my custom.css

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/

 body {
}
.compliments {
 color: #ff0000;
} 	
.newsfeed {
color:#82bae5;
}

##########################################################################

i have no clue what happens and why it is not working.

Any idea ?

broberg · Dec 22, 2017, 10:53 PM

@Wurzelxquadrat

.compliments .bright {
color : #ff0000;
}

Wurzelxquadrat · Dec 23, 2017, 12:54 AM

ha…it works

thanks

Hellonoonan · Mar 12, 2020, 3:21 PM

What is the solution to this? I am having the same issue so I didnt want to create a new topic.

Here is my custom.css. Office hours remain Blue and Id like to change the color as Ive changed the background image and they are now drowned out.

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/

body {#
}

.region.fullscreen.below {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  margin: 5px;
  position: absolute;
  height: calc (50% - 0px);
  width: calc (50% - 0px);
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased
}

.brightb {
color: #fff;
}
.currentweather .wi-sunrise {
color: #ffd700;
}
.currentweather .wi-sunset {
color: #ffa500;
}
.currentweather .wi-day-sunny {
color: #ffff00;
}
.currentweather .wi-night-showers {
color: #55acee;
}
.currentweather .wi-degrees {
color: #fff;
}
.currentweather .wi-rain {
color: #55acee;
}
.currentweather .wi-showers {
color: #55acee;
}
.currentweather .wi-night-showers {
color: #55acee;
}
.currentweather .wi-night-alt-cloudy-windy {
color: #aaa;
}
.currentweather .wi-night-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy {
color: #aaa;
}
.currentweather .wi-day-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy-windy {
color: #aaa;
}
.currentweather .wi-showers {
color: #55acee;
}
.currentweather .wi-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-snow {
color: #fff;
}
.currentweather .wi-fog {
color: #999;
}
.currentweather .wi-night-clear {
color: #fff;
}
.currentweather .wi-night-rain {
color: #55acee;
}
.currentweather .wi-night-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-night-snow {
color: #fff;
}

.weatherforecast .wi-sunrise {
color: #ffd700;
}
.weatherforecast .wi-sunset {
color: #ffa500;
}
.weatherforecast .wi-day-sunny {
color: #ffff00;
}
.weatherforecast .wi-night-showers {
color: #55acee;
}
.weatherforecast .wi-degrees {
color: #fff;
}
.weatherforecast .wi-rain {
color: #55acee;
}
.weatherforecast .wi-showers {
color: #55acee;
}
.weatherforecast .wi-night-showers {
color: #55acee;
}
.weatherforecast .wi-night-alt-cloudy-windy {
color: #aaa;
}
.weatherforecast .wi-night-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy {
color: #aaa;
}
.weatherforecast .wi-day-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy-windy {
color: #aaa;
}
.weatherforecast .wi-showers {
color: #55acee;
}
.weatherforecast .wi-thunderstorm {
color: #ff00ff;
}
.weatherforecast .wi-snow {
color: #fff;
}
.weatherforecast .wi-fog {
color: #999;
}
.weatherforecast .wi-night-clear {
color: #fff;
}
.weatherforecast .wi-night-rain {
color: #55acee;
}
.weatherforecast .wi-night-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-night-snow {
color: #fff;
}
.compliments .bright {
color : #fff;
font-size: 30px;
}
.calendar_monthly #yearDigits {
	color: #fff;
	font-weight: normal;
}
.calendar_monthly #monthName {
	font-weight: normal;
}
.calendar_monthly #monthName:after {
	content: " •";
	color: #fff;
	font-weight: bold;
}
.calendar_monthly .monthPrev {
	color: #fff;
}
.calendar_monthly .monthNext {
	color: #fff;
}
.calendar_monthly .square-box {
	position: relative;
	width: 85%;
	overflow: hidden;
	margin: 0px auto;
}
.calendar_monthly .square-box:before {
	content: "";
	display: custom;
	padding-top: 20%;
}
.calendar_monthly .square-content {
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.calendar_monthly .square-content .today {
	border: 3px solid #80ff00;
	font-weight: light;
	color: #7dcfff;
}
.calendar_monthly .square-content div {
	display: table;
	width: 100%;
	height: 100%;
}
.calendar_monthly {
    color: #fff;
}
.calendar_monthly2 #yearDigits {
color: #fff;
font-weight: normal;
}
.calendar_monthly2 #monthName {
font-weight: normal;
}
.calendar_monthly2 #monthName:after {
content: " •";
color: #80ff00;
font-weight: bold;
}
.calendar_monthly2 .monthPrev {
color: #333333;
}
.calendar_monthly2 .monthNext {
color: #333333;
}
.calendar_monthly2 .square-box {
position: relative;
width: 50%;
overflow: hidden;
margin: 0px auto;
}
.calendar_monthly2 .square-box:before {
content: “”;
display: block;
padding-top: 20%;
}
.calendar_monthly2 .square-content {
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.calendar_monthly2 .square-content .today {
border: 1px solid #80ff00;
font-weight: normal;
color: #80ff00;
}
.calendar_monthly2 .square-content div {
display: table;
width: 100%;
height: 100%;
}
.calendar_monthly2 .square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.clock .date {
    color: #fff;
}
.normal {
  color: #999;
}

.bright {
  color: #fff;
}


.square-content span {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.OfficeHours .bright {
text-align: left;
color: #fff;
font-size: 40px;
}

header {
    text-transform: none;
    font-size: 35px;
    font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
    font-weight: 600;
    border-bottom: 2px solid #0084ff;
    line-height: 55px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    color: #fff;
}

.clock .bright {
font-size: 100px;
color: #7dcfff
}

/* wind speed selector */
.currentweather > .module-content > div > div.normal.medium > *:nth-child(2),
/* wind direction selector */
.currentweather > .module-content > div > div.normal.medium > *:nth-child(3),
/* sunset/sunrise time selector */
.currentweather > .module-content > div > div.normal.medium > *:nth-child(6){
    color: white;
}

#module_4_currentweather header {
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

#module_4_currentweather .wi-sunrise {
color: #fff;
}

lavolp3 · Mar 12, 2020, 3:23 PM

@Hellonoonan said in costum.css modified but font color still the same:

.brightb {
color: #fff;
}

Maybe this?

.bright {
color: #fff;
}

without the b?