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.

    Custom CSS

    Scheduled Pinned Locked Moved Custom CSS
    11 Posts 3 Posters 5.0k 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.
    • S Offline
      SoleLo
      last edited by

      Can someone share a simple way to create a custom .css file? I’ve been back and forth try to customize different stuff and I keep getting stuck.

      S BKeyportB 2 Replies Last reply Reply Quote 0
      • S Away
        sdetweil @SoleLo
        last edited by sdetweil

        @SoleLo from the command prompt do

         touch ~/MagicMirror/css/custom.css
        

        or edit that file( it doesn’t exist), and save there

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • BKeyportB Offline
          BKeyport Module Developer @SoleLo
          last edited by

          @SoleLo while sam is technically correct, the best kind of correct, i’m assuming you want to modify the css from your modules, etc.

          here’s what you do.

          in the module directories, there is CSS files to set up their default looks. Open those to see how they use CSS. With most modules, they’ll have the module name, and the css style name together.

          DO NOT EDIT THOSE FILES. instead, copy the CSS blocks into custom.css (you don’t need to change anything), then make the changes there.

          If you can’t figure out how to do something in particular, you can use dev tools in any web browser (typically F12), to peek at the finalized code, and go from there. For an example, I’ll give you part of mine, showing both global and one module’s changes.

          /* Global changes */
          /* Use the entire screen */
          
          :root {
            --color-text: #fff;
            --color-text-dimmed: #fff;
            --color-text-bright: #fff;
            --color-background: #fff;
          
            --font-primary: "Roboto Condensed";
            --font-secondary: "Roboto";
          
            --font-size: 20px;
            --font-size-small: 0.75rem;
          
            --gap-body-top: 60px;
            --gap-body-right: 60px;
            --gap-body-bottom: 60px;
            --gap-body-left: 60px;
          
            --gap-modules: 30px;
          }
          
          html { 
          	cursor: none;
          }
          
          body {
          	margin: 0px;
          	height: 100vh;
          	width: 100vw;
           }
          
          /* Adjust all modules */ 
          
           .module {
                  padding: 2px;
                  margin-bottom: 0px;
           }
          
          /* Region mods */
          
          .region.left {
          	text-align:center;
          	} 
          
          .region.right {
          	right: 0%;
          	text-align: center;
          }
          
          .region.top.center {
            left: 63%;
            transform: translateX(-50%);
            text-align:center;
          }
          
          .region.fullscreen {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            pointer-events: none;
           }
           
          .region.fullscreen * {
          	background: rgba(0,0,0,0.7);
          }
          
          /* CX3-Agenda */
          
          .CX3A {
            font-size: 17px;
            min-width: 300px;
            max-width: 400px;
            max-height: 900px;
            overflow-y: hidden;
            text-align: left;
            position: relative;
            color: white;
          }
          

          The "E" in "Javascript" stands for "Easy"

          S S 3 Replies Last reply Reply Quote 0
          • S Away
            sdetweil @BKeyport
            last edited by

            @BKeyport many people coming to pi, and Linux just don’t know how to create files. they are some used to the UI, and clicking on something

            that’s why my script creates the empty custom.css as part of install

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            S 1 Reply Last reply Reply Quote 0
            • S Offline
              SoleLo @BKeyport
              last edited by

              @BKeyport This helps quite a bit, I started using the dev tools yesterday “npm start dev” and it really helped. Thanks!

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

                @sdetweil That script does help, I already had the file created, but I made note of the script for the future.

                1 Reply Last reply Reply Quote 0
                • S Offline
                  SoleLo @BKeyport
                  last edited by

                  @BKeyport one of the modules I’m trying to customize doesn’t seem to have “classes” to adjust, unless I’m missing something for example the Percent/ Range section if I wanted to change the margin-top to 150, how would I go about that?

                  Screenshot 2022-08-04 at 12.36.07.jpg

                  BKeyportB S 2 Replies Last reply Reply Quote 0
                  • BKeyportB Offline
                    BKeyport Module Developer @SoleLo
                    last edited by

                    @SoleLo I’d have to defer to the CSS masters around here. I’m hacky at best at it.

                    Maybe we can loop in @shin10 to help, who really helped me with a situation I needed help with.

                    The "E" in "Javascript" stands for "Easy"

                    1 Reply Last reply Reply Quote 0
                    • S Away
                      sdetweil @SoleLo
                      last edited by sdetweil

                      @SoleLo when there isn’t a class, you can still use the selector syntax to get to an element

                      .module_name div div

                      etc

                      here is a cheatsheet I use on determining a selector, the thing before the {

                      https://www.w3schools.com/cssref/css_selectors.asp

                      currently, there is no syntax for selecting an element that has some content… but :has() is coming…

                      a discussion on using css for individual tags
                      https://stackoverflow.com/questions/27823405/how-to-override-a-displaynone-property-applied-to-parent-element-in-specific-ch

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

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

                        @sdetweil so for the Percent/ Range it would be something like

                        .MMM-Teslamate div div
                        {
                        margin-top: 100px
                        }
                        
                        
                        
                        S 1 Reply Last reply 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