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

The most basic question about custom css

Scheduled Pinned Locked Moved Unsolved Troubleshooting
6 Posts 3 Posters 355 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 Sep 7, 2024, 9:17 AM

    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 Sep 7, 2024, 9:39 AM Reply Quote 0
    • T Offline
      tdw @JMac
      last edited by Sep 7, 2024, 9:39 AM

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

      J 1 Reply Last reply Sep 7, 2024, 9:44 AM Reply Quote 0
      • J Offline
        JMac @tdw
        last edited by Sep 7, 2024, 9:44 AM

        @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 Sep 7, 2024, 11:05 AM Reply Quote 0
        • S Offline
          sdetweil @JMac
          last edited by Sep 7, 2024, 11:05 AM

          @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 Sep 7, 2024, 11:11 AM

            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 Sep 7, 2024, 11:14 AM Reply Quote 0
            • S Offline
              sdetweil @JMac
              last edited by Sep 7, 2024, 11:14 AM

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