Help restyling MMM-ValuesByNotification

[BKeyport]

I’m wanting to show my values by notification differently, and it’s not cooperating with any css I’m throwing at it.

Here’s the config - commented to show how I want it to look (adjusted upon rediscovery that some values are calculated, and I’m not gonna bother with that):

		{
			module: "MMM-ValuesByNotification", // https://github.com/Tom-Hirschberger/MMM-ValuesByNotification
			position: "bottom_right",
			config: {
				animationSpeed: 0,
				updateInterval: 15,
				reuseCount: 99,
				transformerFunctions: {
					degToCompass: (num) => {
						val = ((num/22.5)+.5) | 0;
						arr = ["N","NNE","NE","ENE","E","ESE", "SE", "SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"];
						res = arr[(val % 16)];
						return res;
					},
					toDate: (num) => {
						return new Date(num * 1000).toLocaleString('en-US', { 
							year: 'numeric', 
							month: '2-digit', 
							day: '2-digit', 
							hour: '2-digit', 
							minute: '2-digit', 
							second: '2-digit',
							hour12: true
						});
					},
					
				},
				groups: [
				//groups should be on row next to each other. 
				// Values next to titles unless indicated. 
					{
						classes: "row",
						items: [
							{
								notification: "Weather",
								values: [
									{
										valueTitle: " ",
										valueUnit: "°F",
										jsonpath: "data.conditions[0].temp",
										valueFormat: "Number(${value}).toFixed(1)",
										classes: "xlarge",
									},
								],
							},
						],
					},
					// Insert vertical rule here 
					{
						classes: "row medium",
						items: [
							{
								notification: "Weather",
								values: [
									{
										valueTitle: "Wind:",
										valueUnit: "mph",
										jsonpath: "data.conditions[0].wind_speed_last",
										valueFormat: "Number(${value}).toFixed(1)",
										unitSpace: true,
									},
									// same line as previous
									{
										valueTitle: " ",
										jsonpath: "data.conditions[0].wind_dir_last",
										valueTransformers: ["degToCompass"],
										
									},
									// Insert <HR> here 
									{
										valueTitle: "Rain:",
										valueUnit: "in", 
										unitSpace: true,
										jsonpath: "data.conditions[0].rainfall_daily",
										valueFormat: "Number(${value}/100).toFixed(2)",
									},
									// same line as previous 
									{
										valueTitle: "Yearly Total",
										valueUnit: "in",
										unitSpace: true,
										jsonpath: "data.conditions[0].rainfall_year" ,
										valueFormat: "Number(${value}/100).toFixed(2)",
									},
								],
							},
						],
					},
					// Insert Vertical Rule here
					{
						classes: "row medium",
						items: [
							{
								notification: "Weather",
								values: [
									{
										valueTitle: "Humidity:",
										valueUnit: "%",
										jsonpath: "data.conditions[0].hum",
										valueFormat: "Number(${value}).toFixed(1)",
									},
									// same line as previous
									
									{
										valueTitle: "Feels like:",
										valueUnit: "°F",
										jsonpath: "data.conditions[0].thw_index",
										valueFormat: "Number(${value}).toFixed(1)",
									},
									// Insert <HR> here
									{
										valueTitle: "Barometer",
										valueUnit: "in Hg",
										unitSpace: true,
										jsonpath: "data.conditions[2].bar",
										valueFormat: "Number(${value}).toFixed(3)",
									},
								],
							},
						],
					},
					// Below others. 
					{
						classes: "bottom small",
						items: [
							{
								notification: "Weather",
								values: [
									{
										valueTitle: "Conditions as of:",
										jsonpath: "data.ts",
										valueTransformers: ["toDate"],
										//classes: "",
									}
								]
							},
						],
					},
				],
			},
		}, 

Existing CSS modifications - and needs:

.MMM-ValuesByNotification {
	border-radius: 0px;
    border-style: none;
    color: black;
    background-color: white;
}

.MMM-ValuesByNotification .vbn .groupWrapper {
    border-radius: 0px;
    border-style: none;
    color: black;
    background-color: white;
}

/* vertical rule
.vertical-rule {
    margin-top: 15px;
    margin-bottom: 15px;
    width: 1px;
    background: #e0e4e7;
    float: left;
    height: 90px;
}
*/

[sdetweil]

@BKeyport and when you use the developers window to select those elements and style them?

change the update intervals so you have time to play

[BKeyport]

of course. Or pause on the sources page. Same effect.

[BKeyport]

(old) Sample data:

{"data":{"did":"001D0A71573B","ts":1716603038,"conditions":[{"lsid":434637,"data_structure_type":1,"txid":1,"temp": 56.9,"hum":72.8,"dew_point": 48.3,"wet_bulb": 51.5,"heat_index": 56.2,"wind_chill": 56.9,"thw_index": 56.2,"thsw_index":null,"wind_speed_last":2.00,"wind_dir_last":146,"wind_speed_avg_last_1_min":2.00,"wind_dir_scalar_avg_last_1_min":157,"wind_speed_avg_last_2_min":2.00,"wind_dir_scalar_avg_last_2_min":157,"wind_speed_hi_last_2_min":5.00,"wind_dir_at_hi_speed_last_2_min":169,"wind_speed_avg_last_10_min":1.31,"wind_dir_scalar_avg_last_10_min":180,"wind_speed_hi_last_10_min":5.00,"wind_dir_at_hi_speed_last_10_min":169,"rain_size":1,"rain_rate_last":0,"rain_rate_hi":0,"rainfall_last_15_min":0,"rain_rate_hi_last_15_min":0,"rainfall_last_60_min":0,"rainfall_last_24_hr":7,"rain_storm":7,"rain_storm_start_at":1716576961,"solar_rad":null,"uv_index":null,"rx_state":0,"trans_battery_flag":0,"rainfall_daily":7,"rainfall_monthly":155,"rainfall_year":3713,"rain_storm_last":40,"rain_storm_last_start_at":1716299460,"rain_storm_last_end_at":1716433260},{"lsid":434634,"data_structure_type":4,"temp_in": 83.5,"hum_in":29.5,"dew_point_in": 48.4,"heat_index_in": 81.5},{"lsid":434633,"data_structure_type":3,"bar_sea_level":29.826,"bar_trend":-0.038,"bar_absolute":29.365}]},"error":null}

[sdetweil]

@BKeyport well pausing makes it hard to see the results.

[sdetweil]

@BKeyport remember, along the bottom edge of the elements tab view window is the selector style clauses for the selected element

[BKeyport]

@sdetweil I’m aware of everything you said, the problem is that I can’t get the CSS to cooperate. I can get 'em all to row, all to column (Default), etc, just not anything else.

Where I’m weakest is CSS, I have a hard time wrapping my head around it.

[sdetweil]

@BKeyport ok, it’s not row, column or anything else.

the stuff before the { is called the selector clause. it selects the elements (document wide) that the stuff inside the braces will be applied to.

many elements do NOT inherit settings from their parent, much less their grandparent

I use this cheatsheet to help me remember
https://www.w3schools.com/cssref/css_selectors.php

spaces between elements in the selector matter.

no space means AN element MUST have ALL the attributes. not parent child…

sometimes for me it is better read right to left.

styles are selected by the nearest specifier if there are multiples. unless you use the !important override.

. means class
# means id
[] means element  attribute [src...]
no prefix  means tag name,  table, p, div ..

[wishmaster270]

@BKeyport
Hi and sorry for the late reply.
I am not sure if I will have time to test your case the next days.

I think your main problem is that you try to use “normal” styling directives for the layout but I use flexbox css as the basic.

You can find a short tutorial at:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Edit:
Had 5 minutes and did a quick check.
I think the following two statements are a good starting point:

.MMM-ValuesByNotification .vbn .groupsWrapper {
  flex-direction: row;
}

.MMM-ValuesByNotification .vbn .valueWrapper {
  flex-direction: row;
}

[BKeyport]

@wishmaster270 I think the problem I’m having is figuring out where to place the classes to trigger what I want. Flex to me seems a bit erratic with how to set things.