MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    costum.css modified but font color still the same

    Scheduled Pinned Locked Moved Troubleshooting
    5 Posts 4 Posters 3.6k Views 3 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • W Offline
      Wurzelxquadrat
      last edited by

      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 ?

      brobergB 1 Reply Last reply Reply Quote 0
      • brobergB Offline
        broberg Project Sponsor @Wurzelxquadrat
        last edited by

        @Wurzelxquadrat

        .compliments .bright {
color : #ff0000;
}
        1 Reply Last reply Reply Quote 2
        • W Offline
          Wurzelxquadrat
          last edited by

          ha…it works

          thanks

          1 Reply Last reply Reply Quote 0
          • H Offline
            Hellonoonan
            last edited by lavolp3

            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;
}
            lavolp3L 1 Reply Last reply Reply Quote 0
            • lavolp3L Offline
              lavolp3 Module Developer @Hellonoonan
              last edited by

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

              .brightb {
              color: #fff;
              }

              Maybe this?

              .bright {
color: #fff;
}

              without the b?

              How to troubleshoot modules
              MMM-soccer v2, MMM-AVStock

              1 Reply Last reply Reply Quote 0

              Hello! It looks like you're interested in this conversation, but you don't have an account yet.

              Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

              With your input, this post could be even better 💗

              Register Login
              • 1 / 1
              • First post
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Sam, technical setup by Karsten.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy