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.

    My custom mirror

    Scheduled Pinned Locked Moved Show your Mirror
    16 Posts 5 Posters 6.1k Views 8 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
      greedyvegan @MMRIZE
      last edited by

      @MMRIZE
      how do I get the news article image to have a permanent position, whether it appears/loads or not?? just like in your image.

      is that float or margin?

      |(image) (text text text text) |

      M 1 Reply Last reply Reply Quote 0
      • M Offline
        MMRIZE @greedyvegan
        last edited by MMRIZE

        @greedyvegan
        newsfeed item could have a container with selector withImage or not.

                <div class="container {% if config.showImage and image %} withImage {% endif %}">
                    {% if config.showImage and image %}
                        <div class="newsfeed-image" style="background-image: url({{image}})"></div>
                    {% endif %}
        

        So you can specify your style for each case, withImage or not.

        .MMM-anotherNewsFeed .module-content .container {
          text-align: right;
          ...
        }
        

        fc0671ae-8451-47b4-b647-4c515179fdb6-image.png

        .MMM-anotherNewsFeed .module-content .container.withImage {
          text-align: left;
          ...
        }
        

        7a295813-9cae-4c78-b023-736ab62634df-image.png

        Image and contents are arranged by container’s display:flex so you can reorder or justify with flex-related attributes.

        G 1 Reply Last reply Reply Quote 1
        • BerkSmash1984B Offline
          BerkSmash1984 @greedyvegan
          last edited by

          @greedyvegan Thanks!

          1 Reply Last reply Reply Quote 0
          • G Offline
            greedyvegan @MMRIZE
            last edited by

            @MMRIZE
            thank you very much, what’s the hierarchy levels as far as region, container, module in css?

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

              @greedyvegan use the developers window elements view to see it

              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
                greedyvegan @sdetweil
                last edited by

                @sdetweil I understood you here but I’m asking about priority overall, the developer window doesn’t display that.

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

                  @greedyvegan absolutely does.

                  unless overridden, they are element ordered, outer to inner. some styles can be inherited from parent, never from grandparent

                  the text above the console box shows the stack for the selected element.

                  the right window shows the exact inheritance and override, and sources for styles

                  the most specific style setting wins unless overridden ( !important)

                  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
                    greedyvegan @sdetweil
                    last edited by

                    @sdetweil ok, thanks. I need to look up web developers for dummies now.

                    1 Reply Last reply Reply Quote 0
                    • bugsounetB bugsounet referenced this topic on
                    • R Offline
                      ric
                      last edited by

                      I like the colours of the agenda and weather module. Can you tell me how you changed the colours? Thank you

                      G 1 Reply Last reply Reply Quote 0
                      • G Offline
                        greedyvegan @ric
                        last edited by

                        @ric

                        sorry for the delay , I’ve updated the post with the custom css

                        R 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