MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    MMM-berfex Change font size

    Custom CSS
    2
    8
    297
    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.
    • R
      rantanplan last edited by rantanplan

      My MMM-berfex runs fine. But I would like a bigger font.
      All attempts to customize the custom.css failed.
      Also in the MMM-berfex.css or MMM-bergfex.js (config.js) no changes helped.
      Does anyone have an idea how I can change the font size of the data?

      Thanks in advance.

      Translated from German with G…

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

        @rantanplan I don’t know, but see here on how to use the browser dev window

        https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1649371486164

        Sam

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 0
        • R
          rantanplan last edited by

          Thanks @sdetweil,

          this has already helped me to recognize that the font size xsmall is used.
          Now I can adjust the custom.css .

          I would have liked to set the size to “small”, like most of my other modules. That still doesn’t work.

          Translated from the German with G…

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

            @rantanplan said in MMM-berfex Change font size:

            Now I can adjust the custom.css .
            I would have liked to set the size to “small”, like most of my other modules. That still doesn’t work.

            ok, I am confused… if you can use custom.css then u can make this change

            read this about the css selectors
            you can change the value top right, yes?

            then u know what to change in custom.css (and can do with copy/paste of the info top right)(

            Sam

            Create a working config
            How to add modules

            R 1 Reply Last reply Reply Quote 0
            • R
              rantanplan @sdetweil last edited by

              @sdetweil said in MMM-berfex Change font size:

              if you can use custom.css then u can make this change

              But I don´t know how! I can set the font size “xsmall” or “small” to 15.px or 20px. But I want to set the font size “small” where the “xsmall” is.

              Hope you undestand my bad english. 🙏

              Tried without G…translation 😋

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

                @rantanplan in the upper right, (blue in image below) after you have selected the element u want to change

                type fo
                and u should get a list of ‘styles’ that start with fo and scroll down and select font-size
                then it with put the cursor after the :
                and type small
                and press enter

                you MAY have to add !important to override

                if this does what you want
                then use the mouse to select all in the upper right window
                right click and copy

                open the custom.css in some text editor
                and do , right click , paste

                in the middle pane (red in image below) , there is a item tree
                the right most corresponds to the item u selected
                use that in the css selector
                in calendar (right most column) that is td.time.light

                so the custom.css entry would be

                .modulename selector { 
                    styles
                }
                

                or

                .calendar  td.time.light  {
                     font-size: small;
                }
                

                Screenshot at 2022-04-09 16-01-28.png

                Sam

                Create a working config
                How to add modules

                1 Reply Last reply Reply Quote 0
                • R
                  rantanplan last edited by

                  OK, I think I’ve got it now.
                  However, I have to connect a large monitor first, I use the official 7" monitor. Too small to work with it.🤦♂

                  Thank you for your help!

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

                    @rantanplan you can do the debug from your pc, and still have the 7 in be fine

                    in config.js
                    set
                    address:“0.0.0.0”,
                    ipWhiltelist:[],

                    then u can connect to MM from your desktop and debug…
                    hit f5 to reload the pc MM page with the updated css…

                    use the bitvise ssh client, you can edit the files on the pi from your pc… by double click like on the pc
                    (enable ssh on the pi too)

                    Sam

                    Create a working config
                    How to add modules

                    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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                    This forum is using NodeBB as its core | Contributors
                    Contact | Privacy Policy