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

Changing icons of the modules Current Weather and Weather Forecast

Scheduled Pinned Locked Moved Development
301 Posts 30 Posters 1.2m Views 33 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
    sdetweil @Manu85
    last edited by Jan 19, 2024, 2:57 PM

    @Manu85 awesome!! glad you got it.

    that dev window is amazing for what you can discover and try

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    M 1 Reply Last reply Jan 19, 2024, 4:57 PM Reply Quote 0
    • M Offline
      manu85340 @sdetweil
      last edited by Jan 19, 2024, 4:57 PM

      @sdetweil
      I will actually look precisely at the possibilities of this window, a thousand thanks Sam

      S 1 Reply Last reply Jan 19, 2024, 6:05 PM Reply Quote 0
      • S Offline
        sdetweil @manu85340
        last edited by sdetweil Jan 19, 2024, 6:09 PM Jan 19, 2024, 6:05 PM

        @manu85340 the top right window allows you to set styles on the selected element

        any style supported by the browser… color, font, icon, padding, border, you name it…

        so, you can test out the effect you want and then copy/paste those to the entry for custom.css

        one other learning thing…

        in css

        the stuff before the {
        is called the selector clause… it ‘selects’ the elements that that the stuff INSIDE the {} will apply to…

        the selector clause will ALWAYS select ALL elements that match , ALWAYS ALL

        but you can make it very selective…, it can be quite complex…

        here I want to hide (display :none) an element generated by a library I used
        that didn’t apply to the output it generated

        .possibly-hidden-tab div:nth-child(2)  > div > div >div >ul >li:only-child >a[rel*="Item%201"] {
          display: none;
        }
        

        I use this page to help me with the selector clause possibilities and syntax
        https://www.w3schools.com/cssref/css_selectors.php

        sometimes it helps to look at the selector clause from right to left , what element is it, and how does it fit in the content its in.

        this selector clause is trying to find an <a (action/link) element with a title of “Item 1”

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        M 1 Reply Last reply Jan 19, 2024, 10:55 PM Reply Quote 0
        • M Offline
          Manu85 @sdetweil
          last edited by Jan 19, 2024, 10:55 PM

          @sdetweil It’s really nice of you to share all these elements, I’m going to look at it while taking my time, I feel like the possibilities are endless

          S 1 Reply Last reply Jan 19, 2024, 11:02 PM Reply Quote 0
          • S Offline
            sdetweil @Manu85
            last edited by sdetweil Jan 19, 2024, 11:03 PM Jan 19, 2024, 11:02 PM

            @Manu85 no rush… just wanted to give you some base info to use as you explore.

            also from the MM doc on css
            https://docs.magicmirror.builders/modules/customcss.html#target-a-specific-module

            target and select mean the same

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            M 1 Reply Last reply Jan 19, 2024, 11:03 PM Reply Quote 0
            • M Offline
              Manu85 @sdetweil
              last edited by Jan 19, 2024, 11:03 PM

              @sdetweil :folded_hands:

              S 1 Reply Last reply Jan 19, 2024, 11:08 PM Reply Quote 0
              • S Offline
                sdetweil @Manu85
                last edited by Jan 19, 2024, 11:08 PM

                @Manu85 oh, and html stuff is a lot to know… (I think I know maybe 5%)
                https://www.w3schools.com/html/

                that top box in the developers window elements tab will start dropdowns of selection choices when u start typing

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                M 1 Reply Last reply Jan 20, 2024, 1:31 PM Reply Quote 0
                • M Offline
                  Manu85 @sdetweil
                  last edited by Jan 20, 2024, 1:31 PM

                  @sdetweil
                  you made me want to do a lot of things, but I think I’m going to be limited very quickly… I have the “MMM-ISS-Live” module, from [Mykle1](https://github.com/ Mykle1), updated by KristjanESPERANTO https://github.com/KristjanESPERANTO/MMM-ISS-Live which is really great (force to them) and I would like to know if it was possible to add a module with the position of the 'ISS on the planisphere to have the position of the ISS live as on the ESA website: https://www.esa.int/Science_Exploration/Human_and_Robotic_Exploration/International_Space_Station/Where_is_the_International_Space_Station

                  I don’t know if I’m posting on the right subject but it’s a development that could interest a lot of people

                  code_text
                  

                  770548b5-b977-447d-be65-47bf86337be2-image.png

                  S 1 Reply Last reply Jan 20, 2024, 1:47 PM Reply Quote 0
                  • S Offline
                    sdetweil @Manu85
                    last edited by Jan 20, 2024, 1:47 PM

                    @Manu85 is it possible… sure…

                    and as that image is already an iframe you can do the same thing with existing modules
                    the web content of that page contains(using the dev window to look at the html source of that page)

                    <p>&nbsp;</p><iframe src="https://isstracker.spaceflight.esa.int/" width="625" height="350" frameborder="0" scrolling="no" allowfullscreen></iframe>
                    

                    SO, you can use one of the iframe modules… to use that same link from the src=

                    see the 3rd party module list
                    https://github.com/MagicMirrorOrg/MagicMirror/wiki/3rd-Party-Modules

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    M 2 Replies Last reply Jan 20, 2024, 1:53 PM Reply Quote 0
                    • M Offline
                      Manu85 @sdetweil
                      last edited by Jan 20, 2024, 1:53 PM

                      @sdetweil you are a genius, how did you manage to recover the ifram
                      “https://isstracker.spaceflight.esa.int/”?

                      S 1 Reply Last reply Jan 20, 2024, 1:57 PM Reply Quote 0
                      • 1
                      • 2
                      • 10
                      • 11
                      • 12
                      • 13
                      • 14
                      • 30
                      • 31
                      • 12 / 31
                      12 / 31
                      • First post
                        118/301
                        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