• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
  1. Home
  2. bobbylx
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.
B
Offline
  • Profile
  • Following 0
  • Followers 1
  • Topics 5
  • Posts 24
  • Groups 0

bobbylx

@bobbylx

2
Reputation
3
Profile views
24
Posts
1
Followers
0
Following
Joined Nov 14, 2023, 12:45 AM
Last Online 2 days ago

bobbylx Unfollow Follow

Best posts made by bobbylx

  • RE: MMM-CalendarExt3 shows both start and end time. How to stop showing end time.

    @EngrAg81 Ok, I think this is what you would edit to change the way those numbers are displayed, ie, High/low temp. This will be in the custom.css.

    CX3 .cellHeader .cellWeather .maxTemp {
      color: white;
      font-weight: bold;
      font-size: 90%;
    }
    
    .CX3 .cellHeader .cellWeather .minTemp {
      color: darkgray;
      font-weight: normal;
    }
    
    .CX3 .cellHeader .cellWeather .temperature {
      display: var(--displayWeatherTemp);
      padding-left: 5px;
      font-size: 90%;
    }
     
    .CX3 .cellHeader .cellWeather .maxTemp::before {
      content: " \25b2";  
    }
    
    .CX3 .cellHeader .cellWeather .minTemp::before {
      content: " \25bc";
    }
     
    .CX3 .cellHeader .cellWeather .temperature::after {
      content: "° ";
    }
    
    
    posted in Troubleshooting
    B
    bobbylx
    3 days ago
  • MMM-CalendarExt3 possible to round the corners?

    Hello all, so I’m looking at making some small customization’s now on my Calendar. I would like to round the corners (the black line) so it matches the rounded corner of the translucent background. Also, how can I add spacing between the name of the weekday and the top edge of the calendar below, not sure if you can see in the screenshot but the Y in each day of the week is touching the bar. I assume this is all done in the custom.css, just would like some guidance on what field to add/change to accomplish this? Thanks in advance.

    MMscreen.jpg

    posted in Utilities
    B
    bobbylx
    Jan 25, 2025, 5:03 PM

Latest posts made by bobbylx

  • RE: Help with a flexbox item that is not aligning.

    Thanks for the info.

    As for my horizontal alignment, I’ve got those where I like, and yeah I was aware of the content wrap. I have ssh session and a remote desktop over to my Pi box, so whenever I make a change I restart the process, which closes the developer box. I only open it to check things, but I’m not doing configurations based on the wrapped content when the box is present.

    I’ll probably just remove that moonphase anyway, heck, I just need to look out the window.

    posted in Custom CSS
    B
    bobbylx
    2 days ago
  • RE: Help with a flexbox item that is not aligning.

    @sdetweil I’ve gone through a plethora of pages regarding Flexbox. What I am failing to understand, and probably in part due to my limited coding experience, is why only that single item of the 4 is not cooperating.
    The way I understand is I have the flex container, which in this case is the top_bar? Then I have items within the container. My flex items would be the .clock, .weather, .weather and .MMM-MoonPhase. So should I be using a word other than .MMM-MoonPhase when adjusting the flex box position? Such as, in the example below, should .MMM-MoonPhase be replaced with another code that will then apply to the moon phase? This is where it gets muddy for me. And I know the second MMM-MoonPhase down there by itself is redundant, I was just testing.

    .clock, .weather, .MMM-MoonPhase {
    	display: inline-flex;
    	justify-content: space-around;
            align-items: flex-start;
            margin-right: 25px;
    	margin-left: 25px;
            background-color:rgba(255, 255, 255,0.6);    
            width: 300px;
            height: 180px;
    	border-radius:20px;
            padding: 8px;
            color: #616161;
          	}
    .MMM-MoonPhase {
    	background-color: rgba(255, 255, 255, 0.6);
    	width: 250px;
    	height: 180px;
    	border-radius:20px;
            padding: 8px;
            color: #616161;
    }
    

    So if bring up the developers window, and change the inline-flex, align-items, they all 4 move around, just that single Moonphase is slight off from the others.

    Screenshot_20250507_152414.png

    Honestly, I’ve been tweaking and editing this thing for a good year or so, I might be better off making a backup of some stuff and starting fresh.

    posted in Custom CSS
    B
    bobbylx
    2 days ago
  • Help with a flexbox item that is not aligning.

    Hello all,

    Looking for a little advice on this. I have 4 modules positioned in my top_bar and I have then in a flexbox. 3 of the 4 items are lined up with the top of the box, but the 4th will not move. I’ve used the developers window to inspect elements and make changes on the fly, but no matter what I change, in either the custom.css or main.css that goofy Moonphase module will not line up. Even if I change the flex alignment, all the modules will change position, just that moon module is never in sync with the others if that makes sense. Anyway, is there a tool or way to determine if that module is being positioned by another css file? Any other suggestions are welcome.

    Screenshot_20250507_132152.png

    Here is my custom.css for reference.

    body {
            background-Image: url("background.jpg");
            background-size: cover;
            position: absolute;
            margin: 0px;
            height: 100%;
            width: 100%;
    }
    header {
      border-bottom: none;
      color: #616161;
    }
    .wi.dimmed.wi-sunset {
    color: orange;
    }
    .wi.dimmed.wi-sunrise {
    color: yellow;
    }
    .wi-day-sunny {
    color: yellow;
    }
    .wi-day-cloudy {
    color: yellow;
    }
    .wi-rain {
    color: grey;
    }
    .wi-thunderstorm {
    color: grey;
    }
    .wi-snow {
    color: white;
    }
    .wi-fog {
    color: white;
    }
    .wi-night-clear {
    color: white;
    }
    .wi-night-cloudy {
    color: grey;
    }
    .wi-night-showers {
    color: blue;
    }
    .wi-night-rain {
    color: blue;
    }
    .wi-thunderstorm {
    color: yelow;
    }
    .wi-night-snow {
    color: white;
    }
    .wi-night-alt-cloudy-windy {
    color: grey;
    }
    .clock, .weather, .MMM-MoonPhase {
    	display: inline-flex;
    	justify-content: space-around;
            align-items: flex-start;
            margin-right: 25px;
    	margin-left: 25px;
            background-color:rgba(255, 255, 255,0.6);    
            width: 300px;
            height: 180px;
    	border-radius:20px;
            padding: 8px;
            color: #616161;
          	}
    .MMM-MoonPhase {
    	background-color: rgba(255, 255, 255, 0.6);
    	width: 250px;
    	height: 180px;
    	border-radius:20px;
            padding: 8px;
            color: #616161;
    }
    .lessontime {
         text-align: right;
         white-space: nowrap;
         padding-right: 2em;
         width: 1ex;
         font-size: 27px;
         color: #616161;   
     }
    
     .lesson{
         text-align: left;
         font-size: 27px;
         color: #616161;
     }
    
    .MMM-CalendarExt3{
          background-color:rgba(255, 255, 255,0.6);
          border-radius:20px;
          padding: 8px;	
     } 
    .CX3 .cell {
      border: 1px solid var(--celllinecolor);
      background-color: var(--cellbgcolor);
      height: calc(
        var(--cellheaderheight) + var(--cellfooterheight) +
          calc(var(--eventheight) * var(--maxeventlines))
      );
    }
    .CX3 .weekGrid {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(7, [cell-start] 1fr [cell-end]);
      grid-auto-columns: 0fr;
      margin-top: 5px; /* ADD THIS*/
    }
    
    .CX3 .cw {
    	display:none;
    }
    .CX3 .cellContainer .cell:nth-child(1) .cw {
      display: none;
    }
    .CX3 .cw::before {
            display: none;
    }
    .CX3 .event {
      margin: 6px 1px;
      padding: 15px 1px;
      text-align: left;
      grid-row: span 1;
      display: flex;
      justify-content: flex-start;
      gap: 0px;
      text-overflow: ellipsis;
      overflow: marquee;
      white-space: nowrap;
      min-width: 0;
      position: relative;
      eventheight: 35px;
    }
    .CX3 .event.singleday .headline:not(.useSymbol)::before {
      display: none;
    }
    .CX3 .event.singleday:not(.useSymbol)::before {
      content: '';
    }
    .CX3 .event.singleday {
      border-left:6px solid var(--calendarColor);
      color: #616161;
    }
    .CX3 .cell.today {
      border: 2px solid #fff; /* default was 1px, so you can change to 2px or whatever */
    }
    .CX3 .thisMonth {
      background-color: rgb(255 255 255 / 10%);
    }
    
    ----------------------------------------------------------------------------------------
    
    
    posted in Custom CSS
    B
    bobbylx
    2 days ago
  • RE: MMM-CalendarExt3 shows both start and end time. How to stop showing end time.

    @EngrAg81 Ok, I think this is what you would edit to change the way those numbers are displayed, ie, High/low temp. This will be in the custom.css.

    CX3 .cellHeader .cellWeather .maxTemp {
      color: white;
      font-weight: bold;
      font-size: 90%;
    }
    
    .CX3 .cellHeader .cellWeather .minTemp {
      color: darkgray;
      font-weight: normal;
    }
    
    .CX3 .cellHeader .cellWeather .temperature {
      display: var(--displayWeatherTemp);
      padding-left: 5px;
      font-size: 90%;
    }
     
    .CX3 .cellHeader .cellWeather .maxTemp::before {
      content: " \25b2";  
    }
    
    .CX3 .cellHeader .cellWeather .minTemp::before {
      content: " \25bc";
    }
     
    .CX3 .cellHeader .cellWeather .temperature::after {
      content: "° ";
    }
    
    
    posted in Troubleshooting
    B
    bobbylx
    3 days ago
  • RE: MMM-CalendarExt3 shows both start and end time. How to stop showing end time.

    @EngrAg81 I don’t have a lot of info on it, I did tweak my weather info but it’s been a couple years now. The number is the High/Low forecast-ed temperature. Have to turn on the default weather module in forecast mode, then I added this to config.js under MMM-calendarext3,

        useWeather: true,
                                displayWeatherTemp: true,
                                          weatherPayload:(payload) => {
                                     if (Array.isArray(payload?.forecastArray)) {
                                       payload.forecastArray = payload.forecastArray.map((f) => {
                                         f.maxTemperature = Math.round(f.maxTemperature * 9 / 5 + 32)
                                         f.minTemperature = Math.round(f.minTemperature * 9 / 5 + 32)
                                 return f
    
    

    I don’t remember what changes I made to get the degree symbol and up/down arrows. I’ll post here if I can find those changes.
    Screenshot_20250507_092215.png

    posted in Troubleshooting
    B
    bobbylx
    3 days ago
  • RE: MMM-CalendarExt3 formatting tweaks

    By the way, here is my custom.css so you can see what changes I’ve tried.

    body {
            background-Image: url("background.jpg");
            background-size: cover;
            position: absolute;
            margin: 0px;
            height: 100%;
            width: 100%;
    }
    header {
      border-bottom: none;
      color: #616161;
    }
    .wi.dimmed.wi-sunset {
    color: orange;
    }
    .wi.dimmed.wi-sunrise {
    color: yellow;
    }
    .wi-day-sunny {
    color: yellow;
    }
    .wi-day-cloudy {
    color: yellow;
    }
    .wi-rain {
    color: grey;
    }
    .wi-thunderstorm {
    color: grey;
    }
    .wi-snow {
    color: white;
    }
    .wi-fog {
    color: white;
    }
    .wi-night-clear {
    color: white;
    }
    .wi-night-cloudy {
    color: grey;
    }
    .wi-night-showers {
    color: blue;
    }
    .wi-night-rain {
    color: blue;
    }
    .wi-thunderstorm {
    color: yelow;
    }
    .wi-night-snow {
    color: white;
    }
    .wi-night-alt-cloudy-windy {
    color: grey;
    }
    .clock, .weather, .MMM-MoonPhase, .MMM-WeeklySchedule {
    	display: inline-flex;
    	margin-right: 25px;
    	margin-left: 25px;
    	margin-top: 0;
    }
    .lessontime {
         text-align: right;
         white-space: nowrap;
         padding-right: 2em;
         width: 1ex;
         font-size: 27px;
         color: #616161;   
     }
    
     .lesson{
         text-align: left;
         font-size: 27px;
         color: #616161;
     }
    
    .MMM-CalendarExt3, .clock, .weather, .MMM-MoonPhase, .MMM-WeeklySchedule {
          background-color:rgba(255, 255, 255,0.6);
          border-radius:20px;
          padding: 8px;
          color: #616161;
          margin-top: 0;	
     } 
    .CX3 .cell {
      border: 1px solid var(--celllinecolor);
      background-color: var(--cellbgcolor);
      height: calc(
        var(--cellheaderheight) + var(--cellfooterheight) +
          calc(var(--eventheight) * var(--maxeventlines))
      );
    }
    .CX3 .weekGrid {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(7, [cell-start] 1fr [cell-end]);
      grid-auto-columns: 0fr;
      margin-top: 5px; /* ADD THIS*/
    }
    
    .CX3 .cw {
    	display:none;
    }
    .CX3 .cellContainer .cell:nth-child(1) .cw {
      display: none;
    }
    .CX3 .cw::before {
            display: none;
    }
    .CX3 .event.singleday .headline:not(.useSymbol)::before {
      display: none;
    }
    .CX3 .event.singleday:not(.useSymbol)::before {
      content: '';
    }
    .CX3 .event.singleday {
      border-left:6px solid var(--calendarColor);
      color: #616161;
    }
    .CX3 .cell.today {
      border: 2px solid #fff; /* default was 1px, so you can change to 2px or whatever */
    }
    .CX3 .thisMonth {
      background-color: rgb(255 255 255 / 10%);
    }
    
    posted in Utilities
    B
    bobbylx
    4 days ago
  • MMM-CalendarExt3 formatting tweaks

    Hello all, just have 2 questions that have me stumped.

    1. I would like to have the modules across the top lined up, and preferably same sized backgrounds. I’ve tried adjusting the margins, but for some reason cannot make the Moon phase and Lesson plan module move up. Any suggestions?

    2. Can someone tell me where to add padding or what margin to adjust to add space between my individual events? thanks in advance.

    Screenshot_20250505_161321.png
    Screenshot_20250505_161341.png

    posted in Utilities
    B
    bobbylx
    4 days ago
  • RE: MMM-CalendarExt3 possible to round the corners?

    @chrisfr1976 said in MMM-CalendarExt3 possible to round the corners?:

    @bobbylx
    Have you tried to add a border-radius to .CX3 .weekGrid? I don‘t know if that works, but maybe… :)

    Worth a shot, but that didn’t do it. Now that I know what wording creates that rounded corner, I’ll just experiment and see what happens. Hah, I’ll get it eventually!

    posted in Utilities
    B
    bobbylx
    Jan 27, 2025, 7:41 PM
  • RE: MMM-CalendarExt3 possible to round the corners?

    And if this helps, here is my custom.css.

                                                                           custom.css                                                                                 
    body {
            background-Image: url("background01.jpg");
            background-size: cover;
            position: absolute;
            margin: 0px;
            height: 100%;
            width: 100%;
    }
    header {
      border-bottom: none;
    }
    .wi.dimmed.wi-sunset {
    color: orange;
    }
    .wi.dimmed.wi-sunrise {
    color: yellow;
    }
    .wi-day-sunny {
    color: yellow;
    }
    .wi-day-cloudy {
    color: yellow;
    }
    .wi-rain {
    color: grey;
    }
    .wi-thunderstorm {
    color: grey;
    }
    .wi-snow {
    color: white;
    }
    .wi-fog {
    color: white;
    }
    .wi-night-clear {
    color: white;
    }
    .wi-night-cloudy {
    color: grey;
    }
    .wi-night-showers {
    color: blue;
    }
    .wi-night-rain {
    color: blue;
    }
    .wi-thunderstorm {
    color: yelow;
    }
    .wi-night-snow {
    color: white;
    }
    .wi-night-alt-cloudy-windy {
    color: grey;
    }
    .clock, .weather, .MMM-MoonPhase, .MMM-WeeklySchedule {
            display: inline-flex;
            margin-right: 25px;
            margin-left: 25px;
    }
    .lessontime {
         text-align: right;
         white-space: nowrap;
         padding-right: 2em;
         width: 1ex;
         font-size: 27px;
         color: white;   
     }
     .lesson{
         text-align: left;
         font-size: 27px;
         color: white;
     }
    .MMM-CalendarExt3 {
          background-color:rgba(255, 255, 255,0.4);
          border-radius:20px;
         padding: 8px; } 
    CX3 .cell {
      border: 1px solid var(--celllinecolor);
      background-color: var(--cellbgcolor);
      height: calc(
        var(--cellheaderheight) + var(--cellfooterheight) +
          calc(var(--eventheight) * var(--maxeventlines))
      );
      position: relative;
      border-radius: 25px; /*adjust as you like it*/
    }
    .CX3 .weekGrid {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(7, [cell-start] 1fr [cell-end]);
      grid-auto-columns: 0fr;
      margin-top: 5px; /* ADD THIS*/
    }
    .CX3 .cw {
            display:none;
    }
    .CX3 .cellContainer .cell:nth-child(1) .cw {
      display: none;
    }
    .CX3 .cw::before {
            display: none;
    }
    .CX3 .event.singleday {
      border-left:4px solid var(--calendarColor);
    }
    
    .CX3 .event.singleday:not(.useSymbol)::before {
      content: '';
    }
    .CX3 .event.singleday .headline:not(.useSymbol)::before {
      display: none;
    
    .CX3 .cell.today {
      border: 2px solid #fff; /* default was 1px, so you can change to 2px or whatever */
    }
    .CX3 .thisMonth {
      background-color: rgb(255 255 255 / 10%);
    }
    
    posted in Utilities
    B
    bobbylx
    Jan 26, 2025, 1:46 PM
  • RE: MMM-CalendarExt3 possible to round the corners?

    @chrisfr1976 Thanks for that. It definitely increased the space between the day name and top of the cells, but the rounded corner didn’t work for me. I’ll keep tweaking that. It probably wouldn’t look like I want, if that applies to each cell. I’m hoping round to just corners of the overall calendar, not each cell, so it matches the background.fullscreen_1.jpg

    posted in Utilities
    B
    bobbylx
    Jan 26, 2025, 1:43 PM
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