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

is custom.css only for default modules?

Scheduled Pinned Locked Moved Development
13 Posts 4 Posters 2.8k Views 4 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.
  • C Offline
    cluelesscarter
    last edited by Sep 6, 2020, 1:30 PM

    Hey - n00b question,

    I’ve tried doing calling modules such as MMM-MoonPhase to position them exactly and create custom backgrounds for that specific module through custom.css but I can’t get it working… Should I be editing only the modules CSS file?

    The position and the background are probably separate issues to tackle right?

    .module.MMM-MoonPhase {
      position: absolute;
      left : 400px;
      top : 100px;
     background: #545454;
    }
    
    S 1 Reply Last reply Sep 6, 2020, 1:46 PM Reply Quote 0
    • S Offline
      sdetweil @cluelesscarter
      last edited by sdetweil Sep 6, 2020, 1:46 PM Sep 6, 2020, 1:46 PM

      @cluelesscarter only edit the custom.css

      custom.css is for everything. last stylesheet loaded so it can override anything before it

      remove the .module

      should start with the full module name

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      S 1 Reply Last reply Oct 12, 2020, 7:57 PM Reply Quote 0
      • S Offline
        ShuraimHassan @sdetweil
        last edited by Oct 12, 2020, 7:57 PM

        @sdetweil How can I use Bootstrap on 3rd Party Modules??

        S 1 Reply Last reply Oct 12, 2020, 7:57 PM Reply Quote 0
        • S Offline
          sdetweil @ShuraimHassan
          last edited by Oct 12, 2020, 7:57 PM

          @ShuraimHassan what is bootstrap?

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          S 1 Reply Last reply Oct 12, 2020, 7:59 PM Reply Quote 0
          • S Offline
            ShuraimHassan @sdetweil
            last edited by ShuraimHassan Oct 12, 2020, 7:59 PM Oct 12, 2020, 7:59 PM

            @sdetweil What do you mean? Are you not Front end or Full stack Developer??

            S 1 Reply Last reply Oct 12, 2020, 8:00 PM Reply Quote 0
            • S Offline
              sdetweil @ShuraimHassan
              last edited by Oct 12, 2020, 8:00 PM

              @ShuraimHassan no…

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              S S 2 Replies Last reply Oct 12, 2020, 8:01 PM Reply Quote 0
              • S Offline
                ShuraimHassan @sdetweil
                last edited by Oct 12, 2020, 8:01 PM

                @sdetweil Bootstrap is a potent front-end framework used to create modern websites and web apps. It’s open-source and free to use, yet features numerous HTML and CSS templates for UI interface elements such as buttons and forms. Bootstrap also supports JavaScript extensions.

                S 1 Reply Last reply Oct 12, 2020, 8:05 PM Reply Quote 0
                • S Offline
                  sdetweil @sdetweil
                  last edited by Oct 12, 2020, 8:03 PM

                  @ShuraimHassan but like anything else, u install it

                  https://getbootstrap.com/

                  and for those modules that expose their icon usage, you either change the config or use css to override.

                  each module gets to do its own thing, so u have to fiddle with each one separately…

                  most use font-awesome icons…

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • S Offline
                    sdetweil @ShuraimHassan
                    last edited by sdetweil Oct 12, 2020, 8:09 PM Oct 12, 2020, 8:05 PM

                    @ShuraimHassan each module provides a block of html in a div wrapper.
                    the MM runtime positions the block of content where u configured it. (see index.html for the layout)

                    you can also use javascript api calls to create the content that is returned to MM on the getDom() routine.

                    i would say probably >95% of the MM implementations are output only … (as its a ‘mirror’ hanging on the wall, probably 95% of the other 5% are voice based

                    as many are behind shaded glass, the cool color front ends don’t display well, and aren’t particularly helpful to this kind of environment… …

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    S 1 Reply Last reply Oct 13, 2020, 5:55 PM Reply Quote 0
                    • S Offline
                      ShuraimHassan @sdetweil
                      last edited by Oct 13, 2020, 5:55 PM

                      @sdetweil could you show me an Example that how Can I do this? Thanks in Advance

                      S 2 Replies Last reply Oct 13, 2020, 6:40 PM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      • 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