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 not executed on return from GoogleAssistant. MMM-GoogleAssistant

    Scheduled Pinned Locked Moved Troubleshooting
    google assistant
    23 Posts 4 Posters 4.3k 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.
    • G Offline
      gelaw
      last edited by gelaw

      I have MagicMirror2 installed on RPi4 with a PIR sensor.

      MMM-Assistant2Display and MMM-GoogleAssistant are installed and working well. Thanks @bugsounet!

      I added a ~/MagicMirror/css/custom.css file to locate one of my screen modules. That works well until I access Google Assistant.

      On testing, I found that the custom.css file is not executed after accessing the GoogleAssistant and the module position is reset to a default.

      Any help would be appreciated.

      1 Reply Last reply Reply Quote 0
      • ? Offline
        A Former User
        last edited by

        @gelaw: I think you can’t use custom.css for tunning GoogleAssistant. (never tested with it)
        Because GoogleAssist use Iframe ouside the dom for displaying content (and Assistant2Display extension too)

        but you can use css files inside GoogleAssistant directly

        G 1 Reply Last reply Reply Quote 0
        • G Offline
          gelaw @Guest
          last edited by

          @Bugsounet Thanks for the response. I am am using custom.css to place the default clock module on the screen. This custom.css file is not related to MMM-GoogleAssistant at all. My issue occurs when MMM-GoogleAssistant exits; then it returns to the MagicMirror screen but the clock is not placed correctly. When MMM-GoogleAssistant exits, it appears that ~/MagicMirror/css/main.css is executed, but my custom.css file is not executed.
          However, if I then press cntl-w, then the screen resets correctly. I am wondering what commands/code are executed when MMM-GoogleAssistant exits? And can I change that?

          1 Reply Last reply Reply Quote 0
          • ? Offline
            A Former User
            last edited by A Former User

            @gelaw

            then … no idea … GA only deactivates all the modules for take place for fullscreen and reactivates them once the conversation is over (hidden and show)

            maybe @sdetweil can say more?

            G 1 Reply Last reply Reply Quote 0
            • G Offline
              gelaw @Guest
              last edited by

              @Bugsounet Thanks again for your response. I did a quick test putting my modified .css code into main.css and the exact same behavior occurred. That is: displayed correctly when MM started, incorrectly when GA exits, and ^w corrects the display again. I am not sure where the issue occurs.
              As you say, maybe @sdetweil has better insight.

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

                @gelaw can u open the developers window after return from GA display and look at your clock module css changes (select the elements tab, and navigate the dom tree)

                click on the element you changed with custom.css and look at the bottom of the dev window, which should give the classes used top to bottom, left to right… is your modified class there? then look on the right side to see the class content definitions are your changes there,

                another thing to try if address:“0.0.0.0”, and ipWhitelist:[] in config.js, you can access MM from another machine, use chrome on your PC and repeat the test… see if it fails on chrome…we are downlevel on electron (hard to test with so many changes going into it all the time)

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                G 1 Reply Last reply Reply Quote 0
                • G Offline
                  gelaw @sdetweil
                  last edited by

                  @sdetweil Thanks! I will try this and report back

                  1 Reply Last reply Reply Quote 0
                  • G Offline
                    gelaw
                    last edited by

                    @sdetweil I did a test with Google Chrome on a second machine. As far as I can tell I get the same response - that is on a return from GoogleAssistant it does not use my custom.css settings. Cntl-W has the same effect.
                    I do not know how to work with the developers window. I opened the window, and the elements tab was open. I could not find the classes after that. I really do not know how to use the developers window. Can you point me to a write-up or tutorial on using the developers window?
                    Thanks

                    S ? 2 Replies Last reply Reply Quote 0
                    • S Away
                      sdetweil @gelaw
                      last edited by sdetweil

                      @gelaw I don’t know where to find any training.

                      the elements tab shows the web page in the browser. ~/MagicMirror/index.html shows the format of the web page.

                      mm puts content in ‘positions’ which are listed in the index.html

                      when u get to an element, then u will see the classes used

                      here I have navigated to the calendar and selected an element

                      Screenshot_2020-09-02_00-17-54.png

                      u can see the classes along the right edge, top to bottom, bottom is closer to main and custom.css
                      top is closest to the element selected.
                      You can see the class list left to right just above the console area, bottom of elements area (this machine doesn’t have an image editor on it so I can’t mark it up)

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      G 1 Reply Last reply Reply Quote 0
                      • ? Offline
                        A Former User @gelaw
                        last edited by A Former User

                        @gelaw sure i use it ;)

                        I will try something

                        custom.css works with GA and other modules.
                        So maybe, i think there is an error with your custom.css code

                        try to correct it in real time, and past the new css code found

                        custom.png

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 1 / 3
                        • 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