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.

    Image in Module Header?

    Scheduled Pinned Locked Moved Troubleshooting
    5 Posts 3 Posters 2.6k 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.
    • joela85J Offline
      joela85
      last edited by

      Can you put an image in a module header?

      I’ve been currently trying to use an iFrame above the module I want the image as a header and trying to reduce the gaps, but not that successful with that.

      Mykle1M J 2 Replies Last reply Reply Quote 0
      • Mykle1M Offline
        Mykle1 Project Sponsor Module Developer @joela85
        last edited by

        @joela85

        Can you put an image in a module header?

        I don’t know if it can be done using css but a module certainly can be coded to have an image in the header.

        I had meant to do this sooner but I was working on something else. I stripped down my MMM-EyeCandy module (it’s still available) and made this for you or anyone that might want to use it.

        Basically, you disable the standard header on a module and use this instead. Just install it and make your entry in the config above the module you want to use it with. The css file provided allows you to size and position the ImageHeader any way and anywhere you like.

        https://github.com/mykle1/MMM-ImageHeader

        Create a working config
        How to add modules

        Mykle1M 1 Reply Last reply Reply Quote 1
        • joela85J Offline
          joela85
          last edited by

          Ah cool, thanks. I’ll have a look at that when I get home. Looks good.

          1 Reply Last reply Reply Quote 0
          • J Offline
            j.e.f.f Project Sponsor Module Developer @joela85
            last edited by j.e.f.f

            @joela85 It is possible. You can use the :before or :after CSS pseudo-elements

            Here’s an example:

            .MMM-SomeModule header:before {
              content: url('path/to/your/image.png');
            }
            

            By default, :before will put the image at the start of the header text, :after will put it at the end. But like anything, you can position things however you desire.

            For example, this rule will size the image to 16px X 16px, and position it at the top and 30px from the right edge of the header element.

            .MMM-SomeModule header {
              position: relative;  /* any absolutely positioned children will be relative to this element */
            }
            
            .MMM-SomeModule header:before {
              content: url('path/to/your/image.png');
              display: block;
              width: 16px;
              height: 16px;
            
              /*
                These rules allow you to position the image anywhere you want in the header
              */
              position: absolute;
              right: 30px;
              top: 0px;
            }
            1 Reply Last reply Reply Quote 2
            • Mykle1M Offline
              Mykle1 Project Sponsor Module Developer @Mykle1
              last edited by

              @Mykle1 said in Image in Module Header?:

              I don’t know if it can be done using css

              Well now I know. Thanks @j-e-f-f

              That information would have been really useful 2 days ago! hahaha

              Create a working config
              How to add modules

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