B2O-4K - Theme Bug Tracker

Kenadian

Staff member
Site Admin
Middle image- try opening up in photoshop- size is 1080 x 2220. Why wouldn't it be possible? Phones nowadays have good or better res than most monitors (save for high end ones).
I can't speak to Mobile resolution because I don't have a Mobile device. All I can do is compress the Forum on my Desktop to mimic the behavior you're seeing.

Putting it in Photoshop doesn't help whatsoever, Photoshop is not rendering an image elastic as your device is. Photoshop only serves a static image where the site is trying to contort to a plethora of differing resolutions.

It's not as easy as you think.

Currently it's not possible for this Theme to serve all as I'm serving much higher resolution scaling than most. You don't see a lot of sites serving 4K right now as it's a minority that requires it.

In order to properly serve 4K I need to fill the better part of a 1920px space which isn't easy to downscale.

I'm not saying this is impossible but I'm still not sure how to go about it? I may have to pull the Sidebar and/or "Post", "Threads" from Templates to give the Theme more room to flex.

I can see in your 1 screenshot it's clearly the work of the Sidebar which is unfortunate because I need this Sidebar width and will not be adjusting it further. Assuming this is the case the Sidebar will be removed for Mobile Users everywhere except the Main Index as is XenForo default.
 

Daunt

MLG Pro
I'm just letting you know lol. And I told you to bring it into Photoshop merely to confirm the resolution of the screenshot. It makes no sense that the desktop version of the site displays that way. So I shared it.

The mobile version of the site works very well, as I said, minus the oddly wrapping headers.

I do know enough about html and css to understand how responsive design works and how it is handled between devices.

I think the screenshot you're referencing, with the full side bar, is the desktop site which is why it's so odd.
 

Kenadian

Staff member
Site Admin
I understand you're familiar with html and css, I'm not trying to challenge you in that regard. All I ask you please not make the mistake of thinking a few lines of css or xencode are going to help me here.

If it was that simple I would have solved the problem already.

Xen is a bit more convoluted in it's approach to presenting themes. It's the biggest reason adjusting to a dark theme takes so long because Xen doesn't provide enough alternatives when it comes to core styling.

Oftentimes one styling element controls many differing elements used sitewide. As an example, this is the main reason Alerts look the way they do. Xen combined a background element with a text element and somehow magically expects the site to differentiate.

Don't even get me started on the potential issues with z-index.

This is not a problem if you use a light theme as that's what Xen is designed around.

This is the reason I explained to you why the Blog would have to wait because the Forum is where the styling challenges lie.

On the Blog I have a Theme Engine allowing me full control over every element I display. I can choose to lock everything, make them all fluid or create a combination of the two.

In Xen I only have 3 Resolution Scaling Options, narrow, medium and wide, each assigned static (yes static) pixel width values. I make my best guess initially on what these resolutions will be and then tweak based off feedback such as yours.

The challenge then becomes that even if I manage to make the site scale and nest properly for your device it does not mean it won't render screwy on a host of other possible resolutions.

In this regard, simple tweaking isn't enough when certain elements are fluid while other remained locked and there's simply nothing I can do about that.

...but let's assume for a moment I can because it may be possible if I start editing core Xen code at the Template Level.

Well, this process is extremely time consuming and unfortunately rarely carries over between Forum Software versions when templates are part of the upgrade process.

As an example, all the work put into the previous Themes is completely useless in this version of Xen given numerous changes to the template system.

The only thing I can do is remove some static elements in an attempt to force full fluidity. This too carries with it challenges as some elements are easy to remove with some display: none; code in an extra.css while others require direct manipulation of said stylesheet (at best) and/or commenting or altering code via direct template edits.

Not ideal.

Harking back to my previous work, those templates looked like spaghetti.

Your one picture clearly shows the Notices doing that weird vertical scaling which I didn't even know was possible. This is an element that is coded fluid by design so how I fix that remains a mystery?

The picture of the Discussion with Sidebar appears to be the work of a fluid discussion area (to a certain point) and a locked pixel Sidebar. This likely points to the only solution being display the forum as XenForo intended by removing the Sidebar everywhere except Forum Index for mobile.

The other picture I have no idea what I'm actually looking at?
 

Skid_Marc_

Staff member
Admin
Not to pile on, but this is what the website looks like for me on my Note 8. Also, I tried accessing the website from work, on a 4:3 1280x1024 monitor, and the sight was full of wasted space. Not quite to the extent of my phone, but maybe 40-45% Forum Topics, 40% Side bar, and the rest of it, side-to-side, was just background. It obviously scales a lot better at 16:9, 21:9, or even the wonky 13.5:9 that I'm running on my side monitors.

Just a lot of

ve
r
ti
cl
e
t
ex
t

everywhere.. :(


Good luck!
 

Daunt

MLG Pro
That's exactly what I'm looking on as well Marc same phone. And I never said anything about easy or simple. I'm just pointing out bugs as I thought you wanted. No demands here, just making you aware
 

Kenadian

Staff member
Site Admin
Not to pile on, but this is what the website looks like for me on my Note 8. Also, I tried accessing the website from work, on a 4:3 1280x1024 monitor, and the sight was full of wasted space. Not quite to the extent of my phone, but maybe 40-45% Forum Topics, 40% Side bar, and the rest of it, side-to-side, was just background. It obviously scales a lot better at 16:9, 21:9, or even the wonky 13.5:9 that I'm running on my side monitors.

Just a lot of

ve
r
ti
cl
e
t
ex
t

everywhere.. :(


Good luck!
If you dismiss the notice does it go away?
 

Kenadian

Staff member
Site Admin
OK so I made both resolution and padding changes to the theme that I think may have helped.

Can you please check to see if it's better?
 

Kenadian

Staff member
Site Admin
Nah thank you @Skid_Marc_ and @Daunt for putting up with my frustration.

I've never attempted a fluid style that supports this range of movement so it's a real struggle to wrap my head around a lot of these elements.

I think what helped though was modifying some Xen core code because even though I could mostly mimic default styling fluidity there were still elements that didn't work properly due to my style choice on the Sidebar.
 

Kenadian

Staff member
Site Admin
Background Image adjusted to allow for better focal placement.

When stretched to 4K the focal point places just below the Navbar.

This is the best compromise as scaling does not allow for image to remain static if image is to scale proportionately.
 

Twitch

Latest posts

iRacing Special Events 2023

Watkins Glen 6hr: GTP, LMP2, GT3 (IMSA)
  ~ June 16 - 18
24 Hours of Spa: GT3
  ~ July 21 - 23
Peachtree Three (Charity Event): C8R GTE, GT4 Class, GR86
  ~ TBD
Bathurst 1000: Supercars
  ~ September 15 - 17

Forum statistics

Threads
3,787
Messages
47,602
Members
603
Latest member
samz67
Top Bottom