Help restyling MMM-ValuesByNotification

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.

sdetweil

@BKeyport said in Help restyling MMM-ValuesByNotification:

the

if the class style affects a single element, then the style goes there

if it affects multiple items, then on their parent

and then you need to look at the style to see if it can be inherited from an ancestor

http://web.simmons.edu/~grabiner/comm244/weekfour/css-concepts.html#:~:text=In CSS%2C some styles are,tree while others are not.

BKeyport

I’ve officially given up.

I can get it to start to look right outside the magicmirror environment, and even with unsetting everything styled within the ValuesByNotification app, I can’t get it to duplicate within Magic Mirror.

This is with copying Main.css into a test environment, along with the other modules’ CSS files, and using the output HTML from MagicMirror.

Works great in test, but the moment I try to make it go live, it’s doing random things.

I hate CSS. I really do.