Simple Machines Site Upgrade

[Antechinus]

Latest Firefox, on 2560 x 1440. Screeny attached.
No, I'm not on Discord or IRC.

You cannot view this attachment.

ETA: Y'know if you are making changes there anyway, there are superfluous classes in those boxes that are having to be overriden to get this look ~ .floatright and .windowbg could be ditched. Then the CSS could be simplified

[SleePy]

uggh.. I hate browsers some days.. I can't reproduce on Firefox on Windows or Mac at that resolution (simulated with dev tools in responsive mode).

[Antechinus]

Ok hang on. I'll clear my cache and see what happens.

ETA: Yup. Same result. Full width, does not wrap floated content. I'm on W10, by the way.

[SleePy]

Can you also try a private browsing with no extensions?  Make sure no resources are being blocked.

For fun, I've also checked Firefox on Ubuntu and I can't reproduce it.

Edit,   Even tried my phone.  I'm out of devices...

[Antechinus]

Hey just checked with Chrome, which does not have any code for the new site and did not have full cache. It's still showing the original styling, with two separate boxes in different colours, and no styling on the parent div. Beats me what is going on there.

ETA: Private window in Firefox, with no extensions, shows the same as Chrome.

[Antechinus]

Screeny...

You cannot view this attachment.

[SleePy]

So the private browsing is showing correct then?  It should be 2 boxes with slightly different colors.  Language on left because it stacked when you drop to a smaller browser size under the language selection.

Edit,

See your screeny.  Thats how it should look.  I suspect some extension is fudging with it.  You had one for CSS I thought for dark mode?  Is it causing it?

[Antechinus]

Lol. I know what is going on. You haven't changed the original presentation, with the separate boxes, so were are talking about two different things.

I'm talking about this: https://www.simplemachines.org/community/index.php?msg=4094322

ETA: IOW, what is there now in your code is "correct" according to you. But everyone who has commented on the alternative says it is much cleaner. Which it is. But if you want your version, go for it. I'll just run an override.

[Antechinus]

Incidentally, the main menu looks a lot cleaner without the cheesy icons.

Code Select Expand

/* ---------------------------- */
/* Kill godforsaken menu icons. */
#main_menu .main_icons {
    display: none;
}

[SleePy]

Ahh that does explain it.  But it does poorly on 920 width resolutions.

[Antechinus]

That would be easy to fix. I can frig around with it later if you like.

[SleePy]

Yea it would have too.  Right now at a certain point those are hidden (I think 860) but anything under 1000 I think starts to stack it since it doesn't fit.

[Antechinus]

Simplified layouts for the Customize site. I find these easier to scan, and coding is simpler too.

You cannot view this attachment.

You cannot view this attachment.

You cannot view this attachment.

[shawnb61]

TBH, I strongly prefer the existing design...

[Antechinus]

Lol. I strongly don't. I'll just run whatever I like anyway,

[Antechinus]

Yea it would have too.  Right now at a certain point those are hidden (I think 860) but anything under 1000 I think starts to stack it since it doesn't fit.

It works well on any res if .site_header_box_container is absolute positioned and I reduce the padding a bit. Even looks better on widescreen with the reduced padding.

Code Select Expand

/* ------------------------------- */
/* Style godforsaken header boxes. */
#header {
    position: relative;
}
#header .site_header_box_container {
    position: absolute;
    right: 0;
    float: right;
    padding: 0 9px 7px;
    background: #fff;
    border: 1px solid #bbb;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 -2px 0 #fff, 0 2px 3px rgba(0, 0, 0, 0.16);
}
#header .site_header_box {
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
#header .site_header_box:first-child {
    float: left;
}
And half of that code is only necessary to override the existing .windowbg and .floatright classes in the markup. If the markup was changed to this:

Code Select Expand

<div class="site_header_box_container">
<div class="site_header_box">
<form action="https://www.simplemachines.org/search.php" method="post"></form>
</div>
<div class="site_header_box">
<form id="languages_form" method="get" class="floatright"></form>
</div>
</div>
Then CSS could be reduced to this:

Code Select Expand

/* ------------------------------- */
/* Style godforsaken header boxes. */
#header {
    position: relative;
}
#header .site_header_box_container {
    position: absolute;
    right: 0;
    float: right;
    padding: 0 9px 7px;
    background: #fff;
    border: 1px solid #bbb;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 -2px 0 #fff, 0 2px 3px rgba(0, 0, 0, 0.16);
}
#header .site_header_box {
    float: left;
}

[SleePy]

Hows that.  Still different from what you had, but holds better over smaller screen resolutions

[Antechinus]

That's basically what I have. Looks fine now.

ETA: Just changed reply after doing another refresh.

[SleePy]

You may have your ad blocker active.  I had to move a few things around to keep the ads looking good.

[Antechinus]

Yep, ad blocker is active. TBH I haven't even looked into how to turning it off in Firefox. Its just on by default, so I left it alone. I don't even know where the switch is. You'll probably find most users are the same these days.