Topic on Skin talk:Medik

Summary by Slepi

Problem found in the site's MediaWiki:Common.css.

Hb1290 (talkcontribs)

Love this skin. We've been using it on our wiki for a few months now. But there's just one little issue. With this skin, the icons for Ombox, Imbox, Tmbox, etc. templates don't show up. Only Ambox templates still have their images. While playing with inspect element I found that the element is still there, but it's just being displayed at 0px wide. I eventually found that the issue seems to be an accidental use of "display:Inline" instead of "display:inline-block" somewhere, somehow meaning that image sizes are not being passed from the wikitext in these templates. I've checked all the style sheets and come to the conclusion that the issue is on the skin end and is likely connected to the element "mbox-image".

Slepi (talkcontribs)

Hi @Hb1290, thanks for your message. Unfortunately, I'm not familiar with the templates you are talking about, I don't touch them with this skin as we don't use them in our project. Maybe Bootstrap styles those elements, who knows. Could you please provide me a link with some reproducible example? I'll try to fix it. Thanks!

Hb1290 (talkcontribs)
Slepi (talkcontribs)

Hello @Hb1290, thanks! I'll try to find some solution.

Slepi (talkcontribs)

Hello @Hb1290, I've probably found the problem: it's not the skin itself, it's the site's code here: https://closinglogosgroup.miraheze.org/wiki/MediaWiki:Common.css

/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
th.mbox-text, td.mbox-text {     /* The message body cell(s) */
    border: none;
    padding: 0.25em 0.9em;       /* 0.9em left/right */
    width: 100%;    /* Make all mboxes the same width regardless of text length */
}

Just remove the line with width: 100%;. (As you make the text 100% wide, there's no place for the image left.)

If you want the whole box to be 100% of width, move it rather here:

table.ombox-speedy {
    border: 2px solid #b32424;    /* Red */
    background: #fee;             /* Pink */
}

Just add a new line after line 278 with width: 100%;.

Try that and let me know, please!

Hb1290 (talkcontribs)

Thank You! That did the trick!