4. costum.css modified but font color still the same
MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

costum.css modified but font color still the same

  • W

    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 ?

    0 1 Reply
  • Module Developer

    @Wurzelxquadrat

    .compliments .bright {
color : #ff0000;
}
    2
  • W

    ha…it works

    thanks

    0