Image in Module Header?

[joela85]

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.

[Mykle1]

@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

[joela85]

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

[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;
}

[Mykle1]

@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