use bottom bar better

[dcazman]

How do i use more of the bottom bar ?

Currently i have
moon LARGE SPACE calendar LARGE SPACE current weather (Stacked on) weather forecast

I want to use that space to the right of calendar so i can arrange the screen better. I do not want to stack.

let config = {
    address: "0.0.0.0",
    port: 8080,
    basePath: "/",
    ipWhitelist: [],
    useHttps: false,
    httpsPrivateKey: "",
    httpsCertificate: "",

    language: "en",
    locale: "en-US",
    timeFormat: 12,
    units: "imperial",

    modules: [
        // Clock
        {
            module: "clock",
            position: "top_right",
            config: {
                timeFormat: 12,
                timezone: "America/New_York",
                displayType: "digital",
                displaySeconds: false,
                showWeek: false,
                showSunTimes: true,
                showMoonTimes: true,
                lat: ,
                lon: 
            }
        },

        // Ecobee indoor conditions
        {
            module: "MMM-Ecobee",
            position: "top_left",
            header: "Indoor Conditions",
            config: {
                updateInterval: 300000,
                showIndoorHumidity: true,
                showOutdoorWeather: false
            }
        },

        // Dynamic Weather (OpenWeather visual background)
        {
            module: "MMM-DynamicWeather",
            position: "fullscreen_above",
            config: {
                api_key: "", // required
                lat: ,
                lon: ,
                units: "imperial",
                weatherInterval: 600000,
                updateInterval: 600000,
                animationSpeed: 2000,
                effectDuration: 60000,
                effectDelay: 30000,
                fadeDuration: 3000,
                realisticClouds: true,
                sequential: "weather"
                // sunImage: "sun_center"
            }
        },

        // Calendar
        {
            module: "calendar",
            position: "bottom_center",
            header: "Holidays",
            config: {
                maximumNumberOfDays: 90,
                wrapEvents: false,
                fade: false,
                maximumEntries: 5,
                calendars: [
                    {
                        symbol: "calendar",
                        url: "https://calendar.google.com/calendar/ical/en.usa%23holiday%40group.v.calendar.google.com/public/basic.ics"
                    }
                ]
            }
        },

        // Moon Phase
        {
            module: "MMM-MoonPhase",
            position: "bottom_left",
            config: {
                hemisphere: "N",
                resolution: "detailed",
                updateInterval: 12 * 60 * 60 * 1000
            }
        },

        // Current outdoor conditions (WeatherFlow)
        {
            module: "weather",
            position: "bottom_right",
            header: "Outdoor Conditions -",
            config: {
                weatherProvider: "weatherflow",
                apiBase: "",
                token: "",
                stationid: "",
                type: "current",
                units: "imperial",
                tempUnits: "imperial",
                windUnits: "mph",
                degreeLabel: true,
                showPrecipitationProbability: true,
                showUVIndex: true,
                showWindDirection: true,
                showWindDirectionAsArrow: true,
                showHumidity: true,
                showSun: false,

                showLightning: true,
                showFeelsLike: true,
                showCloudCover: true,
                showPrecipitationAmount: true,

                updateInterval: 10 * 60 * 1000
            }
        },

        // Forecast (WeatherFlow)
        {
            module: "weather",
            position: "bottom_right",
            config: {
                weatherProvider: "weatherflow",
                apiBase: "",
                token: "",
                stationid: "",
                type: "forecast",
                units: "imperial",
                tableClass: "medium",
                colored: true,
                fade: false
            }
        }
    ]
};

if (typeof module !== "undefined") {
    module.exports = config;
}

[sdetweil]

@dcazman in a earlier release we added a specific style for container, used in each region or position

.region .container {
  display: flex;
  flex-direction: column;
}

What you may be able to do is override that for bottom right

.region.bottom.right .container {
    flex-direction:row;
}

in a previous post a few months ago I posted, for top-bar (not left or right)

.region.bar.top .container {
        display: inline-flex !important;
        flex-direction: row;
}

[dcazman]

@sdetweil

.region.bottom.right .container {
    flex-direction:row;
}

works but it crams it right. Making no space between current and forecast.

they are not on top of each other rather its run on sentance.

do i need to add more css to try and add some pad to the right of current weather ?

[sdetweil]

@dcazman yes, you will have to add spacing (padding I think its called)

be careful, padding on left will mean both, same for right, unless you target the module and not the container

see the second link in my sig below for starter on using the browser window elements tab to discover and test css changes(which would go into custom.css)

[dcazman]

@sdetweil

.clock .time {
  font-size: 18rem;   /* try 12rem, you can adjust up/down */
}
.clock .date {
  font-size: 4rem;    /* optionally adjust the date size */
}

.region.bottom.right .container {
    flex-direction:row;
}

.currentWeatherModule {
  margin-right: 50px;
  font-size: 5rem;
}

The padding works but the font-size has no impact.

i tried going straight for

.weather

but that did not help.

[sdetweil]

@dcazman yes, fontsize is a brain twister

many of the html elements do not inherit settings from things above them

imagine if fontsize 50 worked on the top level of a printed page, suddenly everything would be 50…, even when you meant on this paragraph
and some other paragraph already said 20, oops…

SO, you need to find the element in the dev window elements tab and see where it got its size from (right column after you select that html element) and fix that…