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.

    The most basic question about custom css

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    6 Posts 3 Posters 308 Views 3 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.
    • J Offline
      JMac
      last edited by

      apologies for this one, I’m about to embark on my first steps into custom css for a module.

      it’s a simple addition, but where do I put the modification, does it go in the css folder within the individual module, or the custom.css file within the main css folder in the MagicMirror directory?

      I want to add this,
      #GPHOTO_CURRENT {
      background-size: cover;
      }
      as a change to MMM-GooglePhotos.

      I have a very strong feeling its the latter but don’t want to mess this up, this feels like the movie Inception, I’ve only been in the first level of the dream and this is the dream within the dream.

      cheers.

      T 1 Reply Last reply Reply Quote 0
      • T Offline
        tdw @JMac
        last edited by

        @JMac in the /css directory. Save the file as custom.css

        J 1 Reply Last reply Reply Quote 0
        • J Offline
          JMac @tdw
          last edited by

          @tdw
          I’m currently looking at 3 files within the MagicMirror/css folder.
          custom.css
          custom.css-sample
          main.css

          so does it go in the custom.css file or do I have to make a new custom.css file containing the information for this one module and save it?

          do all future css changes go within the custom.css file, or does each css change have it’s own file?

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

            @JMac there is only one custom.css

            the design in MagicMirror for css is a stack

            main.css is loaded first
            then any css files provided by modules
            and last custom.css

            that means any definitions in custom.css will override anything defined before

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • J Offline
              JMac
              last edited by

              so I added,
              #GPHOTO_CURRENT {
              background-size: cover;
              }
              to the custom.css in the MagicMirror/css folder,

              from your list this appears to be the correct place to put it, yet it appears to make no difference.

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

                @JMac see the link in my signature about learning css

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                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