Throwing down the gauntlet

jbeck615

@jproehl thank you. ill do some deeper vetting. thanks!

strawberry 3.141

@jbeck615 if you post your css here we can help to spot the issue

johnnyboy

This post is deleted!

jbeck615

@strawberry-3.141 oh my thank you SO much for offering. i hate asking for help but let me tinker with it for a couple of days and if no luck i will take you up on the offer. LOVE this community. thank you again for even offering!

Mykle1

@strawberry-3.141

I thought you might like to know that I had some success with the custom.css file without asking for your help. I did do some looking around in the module .js file and the Developers Tools. I was careful not to change anything. I was looking for clues on what changes specific parts of a module. (e.g. table, text, align, padding, margin, etc…)

I wanted to be able to move the calendar_monthly module to the left margin. I also wanted to constrain the module to a specific width so that it wouldn’t expand when another module stretches the region they both occupy. And just for good measure, I threw in some color. So, using the the css information that you’ve already given me for other modules, and the information I got from looking in the module.js file and Developers Tools, I did this.

With this

}

.calendar_monthly table {
  width: initial;
  float: left;
}

.calendar_monthly td {
  text-align: left !important;
}

.calendar_monthly calendar-table {
  text-align: left !important;
}

.calendar_monthly {
  width: 200px;
  color: #6f6;
}

“I’m smart! I can do things!” (Fredo Corleone - The Godfather II)

johnnyboy

This post is deleted!

jbeck615

@strawberry-3.141 So I can definitely post the css coding but my pi takes some time to start up some days it seems… anyway what I was ultimately trying to do was, using wunderground, get rid of the last column as you and Mykle1 showed above and get the icon for current to look realistic/color but keep the forecast icons as generic icons. so the way i attempted this was incorporate all of the edits you all provided above. then i repeated wunderground twice in the modules, one to show current and the color icon (realistic icon) and a second time just to show forecast but with generic icons. however when i stack them both in top right thats where i get the unwanted icons. if i put current wunderground in the top center then they go away. thoughts? i can provide css if needed for sure. thanks for even looking! ![alt text]( image url)

jbeck615

@Mykle1 thanks for sharing! the width of the monthly calendar was bothering me and i was going to research later anyway!

Mykle1

@johnnyboy said in Throwing down the gauntlet:

is that why you put the ! important there?

No sir, I do believe that this is the entry that constrains the module to 200 pixels ( and the color)

.calendar_monthly {
  width: 200px;
  color: #6f6;
}

Mykle1

@jbeck615 said in Throwing down the gauntlet:

thanks for sharing! the width of the monthly calendar was bothering me and i was going to research later anyway!

Cool. I’ve found answers that way too, before I even had the question

Mykle1

@jbeck615 said in Throwing down the gauntlet:

then i repeated wunderground twice in the modules,

You would have to repeat wunderground twice in the config.js file, not the modules, for starters

johnnyboy

This post is deleted!

jbeck615

@Mykle1 thats what i meant but poorly wrote that. i got the idea from your script but im thinking that there may be a away to have the icon for the current different from the forecast icons

strawberry 3.141

@jbeck615 can you share your wunderground config which leads to the unwanted icons?

jbeck615

@strawberry-3.141

/* global Module */
/* Magic Mirror
 * Module: WunderGround
 *
 * By RedNax
 * MIT Licensed.
 */
Module.register("MMM-WunderGround", {

    // Default module config.
    defaults: {
        apikey: "8cxxxxxx",
        pws: "",
        currentweather: 1,
        coloricon: false,
        units: config.units,
        windunits: "mph", // choose from mph, bft
        updateInterval: 10 * 60 * 1000, // every 10 minutes
        animationSpeed: 1000,
        timeFormat: config.timeFormat,
        lang: config.language,
        showWindDirection: true,
        fade: false,
        fadePoint: 0.25, // Start on 1/4th of the list.
        tz: "",
        fcdaycount: "5",
        fcdaystart: "0",
        hourly: "0",
        hourlyinterval: "3",
        hourlycount: "2",
        fctext: "1",
        alerttime: 5000,
        roundTmpDecs: 1,
        UseCardinals: 0,
        layout: "vertical",
        sysstat: 0,
        scaletxt: 1,

        retryDelay: 2500,

        apiBase: "http://api.wunderground.com/api/",

        iconTableDay: {
            "chanceflurries": "wi-day-snow-wind",
            "chancerain": "wi-day-showers",
            "chancesleet": "wi-day-sleet",
            "chancesnow": "wi-day-snow",
            "chancetstorms": "wi-day-storm-showers",
            "clear": "wi-day-sunny",
            "cloudy": "wi-cloud",
            "flurries": "wi-snow-wind",
            "fog": "wi-fog",
            "haze": "wi-day-haze",
            "hazy": "wi-day-haze",
            "mostlycloudy": "wi-cloudy",
            "mostlysunny": "wi-day-sunny-overcast",
            "partlycloudy": "wi-day-cloudy",
            "partlysunny": "wi-day-cloudy-high",
            "rain": "wi-rain",
            "sleet": "wi-sleet",
            "snow": "wi-snow",
            "tstorms": "wi-thunderstorm"
        },

        iconTableNight: {
            "chanceflurries": "wi-night-snow-wind",
            "chancerain": "wi-night-showers",
            "chancesleet": "wi-night-sleet",
            "chancesnow": "wi-night-alt-snow",
            "chancetstorms": "wi-night-alt-storm-showers",
            "clear": "wi-night-clear",
            "cloudy": "wi-night-alt-cloudy",
            "flurries": "wi-night-alt-snow-wind",
            "fog": "wi-night-fog",
            "haze": "wi-night-alt-cloudy-windy",
            "hazy": "wi-night-alt-cloudy-windy",
            "mostlycloudy": "wi-night-alt-cloudy",
            "mostlysunny": "wi-night-alt-partly-cloudy",
            "partlycloudy": "wi-night-alt-partly-cloudy",
            "partlysunny": "wi-night-alt-partly-cloudy",
            "rain": "wi-night-alt-rain",
            "sleet": "wi-night-alt-sleet",
            "snow": "wi-night-alt-snow",
            "tstorms": "wi-night-alt-thunderstorm"
        }

    },

strawberry 3.141

@jbeck615 you shouldn make the changes in the module itself all config changes should go in the config file

jbeck615

@strawberry-3.141 to be honest i dont know if i pasted enough as it kept cutting me off due to character count but just let me know. no rush. also the picture here, the current weather at the center, is what ideally id love to have at top right. however when i change the position, the top info above the current weather and those icons pop up. thanks regardless for taking a look!

jbeck615

@strawberry-3.141

.region.top.right .MMM-WunderGround table.small td:nth-child(6) {
  display:none; 
}
.MMM-WunderGround .weathericon {
  font-size: 45%;
  line-height: 5px;
  display: inline-block;
  -ms-transform: translate(0, -3px); /* IE 9 */
  -webkit-transform: translate(0, -3px); /* Safari */
  transform: translate(0, -3px);
} 
.MMM-WunderGround .day {
  padding-left: 0;
#  padding-right: 10px;
}

.MMM-WunderGround .vcen {
   vertical-align: top;
}

.MMM-WunderGround .weather-icon {
  padding-left: 0px;
  text-align: center;
  width:50px; 
}

.MMM-WunderGround .max-temp {
  padding-left: 0px;
  padding-right: 0;
}

.MMM-WunderGround .min-temp {
#  padding-left: 10px;
#  padding-right: 0;
}

.MMM-WunderGround .forecastText {
# padding-left: 10px;
#  padding-right: 0;
#  word-wrap: break-word;
#  text-align: right;
#  rowspan: 0;
}

.MMM-WunderGround .tableheader {
  font-size: 75%;
  text-align: center;
} 

.MMM-WunderGround .hour {
  font-size: 75%;
  text-align: center;
 } 

.MMM-WunderGround .pop {
  font-size: 86%;
} 
.MMM-WunderGround .mm {
  font-size: 75%;
} 

.MMM-WunderGround .green {
  color: #83FFB3;
}

.MMM-WunderGround .yellow {
  color: yellow;
}

.MMM-WunderGround .red {
  color: #FF4C4C;
}

.MMM-WunderGround .center {
	text-align: center;
	padding-right: 10px; 
}
	
.MMM-WunderGround .left {
	text-align: left;
}

.MMM-WunderGround .lpad {
	padding-left: 10px; 
}

.MMM-WunderGround .currentWeatherIcon {
  font-size: 75%;
  line-height: 45px;
  display: inline-block;
  -ms-transform: translate(0, -3px); /* IE 9 */
  -webkit-transform: translate(0, -3px); /* Safari */
  transform: translate(0, -3px);
  width: 40%;
  height: 40%;
} 

.MMM-WunderGround .forecastWeatherIcon {
  font-size: 75%;
  line-height: 65px;
  display: inline-block;
  -ms-transform: translate(0, -3px); /* IE 9 */
  -webkit-transform: translate(0, -3px); /* Safari */
  transform: translate(0, -3px);
  width: 50%;
} 

.MMM-WunderGround .moonPhaseIcon {
  height: 34px;
  vertical-align: middle;
} 

.MMM-WunderGround .hrDivider {
        font-size: 10px;
}

.MMM-WunderGround .sub {
    vertical-align: sub;
    font-size: smaller;
}

.MMM-WunderGround .smaller {
    font-size: 60%;
}
.MMM-WunderGround .max-temp {
  color: #FF1A1A;
}

.MMM-WunderGround .min-temp {
  color: #0080ff;
}

.MMM-WunderGround .day {
  color: #6f6;
}

.region.top.center .MMM-WunderGround table.small {
  display:none;
}

.region.top.right .MMM-WunderGround table:not(.small) {
  display:none; 
}

.region.top.right .MMM-WunderGround table.small td:nth-child(6) {
  display:none; 
}

jbeck615

@Mykle1 ive never touched any of the monthly calendar files until i added your lines above to the end of my mcal.css file and was curious if you had any thoughts as to why your numbers are aligned to the left (when facing monitor) of the abbreviated days and mine are aligned to the right? just curious

jbeck615

@strawberry-3.141 the main config file and never touch the config files of each modules folder?