4. costum.css modified but font color still the same
MagicMirror² v2.4.1 is available! For more information about this release, check out this topic.
Please read the release notes carefully since this update requires adjustments to your Raspberry Pi configuration!

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