MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-PirateSkyForecast Font resizing HELP.

    Scheduled Pinned Locked Moved Custom CSS
    6 Posts 2 Posters 200 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • plainbrokeP Offline
      plainbroke
      last edited by

      Okay I want to resize the numbers in the forcast on my screen.
      What parts of this I pulled from the MMM-PirateSkyForecast.css do I need to modify for my custom.css file to enlarge ALL the numbers and wording…???
      Just remove what I do not need. I am using table vs tile mode… Table fills the width of the screen but the numbers and words are pretty small on my 42inch screen.

      .MMM-PirateSkyForecast .attribution {
        font-size: 10px;
        line-height: 16px;
        color: #333;
        text-align: right;
      }
      
      /* Current Conditions */
      
      .MMM-PirateSkyForecast .current-conditions-wrapper .current.temperature {
        line-height: 80px;
        vertical-align: middle;
      }
      
      .MMM-PirateSkyForecast .current-conditions-wrapper .icon {
        vertical-align: middle;
        line-height: 80px;
        margin-right: 20px;
        width: 100px;
        height: 100px;
        display: inline-block;
        position: relative;
      }
      
      /* Inline icons */
      .MMM-PirateSkyForecast .inline-icon,
      .MMM-PirateSkyForecast .wrapper.tiled .forecast-container .forecast-item .inline-icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-right: 0px;
        vertical-align: bottom;
        position: relative;
      }
      
      
      /* Extra Current Conditions */
      
      .MMM-PirateSkyForecast .extra-current-conditions-wrapper .temperature-container,
      .MMM-PirateSkyForecast .extra-current-conditions-wrapper .precipitation-container,
      .MMM-PirateSkyForecast .extra-current-conditions-wrapper .wind-container {
        display: inline-block;
        white-space: nowrap;
        margin:0 15px;
        margin-bottom: 10px;
      }
      
      /* Forecast Header */
      
      .MMM-PirateSkyForecast .module-header.forecast-header {
        margin-top: 20px;
        margin-bottom: 0;
      }
      
      /* ------------ Table Layout ------------ */
      
      .MMM-PirateSkyForecast .wrapper.table .forecast-container {
        display: table;
        border-collapse: collapse;
        width: 100%;
        font-size: 17px;
        line-height: 1;
        border-bottom: solid 1px #222;
      }
      
      .MMM-PirateSkyForecast .wrapper.table .forecast-container .forecast-item > span,
      .MMM-PirateSkyForecast .wrapper.table .forecast-container .header-row > span {
        display: table-cell;
        font-size: 17px;
        text-align: center;
        vertical-align: middle;
        height: 40px;
      }
      
      .MMM-PirateSkyForecast .wrapper.table .forecast-container .header-row > span {
        height: 32px;
        font-size: 14px;
        text-transform: uppercase;
        vertical-align: bottom;
        padding-bottom: 2px;
      }
      
      .MMM-PirateSkyForecast .wrapper.table .forecast-container .forecast-item .forecast-icon {
        width: 30px;
        height: 30px;
        display: block;
        vertical-align: middle;
      }
      

      Slow learner. But trying anyways.

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @plainbroke
        last edited by

        @plainbroke I do not know. Use the developers window elements tab to discover this
        See the second link in my signature below

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        plainbrokeP 1 Reply Last reply Reply Quote 0
        • plainbrokeP Offline
          plainbroke @sdetweil
          last edited by

          @sdetweil
          Sorry took so long to get back to the forum.
          I figured it out, using my default trial and error method.
          Here is what I ended up with and it fills the screen now.

          .MMM-PirateSkyForecast .module-content {
                  width: 1820px;
          }
          .MMM-PirateSkyForecast .wrapper.table .forecast-container {
            display: table;
            border-collapse: collapse;
            width: 100%;
            font-size: 34px;
            line-height: 35px;
            border-bottom: solid 1px #222;
          }
          .MMM-PirateSkyForecast .wrapper.table .forecast-container .forecast-item > span,
          .MMM-PirateSkyForecast .wrapper.table .forecast-container .header-row > span {
            display: table-cell;
            font-size: 34px;
            text-align: center;
            vertical-align: middle;
            height: 40px;
          }
          .MMM-PirateSkyForecast .wrapper.table .forecast-container .header-row > span {
            height: 32px;
            font-size: 28px;
            text-transform: uppercase;
            vertical-align: bottom;
            padding-bottom: 2px;
          }
          .MMM-PirateSkyForecast .wrapper.table .forecast-container .forecast-item .forec>
            width: 60px;
            height: 60px;
            display: block;
            vertical-align: middle;
          }
          

          I never can figure out the window elements tab thingy.

          Just in case someone else needs this information in the future…

          Slow learner. But trying anyways.

          plainbrokeP 1 Reply Last reply Reply Quote 0
          • plainbrokeP Offline
            plainbroke @plainbroke
            last edited by

            Close please.

            Slow learner. But trying anyways.

            S 1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @plainbroke
              last edited by

              @plainbroke was never ‘open’

              you can do that when it is, 3 dots to the right of the message that you think represents the best answer, then select This…

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              plainbrokeP 1 Reply Last reply Reply Quote 0
              • plainbrokeP Offline
                plainbroke @sdetweil
                last edited by

                @sdetweil
                That explains it.
                Never being opened would mean duh can’t close it…
                Thank you for your explanation…

                Slow learner. But trying anyways.

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • First post
                  Last post
                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