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

Resize custom or main modules

Scheduled Pinned Locked Moved Development
24 Posts 6 Posters 34.2k Views 10 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.
  • B Offline
    bokifide
    last edited by bokifide Jul 14, 2016, 12:57 PM Jul 14, 2016, 12:56 PM

    @KirAsh4 uses cast shadow on bokifide…
    … It’s super effective! :sweat:

    haha :D . I guess it just wasn’t as common sense to me, in my mind I had no reason to doubt whether or not a portion of the sample given to me by the magic mirror gods had to be there. :pensive: But you’re 100% right, I should have googled it, because you never know :) that portion could serve another purpose like @MichMich pointed out.

    Lesson learned. Won’t happen again.

    Thank you for your time fellows :bow_tone1:
    Boki

    1 Reply Last reply Reply Quote 1
    • D Offline
      daveyg_71 @KirAsh4
      last edited by Oct 9, 2016, 6:47 AM

      @KirAsh4 said in Resize custom or main modules:

      Those CSS rules will affect all the modules, as all modules use them. If you only want to affect one single module, then you need to change the rules to point to the specific module. Let’s say you want the text smaller on the newsfeed, then you need to look at the actual HTML being created to get the class named being used:

      <div id="module_8_newsfeed" class="module newsfeed newsfeed" style="transition: opacity 1.25s; opacity: 0; position: static;">
        <div class="module-content">
          <div>
            <div class="light small dimmed">ESPN - Top News, 4 minutes ago:</div>
            <div class="bright medium light">Georgia RBs Chubb, Michel still iffy for opener</div>
          </div>
        </div>
      </div>
      

      Now you can see that the rules that affect the text, 'light small dimmed' and 'bright medium light' are all contained within the main class 'module newsfeed newsfeed' (on the very first line.)

      Using a bit of CSS juju, doing this:

      .newsfeed .medium {
        font-size: 18px;
      }
      

      … will make the text of the article headline smaller than the default '30px'. And this will only affect the newsfeed module. All the others also using the 'medium' rule will be unaffected.

      Where can I find the HTML file that is being created?

      The only HTML file I see is at ~/MagicMirror/index.html

      This file looks nothing like the example shown here.

      C S 2 Replies Last reply Oct 9, 2016, 2:00 PM Reply Quote 0
      • C Offline
        cowboysdude Module Developer @daveyg_71
        last edited by cowboysdude Oct 9, 2016, 2:02 PM Oct 9, 2016, 2:00 PM

        @daveyg_71 put these in the css directory - custom.css file…

        I would never suggest changing ANY core css file because it could have well not good results then you’ll be trying to fix several problems.

        That’s what the custom.css file is for ;)

        Not sure if you know but modules are numbered like the example above:
        module_8_newsfeed

        There is another thread here that explains all that :)
        Here’s one and it even has an example custom.css file attached:
        check here!

        D 1 Reply Last reply Oct 10, 2016, 5:44 AM Reply Quote 0
        • S Offline
          strawberry 3.141 Project Sponsor Module Developer @daveyg_71
          last edited by Oct 9, 2016, 4:38 PM

          @daveyg_71 there is only the index.html file, the rest of the DOM will be created during runtime with js. so if you want to manipulate the design with custom.css but you’re not sure about the structure, start the mirror in dev mode npm start dev or with ctrl+alt+i then you can inspect the DOM in tab elements or view the mirror in your browser and open developer tools

          Please create a github issue if you need help, so I can keep track

          D 1 Reply Last reply Oct 10, 2016, 6:16 AM Reply Quote 0
          • D Offline
            daveyg_71 @cowboysdude
            last edited by Oct 10, 2016, 5:44 AM

            @cowboysdude I wasn’t planning on changing the any core css files. Wanted to look at it so I could find the module information like the earlier post then change the custom.css

            1 Reply Last reply Reply Quote 0
            • D Offline
              daveyg_71 @strawberry 3.141
              last edited by Oct 10, 2016, 6:16 AM

              @strawberry-3.141 I was able to view the inspect the html with crtl+shift+I.

              my problem is it doesn’t look like the example above.

              1 Reply Last reply Reply Quote 0
              • S Offline
                shreyash @KirAsh4
                last edited by Feb 15, 2019, 9:56 AM

                @kirash4 didn’t resize, suggest me another way to resize array

                J 1 Reply Last reply Feb 16, 2019, 10:12 AM Reply Quote 0
                • J Offline
                  j.e.f.f Project Sponsor Module Developer @shreyash
                  last edited by Feb 16, 2019, 10:12 AM

                  @shreyash said in Resize custom or main modules:

                  @kirash4 didn’t resize, suggest me another way to resize array

                  When your CSS doesn’t seem to have any affect it’s usually one of two things:

                  • your rule is not specific enough, and is being overridden by one that is more specific than yours

                  • your rule has typos in it… sometimes it could be the difference of a space. div.someClass is interpreted by CSS differently than div .someClass

                  If you haven’t done so already, search this forum for the CSS 101 guide which should help explain the above.

                  S 1 Reply Last reply Feb 18, 2019, 7:26 AM Reply Quote 0
                  • S Offline
                    shreyash @j.e.f.f
                    last edited by Feb 18, 2019, 7:26 AM

                    @j-e-f-f Unable to customize

                    S 1 Reply Last reply Jun 13, 2019, 6:44 PM Reply Quote 0
                    • S Offline
                      Stoffbeuteluwe Project Sponsor @shreyash
                      last edited by Jun 13, 2019, 6:44 PM

                      Hi, how can I add more space between lines off weatherforecast?

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