#Problem with making templates

1087 messages · Page 2 of 2 (latest)

sharp iron
#

I'm going to go see what MH did for overrides for theirs.

#

Oh, I see, they used both. One for the honecomb icon (mw-logo), and one for the "Meta" text beside it (also an image)>

wooden plover
#

wait, i think this is wrong logo

#

idk where it comes from

#

the other one is the right one

sharp iron
#

I'm doing that on my own wiki so I can help you.

wooden plover
#

ohhhhhhh

sharp iron
#

Do you have a horizontal version of your logo?

#

Or just that round-ish one?

wooden plover
sharp iron
#

Right on, can you post it so I can get an idea?

#

I mean, you could use the round one, but it stretches the header height to do that.

wooden plover
sharp iron
#

Nice!

#

That'll look great.

#

K, so try clearing out any other logo lines, and put the static URL in for that in the "Wordmark ($wgWordmark)" line and save.

#

Don't worry if it gets distorted, that gets fixed in a step or two

#

Am just going to go test it on my own right now, to grab the style name.

#

Someone might be able to find it faster than me, as my brain is almost done today lol

#

Shoot, bbs, my heart rate monitor is going crazy

wooden plover
#

take your rest KokomiPray

sharp iron
#

I just had to take a beta blocker to get the rate down, should be all good shortly.

#

Basically, the initial width/height both having a measure was really wacky, that's why it distorts everyone's logos.

#

They can have a width with auto height, or a height with auto width, but they can't set both without distorting an image.

#

Generally width is better, and then let height adjust in proportion automatically.

#

Also, you'll need to test whatever width you set, by dragging the edge of the browser to make the window narrower, and make sure it doesn't cause problems.

#

If it does, then a bit more adjustment needed later.

#

Oh, it's the skin's own default styles that cause problems lol, that's a new one.

#

They have a min-width: 13.875em; set on .mw-logo, which makes it broken out of the box. Interesting lol

#

As soon as I unset that, it resizes my logo perfectly.

#

Scratched that, and I deleted it, as it was just MH being slow.

wooden plover
#

wait, what happened? i think it works

#

i managed to copy that before you deleted

sharp iron
#

Yeah, too hard to test right now, it's taking 4-5 minutes for the settings to propogate.

#

Yeah, sorry, I thought I found a better option, that prevented issues at small widths... but darn things are slow to catch up right now.

#

I'm still seeing the old CSS like 5 mins later.

wooden plover
#

yea, i got that a lot xD

#

it still makes me confuse about the css works or not

sharp iron
#

It didn't used to be that bad.. that's frustrating.

#

I ended up with this instead (though keeping in mind, I'm using a roundish logo):

img.mw-logo-wordmark {
    width: 100px!important;
    height: auto!important;
}

a.mw-logo {
    min-width: unset;
}
#

It was set on the wordmark, so I controlled the wordmark in my Vector.css

#

As it was too slow to tell if I needed both for each of the pairs listed, so I listed both for each (because I'm out of time today).

#

I'm sure Chaotic or Gummiel may be able to better determine which is necessary.

#

For now, I have to go rest.

#

It does actually work with roundish logos too, once the second rule set issue was fixed.

#

I would try the other logo you had too

#

The echo overlap thing might be better with that at a bit smaller width, but won't know until you try.

#

It's important to narrow the screen to see what happens too.

#

The .mw-logo fixes let the logo resize dynamically for me.

wooden plover
#

arranging information results in rows isn't working for dpl right? is there an alternative way to do something like this? like i wanna auto-generate a list of versions of a character and display in a row with template

image.png
sharp iron
#

Yep, columns and rows are currently broken and marked broken on the new site, in the version of DPL3 that CA/UO inherited (I'm not sure they ever worked tbh, or if the code the previous maintainers used became outdated).

#

Much of the stuff you're wanting lately requires CSS, so it seems now might be the time to start learning it, to be able to do it.

#

I'm not sure about using gridrow if wanting contents to reflow.

#

I'm used to using floats, but I don't know enough about grid-row

#

Maybe that's my missing puzzle piece too (didn’t exist back when I was learning lol)

#

Aaaaaah, yeah, it is the missing puzzle piece! 😆 I guess I'll be levelling up my somewhat dusty CSS skills.

#

Also, my skin has a grid system built in, but it's likely outdated also.

sharp iron
#

You may already know some of this, of course, so please disregard the stuff you already know! ;- )

wild karma
#

w3schools is an amazing site for programming in general

sharp iron
#

Yeah, MDN is fantastic too and more in-depth, just sometimes I'm after the short/quick thing.

sharp iron
wooden plover
#

or i'm mistaking something?

sharp iron
#

Yes, css link is just for css.

#

DPL3 can also have CSS applied to it

#

CSS can be applied in DPL3 statements, or it can also be applied in an HTML element wrapped around it. Doing it either way requires knowing some CSS.

sharp iron
#

There are different ways to do what you want probably, using CSS.

#

To do a site like you're doing, which seems pretty visual, it is really in your best interest to learn the CSS; especially as volunteer's time is limited.

#

Some use tables to do everything, to avoid CSS, though that's not the easiest way to go.

wooden plover
#

using table was the first thing i thought but it still requires to input informations manually. and idk why #if messes up the alignment in each row

sharp iron
#

People learning wikis in general often start that way, even otherwise advanced users.

#

Rest assured, If I'd meant you, I'd have said "you". I've just seen many people build stuff in tables, then later realize it isn't mobile-friendly, and that they've spent a lot of time on layouts that won't work for mobile. Or, they discover that over 70% of their traffic is mobile, and maybe they have to change it now. I've done that myself, learned from it, and changed my approach to prevent wasting my time on it. I thought that might be helpful to know.

#

Suggestions are just that, they can (and should) absolutely be ignored if they don't work for you (or anyone).

#

At any rate, I've been dragging my feet at finishing my ongoing proofing of Meta pages (and my long to-do list for own wikis), I need to get back to that. I'm sure other volunteers can provide more and better suggestions for you. 🙂

wild karma
#

I don't think that calling out line was entirely serious tbh

sharp iron
#

It's really hard to tell online, so I always err on the side of caution.

#

At any rate, in case it was meant, I apologize for any misunderstanding! ;- )

#

As an aspie, I have a hard time determining intent sometimes, particularly in text where expressions and body language can't be observed. People do often mistake my directness for something other than it is intended--admittedly, that does hit a button sometimes.

#

My suggestions are also heading in a direction that's too complex for what's needed anyway, I think. I tend to over-think, and over-plan for later maintenance 😆

sharp iron
#

Interestingly, the grid reference was timely. z-index was indeed working (supposedly it works on static grid and flex items). Seems Tabber employs CSS flex and grid to position its panels side-by-side panels, and then uses overflow:hidden on .tabber.tabber--live, section.tabber__section, and article#Normal-6 (the latter was the first content section) to intentionally cut off panels outside its content area, hiding the next panel. Unsetting overflow on each of these elements, displayed the second panel off to the right (can see a sliver/start of panel 2, beside the inspector). So, looks like tabber is unfortunately designed to cut off internal contents. : (

image.png