• 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
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 220 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.
  • P Offline
    plainbroke
    last edited by 18 days ago

    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 17 days ago Reply Quote 0
    • S Offline
      sdetweil @plainbroke
      last edited by 17 days ago

      @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

      P 1 Reply Last reply 15 days ago Reply Quote 0
      • P Offline
        plainbroke @sdetweil
        last edited by 15 days ago

        @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.

        P 1 Reply Last reply 13 days ago Reply Quote 0
        • P Offline
          plainbroke @plainbroke
          last edited by 13 days ago

          Close please.

          Slow learner. But trying anyways.

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

            @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

            P 1 Reply Last reply 12 days ago Reply Quote 0
            • P Offline
              plainbroke @sdetweil
              last edited by 12 days ago

              @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
              1 / 1
              • First post
                3/6
                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