Puella Magi Wiki talk:Wiki Styling Cleanup 2026

From Puella Magi Wiki
Jump to navigation Jump to search
Note: Please always sign your name when editing talk page by putting four tildes (~~~~) at the end of your comment.
This project is pending discussion; please see talk page.

This is an attempt to update the styling of Puella Magi Wiki in 2026, to make it looks nicer and more modern.

Default theme

Continue from Talk:Main Page#Guys, we need Vector 2022 for unregistered_users. -- 0x99 (talk) 10:00, 6 September 2026 (UTC)

Ok, the logo is replaced. What about the unregistered users have Vector 2010 skin? They need Vector 2022 skin. Vector 2022 is better than Vector 2010. And some users who are registered want the skin Minerva, it's not here. Belankt294842 (talk) 19:04, 6 September 2026 (UTC)

Continue from Talk:Main Page#New logo (2026) -- 0x99 (talk) 10:01, 6 September 2026 (UTC)

Okay I'm back from my sleep and the logo looks amazing. I remember first seeing the old logo and thinking it was just automatically made by the website, glad nobody will think that anymore lol. - TheresaFrog421 (talk) 10:14, 6 September 2026 (UTC)

(Responding to ImperviousCover specifically) I think the color can't really get better now, but if it's a problem in dark mode, then a new/inverted logo would fix it anyway. As for a gradient, I think it would be kinda cool, but it would kinda clutter the design up, and Vector 2022 and Citizen make the logo TINY, so it kinda feels unnecessary. - TheresaFrog421 (talk) 11:53, 6 September 2026 (UTC)

What do you mean with an "inverted logo"? A new logo would be cool too, but it will mean more work. As for the gradient, it's still appreciable in some skins, so it's just a matter of if someone wants to add it. ImperviousCover (talk) 19:08, 6 September 2026 (UTC)
By inverted I mean the "2RB" logo seen here (this one was uploaded while discussing so its not the final ver). - TheresaFrog421 (talk) 19:21, 6 September 2026 (UTC)
Here is the "new one" split into just the seal and just the wordmark for use in other themes. This splits the spot where the eternal feminine normally goes into just text by the side.
* File:PMWiki_LOC_Seal_Dark_v1.svg
* File:PMWiki_LOC_Seal_Light_v1.svg
* File:PMWIki_Logo_Wordmark_Only_Dark_v1.svg
* File:PMWiki_Logo_Wordmark_Only_Light_v1.svg
This should hopefully be sufficient to cover all of our themes for the time being. HomuraDidNothingWrong (talk) 21:50, 6 September 2026 (UTC)
Thanks for this. I've updated the site logo to use:
Citizen menu and Vector 2022 header look amazing with this new wordmark.
I haven't put up dark mode logo just yet, because MediaWiki doesn't seems to provide a way to swap the logo for dark mode. I think I may have to fuse dark+light as one file later and use prefers-color-scheme inside the SVG to select the correct colors. Will do this later.
One thing though, I noticed that the top dot is missing from File:PMWiki LOC Seal Light v1.svg, is it possible to fix this? -- 0x99 (talk) 05:47, 7 September 2026 (UTC)
The new small icon for citizen and Vector 2022 still has that old magenta color instead of the one the main one has, so with the dot fix that too pls (Also the bottom dot could be added, we didnt add it to the logo with text because it didnt look that good but without the text it should be okay). - TheresaFrog421 (talk) 07:01, 7 September 2026 (UTC)
Went and updated the original files. I was missing a singular dot in both files (one on top, one on the right side), and then the "seal" closest to the original was the wrong color. Fixed that too. HomuraDidNothingWrong (talk) 22:07, 8 September 2026 (UTC)
Wait I thought we agreed on the reddish pink color instead of the magenta? Why did you change it? - TheresaFrog421 (talk) 22:22, 8 September 2026 (UTC)
Did I get it backwards? Crap, I'll fix it. Sorry. HomuraDidNothingWrong (talk) 23:22, 8 September 2026 (UTC)
Sorry that this took so long, this is now done. I've also made a bit of modification (prefers-color-scheme shenanigans) so color swapping between dark/light mode now works although switching can be a bit wonky because MediaWiki. You may need a hard reload to this to be shown. Favicon now also exist and also (browser's) dark mode aware (browsers can get weird and not refreshing this sometimes though). Let me know if you find any issues. -- 0x99 (talk) 05:19, 4 October 2026 (UTC)
Maybe lets ditch the dark mode adjustments? Honestly the dark mode icon is very ugly, it doesn't look like what it's supposed to and the white is too much. I know that the black of the normal icon disappears with the dark background but it still looks better. Also yeah maybe I just dont know how to "hard reload", but my phone has the dark mode icon yet my laptop still uses the light mode one, and there's no favicon on my laptop (That could just be me, but I wouldnt be suprised if getting rid of the dark mode logo would fix it). - TheresaFrog421 (talk) 23:42, 4 October 2026 (UTC)
Perhaps lighter-than-black shade of gray instead of white? Let me look at what I can do. For mobile, I don't think it's possible to do hard reload on mobile, sadly :( Let me see what I can do later today. -- 0x99 (talk) 03:21, 5 October 2026 (UTC)
I cant tell if its my laptop but I cannot do the hard reload lol, I don't even have the favicon, but I do on the phone??? Also the favicon should probably not change depending on light/dark mode (cause on my phone its the dark mode version and I think it looks bad too). Eh I really think it wont be an issue to use the light mode version on dark mode, I mean I have it now and it looks nice. So Im for deleting the dark mode adjustments for now, Im guessing theyre whats causing my laptop to not even render them properly so I have an extra reason lol. Honestly I think we should only do a dark mode icon if we do a unique one, like that idea of it being Devil Homura's symbol, and maybe even the new one that appears when she started using the buildings as ammo, it appears in Exedra but Sweet Beanie didn't upload it as a texture sadly. And again I think the favicon has no real reason to change depending on theme. - TheresaFrog421 (talk) 06:08, 5 October 2026 (UTC)
Sorry this took so long but I've removed the auto dark mode thing from the logo/icon. If we want alternative logo we can revisit this later, I think (though due to MW restriction it's a bit hard to have alternate SVG file for logo, although there's probably a way to do this within the SVG itself). -- 0x99 (talk) 02:55, 15 October 2026 (UTC)
Was something changed recently to cause it to use the correct text but incorrect logo on Vector 2022 (Light)? It's using the wrong version on light mode but the correct one on dark mode. Maybe I missed the discussion somewhere. HomuraDidNothingWrong (talk) 00:37, 7 October 2026 (UTC)
Oops, did I make a mess somewhere? Let me check this later. -- 0x99 (talk) 03:52, 7 October 2026 (UTC)
I've re-checked this and it looks consistent to me with the file to me. Is it still happening after a hard-reload? (Ctrl-Shift-R) -- 0x99 (talk) 02:55, 15 October 2026 (UTC)

Background

Continuing from Talk:Main Page#Background -- 0x99 (talk) 10:01, 6 September 2026 (UTC)

Maybe instead of the rainbow dots we use the sigils?

I feel like the dots would be too much, but not like this is little either. - TheresaFrog421 (talk) 10:19, 6 September 2026 (UTC)

Also for the proposed footer and header, there's also a straight version:

- TheresaFrog421 (talk) 16:07, 8 September 2026 (UTC)

I tried this with (locally injected CSS):
.skin-vector-2022 .mw-page-container,
.skin-citizen .mw-footer {
    background-image: url('https://images.puella-magi.net/d/de/Lace_repeat.png');
    background-repeat: repeat-x;
    background-position: bottom;
}
Not sure if this matches what you have in mind, but I think the lace may be too small to fit our footer (and repeated patterns don't look very good if we drop repeat-x). -- 0x99 (talk) 04:50, 9 September 2026 (UTC)
Tried this on my css page, and applied it to my sandbox page, but nothing changed? It might be because my css page is sanitized though. - TheresaFrog421 (talk) 19:19, 10 September 2026 (UTC)
You can't do this using templatestyles because it'll scope to .mw-parser-output (i.e., only the same parent as <templatestyles>). So the only way to test this is to use some sort of user CSS extension (e.g., Stylus). I might enable mw:Manual:$wgAllowUserCss and mw:Manual:$wgAllowUserJs to make this easier, but I need to first assess what sort of risks this would expose (that MW disabled it by default). Let me work on it after this WR spoiler chaos. -- 0x99 (talk) 19:34, 10 September 2026 (UTC)
If there's any risks then I think its better to not do it. If you can test it without applying it to the whole wiki, you could do it on one page or if thats not possible, take a screenshot and upload it. If neither are possible then idk ;-; - TheresaFrog421 (talk) 19:40, 10 September 2026 (UTC)

I was going through the files on my laptop and a long time ago I downloaded two backgrounds from the original MadoMagi website, believing that they could be good for the wiki to replicate. So now that this is in the talks, I think these should be considered too - TheresaFrog421 (talk) 16:34, 15 September 2026 (UTC)

  • I vectorized the prev one - EPF (talk) 19:29, 7 October 2026 (UTC)
    I vectorized the prev one - EPF (talk) 19:29, 7 October 2026 (UTC)
  • New ver without the blackjack or hookers - EPF (talk) 09:39, 15 October 2026 (UTC)
    New ver without the blackjack or hookers - EPF (talk) 09:39, 15 October 2026 (UTC)
I quite like the first one (especially with the Madoka's Law of Cycles arrow pattern thing in the background), but given this is JPEG, it might not be ideal for a background as we have to consider dark mode. But it gave me another idea, using something like this Law of Cycles pattern might also be a good idea. -- 0x99 (talk) 16:39, 15 September 2026 (UTC)
Something like this? (I dont really know when the background would be cut off so dont judge that) - TheresaFrog421 (talk) 18:57, 15 September 2026 (UTC)
Yes! Something among this line, but perhaps limit to only header/footer (e.g. one horizontal repeat each). Have to experiment with this, though. -- 0x99 (talk) 19:00, 15 September 2026 (UTC)
I made a vectorized version of the 2nd pic. Because it's vectorized, changing colors for dark mode should be much easier, plus if, idk, 12K monitors become standard in a decade, upscaling the png/jpg will be easy too. Python thingie I made to generate the screentone dots below EPF (talk) 19:29, 7 October 2026 (UTC)
def dotsize(m, max_m, max_dot, min_dot, reverse=False, mirrored=False):
    if max_dot == min_dot:
        return max_dot

    if not mirrored:
        if reverse:
            return min_dot + m * (max_dot - min_dot) / max_m
        else:
            return max_dot - m * (max_dot - min_dot) / max_m

    if m <= max_m / 2:
        if reverse:
            return min_dot + 2 * m * (max_dot - min_dot) / max_m
        else:
            return max_dot - 2 * m * (max_dot - min_dot) / max_m
    else:
        if reverse:
            return min_dot + 2 * (max_m - m) * (max_dot - min_dot) / max_m
        else:
            return max_dot - 2 * (max_m - m) * (max_dot - min_dot) / max_m

def a(w, h, color, dot_spacing, max_dot_size, min_dot_size, straight=False, vertical=False, reverse=False, mirrored=False, invert_offset=False):
    if dot_spacing == 0:
        return None
    if straight==True:
        offset={True:0,False:0}
    elif invert_offset == False:
        offset={True:0,False:dot_spacing/2}
    else:
        offset={False:0,True:dot_spacing/2}
    #t = f"<svg width=\"{w}\" height=\"{h}\" xmlns=\"http://www.w3.org/2000/svg\">\n"
    t = ""
    y,x = 0,0
    offset_i = True
    while y <= h:
        while x <= w:
            if not vertical:
                dot_size = dotsize(x, w, max_dot_size, min_dot_size, reverse,mirrored)
            else:
                dot_size = dotsize(y,h, max_dot_size,min_dot_size,reverse,mirrored)
            if dot_size > 0:
                t+=f'\t<circle cx="{x}" cy="{y}" r="{dot_size}" fill="{color}" />\n'
            x+=dot_spacing
        offset_i = not offset_i
        x=offset[offset_i]
        y+=dot_spacing/2

    #t+="</svg>"
    return t


def a_opt(w, h, color, dot_spacing, max_dot_size, min_dot_size, straight=False, vertical=False, reverse=False, mirrored=False,invert_offset=False):
    if dot_spacing == 0:
        return None
    t = ""
    g_id = f'{"s" if straight else "d"}{"v" if vertical else "h"}{'r' if reverse else 'n'}{'m' if mirrored else 'n'}{'i' if invert_offset else 'n'}_{dot_spacing}_{max_dot_size}_{min_dot_size}'
    y,x = 0,0

    if straight:
        if vertical:
            while y <= h:
                dot_size = dotsize(y, h, max_dot_size, min_dot_size, reverse, mirrored)
                if dot_size > 0:
                    t+=f'\t<circle cx="{x}" cy="{y}" r="{dot_size}" />\n'
                y += dot_spacing
            t = f'<defs><g fill="{color}" id="{g_id}">\n{t}</g></defs>\n'
            while x <= w:
                t+=f'\t<use href="#{g_id}" x="{x}" y="0"/>\n'
                x+=dot_spacing
        else:
            while x <= w:
                dot_size = dotsize(x,w,max_dot_size,min_dot_size,reverse,mirrored)
                if dot_size > 0:
                    t += f'\t<circle cx="{x}" cy="{y}" r="{dot_size}" />\n'
                x += dot_spacing
            t = f'<defs><g fill="{color}" id="{g_id}">\n{t}</g></defs>\n'
            while y <= h:
                t += f'\t<use href="#{g_id}" x="0" y="{y}"/>\n'
                y+=dot_spacing

    else:
        offset = {True: 0, False: dot_spacing/2}
        o = not invert_offset
        y, x = -offset[o], -offset[o]
        if vertical:
            while y <= h:
                dot_size = dotsize(y,h,max_dot_size,min_dot_size,reverse,mirrored)
                if dot_size > 0:
                    t+=f'\t<circle cx="{x}" cy="{y}" r="{dot_size}" />\n'
                y += dot_spacing
            o = not o
            y,x = -offset[o], -offset[o]
            while y <= h:
                dot_size = dotsize(y, h, max_dot_size, min_dot_size, reverse, mirrored)
                if dot_size > 0:
                    t+=f'\t<circle cx="{x}" cy="{y}" r="{dot_size}" />\n'
                y += dot_spacing
            t = f'<defs><g fill="{color}" id="{g_id}">\n{t}</g></defs>\n'
            while x <= w+offset[False]:
                t+=f'\t<use href="#{g_id}" x="{x}" y="0"/>\n'
                x+=dot_spacing

        else:
            while x <= w:
                dot_size = dotsize(x,w,max_dot_size,min_dot_size,reverse,mirrored)
                if dot_size > 0:
                    t+=f'\t<circle cx="{x}" cy="{y}" r="{dot_size}" />\n'
                x += dot_spacing
            o = not o
            y,x = -offset[o], -offset[o]
            while x <= w:
                dot_size = dotsize(x,w,max_dot_size,min_dot_size,reverse,mirrored)
                if dot_size > 0:
                    t+=f'\t<circle cx="{x}" cy="{y}" r="{dot_size}" />\n'
                x += dot_spacing
            t = f'<defs><g fill="{color}" id="{g_id}">\n{t}</g></defs>\n'
            while y <= h + offset[False]:
                t += f'\t<use href="#{g_id}" x="0" y="{y}"/>\n'
                y += dot_spacing


    return t




if __name__ == "__main__":
    w = 1800
    h = 1000
    c = '#fff2f2'
    svg_o = f"<svg width=\"{w}\" height=\"{h}\" xmlns=\"http://www.w3.org/2000/svg\">\n"
    svg_c = "</svg>"
    """dots_small = a(w,h,c,20,10,2,False, True, False, False,True)
    dots_big = a(w,h,c,60,20,5,False,False,False, True,False)

    with open("dots_small.svg",mode="w") as f:
        f.write(svg_o+dots_small+svg_c)
    with open("dots_big.svg",mode="w") as f:
        f.write(svg_o + dots_big + svg_c)"""
    
    dots_small = a_opt(w,h,c,20,10,2,False, True, False, True,True)
    dots_big = a_opt(w,h,c,60,20,5,False,False,False, True,False)
    
    with open("dots3.svg",mode="w") as f:
        f.write(svg_o+dots_small+dots_big+svg_c)
I've turned on User CSS and User JS; you can edit common.css in your subpages to test adding backgrounds. I think it's better to test this locally before enabling it wiki-wide because it can break skins/dark mode/etc... -- 0x99 (talk) 17:34, 8 October 2026 (UTC)
If someone want to test this, add this to your /common.css under your user page.
/* Light theme
 * ======================================================================== */
html.skin-theme-clientpref-day body {
	background: url('https://images.puella-magi.net/e/ee/Madoka_Website_bg_2_vectorized.svg?v=s8ngkwrrn2yh2cd1umawgse5l3xnq2t') no-repeat;
}

/* Vector */
html.skin-theme-clientpref-day body.skin-vector .mw-page-container,
html.skin-theme-clientpref-day body.skin-vector .vector-pinned-container {
	background: none;
}

/* Fixes */
html.skin-theme-clientpref-day .wikiEditor-ui {
	background: #fff;
}
This only enables background when display mode is set to "Light" (not light via "Auto") -- 0x99 (talk) 18:33, 8 October 2026 (UTC)
Is it only visible to that user? If yes could somebody take and send screenshots here of different pages cause idk if I want to create a page just for that... - TheresaFrog421 (talk) 18:37, 8 October 2026 (UTC)
Yes, only visible to that user. Here is a screenshot:
I think it's still worth playing around with user style since it affect the readability quite a bit. I think it might worth making this a bit more subtle? -- 0x99 (talk) 18:42, 8 October 2026 (UTC)
Since it's a SVG, the colors can be played with directly, too. But I agree, as we stand, it affects the readability too much. EPF (talk) 18:45, 8 October 2026 (UTC)
Yeah as much as I love it and thinks it looks amazing, I can tell it would fight with some pages. I can think of two ways of fixing it (maybe?) First is turning down the background's opacity a tiny bit, and the second is making sure most elements on the wiki have some extra background, so for example all the boxes in that screenshot would have a slight white background. - TheresaFrog421 (talk) 18:47, 8 October 2026 (UTC)
Dimming the background would be better here I think, because some skin (ahem, Citizen) doesn't really set container background (in case of Citizen, only the sidebar is set). -- 0x99 (talk) 18:50, 8 October 2026 (UTC)
Here's what it looks like for me on Monobook after slightly modifying the CSS:
It works, but you can't really see much of it due to the page being a separate container. I think it might work better for Monobook if the page container had a translucent background. Maybe the same approach can work for other skins? (That is, changing the main page container from a fully-transparent background to a translucent background.) ~ Celtic Minstrel (talk) 00:50, 9 October 2026 (UTC)
My another take at this, I quite like how this looks.
I don't think it's too bad, but require some tuning here and there. Lack of padding surrounding main content makes it look a bit weird. Citizen should probably be using Citizen bg color, etc. but I think it's a good direction. Will need to live drive this for a while though. -- 0x99 (talk) 03:42, 9 October 2026 (UTC)
My general impression is that it looks good but possibly doesn't need to be quite so faded. That is, it could be a bit less faded and still be fine. But it's also fine as it is, so… (That aside, your new CSS still excludes Monobook – it's the html.whatever selector that fails in Monobook.) ~ Celtic Minstrel (talk) 04:27, 9 October 2026 (UTC)
After Citizen and Vector, I suspected we might have customize CSS for each skin (thankfully I don't have to do one for Timeless). Haven't got a chance to look at Monobook and Minerva yet, will experiment with them later.
Also got few more ideas, we could probably split the larger dots & stars as one background, and smaller dots (white dot on purple/pink bg) as another, so we can make smaller dots repeating the entire page length while lock the larger one to the top, non-repeating. -- 0x99 (talk) 04:40, 9 October 2026 (UTC)
Yeah, the opacity could be adjusted... By big dots, you mean the colorful circles, and by small dots, you mean the screentones, right? I could do that, though I'd have to re-generate the screentone dots, they comprise of two gradients right now - one bilinear, biggest on the sides and smallest in the center, and one linear, biggest on top and smallest on bottom. So we want the new "true bg" to be 1800x2000? EPF (talk) 06:27, 9 October 2026 (UTC)
↩
↪ Yes, I'm thinking about having two background layers:
  • (1) Colorful circles + stars + white fade overlay (only on the top side)
  • (2) Screentone dots for repeating on both axis (no fade)
So we can repeat the screentones for the entire page (2), and overlay it with non-repeating (1). I think current resolution is OK. -- 0x99 (talk) 09:25, 9 October 2026 (UTC)
After daily driving this for few days, I think this level of transparency is looking really good (white overlay = 0.6 instead of white overlay = 0.8 in previous screenshot). Fancy enough and not too distracting:
-- 0x99 (talk) 05:08, 11 October 2026 (UTC)
I agree it looks really good ^^. - TheresaFrog421 (talk) 06:44, 11 October 2026 (UTC)
I made a new ver of the BG, now without the extra decorations or white sidegradients. It's also much smaller cuz I optimized my circle-gradient-generating script EPF (talk) 09:39, 15 October 2026 (UTC)
I think it looks quite nice (and a lot better than my bastardized attempt at it). From running with my bastardized attempt for a day or two, I think we might want to drop the fade to white on the top/bottom, and move the white fading to the stars/decoration layer, so the tiled texture is a bit less jarring in the page (you can try my latest User:0x99/common.css to see what I'm talking about). Overall, I really like how delightful it looks, only few more adjustments away. Thank you again for this. -- 0x99 (talk) 17:40, 16 October 2026 (UTC)

Skin Options

Vector 2022 is better than Vector 2010. Why the skin Minerva Neue is not added yet? Belankt294842 (talk) 19:29, 6 September 2026 (UTC)

RE: Vector 2022, it's a strict downgrade for many of the styling items all over the website that still need to be cleaned up and adapted for dark mode, short of disabling it entirely. You asked for Minerva about 12h ago and 0x99 is in a different timezone than many of the users here. Please be patient and not rude. HomuraDidNothingWrong (talk) 21:39, 6 September 2026 (UTC)
Vector 2022 will require a bit more layout/theme fixing before we can proceed with it, but it's likely that we'll either switch to Vector 2022 or Citizen as the default sometime in the future. I've now enabled Minerva Neue (and disabled Timeless, hopefully nobody is affected). -- 0x99 (talk) 04:46, 7 September 2026 (UTC)
Please don't put a sentence in your section name. Section names should be short and clear. ~ Celtic Minstrel (talk) 02:45, 7 September 2026 (UTC)
(About File:Screenshot 2026-09-07 10.00.13 PM.svg) 0x99 very clearly said they're disabling Timeless, are you just trolling at this point cause um. - TheresaFrog421 (talk) 08:28, 8 September 2026 (UTC)
I'm not trolling. Are they gonna fix Timeless or what? I'm just being serious. Belankt294842 (talk) 14:49, 8 September 2026 (UTC)
I guess they don't want that many skins, so they replaced Timeless with Minerva Neue. - TheresaFrog421 (talk) 15:07, 8 September 2026 (UTC)
Yes, we have enough trouble making sure the layout looks good across the current roster, I don't think we have enough bandwidth for another one. :( -- 0x99 (talk) 04:22, 9 September 2026 (UTC)
Retrieved from "https://wiki.puella-magi.net/w/index.php?title=Puella_Magi_Wiki_talk:Wiki_Styling_Cleanup_2026&oldid=282988"